Overview

This application is a tutorial project based on two udemy courses, VUE basics (https://www.udemy.com/vue-base/) and Vue app for mobile ( https://www.udemy.com/vuejs-app/ ) by Chinese instructor Mr. Zhong, Yuanzhi. During the course, the instructor was coding line by line to bring up the project and I am very very impressed by his knowledge and skill on frontend.

The project is a replica of Meituan Takeaway, a famous food delivery platform in China, where merchants and restaurants can easily provide takeaway service for customers. In the project, we are using a McDonalds in Shen Zhen, Guang Zhou Province of China as example to show how it works. With the app the customer is able to check the menu in several categories as well as ratings and information of the restaurant, then select and place order (not implemented).

The project is a Single Page Application (SPA) specifically designed for mobile user. It is a web application rather than a native app, but with wrapper tool, like HBuilder, this application can be packed as app, sometime called hybrid app, and deployed into iOS and Android system, cause we can see that the application can simulate very well the response of an app on a mobile. SPA is not necessary better over traditional multi-page application (MPA) and it is basically a matter of what you want and what it takes, but we do see more and more SPA over time.

This is my first SPA using Vue.js (https://vuejs.org/), which is a light weighted MVVM framework. For me Vue is compatible to my previous javascript knowledge base and has very clean concepts and low learning curve. The other two frameworks which might be more dominant are Angular and React and there are a lot of comparation between them. What I can say is I start looking into React a little early than Vue, but the progress on React is much slower than the progress of Vue, which makes me believe that Vue is definitely the easiest one in big three to pick up.

Tech stack

All the SPA frameworks are javascript based and they work well with backend javascript (Node.js). The backend of this application is also Node managed by npm. Other Node modules in the project besides core Vue are

webpack:

Vue-cli has an option to use webpack as template to create project and build the Vue into frontend code (html, javascript and css). Beside webpack dev server is used as the http web/restful server which is able to monitor the change of source file and refresh page automatically.

Vue-router:

module to control the links and reference inside the SPA. Traditional links points to the server which response the link with a new page, but SPA has to handle the link inside the application. So if you see the url like "mail.google.com/mail/u/0/#inbox", it basically indicates a SPA using router technology.

axios:

module to exchange data (json) with the server using Restful API so that they can be binded into Vue object to be shown in browser. better scroll: module to intercept the drag operation on the browser to simulate the response on the mobile device.

mongodb:

module to allow webserver to access MongoDB. The original course just uses json files as the data source, I enhance this by importing the json data into mongodb and using mongodb as the primary data source.

Deployment and developemnt environment:

• EC2 Linux on AWS.
• nvm(node version manager) to install Node and npm,
• MongoDB community server.
• Development is using the same stack with VS Code on windows.
• the application is put in the blog as a iframe.
• Tested on Chrome and Firefox.

Summary

It is a great chance to have a taste of SPA stacks with Vue approach.