How to start developing an application





Good day, friends!



I really do not like to engage in self-promotion, but in a situation where the team consists of one person, like it or not, you have to develop and promote the product yourself.



Anyone looking for where to start developing a web application is well aware of the HTML5 Boilerplate ( official site , repository). According to the developers, it is "The web's most popular front-end template". You can't argue with the most popular, but you can do it with modernity (compliance with the modern realities of web development). And this is not surprising: the project was created about 6 years ago. Much has changed over the past 6 years. At the same time, as far as I can tell, no fundamental changes were made to the project (var is used to declare variables, there is the possibility of adding jQuery plugins, etc.), except, perhaps, site.webmanifest, which is useless without a service worker (and it's better to use .json).



I propose a kind of alternative - a modern HTML starter template ( official site , repository ).



The project includes the following:



  • index.html with all the necessary meta- and link tags (general, microsoft, facebook, twitter, apple (ios), android, structured data: schema.org and json-ld)
  • examples of using HTML5 tags and CSS3 properties
  • examples of using CSS and JavaScript modules
  • offline-first service worker
  • full manifest.json
  • express.js server with all possible security headers (useful when deploying an application on heroku or a similar service that supports node.js)
  • netlify.toml file with similar headers and preliminary connection of the resources used by the page (useful when deploying an application to netlify)
  • simple robots.txt
  • simple sitemap.xml
  • minimal browserconfig.xml
  • max .gitignore
  • creative 404 error page
  • example of building a project using webpack
  • as an experiment - an example of an AMP project (a new technology from Google for mobile-first sites)


Index.html and server.js (netlify.toml) are of course the main value. These files have links to the official documentation (source of truth). The service worker and manifest make the application progressive. This means that the application can be installed on a phone and a computer and behaves like the native ones. By caching the resources used by the application, it works offline (in the absence of a network connection).



To improve the development experience, the following tools have been additionally developed:





Here are the test results (the shortfall is due to the use of third-party resources, such as google analytics and Yandex metrics):



Lighthouse







WebPageTest







SecurityHeaders







AMP







Also, please pay attention to my main application, which I develop to the best of my ability - A lot of JavaScript (perhaps the name is not quite successful, but it fully reflects the essence of the application). By the way, the specified template was used during its development.



Any feedback form, both here and on GitHub, would be welcome.



Thank you for your attention and a good start to the working week.



All Articles