Bonne journée, mes amis!
Je n'aime vraiment pas m'engager dans l'auto-promotion, mais dans une situation où l'équipe est composée d'une seule personne, que vous le vouliez ou non, vous devez développer et promouvoir le produit vous-même.
Quiconque cherche par où commencer à développer une application Web connaît bien le HTML5 Boilerplate ( site officiel , référentiel). Selon les développeurs, il s'agit du "modèle frontal le plus populaire du Web". Vous ne pouvez pas discuter avec les plus populaires, mais vous pouvez le faire avec modernité (respect des réalités modernes du développement web). Et ce n'est pas surprenant: le projet a été créé il y a environ 6 ans. Beaucoup de choses ont changé au cours des 6 dernières années. Dans le même temps, pour autant que je sache, aucun changement fondamental n'a été apporté au projet (var est utilisé pour déclarer des variables, il y a la possibilité d'ajouter des plugins jQuery, etc.), sauf peut-être site.webmanifest, qui est inutile sans un service worker (et il vaut mieux utiliser .json).
Je propose une sorte d'alternative - un modèle de démarrage HTML moderne ( site officiel , référentiel ).
Le projet comprend les éléments suivants:
- index.html avec toutes les balises meta et link nécessaires (général, microsoft, facebook, twitter, apple (ios), android, données structurées: schema.org et json-ld)
- exemples d'utilisation des balises HTML5 et des propriétés CSS3
- exemples d'utilisation des modules CSS et JavaScript
- travailleur de service hors ligne
- manifeste.json complet
- serveur express.js avec tous les en-têtes de sécurité possibles (utile lors du déploiement d'une application sur heroku ou un service similaire prenant en charge node.js)
- Fichier netlify.toml avec des en-têtes similaires et connexion préliminaire des ressources utilisées par la page (utile lors du déploiement d'une application sur netlify)
- robots.txt simples
- sitemap.xml simple
- Browserconfig.xml minimal
- max .gitignore
- page d'erreur de la création 404
- exemple de construction d'un projet à l'aide de webpack
- à titre expérimental - un exemple de projet AMP (une nouvelle technologie de Google pour les sites mobiles d'abord)
Index.html et server.js (netlify.toml) sont bien sûr la valeur principale. Ces fichiers ont des liens vers la documentation officielle (source de vérité). Le service worker et le manifeste rendent l'application progressive. Cela signifie que l'application peut être installée sur un téléphone et un ordinateur et se comporte comme les natives. En mettant en cache les ressources utilisées par l'application, celle-ci fonctionne hors ligne (en l'absence de connexion réseau).
Pour améliorer l'expérience de développement, les outils suivants ont également été développés:
Voici les résultats des tests (le manque à gagner est dû à l'utilisation de ressources tierces, telles que Google Analytics et les métriques Yandex):
Lighthouse
WebPageTest
SecurityHeaders
AMP
Veuillez également faire attention à mon application principale, que je développe au mieux de mes capacités - Beaucoup de JavaScript (peut-être que le nom n'est pas assez réussi, mais il reflète pleinement l'essence de l'application). À propos, le modèle spécifié a été utilisé lors de son développement.
Tout formulaire de commentaires, à la fois ici et sur GitHub, serait le bienvenu.
Merci pour votre attention et un bon début de semaine de travail.