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?
- 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.
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.
The first reason is that it allows us to easily consume our API.
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.
Subscribe To Newsletter
Get weekly updates to your email