in Laravel

Todo Application

Recently I've wrote about how you can best get started with Laravel and also how to get started with VueJS. Since building a Todo application is one of the best ways to learn what a language is capable of so let's build a Todo application which will allow us to show what both Laravel and VueJS can do. We're going to learn about modern development techniques and use Laravel as our API and VueJS as our frontend. In a normal Laravel application you will use blade as the frontend of your application, but in Laravel 5.3 it started being shipped with VueJS making it very easy to get started with Vue. Why are we developing with this technique?

Laravel API

laravel-logo-big Building an API and consuming this with a JavaScript frontend is the modern development technique of building your applications. This is called API first approach, it's important to build your API first as it makes your application much more extensible. In the multi-platform world we live in building your API first can serve multiple advantages. - You could build your application then decide it will be better as an app

  • If you finish your website you can then build an Android or iOS app using the same API and therefore the same functionality.
  • You can allow third party apps to easily integrate with your app
  • Gives you one code base over multiple devices
  • Allows you to reuse functionality across multiple site.
  • Whitelist applications can be easily built using the same functionality

    Your API now holds the rules of your application it is central to everything, each new thing that is built will come off from the API. If you're building the form on the web you need to make sure your form requirement rules match that of your API. This allows us to copy the same set of rules if we then need to build a native mobile app, everything can just use the same API. API first development might be a different way of thinking than the traditional MVC approach and might seem like it's a bit more extra work but once setup the development is actually quicker and will save you a lot of time in the long run. Another benefit of having an API separate to the frontend is that it can sit on a completely different server. No longer do you need to have the same server for your backend and frontend you can save on resources have a more powerful backend server and allow the frontend server to simply serve your HTML and assets. Having a backend on a different server also means you can have an extra layer of security, it can sit behind a DMZ, you can block access via IP addresses etc. Adding OAuth or JWT Auth to your API adds an additional layer of security stopping against any cross site scripting. Testing now becomes much easier, along with unit testing your classes you can make automated API requests to your end points and check the result is what your documentation says it should be. The API technique that you'll need to learn about is RESTful Apis, if you don't know what RESTful architectural is then you first need to understand this concept before moving into the API-first approach. There is a really good stackoverflow answer explaining what a RESTful web service is. What Is RESTful Programming? Why are we using Laravel? Laravel is the most popular PHP framework, it's very easy to use, very flexible and packed full of features, there's a huge community so any problems there's always someone who can help. Laravel architecture is also already setup perfect to use in the API first approach because you can define the routes in your application via the method request types.

Route::get($uri, $callback); Route::post($uri, $callback); Route::put($uri, $callback); Route::patch($uri, $callback); Route::delete($uri, $callback); Route::options($uri, $callback);

 There is a Laravel based framework which is focused on building APIs called [Lumen]( which is more lightweight than Laravel for the best possible performance from your API. ## VueJS Frontend

 ![vue-logo]( For the frontend we're going to use VueJS, there are a few other JavaScript frontend frameworks, if you want to know my reasons for choosing VueJS I've wrote a previous post on why VueJS. [Moving To Javascript Development]( You can choose whatever frontend framework you like such as ember.js, React, Angular, whatever you feel like using. The important thing is to understand the API first approach and using a Javascript framework instead of something like a PHP template engine. In normal Laravel development you will use blade PHP template engine for the front-end of your site so why should we use a Javascript framework instead. The first reason is that it allows us to easily consume our API. Using a JavaScript framework allows us to optimise the frontend by using techniques such as webpack to prebuild our pages assets. Javascript frameworks allow our apps to be more reactive than simply displaying content, using a PHP template engine you will need to refresh your page and re-render the entire page again to see changes. Javascript pages can be react and only re-render parts of the pages that need updating. Have you ever navigated Facebook and see comment appearing on post right before your eyes? This is because JavaScript is able to just re-render this tiny part of the page and be reactive to new comments. This is not possible using PHP template engines. You can improve the performance of your on page interactivity, lets use the comment example again for your a blog post this time. Using just PHP you'll need to render your comment list, render your form, on submit of the form then refresh the page to re-render the contents of the page. Using JavaScript you can instantly update this comment list without having to refresh or re-render the page. Speed! Javascript client side rendering is very fast, almost instant, much quicker than PHP rendering. This is because browsers have become so powerful at rendering Javascript and DOM changes. With Javascript you're dependent on the browser speed of rendering compiled Javascript with PHP rendering you're dependent on a Server getting a request, fetching the data, creating the HTML and rendering this to the user. Javascript data fetching can be performed asynchronously therefore fetching data from a slow server has no effect on the loading time of your page. ## Todo Application

 I believe a Todo application is a simple yet perfect application to demo some of the advantages of using the API first approach and it will also allow us to demo how this type of development is done in both Laravel and VueJS. Some of the features we're going to use with both Laravel and VueJS are: - Virtualisation setup using homestead
- Setup Dingo API with Laravel for easier API creation
- Authenticating an API request with JWT auth (JSON Web Token Authentication)
- Creating database with Laravel
- Creating API endpoints
- Setting up VueJS
- Register a new user
- Login and authenticate your app
- Creating the Vue pages
- Vue Navigation
- Creating the Todo application

 To follow the series just subscribe to the list below. 

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email