J'ai regardé les 27 pourparlers React Europe pour que vous n'ayez pas à le faire

D'accord, vous voudrez peut-être encore regarder les pourparlers – ils étaient assez bons! Mais nous sommes tous des gens occupés, donc j'ai pensé que vous pourriez tous apprécier mes notes des vingt-sept React Europe discussions.

Les notes devraient vous aider à avoir rapidement une idée de ce que chaque conversation a couvert, afin que vous puissiez décider si vous voulez regarder la vidéo complète ou non.

J'ai exactement une heure, quelles conversations devrais-je regarder?

C'est une question très spécifique, mais j'ai une réponse.

D'abord, vous devrait regarder Recoil: State Management for Today's React comme Dave McCabe a présenté une nouvelle façon intéressante de gérer la portée mondiale dans les applications React

Ensuite, regardez Excalidraw: Cool JS Tricks Behind the Scenes [19659007]alors que Christopher Chedeau a discuté des défis que lui et son équipe ont résolus de créer une application de dessin vraiment utile.

Techniquement, regarder ces deux conférences prendra 81 minutes, mais si vous regardez à une vitesse de 1,25 sur YouTube, vous pouvez le faire dans un heure. 1965

Devez-vous brancher sans vergogne quoi que ce soit avant de fournir vos notes utiles?

Quelle question pratique!

Nous, de KendoReact avons organisé un hackathon virtuel lors de l'événement, ce qui a conduit à de nombreuses applications React géniales construites avec nos composants d'interface utilisateur. Nous voulions remercier tout particulièrement le gagnant, Steeven Regnault, alors qu'il construisait un petit jeu amusant utilisant KendoReact et Recoil .

État des animations React

• Conférencier: John Adetutu
• react-spring est un moyen puissant de créer des animations dans React. [19659020] react-spring dispose d'une série de crochets qui vous permettent de séparer votre code d'interface utilisateur de votre logique d'animation.
• Consultez cette présentation si vous cherchez à ajouter des moyens plus robustes de configurer des animations dans vos applications React. [19659022] The Latest in Next.js 9.4
  • Conférencier: Tim Neutkens
  • Next.js est un cadre React avec un certain nombre de fonctionnalités pour vous aider à créer des applications React plus rapidement .
        
    • Par exemple, vous pouvez avoir un répertoire pages et les fichiers de ce répertoire deviennent automatiquement des itinéraires.
    • Prélecture automatique des liens sur les connexions rapides.
    • Méthodes d'automatisation de la génération statique.

        

  • Prochainement, des bundles JavaScript plus intelligents (ne livrant que les anciens bundles JavaScript pour les navigateurs plus anciens), un cycle d'actualisation du développement plus rapide, une nouvelle superposition d'erreurs, un support d'environnement amélioré (intégré .env ] chargement), les redirections, l'intégration Eslint et la prise en charge du mode simultané React.
  • Consultez cette présentation si vous êtes curieux de savoir Next.js et que vous souhaitez une introduction à ce qu'il peut faire pour vous.

  Apporter WebGL à React

  • Conférencier: Paul Henschel
  • react-three-fibre est un réconciliateur pour three.js.
        
    • Essentiellement, la bibliothèque vous permet de travailler plus facilement avec three.js en fournissant des composants réutilisables.

        

  • Il a présenté un tas d'exemples assez impressionnants. Celui-ci et celui-ci étaient mes favoris, et ils valent la peine d'être essayés par vous-même.
  • Jetez un coup d'œil à cet exposé si vous avez pensé à essayer WebGL, comme réagissez -trois fibres le rend beaucoup plus facile pour les développeurs de React.

  Feuille de route de Gatsby et son avenir

  • Conférencier: Sidhartha Chatterjee
  • Les sites statiques sont devenus de plus en plus possibles au cours des dernières années.
  • Gatsby vous permet de créer des sites statiques à l'aide de React que vous pouvez servir à partir d'un CDN.
  • Certaines limitations des sites statiques sont de très gros sites et des sites qui se mettent à jour très fréquemment.
  • Gatsby Flow permet de résoudre le problème de grands sites avec des versions incrémentielles.
  • Les versions en streaming de Gatsby sont un service à venir qui aide les sites qui ont besoin de se mettre à jour fréquemment.
  • Regardez cette présentation si vous êtes intéressé par Gatsby et certains des nouveaux services sur lesquels il travaille. [19659044] Les accessoires de rendu ne sont pas morts
    • Président: Erik Rasmussen
    • Les accessoires de rendu ont grandement simplifié le processus de gestion de l'état des composants React.
    • Les accessoires de rendu ont tué des composants d'ordre supérieur. ( https://twitter.com/mjackson/status/885910701520207872 )
    • Les accessoires de rendu vous permettent d'injecter un état sans forcer un nouveau rendu de l'ensemble de votre composant. En utilisant des crochets, vous devez créer des composants personnalisés à chaque fois pour y parvenir.
    • Cette conférence a été l'une de mes préférées car Erik est un présentateur incroyable. Je dirais que celui-ci vaut la peine d'être regardé par tous les développeurs de React, mais surtout si vous (comme moi) ne comprenez pas bien les accessoires de rendu et que vous souhaitez en savoir plus.

    Rejeter les chatons bongo, réaliser des fleurs 3D et autres leçons apprises

    • Conférencier: Josh Comeau
    • Josh est un fervent joueur de Beat Saber, mais détestait l'interface utilisateur communautaire pour créer des pistes personnalisées pour le jeu.
    • Three.js rend le travail avec les interfaces utilisateur 3D beaucoup plus facile et react-three-fibre rend la vie encore plus facile pour les développeurs de React.
    • https://bruno-simon.com/ est un exemple impressionnant de trois. js en action.
    • Consultez cet exposé si vous voulez entendre une histoire amusante sur la création d'un outil pour une communauté. J'ai aimé ça. 1965

    Beyond Responsive Design: création de sites Web optimisés pour les mobiles dans React

    • Conférencier: Alex Holachek
    • Les taps sur mobile ne sont pas les mêmes que les clics sur le bureau, et vous ne pouvez pas les gérer
    • Vous pouvez utiliser @media (pointeur: fin) pour limiter les états actifs et planés aux appareils non tactiles.
    • Pour une personnalisation optimale et des performances multiplateformes, il est logique de appliquer et supprimer des états tactiles avec JavaScript.
    • Nous devons trouver un équilibre entre l'application de l'état tactile suffisamment rapide pour la réactivité (<100 ms), mais pas si rapidement que l'utilisateur le déclenche accidentellement lors d'un autre geste comme le défilement. [19659020] bundle-wizard est un outil pratique conçu par Alex pour visualiser vos bundles JS pour n'importe quelle page spécifique de votre application.
    • Ceci est un excellent discours pour quiconque crée des applications réactives, car il existe un grand nombre de trucs et astuces.

    Transformer GraphQL

    • Conférencier: Nader Dab it
    • GraphQL Transform vous aide à créer rapidement des backends pour vos applications, avec des fonctionnalités qui vous permettent d'échafauder les appels de base de données et les opérations CRUD, configurer les workflows d'authentification, prototyper rapidement les API et plus encore.
    • si vous souhaitez en savoir plus sur ce qu'AWS propose pour les outils GraphQL.

    Kubernetes by Keytar

    • Speaker: Jan Klienert
    • Kubernetes est un système open source pour automatiser le déploiement, la mise à l'échelle et
    • Jan a littéralement branché un keytar à une API Kubernetes. Vous devez en quelque sorte le voir par vous-même, mais c'était une façon assez créative d'enseigner certaines des fonctionnalités et des termes autour de Kubernetes.
    • Consultez la présentation si vous cherchez à apprendre quelques bases de Kubernetes.

    Expo : Universal React

    • Conférencier: Evan Bacon
    • Expo facilite l'utilisation des applications React Native.
    • npx create-react-native-app vous permet de démarrer une React Native app fast.
    • Expo Snack vous permet de coder React Native apps dans le navigateur.
    • Expo a de nouveaux outils pour vous permettre de vous authentifier auprès de plusieurs fournisseurs différents.
    • expo-html-elements vous aide à créer des éléments qui fonctionnent sur les applications natives et Web.
    • Expo s'efforce de rendre leur rafraîchissement rapide plus rapide sur le Web, iOS et Android.
    • Consultez cette présentation si vous recherchez une plongée en profondeur dans l'Expo d'outillage propose de créer des applications React universelles.
    • Conférencier: Sanket Sahu
    • Builder X est un outil de conception basé sur un navigateur pour vous aider à créer des applications React et React Native.
    • Sanket a parlé de certains des défis liés à la construction de l'outil, comme comment ils ont optimisé les performances et comment ils ont implémenté annuler / refaire.
    • Consultez la présentation si vous voulez entendre une histoire sur la création d'un outil de conception et certains des défis auxquels l'équipe de Sanket a été confrontée.

    Détournement de CSS avec TailwindCSS

    • Conférencier: Horacio Herrera
    • Tailwind CSS est un framework CSS utilitaire d'abord – c'est essentiellement tout un tas de classes CSS. ?
    • Tailwind facilite l'application des règles de pseudo-classe CSS, par exemple className = "hover: bg-blue-300" .
    • Tailwind est construit au-dessus de PostCSS [19459005
    • PurgeCSS est un outil pour supprimer le CSS inutilisé de votre code, et il existe un plugin pour le faire fonctionner avec PostCSS.
    • Consultez cette présentation si vous recherchez une introduction à Tailwind CSS, et pour voir si cela convient à vos applications.

    Recul: gestion de l'état pour React d'aujourd'hui

    • Conférencier: David McCabe
    • L'équipe de David sur Facebook a atteint certaines limites avec l'état
    • L'outil offre un état partagé flexible, des données et des requêtes dérivées et une observation d'état à l'échelle de l'application.
    • Le nom de la bibliothèque est Recoil [19459005
    • Recoil facilite le stockage de l’état à l’échelle de l’application, ce qui facilite le débogage dans le temps et permet de faire des choses comme aring l'état de l'application via une URL.
    • L'outil est expérimental pour le moment et l'équipe recherche des commentaires.
    • Cet exposé est à voir absolument. Tout le monde a besoin de la gestion des états dans React, et Recoil est une nouvelle approche intéressante pour faciliter la gestion des états.

    Excalidraw: Cool JS Tricks Behind the Scenes

    • Conférencier: Christopher Chedeau
    • Excalidraw est une application pour dessiner des diagrammes dessinés à la main.
    • Christopher a fait une explication assez soignée de la façon dont ils ont codé les lignes de dessin avec un peu d'aléatoire pour qu'elles aient l'air dessinées à la main.
    • Christopher est également passé en revue un certain nombre de mesures qu'il a prises pour que toutes les données utilisées par Excalidraw soient chiffrées de bout en bout.
    • J'ai vraiment apprécié cet exposé, car c'était une histoire amusante derrière un outil utile. Je recommanderais à tout le monde de vérifier celui-ci.

    Système de conception et accessibilité

    • Conférencier: Devon Govett
    • Construire un ensemble de composants d'interface utilisateur à utiliser dans toute votre entreprise est un énorme défi, en particulier lorsque vous considérez l'accessibilité, l'internationalisation, etc. (Un problème que nous connaissons très bien chez KendoReact. ?)
    • Devon couvre un certain nombre de techniques que son équipe a utilisées pour résoudre certains de ces défis, comme faire face aux défis de l'interface utilisateur sur mobile et rendre les composants compatibles avec le lecteur d'écran. [19659020] Adobe est en train de créer un outil pour faciliter ces choses appelé React-Aria, et sera open source à la fin du mois.
    • Consultez cette présentation si vous souhaitez savoir comment Adobe aborde l'accessibilité dans un nouvel outil qu'ils construisent.
    • Conférencier: Michel Weststrate
    • React Native offre une expérience de développement incroyablement rapide.
    • Flipper est une plate-forme de débogage des applications iOS, Android et React Native. [19659020] Flipper inclut le débogage sur incident.
    • Flipper fonctionne également pour les applications natives, il vous permet donc également de creuser dans les composants natifs qui composent vos applications.
    • Flipper est extensible et possède des plugins construits par la communauté. Vous pouvez également créer des plugins spécifiques à l'application pour répondre à vos besoins.
    • Michel a fait plusieurs démos montrant Flipper en action, et c'était assez impressionnant. La discussion vaut vraiment la peine d'être regardée si vous créez des applications React Native aujourd'hui.

    Détecter l'inattendu dans les applications React

    • Conférencier: Nicolas Dubien
    • Une condition de concurrence est la condition dans laquelle le système est Le comportement dépend d'une séquence d'événements dans un ordre spécifique.
    • Les conditions de concurrence sont une source courante de bogues dans les applications Web et sont difficiles à tester.
    • Fast-check est un test outil qui peut vous aider à tester les problèmes potentiels de conditions de concurrence critique dans votre code, en réorganisant les événements de manière aléatoire.
    • Il ressemble à un utilitaire assez soigné et mérite d'être vérifié si vous souhaitez vous protéger contre les conditions de concurrence critique dans vos applications React.

    Rendons le développement encore plus rapide!

    • Ives van Hoorne
    • Le temps de recompilation moyen dans une application React est d'environ ~ 2 secondes.
    • Réduire votre cycle de rafraîchissement est un excellent moyen de rendre votre équipe plus productive.
    • Il y a une nouvelle classe de bundlers se concentre principalement sur le développement, y compris Snowpack, Vite et Sandpack.
    • Sandpack est ce que CodeSandbox utilise. Sandpack ne fait aucune concaténation et effectue tout son rechargement via le navigateur lui-même.
    • React Fast Refresh vous permet de recharger votre CSS et même vos composants sans rafraîchir votre navigateur.
    • était intéressant et mérite d'être vérifié si vous cherchez à accélérer votre flux de travail de développement.

    Blitz.js & the Future of Fullstack

    • Conférencier: Brandon Bayer
    • Blitz est un cadre semblable à Rails pour les applications React monolithiques à pile complète – construit sur Next.js
    • Blitz fait beaucoup pour vous dès la sortie de la boîte, y compris ESLint, plus joli, les crochets Husky et plus encore. [19659020] Blitz utilise Prisma pour les bases de données, et intègre tout pour vous.
    • Blitz est toujours en alpha, mais il est prêt à être testé aujourd'hui.
    • Le discours mérite d'être vérifié si vous voulez le prendre un premier aperçu d'une façon complète et avisée de créer des applications React.

    Apprendre les crochets React en créant une authentification Based To Do App

    • Conférencier: Luke Mwila
    • Règle n ° 1: Utilisez toujours des crochets au niveau supérieur de votre fonction React.
    • Règle n ° 2: N'appelez pas de crochets [19659020] Les crochets personnalisés sont un excellent moyen de partager une logique commune entre les composants de vos applications.
    • Les exemples de code de la conférence sont disponibles sur GitHub .
    • La conférence est un excellent aperçu de la base de React

    Gamedev sur React + WebGL

    • Conférencier: Korotaev Alexander
    • PixiJS est le rendu WebGL le plus populaire.
    • react-pixi-fibre est une bibliothèque qui vous permet d'utiliser PixiJS dans un style déclaratif React.
    • SVG est idéal pour une utilisation WebGL car il évolue tout en restant de haute qualité.
    • React peut être lent pour le jeu développement. Évitez setState () pour les animations et utilisez des composants personnalisés pour les parties critiques de vos applications.
    • La discussion mérite d'être vérifiée si vous cherchez à vous lancer dans le développement de jeux avec React, car il y en a beaucoup

    Évolutivité – Architecture React Native chez Wix

    • Conférencier: Omri Bruchim
    • Wix est une application écrite en React Native avec plus de 650 écrans.
    • Cette conférence vaut la peine d'être regardé si vous créez de grandes applications React Native et que vous cherchez des conseils sur la façon de faire évoluer vos applications. Omri explique comment Wix organise ses équipes, afin que les développeurs puissent travailler sur différentes parties de leur application tout en minimisant les conflits.

    Comment Material-UI crée-t-il des composants?

    • Conférencier: Olivier Tassinari [19659020] Material UI est une suite de composants React.
    • Olivier parcourt le processus de prise de décision que Material UI prend lors de l'examen de nouvelles fonctionnalités et de nouveaux composants.
    • Vous devez être prudent en ajoutant de nouvelles fonctionnalités, car une fois les fonctionnalités ajoutées presque impossible à supprimer, personne n'aime interrompre les modifications.
    • Consultez la présentation si vous cherchez à approfondir les composants de l'interface utilisateur matérielle.

    Utilisation des mises à jour Expo OTA dans votre application React Native

    • Conférencier: Eric Samelson
    • L'envoi de nouvelles versions de vos applications mobiles prend très longtemps.
    • expo-updates vous permet de mettre à jour vos applications de production par voie hertzienne, et, vous peut maintenant l'utiliser dans n'importe quel React Native a pp — pas seulement ceux construits par Expo.
    • Les mises à jour d'Expo vous permettent d'héberger votre code sur vos propres serveurs.
    • Consultez cette présentation si vous développez des applications React Native et que vous cherchez à améliorer la façon dont vous sortez la production

    JavaScript ∩ WebAssembly

    • Conférencier: Tadeu Zagallo
    • Tadeu explique comment les machines virtuelles JavaScript fonctionnent à un niveau élevé, y compris lexing, l'analyse et les arbres de syntaxe abstraite.
    • Il traite ensuite de certaines des optimisations apportées par les machines virtuelles pour optimiser les performances de votre code JavaScript.
    • Et ensuite comment l'assemblage Web s'intègre dans les machines virtuelles JavaScript.
    • La discussion mérite d'être regardée si vous voulez voir comment fonctionne les machines virtuelles JavaScript.

    Synchronisation des données pour les applications en temps réel ou hors ligne avec React et GraphQL

    • Conférencier: Richard Threlkeld
    • Avec les systèmes distribués, il est difficile d'obtenir la cohérence, la disponibilité et la tolérance de partition – vous devez généralement choisir
    • Met en cache un re pas de bases de données. Les utilisateurs ne veulent pas voir les données périmées.
    • Regardez celle-ci si vous cherchez à découvrir en profondeur comment AWS résout le problème des données en temps réel et hors ligne avec GraphQL.

    Jamstack + React Native

    • : Sebastien Lorber
    • React Native Web est un site Web rendu pour les applications React Native.
    • Pour que React Native Web fonctionne avec Gatsby, vous devez ajouter un rendu côté serveur.
    • Regardez Sebastian's discutez si vous avez une application React Native et que vous souhaitez essayer de la faire fonctionner sur le Web via Gatsby.

    Relay Concepts

    • Conférencier: Sibelius Seraphini
    • Relay est un client GraphQL prêt pour la production pour React.
    • Sibelius couvre un certain nombre de configurations d'environnement de relais, configurant un magasin de relais et la couche de réseau de relais.
    • Consultez cette présentation si vous recherchez un aperçu de ce que le relais peut faire.

    La fin!

    Eh bien, ce sont toutes mes notes. Faites-moi savoir dans les commentaires si vous avez trouvé cet article utile, car je pourrais le reproduire pour les événements futurs. ?

    ---