React Hebdo #77: Remix, Sapling, Expo, TypeScript, React-18, ESLint, npm, Jamstack, CSS...
React Hebdo #77: Remix, Sapling, Expo, TypeScript, React-18, ESLint, npm, Jamstack, CSS...
React
Remix est meta-framework React sur lequel travaillent Ryan Florence et Michael Jackson, les créateurs de React-Router. Ils viennent d'annoncer que Remix sera finalement gratuit et open-sourcé sous license MIT, suite à une levée de fonds de $3M.
J'aime la vision de ce projet:
Un retour aux principes fondamentaux du web: statuscode, caching http, forms...
L'hydratation React vue comme un "progressive enhancement": la majorité de votre site doit pouvoir tourner avec JS désactivé.
Hébergement sans lock-in: compatible avec les offres clouds serverless Node.js, mais aussi Cloudflare Workers (isolats V8)
Sebastian Markbåge à publié 3 guides d'upgrades pour les auteurs de librairies et frameworks:
C'est assez technique, mais l'idée générale est que l'approche populaire basée renderToString n'est pas idéale pour les performances. Pour réduire les temps de réponse et le Time-To-First-Byte, il faut commencer à envoyer du HTML le plus tôt possible. Seulement voila: le tag <head> doit forcément être au début du document, et on ne peut le remplir correctement qu'après avoir rendu l'app React coté serveur. Pour pouvoir utiliser le streaming, il faut que les auteurs de frameworks mettent en place un système complexe de streams pour d'abord écrire un tag <head> vide qui sera rempli au moment le plus adapté (enfin, c'est ce que j'ai compris 😅).
Extras:
Stop using loading spinners: Fernando encourage à utiliser des Skeletons et donne quelques astuces TypeScript
6 Concrete Tips That Will Make Your React Pull Requests Easier To Review
React-Native
Le nouveau SDK est en beta pour une semaine, et on a déjà une première liste de highlights. Support expérimental du moteur JS Hermes sur iOS, y compris via expo-updates. On upgrade aussi vers React 17, et React-Native 0.64 (version avec Hermes qui supporte les Proxy). Il ne reste plus qu'a attendre la stabilisation et le support de quelques APIs Intl pour qu'Hermes soit adopté en masse. Pourquoi pas en faire un jour le moteur JS par défaut?
Personnellement j'ai commencé à utiliser Expo dès 2017 sur une app éjectée pour installer Intercom et OneSignal. J'ai trouvé un avantage à rester dans l'écosystème Expo malgré le poids additionnel d'ExpoKit. Il devrait être possible à terme de "ré-injecter" cette app, quand toutes les dépendances natives supporteront les Expo config plugins.
Extras:
Demo Bluetooth + Real-time Audio FFT in Expo: une demo Expo 43 managé qui montre bien tout ce qu'il est possible de faire aujourd'hui sans éjecter.
Demo Skia + Yoga: William Candillon propose une nouvelle démo Skia avec des animations de layout flexbox.
JSI Module Example: un template de lib utilisant JSI, qui sera peut-être à terme inclus dans Bob?
💸 Jobs
Cajoo: Dev Fullstack - Remote - 40-75k€ (+BSPCE)
Cajoo veut créer le supermarché de demain 🛒 Nous sommes présents dans 10 villes en France et suite à un investissement de 40M$ de Carrefour nous étoffons l'équipe tech pour créer la stack tech du futur du retail. Les squads s'insèrent dans les 3 streams:
🛍️ Consumer: App B2C en React Native, back-office React, backend Hasura & lambdas Node/Typescript
🏭 Warehouse: PWA React avec XState pour les opérateur en entrepôt, back-office React, backend Hasura & NestJS
🚴 Delivery: App coursiers en React Native sur Expo, back-office React, backend Hasura & lambdas Node/Typescript via Serverless
Notre code est typé de bout en bout avec Hasura en backend qui génère des endpoints GraphQL que nous consommons en frontend avec Apollo et un typing fort via Typescript.
🌴 Remote pour les équipes Tech, Produit et Data (avec possibilité de venir dans nos locaux dans le 8ème à Paris)
🏄♂️🏔️ Offsite chaque trimestre dans un endroit sympa en France (Hossegor, Chamonix)
Shotgun: Dev Fullstack Senior - Remote - 60-75k€ (+BSPCE)
Shotgun c'est une billetterie et plateforme de streaming pour des évènements electro/techno 🎶. On a déjà les plus gros évènements en France, maintenant on s'agrandit à l'international (US/Brésil/Europe) 🌎. L'équipe est composée de 13 personnes et on fait déjà plusieurs millions d'euros de volume par mois. Malgré le Covid, on vient de faire le mois le plus rentable de notre histoire.
🌴 Remote OK (tu peux aussi travailler depuis nos bureaux de Marseille ou Paris)
📈 Challenge B2C : aider les gens à sortir et s'amuser (Recommandations / Social / UX aux petits oignons)
📈 Challenge B2B : soutenir les organisateurs dans la création et la promotion de leur event (CRM / Business Intelligence / Marketing / Finance)
🤖 Côté tech : ReactNative, React, Typescript, Apollo, GraphQL, NextJS, PgSQL, Vercel (serverless)
PS: j'ai travaillé en freelance pour Shotgun, l'environnement technique est plutôt cool et les gens sympas ☺️.
Une offre ci-dessous t'intéresse? Réponds à cet email!
Smallable: dev React senior - CDI Paris 50-60k (+ CTO)
Ask Mona: dev React confirmé - CDI Paris 45-50k (+ CTO)
Hublo: Node.js React senior - CDI Paris/remote 60-70k (+ EM)
Habx: React TS - CDI Paris - 38-50k
Ponicode: dev JS/React - CDI Paris 40-65k
Shift: dev React senior - CDI Paris/remote 50-60k
Choose: dev React-Native - CDI Paris 50-60k
Splio: dev fullstack React/NodeJS senior - CDI Paris 60-70k
F4: dev NodeJS - CDI Paris 40-50k
Aria: dev NodeJS - CDI Paris - 45-60k
HD Rain: dev backend Node.js React - CDI Toulouse 38-45k
Divers
Extras:
How Partytown's Sync Communication Works: détaille les techniques utilisées pour faire tourner les scripts third-party dans un Web Worker.
Sondage Jamstack Conf 2021: Next.js et TypeScript ont de très bons scores (croissance, taille et satisfaction). Quelques autres sont bien placés: Vite, Vue, SvelteKit, Sanity, Strapi, Rust, Go...
typescript-todo-or-die-plugin: permet de mettre une date d'expiration sur un TODO, après laquelle tsc emet des erreurs.
tsm: permet d'executer du code TypeScript directement dans Node.js. Equivalent moderne à ts-node (comparaison).
schummar-translate: utilise les string template literals de TypeScript pour extraire les paramètres ICU.
