Newsletter WEB : Veille technologique – Juin 2022

Deux tombés au combat ce mois-ci, c’est fini pour Lerna et Atom (on se croirait dans kohlanta).

Sinon on parle Angular 14, notifications push pour Safari (enfin!!!), Google I/O, GitHub gratuit pour tous, et quelques articles pour parfaire son TypeScript !

Bonne lecture, au mois prochain ! 

– Yohan Dahmani

LES NOUVEAUTES

❤️🚀Angular 14 

Belle version pour le framework de Google : 

  • Standalone components (preview) : permet à un composant de vivre seul, sans déclaration dans un NgModule 
  • Typed forms : Strict typing pour les formulaires Angular, fonctionnalité qui était très attendue. Moins de bugs dans vos formulaires ! 
  • Des nouveaux guides sur le ChangeDetection d’Angular !! J’aurais adoré avoir ces ressources à mes débuts, à consulter !! 
  • Amélioration de l’API pour le nom des pages via le routeur 
  • Amélioration des erreurs  
  • Support Typescript 4.7, ES2020 by default 
  • Les propriétés protected sont accessibles dans le template 
  • Et bien d’autres … ng cache, ng analytics, ng completion, Angular Material update, DevTools pour Firefox, … 

Release Blog – La vision d’Angular pour le futur – Release blog en français – Découvrez les Standalone Components (Netanel Basal) 

❤️🎤Push notification pour Safari !! ENFIN (WWDC) 

iOS  16 Preview - web push notifications

Ça y est, on l’a tant attendu et ça arrive enfin, les push notifications arrivent sur Safari macOS d’ici fin d’année, et iOS/iPadOS en 2023 ! Une énorme avancée pour les PWAs. Pas mal d’améliorations ont également éte annoncées (container queries, devtools extensions, …). Les nouvelles moutures des OS Apple ont également été présentées lors de cette WWDC. 

Twitter thread – WWDC Webkit announcements 

☠ Fin de Atom, l’éditeur de code qui a fait naître Electron… 

Fin du projet qui aura permis de poser les base et démocratiser le framework web desktop Electron … racheté par Microsoft en 2018 ensuite, qui lui-même avait développé son éditeur de code open-source basé sur Electron (VSCode), on l’avait tous un peu vu venir … Ce jour est arrivé. 

Sunsetting Atom 

☠ Lerna est mort 

Le monorepo est officiellement un projet mort (il n’était plus maintenu depuis un certain temps). Il est repris par Nrwl (qui développe le monorepo Nx) qui a sorti une mise à jour pour Lerna qui propose d’utiliser Nx. Cela va surement faire passer Nx encore plus au dessus de Turborepo. 

Lerna is dead blog post – Lerna just got 10x faster 

🎤Google I/O 

Veille Web : Google I/O

La conférence développeur annuelle de Google a eu lieu début mai, Android 13Core Web VitalsAmélioration des PWA sur Chrome, Pixel 6a, Pixel 7 preview, Pixel Watch preview, Pixel Buds Pro, Chrome OS, et plein d’autres annonces et conférences ! 

Récap video en 12 min – Recap annonces Web – Android 13 

🚀Flutter 3 

Aucun texte alternatif pour cette image

Lors de cette Google I/O, la v3 de Flutter a été dévoilée. Support de macOS (Silicon et Intel) et Linux desktop apps (stable), support de Material 3 (You), plus d’intégration avec Firebase, Casual Game toolkit, … 

Flutter 3 release blog 

🚀Storybook 6.5 

Nous en parlions dans la newsletter d’Avril, les interaction tests sont enfin disponibles, vous pouvez désormais écrire vos tests avec Storybook. Nouveau plugin Figma, beaucoup plus rapide (improvements, webpack 5, Vite …), React 18 support, bugfixes, … 

Storybook 6.5 release blog 

🚀Typescript 4.7 

Après la beta le mois dernier, la release stable. 

« Pas si petite release pour le superset JS. Support des ES Modules pour Node.js, spécification du type de module dans package.json (esm ou commonJS), package.json exports (pour définir plusieurs points d’entrée, typeof sur les variables JS #privées, amélioration des performances, et beaucoup d’autres nouveautés. » 

Typescript 4.7 Release blog 

🔔Github free 

Veille web : GitHub is free for teams

Modification du pricing de GitHub. Les repositories privés avec collaborateurs illimités sont gratuits pour tous, et le plan entreprise baisse de $9 à $4/user/mois ! Effectif immédiatement. 

GitHub is free for teams 

Quoi de neuf sur le web en mai ? 

Chrome 102, Safari 15.5, Firefox 101 stable. Inert attribute, Navigation API, Constructable Stylesheets, … 

New to the web platform may 

🚀Nx 14 

On en parlait le mois dernier, la version 14 du monorepo est l’occasion pour Nrwl de célébrer ses 1,6 millions de téléchargements par semaine. Amélioration des performances (à l’aide d’un deamon), simplification de l’écosystème Nx, améliorations du CLI, local plugins, automatisation de la config CI, module federation plus rapide, et bien plus !! 

Nx 14 release blog 

___ 

Autres releases : Electron 19Playwright 1.22MS React Native DevToolsTailwindCSS Headless UI 1.6 Fastify 4 

LES RECOMMANDATIONS D’ARTICLES

❤️Comment faire du TDD utilisant Jest, Cypress, Testing Library, et React (en) 

Article très complet qui détaille comment adopter le TDD avec ces outils modernes, faire la distinction entre les différents types de tests, comment et quoi tester, les bonnes pratiques… 

Vous n’avez pas besoin de framework CSS (en) 

Bootstrap, Material Design, … par réflexe ou habitude, les développeurs ont tendance à souvent faire appel à eux. Aujourd’hui le web a un peu changé et ce n’est pas toujours le bon choix. 

Web Applications 101 (en) 

Une application web … ça peut représenter une application super complexe, un site vitrine, une app desktop, ou encore une app mobile. Puis on a le front end, le backend, les Single Page Applications, … ce guide explique tout le web ! 

❤️Qu’est-ce qu’un monorepo ? (en) 

Vous en entendez parler de plus en plus sans vraiment savoir ce que c’est ? Ce guide très complet vous explique tous les tenants et aboutissants. 

  • What is a Monorepo 
  • Why use a Monorepo 
  • Structure of a Monorepo 
  • How to create a Monorepo 
  • Workspaces in Monorepos 
  • Monorepo Tools 
  • Documentation in Monorepos 
  • Monorepos vs Polyrepos in Git 
  • Versioning with Monorepos 
  • Continuous Integration with Monorepos 
  • Monorepo Architecture 

Garder les type guards safe et sécurisés (en) 

Bonnes pratiques sur les type guards de Typescript. 

Les boutons dark mode devraient être gérés par les navigateurs, pas les sites (en) 

Vous avez souvent vu des boutons switch entre light et dark mode. Cet article expose les problèmes que cela entraine et propose que ce toggle soit géré par les navigateurs directement ! 

La vérité sur les pixels (en) 

Vous vous êtes déjà posé la question : est-ce que je dois utiliser les rem, em ou px ? Cet article est fait pour vous. TLDR: il faut tous les utiliser.  

Un web sans mot de passe (en) 

Un monde sans mots de passe arrive bientôt, mais ça risque de vous enfermer encore plus dans un écosystème (coucou Apple et Google). Comment ça marche ?  

State of CSS (en) 

Le CSS a énormément évolué en 2022, subgrid, accent color, :has … on fait le point sur les nouveautés ! 

Quelles sont les performances des appareils de vos utilisateurs ? (en) 

En utilisant les applications de benchmark, Alexandre Moureaux fait un état des lieux des performances des téléphones des utilisateurs selon les marchés. Aspect qu’il faut absolument prendre en compte dans sa stratégie de tests. 

DIVERS 

💻Convertisseur d’erreur TypeScript 

Petit site sympa dans lequel on vient copier coller son erreur TS pour avoir des pistes de correction, une traduction, et une explication. 

❤️💻Component Party 

Vous avez déjà voulu comparer différents frameworks front-end ? Ce site est pour vous, il propose plusieurs snippet de code qui réalisent la même chose mais sur différents frameworks. 

Veille web : component party pour comparer différents frameworks front-end