Développeur web en 2021 - Tentative d'état des lieux L3 Info - Technologies du Web Benjamin Becquet - 6 avril 2021
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Développeur web en 2021 Tentative d'état des lieux L3 Info - Technologies du Web Benjamin Becquet - 6 avril 2021 1
Mon parcours 2000 DUT - Informatique & Génie logiciel 2003 INSA - Architecture des Systèmes d'Information Projet de cartographie web "préhistorique" Master de recherche + projet de thèse non concrétisé 2004 Expériences en SS2I / milieu bancaire… 2006 Mediamobile / V-Traffic R&D en recherche opérationnelle, graphes, itinéraires En parallèle, évolution progressive vers le développement web 2015 La Ruche qui dit Oui ! : développeur front senior 2019 Qwant Maps : lead développeur front Développeur web en 2021 - Benjamin Becquet 1
Développement web, quelques étapes 1993 HTML : statique ou généré dynamiquement côté serveur 1995 JavaScript : ajout d'interactions côté client 1996 CSS : séparation structure / présentation 2004 AJAX (requêtes HTTP depuis JS) ➟ pages "dynamiques" 2006 jQuery : surcouche au DOM, manipulation des pages facilitée, plugins 2007 iPhone puis Android ➟ émergence d'un "vrai" web mobile, SPA 2010 Node.js + npm : JavaScript côté serveur, dépendances, écosystème JS 2014 HTML5 : version modernisée, nouveaux éléments sémantiques 2015 ECMAScript 6 (ES6) : let/const, modules, classes, promesses, etc. Développeur web en 2021 - Benjamin Becquet 2
Développement web, un continuum En permanence : évolution des standards, des navigateurs, des outils Chaque nouveauté n'invalide pas les techniques précédentes Le web est une cohabitation de nombreuses pratiques On ne choisit pas la même stack pour une page personnelle, un journal en ligne, un réseau social, une appli de cartographie, une plateforme de streaming, etc. ⚠ Développer pour le web, c'est savoir choisir les technologies adaptées. Développeur web en 2021 - Benjamin Becquet 3
Front / Back / "Full stack" Division liée à l'approche "application web" (site + API) Back Front API Présentation Bases de données Interactions utilisateur Pour : les développeurs front Pour : les utilisateurs Compétences transverses Architecture, réseau, performance, sécurité, déploiements, etc. Développeur web en 2021 - Benjamin Becquet 4
Développement Back Modèle prédominant : base de données + API HTTP JSON Tous les langages, avec leurs spécificités Problématiques d'architecture et de déploiement Containers (Docker) SaaS "Serverless" Développeur web en 2021 - Benjamin Becquet 5
Développement Front La base reste le trio HTML / CSS / JavaScript interprété par un navigateur Ébullition de l'écosystème JavaScript En quelques années, passage d'un paradigme "bricolé" à "mature" Gestionnaire de dépendances (npm, Yarn) Compilateurs pour variantes de JS (Babel, TypeScript) ou autres langages ➟ JS Task runners et bundlers (Gulp, Webpack, Rollup, etc.) Outils de test (Mocha, Jest, Puppeteer, etc.) Outils de formatage de code (ESLint, Prettier, etc.) Outils de confort (ex : rechargement à la volée) Développeur web en 2021 - Benjamin Becquet 6
React (aussi Vue.js, similaire) Très populaire depuis ~2015 Né de la nécessité de construire des SPA complexes Bibliothèque axée sur le rendu HTML Séparation claire états de l'app / rendu HTML Programmation déclarative et réactive Réalisation de l'approche par composants Modèle applicable côté client et serveur (SSR) Écosystème riche (doc, outils, plugins, communauté) (Pour les détails, voir vos cours :)) Développeur web en 2021 - Benjamin Becquet 7
Tout n'est pas rose au pays du JS Javascript fatigue (Article) Lassitude devant la complexité et l'instabilité de l'écosystème JS Regret du JS "write and reload" React est rarement utilisé seul et se complexifie vite Beaucoup de développeurs JS maîtrisent mal les bases du HTML (!) Le modèle Single Page App sur le client a ses limites Approches alternatives Générateurs de sites statiques, "JAMStack" Frameworks React/Vue tout-en-un avec SSR (Next.js/Nuxt.js, Gatsby) HTML avant tout + frameworks JS "modestes" (ex: Stimulus, Svelte) Développeur web en 2021 - Benjamin Becquet 8
Support des anciens navigateurs Deux problèmes : 1. syntaxe moderne non supportée (import, async/await, etc.) ➟ Développer en JS moderne et transpiler en ES5 avec Babel 2. fonctionnalités absentes ➟ Polyfills +/- conditionnels Un troisième : le support des vieux navigateurs "encombre" les récents ➟ Compiler deux versions et laisser le navigateur choisir Développeur web en 2021 - Benjamin Becquet 9
CSS
Évolution constante
Layouts modernes (flex, grid)
custom properties ("variables")
:root {
--bg-color: white;
}
main {
background-color: var(--bg-color);
}
Peu et moins enseigné que JS, moins de "prestige", devs parfois hostiles ?!
⚠ Maîtrise indispensable pour le développement front
À privilégier avant solutions JS
Développeur web en 2021 - Benjamin Becquet 10CSS : techniques et outils (Pré)processeurs (SASS, PostCSS) Problèmes récurrents : nommage, spécificité, collisions Méthodologies d'organisation et nommage (BEM, OCSS, etc.) Autres solutions : CSS modules, CSS-in-JS Frameworks : Bootstrap toujours populaire Approche similaire mais plus flexible/optimisée : Tailwind Principe : composition de micro-classes utilitaires (vs. classes sémantiques) Portrait Développeur web en 2021 - Benjamin Becquet 11
Problématiques du web moderne 12
Web mobile Taille d'écran Absence de souris (interactions utilisateur, hover) Qualité du réseau Présence d'appareil photo, GPS, etc. Grande disparité de plateformes ⚠ Plus d'utilisateurs mobile que desktop. En 2021, entre 50% et 70% selon sources et marchés. ➟ Le web mobile, ce n'est pas traitable à part Développeur web en 2021 - Benjamin Becquet 13
Web mobile : méthodologies
Responsive Web Design ➟ Permettre au site de s'adapter aux divers configurations
API Media queries (MDN), en CSS et JS
@media print { /* … */ }
@media screen and (min-width: 900px) and (orientation: landscape) { /* … */ }
@media (not(hover)) { /* … */ }
Mobile first ➟ Considérer le mobile comme le cas par défault
main { padding: 0; }
@media screen and (min-width: 900px) {
main { padding: 24px; }
}
Sujet lié : Progressive enhancement
➟ D'abord les technologies les plus robustes (HTML ➟ CSS ➟ JS)
➟ Ajout de couches de raffinement en fonction des possibilités des plateformes
Développeur web en 2021 - Benjamin Becquet 14Web mobile vs. applications natives "Natif" = application Android ou iOS installable et utilisable hors navigateur En 2021, peu de différences de possibilités entre web et natif Partage des mêmes API HTTP et parfois du même design (ex : Twitter) Question de la présence sur les magasins d'application (App Store / Google Play) Nombreux outils pour mutualiser les développements Approche PWA (Progressive Web App) Pas un outil mais un ensemble de techniques Donner des capacités d'application native à un site web Installation, exécution hors navigateur, lancement hors ligne, notifications, etc. Développeur web en 2021 - Benjamin Becquet 15
Design Métier à part entière UX : User eXperience : logique de navigation, compréhesion des interactions UI : User Interface : hiérarchie de l'information, typographie, branding, style visuel En lien direct avec le développement front Dialogue constant, vocabulaire et concepts partagés Les outils des designers peuvent générer du code (ex : Sketch, Figma) Design Systems Cohérence globale du design d'un produit Formalisation de l'approche par composants Support d'échange designer / développeur, construit par les deux Développeur web en 2021 - Benjamin Becquet 16
Source : https://airbnb.design/building-a-visual-language/ Développeur web en 2021 - Benjamin Becquet 17
Accessibilité Rendre le web utilisable par toute personne, qu'elle soit ou non en situation de handicap Handicaps visuels, moteurs, auditifs, cognitifs, … Nombreuses conséquences design + dev Favorise l'utilisabilité pour tout le monde Obligation légale pour certains services En France, le RGAA Ressources du W3C : Une plage braille Source : Wikipédia WCAG : recommandations, plusieurs niveaux ARIA : attributs supplémentaires au HTML Développeur web en 2021 - Benjamin Becquet 18
Accessibilité : pour commencer Savoir que ça existe ✅ Bien structurer le contenu Étape de paiement Valider vs. Étape de paiement Valider Utiliser ARIA si nécessaire X Utiliser outils d'audits (ex : dev tools Chrome ou Firefox) Faire tester par des gens concernés, consulter des spécialistes Développeur web en 2021 - Benjamin Becquet 19
Performances "40% des gens quittent une page qui met plus de 3s à charger" Les machines et les réseaux sont de plus en plus rapides, mais les sites continuent de grossir. (Voir rapport sur le poids des pages sur HTTP archive) Serveur : réseau, bases de données maîtriser son réseau et ses DB, mettre en place des caches, CDN Client : quantité/poids des ressources, parsing/exécution JS, rendu DOM minimalisme, SSR, bundles, lazy loading du code et des images Web Assembly pour les traitements bruts, mais pas la solution miracle ⚠ Dans tous les cas : mesurer ! Développeur web en 2021 - Benjamin Becquet 20
Mais aussi Sécurité Culture générale des types d'attaques (DoS, XSS, SQL injections, etc.) des protocoles et mécanismes de sécurisation (HTTPS, CORS, OAuth, etc.) de bons réflexes (ne manipuler que le nécessaire, ne pas réinventer la roue, …) Privacy, respect de la vie privée des utilisateurs Obligations légales : voir le RGPD Démarche éthique SEO, Search Engine Optimization Assurer le bon référencement d'un site sur les moteurs de recherche Comme souvent, ça commence par des pages qui respectent les standards Développeur web en 2021 - Benjamin Becquet 21
Autour du code / méthodologie 22
Tests Tests automatisés : "du code qui teste du code" tests unitaires tests d'intégration tests end-to-end Mais aussi tests utilisateurs tests de performance Source : OpenClassrooms Développeur web en 2021 - Benjamin Becquet 23
Git partout ! Quasi-standard (+ GitHub ou GitLab) Gestion de version efficace … mais pas seulement. Collaboration Branche = unité de développement Automatisation A révolutionné toute la chaîne de développement Intégration continue, Dev Ops Développeur web en 2021 - Benjamin Becquet 24
Revue de code Pilier du travail de dev en équipe Assurance qualité du code Détection de problèmes en amont Support de discussions archivées Partage : de connaissance du projet de pratiques d'équipe d'expérience de responsabilité Développeur web en 2021 - Benjamin Becquet 25
Source : https://github.com/Qwant/erdapfel/pull/661 Développeur web en 2021 - Benjamin Becquet 26
Méthodes agiles Par opposition au waterfall ou cycle en V Plusieurs variantes mais idée maîtresse = avancer par petites itérations (sprints) Fournir un résultat pertinent et fonctionnel le plus tôt possible (MVP) Obtenir des retours rapidement Source : Ouriken S'adapter aux aléas du projet Mieux évaluer la difficulté des tâches "Orchestré" par rôles non-devs : Product Manager & Product Owner (PM / PO) Développeur web en 2021 - Benjamin Becquet 27
Au jour le jour 28
Dev front sur Qwant Maps Maintenir et faire évoluer l'application Qwant Maps Assurer son intégrité (fonctionnalités, performances) Développer de nouvelles fonctions selon les demandes Changer de technologie quand c'est pertinent = utile, performant, suffisamment pérenne Ex : fin 2019, migration vers React Faire évoluer les pratiques de l'équipe Développeur web en 2021 - Benjamin Becquet 29
Élaboration d'une nouvelle feature 1. PM/PO : expression du besoin et des retombées attendues 2. Design : proposition de wireframes par l'équipe design 3. Devs : étude de faisabilité, partage back / front + API de communication, division en tâches fonctionnelles 4. Design : maquettes définitives, utilisant le design system 5. PO + devs : priorisation, estimation et affectation des tâches (sprint planning) 6. Devs : développements pendant le sprint Une tâche = une ou plusieurs pull requests Ajout ou modification de tests automatisés Revue de code par les autres développeurs 7. PO + design : validation fonctionnelle et décision de déploiement Développeur web en 2021 - Benjamin Becquet 30
… 31
"Ça fait beaucoup !…" 32
Oui. 33
Conseils pour ne pas se perdre ⚠ Connaître les fondamentaux HTTP + HTML + CSS + "vanilla JS" Une culture générale du web est plus utile qu'une spécialisation Savoir chercher l'information (MDN, W3C, docs des outils, Can I use?) Méthodologie Agile + progressif Une ref : Resilient Web Design, by Jeremy Keith. https://resilientwebdesign.com/ Bricoler :) Développeur web en 2021 - Benjamin Becquet 34
Un dernier message Les développeurs webs sont au bout de la chaîne Responsabilité vis-à-vis des utilisateurs fonctionnement des applications accessibilité vie privée, sécurité éthique Développeur web en 2021 - Benjamin Becquet 35
Vous pouvez aussi lire
