Mon point de vue sur le monde

Un petit changement pour vous, un grand changement pour moi : je passe à Zola pour mon blog personnel. C’est mon premier article de blog avec Zola. J’utilise également un nouveau thème, ce qui m’a aussi convaincu de changer. Docusaurus (précédente stack utilisée pour ce blog) est bien adapté à la documentation (technique), mais pas si élégant pour le blogging (avis personnel).

Au lieu de participer au populaire Advent of Code, cette année j’ai décidé de relever le défi de l’Advent of TypeScript. Dans cet article, vous trouverez mes solutions ainsi que quelques détails sur leur fonctionnement ou ce que j’ai appris en résolvant les défis.

Je vous propose une liste des conférences qui m’ont particulièrement plues pendant l’événement. Vous avez surement vos sujets préférés mais la plupart des vidéos valent le détour pour les développeurs frontend.

Un Injector est une mécanique dédiée à l’injection de dépendances en Angular. Les différents frameworks n’ont pas tous la même approche pour la DI. Par exemple, le fameux framework Java utilise le Spring IoC Container. La documentation d’Angular a longtemps mis en avant les providers, tout en négligeant d’autres éléments importants pour la DI. Les Injector ne font pas exception à cette règle. C’est pourquoi je vous propose de découvrir ensemble comment ils fonctionnent.

Avec l’omniprésence de Babel et Typescript dans l’univers Frontend, la compatibilité Javascript de nos applications n’est (presque) plus un sujet. Pour le HTML, seulement quelques attributs sont ajoutés depuis le HTML5 pour des fonctionnalités bonus (lazyload, prefetch, etc.). Ils sont en général ignorés par les navigateurs incompatibles. Et pour le CSS ? Pas de polyfills à proprement parler, un support très hétérogène et la moindre esquive d’un display:grid est désastreux pour le visuel. Alors comment fait-on pour rationaliser notre CSS ? Voyons ça ensemble.

Parlons de State Management au niveau d’une application. Les états locaux (React Hook, Vue Composable, Service Angular + RxJS Subject) ont un usage limité par définition. Avec l’ampleur de l’écosystème React sur le monde professionnel, Redux est devenu la réponse évidente à la problématique du State Management. Etudions ensemble le processus assez naturel qui nous amène à Redux et prenons du recul sur nos choix.

Intégré à ES2020, présent depuis 2018 dans Babel et depuis la version 3.7 de Typescript, l’optional chaining est un opérateur largement utilisé aujourd’hui. Même si l’intérêt d’un tel opérateur est indéniable, regardons ensemble les biais et les mauvaises pratiques qui peuvent émerger de son usage.

Je vous propose quelques fonctionnalités qui pourraient améliorer la Developer eXperience et le framework dans sa globalité.

De quoi parle-t-on ?

En Typescript, il est possible de définir des types de plusieurs manières : interface, classe, enum, mot-clé type, as const, etc. Dans cet article, nous allons nous concentrer sur les types construits à partir d’une union disjointe et les avantages d’une telle pratique. L’union en Typescript se fait via le symbole | (ex : type Union = A | B | C). Le terme disjoint n’est pas anodin car contrairement au polymorphisme, les types que l’on va utiliser peuvent ne rien avoir en commun.

Non malheureusement ce n’est pas (encore) possible en Javascript, ni en Typescript. Mais on peut essayer de s’en rapprocher, notamment en séparant l’identification d’un scénario de son exécution. L’objectif est de renforcer la lisibilité et rapprocher le code du problème à résoudre. Pour illustrer le propos, nous utiliserons le traitement d’un article de blog (ajout, suppression, publication, etc.) à partir des informations contenues dans cet article. De plus, je vous propose d’y aller étape par étape afin que vous puissiez appliquer ce refactoring dans votre code.

La performance est un sujet récurrent quand on parle de frontend. Les principaux acteurs (librairies/frameworks Javascript) y font tous référence dès la page d’accueil. Angular est connu pour intégrer un bundle plus complet mais plus lourd que ses concurrents directs. Même si ces différentes technologies n’embarquent pas les mêmes fonctionnalités, il reste une problématique à résoudre pour tous : le rendu HTML. Nous allons analyser ensemble le fonctionnement d’Angular dans trois cas précis : la gestion des blocs statiques, la mise à jour du DOM et la mise en cache de valeurs.

Dans le monde du développement frontend, React et Angular sont les frameworks qui dominent le marché. Cependant, Vue.js est clairement un challenger à ne pas prendre à la légère.

Au travers de ce talk, venez découvrir les origines de Vue.js, ses concepts, ses outils et son écosystème.