未加星标

Todo Application

字体大小 | |
[开发(php) 所属分类 开发(php) | 发布者 店小二03 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

Recently I've wrote about how you can best getstarted with Laravel and also how to getstarted 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
Todo Application

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 popularphp 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
Todo Application

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.

Back to top

本文开发(php)相关术语:php代码审计工具 php开发工程师 移动开发者大会 移动互联网开发 web开发工程师 软件开发流程 软件开发工程师

主题: LaravelJavaPHPJavaScriptRESTHTMLReactAndroidFacebookiOS
分页:12
转载请注明
本文标题:Todo Application
本站链接:http://www.codesec.net/view/524024.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 开发(php) | 评论(0) | 阅读(16)