L’expression “développement Web moderne” est une expression à laquelle l’on s’accroche pendant des années. Mais qu’est-ce que cela signifie vraiment? Je sais que ça veut dire quelque chose parce que ça sonne juste mais il y a toujours une partie qui pense que c’est un peu vague et vide.

Bien que cela puisse paraître un peu moelleux, la vérité est qu’il existe probablement une chose telle que le développement Web moderne. Dans la mesure où le domaine a considérablement changé en quelques années et que la situation est différente de celle de 2013, par exemple, le développement Web moderne peut facilement être caractérisé comme tout ce qui se fait dans le développement Web en 2019. différent il y a 5-10 ans.

Par cela, je ne parle pas seulement de tendances telles que l’intelligence artificielle et le développement mobile (même si elles sont toutes les deux importantes). Je parle également des moyens plus spécifiques de construire des projets Web.

Voyons donc comment nous en sommes arrivés et les différentes manières dont le “développement Web moderne” est, bien, moderne.

L’histoire du développement web moderne: comment nous en sommes arrivés là

Cela semble évident, mais l’essor du mobile est le catalyseur des changements que nous constatons actuellement dans le développement Web.

Mobile et l’essor des applications web

Il y a quelques parties différentes à cela qui nous ont amené où nous sommes aujourd’hui. En premier lieu, la croissance du mobile au milieu de cette décennie (autour de 2013 ou 2014) a initié la tendance de la conception de sites Web mobiles ou responsive.

Ces termes peuvent sembler un peu vieux-chapeau. Si c’est le cas, c’est la marque de la rapidité avec laquelle le monde du développement Web a changé. Il s’agissait principalement d’apparence et d’interface utilisateur, ce qui rendait les propriétés Web faciles à utiliser et à naviguer sur les appareils mobiles, plutôt que simplement sur le bureau.

Des outils tels que Bootstrap ont connu une croissance rapide, offrant un moyen simple et modélisé de créer des sites Web mobiles et réactifs. Mais ce qui a commencé comme une tendance liée principalement à l’apparence a changé plus tard à mesure que l’utilisation mobile augmentait. Cela nécessitait une approche plus sophistiquée, les utilisateurs de mobiles s’attendant désormais à des expériences Web plus riches et plus rapides, et aux entreprises un nouveau moyen de monétiser ces changements importants dans le comportement des utilisateurs.

Des applications légères pour des expériences utilisateur intensives en données

C’est là que des concepts tels que l’application Web à page unique sont apparus. Légères et dynamiques, capables de gérer des tâches gourmandes en données et des changements d’état, les applications Web à page unique étaient uniques en ce sens qu’elles géraient la logique dans le navigateur plutôt que sur le serveur. Cela a sans doute été un tournant décisif dans la modification de notre conception du développement Web. Cela a permis de réduire la distinction bien établie entre le backend et le front-end.

Derrière cette tendance, nous avons assisté à une évolution vers les nouvelles technologies. Node.js est apparu discrètement sur la scène (sa popularité a vraiment explosé depuis quelques années seulement), et les frameworks comme Angular étaient à la pointe de leur popularité.

Les éléments centraux du développement web moderne en 2019

Ainsi, un certain nombre de composants essentiels du développement Web moderne ont été créés à la suite des changements intervenus dans le secteur au cours de la dernière décennie. Certains d’entre eux sont des outils, d’autres des idées et des approches. Tous reposent sur la nécessité de gérer un équilibre entre des exigences complexes, des performances et une simplicité.

Composants Web

Les composants Web sont l’élément le plus important si nous essayons de caractériser le développement Web «moderne». Le principe est simple: les Composants Web fournissent un ensemble d’éléments personnalisés réutilisables. Cela facilite la création de pages Web et d’applications sans écrire de lignes de code supplémentaires qui ajoutent de la complexité à votre base de code.

Il convient de garder à l’esprit que les composants Web améliorent l’encapsulation. Ce concept, qui consiste vraiment à construire de manière plus modulaire et à couplage lâche, est crucial pour penser à ce qui rend le développement Web moderne moderne.

Les composants Web comportent trois éléments principaux:

• Les éléments personnalisés, qui sont un ensemble d’API JavaScript que vous pouvez appeler et définir selon vos besoins.
• Le DOM shadow, qui agit en tant que DOM attaché à des éléments individuels de votre page. Cela isole essentiellement les ressources dont les différents éléments et composants ont besoin pour travailler sur votre page, ce qui facilite la gestion du point de vue du développement et permet de meilleures performances pour les utilisateurs.
• Les modèles HTML, qui sont des éléments de code HTML pouvant être réutilisés et appelés uniquement en cas de besoin.

Ensemble, ces éléments brossent un tableau du développement Web moderne. Les développeurs essaient de gérer davantage de complexité et de sophistication tout en améliorant leur productivité et leur efficacité.

React.js

L’une des raisons pour lesquelles React a réussi à usurper Angular est le fait qu’elle fait bon nombre des choses que Google souhaitait faire.

La différence la plus significative entre React et Angular est peut-être que React résout certains des problèmes d’évolutivité présentés par la liaison de données bidirectionnelle d’Angular (qui a été pendant un temps incroyablement excitante et novatrice) avec un flux unidirectionnel.

Il ya beaucoup de discussions à ce sujet, mais en évoluant vers un modèle unique de flux de données, les applications peuvent gérer des données à une échelle beaucoup plus grande sans rencontrer de problèmes.

Ailleurs, des concepts tels que le DOM virtuel (qui est distinct d’un DOM fantôme, aident à améliorer l’encapsulation des développeurs). En effet, la flexibilité est l’un des principaux atouts de React. Pour utiliser Angular, vous devez connaître TypeScript, par exemple. Et bien que vous puissiez utiliser TypeScript lorsque vous travaillez avec React, ce n’est pas essentiel. Vous avez des options.

Redux, Flux et comment nous pensons à l’état de l’application

La croissance de React a amené les développeurs Web à réfléchir de plus en plus à l’état de l’application. Bien qu’il ne s’agisse pas d’une nouveauté, les applications devenant de plus en plus interactives et complexes, il est devenu de plus en plus important pour les développeurs de prendre au sérieux le problème de «l’état».

Par conséquent, des bibliothèques telles que Flux et Redux sont apparues sur la scène qui agissent comme des objets dans lesquels toutes les valeurs qui composent l’état d’une application peuvent être stockées.

Conclusion: le développement Web moderne est à la fois un ensemble d’outils et une façon de penser

L’ensemble d’outils de développement Web évolue depuis plus d’une décennie. Le mobile a été le catalyseur de changements significatifs et nous a permis de pénétrer dans un monde modulaire, léger et très flexible. Les frameworks Heavyweight comme AngularJS ont ouvert la voie, mais il semble qu’une alternative ait trouvé un véritable achat auprès de la communauté du développement au sens large.

Bien sûr, ça ne sera pas toujours comme ça. Et bien que React domine l’esprit des développeurs depuis près de trois ans (assez longtemps dans le monde de l’ingénierie), il est certain que quelque chose le remplacera à un moment donné. Cependant, quelle que soit l’évolution de la chaîne d’outils, l’idée de base selon laquelle nous construirons de meilleures applications et de meilleurs sites Web lorsque nous briserons les choses perdurera probablement.

La complexité ne diminuera pas. Même si l’écriture de code devient plus facile, il devient crucial de comprendre comment les composants d’une application s’emboîtent – des éléments frontaux à l’intégration d’API -. Même si cela commence à vous distraire et à poser de nouveaux problèmes auxquels vous n’aviez même pas pensé, il est clair que les choses vont rester intéressantes en ce qui concerne le développement Web à l’avenir.