What tools to develop a PWA?


 
In order to discover the best ways to develop a Progressive Web App, let's already remember what this means:
A PWA combines the functionalities of a site, an internet and a native application.
Thanks to improved web standards, browsers now support the Service Worker and the Web App Manifest. It is therefore possible to browse a site without internet, whether on mobile or computer, like an application. The ability to receive notifications via the browser and to add the site as an application on the home screen now makes websites even closer to the behavior of native applications.
A major drawback for the sites was their longer navigation by downloading each page on demand compared to the immediate display of native applications. Now that all files can be backed up and browsing without internet possible, this difference has clearly been erased by the real feeling of speed.
Small flat : if you want to create an application whose performance is increased by graphics and calculations (video game, ..), it remains to consider native development which will always be faster on the client device.
In short, a PWA is a site developed using standard web technologies (HTML, CSS and Javascript) but which behaves in every way like a native application.
 

#Development tools:

If you choose to develop or transition your site to a PWA, depending on the project, here are some of the tools that are currently the most popular:
React :
https://fr.reactjs.org/
A javascript framework released and maintained by Facebook.
This tool is known to be lighter and more flexible than Angular. You can add features as you go, and be relatively free in organizing the code, but development constraints are often favored in larger teams.
An advantage is that learning this framework also allows you to know ReactNative (from Facebook) which allows it to create native applications.
Angular :
https://angular.io/
The framework designed and maintained by Google. Framework says "heavy" in the sense that it constrains the development enough and comes with a suite of javascript features from the start.
Pros and cons : Interest for growing teams and/or long-term projects because the code is required to be well organized. Embedding Typescript also goes in this direction, because it will take longer in the short term to write in Typescript than in javascript, but the code will be more readable and errors will be easier to detect.
Vue.js :
https://vuejs.org/
Open-source framework made by a former Google developer. This framework is newer and has skyrocketed in recent years, due to its so-called simplicity and good performance. In the same way as React, this tool comes in a light way and allows you to add javascript libraries as you go along in your project.
Ionic :
https://ionicframework.com/docs/publishing/progressive-web-app
A framework for developing hybrid apps and PWAs. Through a Webview, Ionic makes it possible to obtain an application on the store with web technologies. It is also possible to develop PWAs with this platform which also supports React and Angular.
Polymer :
https://www.polymer-project.Org
Developed by Google, Polymer is a javascript library for creating web applications. Closer to web standards but less popular; it is possible to follow the possible future of the web via this technology which pushes the existing language rather than conforming to a framework.
Lighthouse :
https://developers.google.com/web/tools/lighthouse
Tool developed by Google to measure the different PWA sliders of a website. This can be very useful during the development of PWA functionalities (offline browsing, performance testing, etc.).
 
Good development!
 
Maxime, Full Stack@UX-Republic Developer