Le guide du développeur web 2020

Développement web 2020

Le guide du développeur web 2020

Ces dernières années, le développement web s’est considérablement sophistiqué. Il y’a maintenant énormément de langages et de frameworks. Sans parler des nombreux outils que l’on peut utilier. 

Dans cette vidéo,  je vais faire le point sur les langages et les technos les plus importantes en développement web à l’aube de 2020. 

L’approche « monolithique » 

Premièrement, j’aimerai parler de l’approche « ancestrale » du développement web, qui consistait à créer des pages mixant le HTML et le langage back-end qui était souvent PHP. Dans cette approche, le serveur génère directement du HTML lu par le navigateur. A cette époque, Javascript servait à ajouter quelques interactions au niveau de l’interface, comme afficher un pop-up.  C’est aussi l’âge d’or de JQuery qui permettait de faciliter les manipulations du code HTML d’une page.  Les applications web, suivant cette approche étaient conçues comme de gros blocs monolithiques où tout était « mixé » : interface, logique métier, traitements,… Conséquence ? Quand on commence à avoir des projets un minimum importants? Le mélange devient vite ingérable. Et si d’autres déclinaisons sont à prévoir, comme le développement d’une application mobile, le terrain va très vite devenir glissant… 

Le développement web moderne

Ce qui nous amène à l’approche moderne du développement web. En développement web moderne, la tendance est de séparer le dévleppement de l’interface, ce que l’on appelle le développement front-end, du développement « back-end », consistant à développer les fonctionnalités et les traitements. Cela va permettre de développer les fonctionnalités d’un programme de façon centrale, ensuite  il ne restera plus que les interfaces à écrire séparamment. 

En bref, dans l’approche monolithique, le navigateur de l’internaute reçoit les données déjà mises en forme. En développement web moderne, le navigateur reçoit des données ainsi qu’une interface écrite en JS qui sera exécutée et qui manipulera les données reçues.  La connexion entre l’interface et le back-end s’appelle une API, et c’est par cette API que l’interface demandera ou enverra des données au back-end.  Ces données sont souvent formatées en JSON, pour JavaScript Object Notation.

Imaginons une application pour poster sur Facebook. On développera une interface permettant d’envoyer un message sur mobile ainsi que sur le site. Mais les fonctionnalité permettant de récupérer le message et de le stokcer en base de données sera développée une seule fois au niveau du back-end.

Le développement back-end

Commençons par parler des langages dédiés à un usage back-end. Vous l’aurez compris, le rôle du Backend est de fournir l’interface en données et d’assurer les traitements. Etant donné le succès des CMS PHP tels que WordPress, le langage PHP reste l’un des plus utilisés en développement web et est très apte à réaliser des API.  Pour PHP, des frameworks costauds peuvent accélérer  et consolider le développement, tels que Laravel, Symfony, ZendFramework,… En société d’ingénierie informatique, le langage Java est aussi beaucoup utilisé, langage épaulé par des frameworks web  tels que Sprint et Play.

Une autre solution envisageable pour le back-end est Ruby On Rails. Rails est une solution puissante qui permet de développer des projets ambitieux en un temps incroyable. Et Ruby On Rails s’est très bien adapté à la conception d’API. Dans la même optique, on peut retrouver Python et son framework Django. De plus, les hébergeurs commencent à adopter plus facilement ce format. Les hébergement mutualisés d’OVH sont maintenant compatibles avec Ruby, Node.js ainsi que Python, en plus du traditionnel PHP. De mon avis personnel, Ruby On Rails est une techno incroyablement efficace. 

node js

Enfin, depuis l’apparition de l’environnement Node.js, il est possible de faire du Javascript côté serveur. A ce niveau, on retrouve le framework Express.js qui reste une référence. L’avantage, c’est de ne devoir maîtriser qu’un seul langage pour « tout » faire : le Javascript. Un avantage qui sera encore facilité par le développement d’application cross-plateformes. On en reparlera plus tard.

A lire aussi : PHP vs Javascript vs Ruby vs Python

Enfin, de nouveaux langages orientés commencent à gagner du terrain  sur le marché du back-end : Go, créé par Google, Elixir : qui promet d’offrir les performances du langage C avec la syntaxe de Ruby.  

Le développement front-end

Parlons maintenant du développement de l’interface. Comme je l’ai expliqué précédemment, le rôle du développeur front-end est de créer l’interface. On peut résumer cette interface à un programme Javascript qui traite les données échangées via l’API. API autour desquelles on construit des interfaces très dynamiques, dont le contenu va changer sans nécessiter de rechargement complet de la page.  

Avec cette mouvance, Javascript a beaucoup évolué. Avant 2015, la dernière version était la version ES5 sortie en 2009, soit 6 ans entre les deux versions. En 2015, la version ES6 a marqué un tournant en ajoutant de nombreuses fonctionnalités : fonctions fléchées, classes, modules,…  Cette version ES6 est vraiment la base du Javascript moderne. Depuis, plusieurs nouvelles versions se sont succédées (ES7, ES8, evsnext,…) et Javascript évolue à une très grande vitesse.  La première chose à faire en tant que développeur front-end est de maîtriser les nouveautés induites avec la version ES6. 

Vous l’aurez compris, le monde du Javascript bouge vite, et il en est de même pour les frameworks. A ce niveau justement, trois gros frameworks Javascript se partagent l’essentiel du marché front-end : 

angular
  • Angular, développé par Google,  un framework très puissant mais qui demandera d’intégrer l’ensemble de votre projet dans le framework. Angular demande également l’utilisation de TypeScript, nous y reviendrons dans un instant. 
  • React, développé par Facebook, qui se définit plutôt comme une biblitohèque. L’avantage ? Vous pouvez l’intégrer de façon modulaire en vous limitant à l’utiliser là où vous en avez vraiment besoin. Par contre, React vous imposera un langage de template pour créer vos composants visuels en place de HTML.
  • Enfin,  on retrouve également Vue.JS une Techo indépendante crée par un ancien de chez Google. Vue.js est également modulaire, il peut donc aussi s’intégrer uniquement où vous en avez besoin. Il est également plus simple à apprendre. Pour moi, il s’agit vraiment de mon petit préféré.

Les langages transpilés en Javascript 

dart

Malgré les avantages de Javascript, il faut comprendre que la  transition vers ES6 a créé un langage assez bordélique, qui contraste fortement avec des langages bien organisés tels que Ruby ou Go. Aussi, Javascript souffre de certaines faiblesses. Mais malgré tout, Javascript reste le seul langage utilisable nativement sur les navigateurs.

Des langages dérivés sont donc apparus, langages qui seront en fait « traduits » en Javascript avant d’être envoyé au navigateur. A ce niveau, on retrouve notamment TypeScript, développé par Microsoft, et qui apporte une notion de typage.

Un autre langage intéressant est Dart, développé par Google, qui offre une syntaxe relativement propre et proche du C ou du C#. Ce langage offre d’excellentes capacités en développement cross-plateformes grâce à son framework Flutter. A noter que l’objectif de Google est, à terme, de remplacer Javascript par Dart.

Le développement cross-plateformes

Javascript a aussi permis au monde du développement web de créer des applications mobiles ! En fait, c’est devenu assez simple avec des Framewokrs spécialisés tels que React Native ou encore Native Script. 

Le principe est le même, on développe l’interface avec Javascript et on se connecte à l’API. Encore un avantage : les applications sont muti-plateformes et votre code vous permettra de créer autant des applications Android qu’iOS. 

Pour les applications de bureau, le framework Electron fait des merveilles et a la même optique : une base de code qui sera déclinée vers MacOS, Windows et Linux. L’éditeur de code Atom est lui-même écrit avec Electron. 

WebAssembly

Enfin, une techno en développement web qui va beaucoup faire parler d’elle est WebAssembly. WebAssembly permet de complier des applications et de les exécuter dans le navigateur de l’utilisateur, indépendamment du langage utilisé. En bref, WebAssembly pourrait permettre de se passer de Javascript et d’utiliser votre langage préféré en place. A ce niveau, Wasmer et Blazor, écrit en C#, vallent le coup d’oeil. 

J’espère que ce guide vous sera utile, pour ma part j’ai vraiment essayé d’aller à l’essentiel et de vous donner le meilleur apperçu possible du monde du développement web à l’approche de 2020 ! Si d’autres technos méritent, selon vous, de faire également partie de ce listing, je vous invite à me le dire en commentaire ! 

A bientôt ! 

Aucun commentaire

Ajoutez votre commentaire