Gerald Michelant

full stack developper

Mobile View

Gege Raptor

Vue.js and Progressive Web Apps

Vue.js

I just wanted to share my experience and why I finally decided to focus on Vue.js instead of Angular or React. The intent is not to judge frameworks and products but more to share what are the aspects I considered in my decision making process.

I started initially with Node.js with a clear willingness to leverage the ability to use a unique development langage for both backend and frontend. Javascript is fast to learn and powerfull enough for what most of applications I am planning to develop need to achieve but I quickly had to look for frameworks to help buidling nice an powerfull frontEnds.

I tried React and Angular which were bringing a lot of capabilities to build SPA (Single Page Applications) but they are quite opinionated and learning curve is quite steep with those tools. I heard about Vue.js and immediatly knew this progressive framework would help me to build nice User Interfaces with great flexibility

Vue.js integrates the same interpolation (the famous double moustaches '{{ ... }}') that you can find in Angular which make your life so much easier when it comes to bind data to the view layer. I quickly get used to Vuex which like Redux help you to build a centralised store to manage state across all your components of your application

PWA - Progressive Web Apps

With proliferation of mobility, an application can not succeed if it does not run well on Mobile. I did learned on Ionic framework (renders your app through the browser of the phone and add some 'native' capabilities) and also Nativescript, which enables you to build a native mobile app from an js framework like Angular, vue.js... But the issue with those frameworks is that you need to maintain two versions of your app

Purists will tell you that a good mobile app needs to be Native, I do not disagree as browser based apps are missing capabilities that are key to user experience, but since a few years, Goggle is pushing hard on what is called Progressive Web Apps (PWA). PWA brings the capability to build a single application that behave appropriately on any device and make you access to capabilities previously reserved to native apps

Here are a few benefits and capabilities offered by PWA:

Travel Checklist App

I decided to build my first application based on those technologies leveraging the PWA template that Vue.js framework provides. This app currently runs on Google Firebase

TravelCheck app web
Travel Checklist application
The application first loads data and copies its content in a local database through a library called LocalForage. This library is used to save data locally on IndexedDB (among others available) to provide offline capability on the applciation data. From there the application runs locally and needs network only to upload new lists or upgrade the applications. So you can use it on the plane, in the metro.. without having the frustration of being interupted by a network connection lost ;-) A future version may provide data synchronisation to a server for people who would like to access their list through different devices.
lessons learned
  • Vue.js really makes your life easy when it comes to buld reusable componants and bind data to the UI
  • To support multilangage (FR and En), I inially followed recommendations to use routing capabilities to manage navigation between pages designed for each language but I quickly found that interpolation and logic you can bring on the presentation layer makes it very easy to avoid duplication of any page. I decided to build a switch with a logic that enables me to populate content of the appropriate language automatically.
  • My main mistake for this project was to use Bootstrap-vue. It is a great tool which facilitates a lot the building of the UI (especially the management of cards in columns). But the look and feel of bootstrap is quite old and the rendering on the mobile is definitvely not as good as if I woudl have used Material Design Lite.
TravelCheck app web

Quasar

I think it is interesting to share while we are experimenting because we notice that many of us are going through the same processes and sharing can help others to get faster to where they want to go

I mentioned in the last chapter my frustration regarding the look and feel that Bootstrap provides but then did soem researches that brought me to learn about this great framework called Quasar.

Quasar helps you to build PWAs, mobile or desktop apps on top of Vue.js. It brings from scratch a great and modern UI, and tools like Animate.css or Stylus

I then decided to build another app to get a better understanding of the framework and I really enjoyed working with this framework. I coudl leverage 100% my knowledge of vue.js and use additinal capabilities that Quasar brings to the picture to improve the UI

geoQuizz app web

Geography Quizz App

geo quizz app web

a quite simple app that leverages the rest API provided by Rest countries. In fact I used a mixed strategy as geographical information does not change that often, so i decided to downlaod the file containing information of countries and just use the API the get to more details or flags images for exemples.I could also simply have used caching strategies provided by the service worker but i wanted to try differnet approaches (You can find here a great explaination of those strategies) I also discovered a great tool to create charts: Chart.js and I also wanted to change from Google Map and discover another great API to display maps called MapBox

Restaurant review

One critical aspect I wanted to learn was to find a way to operationalise the deployement of both FrontEnd and backend to dev and production environements without having to change anything into the code. I played with environments variables to define context that allowed me to run my apps in development mode as well as in production.

FrontEnd

Focus was made on providing simple and intuitive User Interface with mobile capabilities including geolocalisation and usage of camera to take and store pictures

I did not built offline capability as I wanted to focus on dealing with asynchronous requests sent to the backend and management of authentification aspects

I also learned a lot on vuex and especially by dealing with modules and getters and setters.

Backend

It was my first deployement of a full node JS and Mongo db app in production on Google Cloud computing. I discovered how to install a full environment including tools like process manager PM2 to automate management of nodeJS process on the server

I also learned a lot on encryption and Domain Name server management. I used Let's encrypt to get the ability ot generate SSL certificate to accept secure connection from the frontend (PWA apps require not only the frontend to use HTTPS, to ensure a full secure end to end transaction both frontend and backend need to use HTTPS)

I also used Nginx as a reverse proxy