Ma nouvelle pile de technologies Web pour 2020

Rappelez-vous l'époque où les piles de technologies Web étaient simples? Quand les niveaux de ces piles pourraient-ils être désignés sous la forme d'une réduction de quatre lettres comme LAMP, LEMP ou LEPP? Lorsque tout ce qui était nécessaire pour créer et maintenir des sites a été réduit à du matériel complètement ordinaire, à des logiciels open source et à la persistance à atteindre l'objectif?

Mon premier site réussi, maintenant un ancien projet de 1999, a été créé en utilisant des technologies qui peuvent être comptées sur les doigts d'une main: HTML4, CSS2, JavaScript3 et Apache 1.1. Tout cela tournait sur un serveur avec Linux 2.0. Le site comprend 38 000 pages. Et aujourd'hui, après 20 ans, il les délivre toujours .



Depuis lors, tout a changé. Cela s'applique également aux piles de technologies Web. Maintenant, ils ne sont plus du tout les mêmes qu'avant.

L'auteur de l'article, dont nous publions aujourd'hui la traduction, souhaite expliquer comment il est passé de la pile complète à la pile 2020. Certaines technologies sont devenues inopinément préférées pendant ce voyage, et certaines ont perdu leur ancien attrait.

Pile Web 2020

2020 est le début d'une nouvelle décennie. C'est le moment de parler de la nouvelle pile de technologies Web.

À quoi ressemble la pile 2020? Je dois dire que cela est très influencé par ce que le développeur du site essaie de réaliser. Le choix des bons niveaux dépend fortement du degré d'évolutivité requis pour le projet.

Je suis particulièrement intéressé par les petits sites Web. Ceux qui se sentent bien sur un serveur virtuel. Ces sites n'ont pas besoin d'équilibreurs de charge ou de magasins de données persistantes. C'est le créneau CMS que WordPress occupe depuis longtemps. Mais au cœur de tout cela, il n'y a pas une sorte de serveur minimaliste. Au lieu de cela, nous parlons d'un système qui peut résister à un flux constant de trafic sans avoir besoin d'augmenter automatiquement sa puissance pendant les heures de pointe.

Maintenant, pour le développement et le soutien de projets dans mon domaine d'intérêt, j'utilise une pile technologique composée de 12 niveaux.

▍1. Fournisseur de cloud

La base de ma pile est un fournisseur de cloud, qui prend en compte les besoins de ceux qui sont habitués à affiner les environnements dans lesquels leurs projets Web sont exécutés. J'ai utilisé mes propres serveurs jusqu'à ce que le coût de leur support devienne trop élevé. Location d'espace dans le rack du serveur, une adresse IP dédiée, garantie de la bande passante nécessaire ... Tout cela contribue au coût mensuel d'un serveur physique. Mais le vrai ransomware est le coût de l'électricité. Les fournisseurs de cloud sont beaucoup moins chers que les 1,25 $ par jour que j'ai envoyés au fournisseur d'électricité. Le refus de telles dépenses m'a permis d'économiser des centaines de dollars par an.

▍2. Distribution Fedora Linux avec SELinux

La sécurité est ce qui nous dérange vraiment tous. SELinux peut être comparé à un puissant système de sécurité fonctionnant sous Linux. Si nous ajoutons à cela un pare-feu iptables bien configuré, il se révélera que cela permettra au propriétaire du site de dormir paisiblement la nuit. Si vous n'êtes pas sûr d'avoir besoin de tout cela, faites l'expérience suivante. Déployez un nouveau serveur chez votre fournisseur de cloud préféré et regardez comment il sera bientôt attaqué. J'ai vu comment les attaques par force brute sur de nouveaux serveurs avec des tentatives de connexion SSH ont commencé moins de 10 minutes après leur création.

▍3. Serveur Web en lecture-écriture

J'utilise le serveur Web Read Write Serve avec des certificats TLS de LetsEncrypt. J'étais fan d'Apache, il ne m'a fallu que quelques minutes pour créer et lancer de nouveaux sites Web. Mais depuis que je suis passé de PHP à JavaScript, j'ai dû oublier Apache. Le serveur Express m'a semblé un outil extrêmement simple, mais seulement jusqu'à ce que j'essaie de reproduire en lui toutes les fonctionnalités qu'Apache m'a donné. Nous parlons du mécanisme de coordination du contenu, de la mise en cache conditionnelle, de la compression des données, de la réécriture des URL pour le référencement, du CORS, des politiques de protection du contenu. En conséquence, je suis passé au serveur Read Write Serve, dans lequel toutes ces fonctionnalités sont présentes par défaut.

▍4. Runtime d'application Node.js

L'environnement Node.js est responsable de la logique d'application s'exécutant sur le serveur. On a le sentiment que dans l'écosystème NPM, il existe des packages pour toutes les occasions. Par conséquent, les tâches consistant à assembler à partir des packages disponibles ce dont j'avais besoin exactement et à lancer tout cela sur Read Write Serve se sont avérées simples et compréhensibles. Pour organiser le travail de tout ce qui est nécessaire pour un projet web moderne, vous n'avez pas besoin de faire des efforts excessifs. Cela consiste à envoyer des e-mails, à travailler avec des services de paiement, à accéder à des bases de données et à tout le reste, ce qui implique de travailler avec des API de serveur.

▍5. Base de données MariaDB

J'utilise le serveur de base de données MariaDB. Il s'agit d'un fork de MySQL renommé et maîtrisé par la communauté open source. Lorsque j'ai besoin de stocker des données JSON non structurées, j'utilise PostgreSQL. Le fait est que cela me permet d'exécuter des requêtes directement sur des propriétés JSON spécifiques. C'est un peu comme MongoDB, mais basé sur une syntaxe SQL familière.

▍6. HTTP / 2

Je m'appuie sur les capacités HTTP / 2 avec des connexions persistantes et le multiplexage de flux pour communiquer entre les parties des applications. Ce sont deux ajouts au respectable protocole HTTP / 1.1. changé mon approche de la formation des documents. Tout d'abord, le problème du blocage du début de la file d'attente a disparu. En conséquence, le besoin de listes de sprites a disparu même si j'ai des dizaines de petites images. Deuxièmement, il n'est désormais plus nécessaire d'optimiser les fichiers JavaScript et CSS en les combinant en bundles. Une fois la connexion client-serveur établie, tous ces petits fichiers sont transférés sans interruption via cette connexion.

▍ 7. Modèle HTML utilisant une phrase bleue

Blue Phrase est un système de modèles qui vous permet de décrire avec précision les structures HTML sous une forme compacte. Pour moi, les temps d'un hachage illisible de code HTML et les écarts entre les balises d'ouverture et de fermeture sont terminés. Dans les modèles, j'utilise généralement uniquement un petit nombre de variables (titre, description, mots clés, données SEO, écran de chargement, date, etc.) et les place dans un modèle dans un style déclaratif.

▍8. Écriture du code de page à l'aide de Read Write Doc

Lorsque je crée de nouvelles pages, je me concentre sur ce que j'essaie d'exprimer, pas sur le design. Pour résoudre ce problème, j'utilise Read Write Doc. Cet outil m'aide à faire des affaires sans être distrait par quoi que ce soit. Je l'utilise même lorsque ce sur quoi je travaille doit être publié sur Medium (et il existe un excellent éditeur WYSIWYG en ligne). Je me considère comme un vétéran du développement Web, donc je me suis habitué aux polices à espacement fixe, et pour m'assurer que mes mains seraient sur le clavier, et ne se précipiteraient pas entre le clavier et la souris. Dans tous les cas, si j'ai besoin de voir sur quoi je travaille avec CSS appliqué, je peux, avec une simple combinaison de touches, basculer entre les modes d'affichage et d'édition.

▍ 9. Composants Web standard

Dans le domaine du travail avec les composants Web, j'adhère aux normes du W3C. Il s'agit du DOM fantôme, des éléments utilisateur, de la balise HTML <template> , des modules ECMAScript. Cela me permet d'incorporer entièrement tout ce dont j'ai besoin dans les packages que je distribue via NPM. Pour moi, le plus grand avantage de tout cela était le niveau d'isolement fourni par le DOM fantôme. Cela nous a permis de nous débarrasser de la malédiction CSS, des espaces de noms polluants.

▍ 10. JavaScript pour les scripts clients

Pour écrire des scripts clients, j'utilise du code JavaScript orienté objet modulaire. J'applique les nouvelles fonctionnalités de la norme ECMAScript uniquement lorsque leur prise en charge apparaît dans les dernières versions du navigateur. Autrement dit, je les inclue dans mon arsenal au moment où je vois que tous les principaux navigateurs « passent au vert» sur caniuse.com . J'évite les polyfills.

▍11. Style CSS

CSS est la typographie et les mises en page. La typographie commence par la bonne sélection de police. La chose la plus importante pour moi est une bonne lisibilité du texte. Récemment, j'ai fait une règle pour héberger les fichiers des polices utilisées sur mon propre serveur. Cela protège mes ressources de la possibilité de blocage causée par la bande passante limitée de certains services tiers. Par exemple, j'utilise à peu près les constructions suivantes:

 <link href='/fonts/source-serif-pro-400-latin.woff2' rel=preload as=font crossorigin /> 

Un avantage supplémentaire de cette approche est qu'elle me sauve complètement du problème connu sous le nom de FOUT - (flash de texte sans style, flash d'une police normale).

▍ 12. Préparation des ressources graphiques avec GIMP et InkScape

Et enfin, pour la préparation des ressources graphiques, j'utilise quelques éditeurs. Je prépare des images PNG bitmap à l'aide de GIMP et des matériaux SVG vectoriels à l'aide d'InkScape.

Des technologies qui ont perdu leur ancien attrait

Certains des outils que j'aimais beaucoup auparavant, ainsi que d'autres que je n'aimais que brièvement, ne sont plus inclus dans ma pile de technologies Web.

• Adobe Photoshop et Illustrator. Ce sont deux excellentes applications qui satisfont depuis de nombreuses années tous mes besoins graphiques. Je leur dis malheureusement «au revoir» et les remercie d'être avec moi. Maintenant, tout ce dont j'ai besoin, c'est de leurs substituts open source gratuits.
• jQuery Cette bibliothèque est devenue inutile lorsque les guerres de compatibilité entre navigateurs ont pris fin. La fonctionnalité jQuery la plus précieuse pour moi était la syntaxe du sélecteur. Il s'est avéré si demandé qu'en 2009, il a été ajouté au DOM en tant que querySelector .
• AJAX. Cet ancêtre du Web 2.0. maintenant transformé en une relique du passé. L'API XMLHttpRequest est remplacée par une API d' fetch moderne et plus simple, et JSON remplace XML.
• SASS / SCSS. J'avoue que l'écriture de code CSS sans variables était inefficace; en conséquence, beaucoup de gens ont aimé SASS. Et les modules étaient également une caractéristique très importante. Mais au final, pour utiliser tout cela en JavaScript, vous avez dû consacrer trop de temps et d'efforts. Parallèlement, parallèlement au développement d'outils auxiliaires pour travailler avec les styles, la norme CSS ne s'est pas non plus arrêtée. En conséquence, divers outils de conversion de code CSS deviennent progressivement une chose du passé.
• BEM. Le schéma de dénomination d'entité BEM (Block, Element, Modifier) ​​utilisé dans la formation des noms de classe CSS résout le problème de l'espace de noms global. Mais vous devez payer pour cela en utilisant des conceptions très longues. Je suis passé aux sélecteurs parent / enfant dans les éléments sémantiques, préférant une approche plus simple des identifiants et des noms de classe.
  
  Par exemple:
  
  

   header > ul > li {   ... } nav > ul > li {   ... } footer > ul > li {   ... } 

• Polices Géorgie et Verdana. Ces deux polices sont en tête de mon classement depuis de nombreuses années. Je pouvais compter sur leur accessibilité et leur lisibilité. Mais après l'apparition de la règle @font-face et après que les polices open-source ont commencé à se répandre, j'ai commencé à utiliser des polices similaires.
• Babel, Grunt, Gulp, Browserify, WebPack. Les quatre premiers éléments de cette liste ne surprendront probablement personne. Mais pourquoi mon webpack a-t-il quitté Webpack? Le fait que ce bundler ait perdu de sa pertinence pour moi a quelques raisons sur lesquelles je vais me concentrer plus en détail:
  
  
  1. Avant HTTP / 2 avec prise en charge des connexions persistantes et du multiplexage de flux, nous dépendions des capacités de ces outils pour créer des ensembles de ressources d'application. Mais le regroupement ne nous donne rien dans un monde où il y a HTTP / 2.
  2. La norme ECMAScript 2015 était un nouveau mot dans le développement JavaScript, tout le monde s'est précipité pour utiliser les nouvelles fonctionnalités du langage au moment même où ils ont vu le jour. Cependant, il y avait un problème. Le code écrit à l'aide de nouvelles fonctionnalités n'était pas pris en charge par les navigateurs. Il a donc dû être transposé en code ECMAScript 5. Dans cette entreprise, nous comptions sur Babel, son application était une étape standard dans la préparation de projets Web pour publication. Aujourd'hui, toutes les nouvelles fonctionnalités linguistiques dont j'ai besoin sont disponibles littéralement partout. Du coup, je n'ai plus besoin de Babel.
  3. Avant la possibilité d'importation dynamique de modules dans les navigateurs, le code devait être traduit au format CommonJS. Désormais, la plupart des principaux navigateurs prennent en charge <script type='module'> (et Edge 76+ va bientôt apparaître). En conséquence, nous pourrons bientôt dire bonjour aux modules ECMAScript et dire au revoir à tout le reste.
• JSX. Je ne comprends pas ceux qui croient que JSX est bon. Et "Mais vous y êtes habitué", pour moi - pas un argument.
• Programmation fonctionnelle. J'ai limité l'utilisation de la programmation fonctionnelle dans mon code à de simples constructions numbers.sort((a, b) => a - b); comme numbers.sort((a, b) => a - b); . Pour tout le reste, j'utilise une programmation orientée objet.

Des technologies devenues favorites

Voici un aperçu des niveaux de ma pile technologique qui m'ont particulièrement impressionné:

• Modules JavaScript. Les modules ont fait leurs preuves dans le code JavaScript côté serveur. Et je suis extrêmement heureux de pouvoir enfin les utiliser côté client.
• JavaScript orienté objet Voici cinq règles d'or pour le développement JavaScript orienté objet:
  
  
  1. Remplacez les objets anonymes par des classes nommées.
  2. Déclarez et initialisez toutes les propriétés des objets dans les constructeurs.
  3. Protégez les objets des modifications immédiatement après leur création.
  4. Déclarez les méthodes avec des signatures immuables.
  5. Liez this à chaque rappel.
• Phrase bleue Ce système me permet d'utiliser une approche déclarative lors de la création de modèles et de la préparation de divers matériaux. Cela rend l'écriture de code HTML de qualité un pur plaisir.

Résumé

Auparavant, les piles de technologies Web pouvaient bien n'inclure que quatre éléments. Mais dans des conditions modernes, vous ne surprendrez personne avec une pile de douze niveaux. Je ne veux pas ressembler à une personne exprimant des vérités bien connues, mais, néanmoins, en complétant ce matériel, je dirai que chaque développeur peut avoir sa propre pile. Et il serait extrêmement intéressant pour moi de découvrir ce que les autres appellent leur «pile idéale de technologies web 2020».

Chers lecteurs! Et quelle est votre - votre pile de technologies Web en 2020?

Avis de non-responsabilité du traducteur: Blue Phrase, Read Write Serve et Read Write Doc - technologies développées par l'auteur de cet article. Le téléchargement et l'installation sont à vos propres risques.