Guide GIF: Réagir sur l'Europe

Retrouvez les dernières nouvelles de React dans ce récapitulatif du premier jour de la conférence React Europe à Paris

Hello from React Europe à Paris, France. C'était non seulement ma première fois en France mais aussi ma première conférence centrée sur React! Je savais que cela allait être une conférence fantastique en entendant que deux de mes personnes préférées étaient Keynoting et emceeing: Ken Wheeler et Gerard Sans . Dès le début de la conférence, il y avait déjà des pâtisseries et des cafés à gogo. La foule était excitée et amicale et mes collègues, Carl Bergenhem et John Willoughby régalaient joyeusement la foule avec les nouvelles de notre V1 UI de Kendo pour React libération qui s'est passé la veille! Woo hoo!

Pour votre plus grand plaisir, je vous présente un récapitulatif rapide du premier jour de React Europe. Keynote – État de la réaction: Ken Wheeler

Pour commencer, nous avons eu la version de State of React de Ken Wheeler alias The New Hotness in React. D'abord, il a parlé de ce qui se passait avec le début de React 16: Fibre a été annoncé, mais quoi? Puis il s'est lancé dans la nouveauté avec React 16.3 comme les nouveaux Life Cycles avec architecture asynchrone qui vous apportent plus de sécurité. Ensuite, il nous a guidés à travers Context, qui est le «trait favori de Ken dans le monde entier» et maintenant il est entièrement supporté. Pour mettre en valeur le contexte, Ken carbo nous a chargé d'une belle démo

Ensuite, il a parlé de Suspense, dont nous avons été très excités mais attendons en suspens ?. Ken nous a rappelé qu'il y a quelques jours, Andrew a changé de maître. Donc, il peut être disponible dans quelques jours. Tellement excitant! Il nous a couru à travers une démo très américaine plus un grand avec les photos de ses contributeurs appelés, "People I've Let Down" [

Le cas de fantaisie: Joshua Comeau

D'abord, Josh a regardé quelques sites amusants des années 90. Rappelez-vous Ask Jeeves? Je fais, Joshua! Le site Web des années 90 de McDonald a eu un peu d'animation d'un mec évitant le chemin après avoir brillé les arches. Josh n'a pas encore "fait un moyen de créer des gifs de chats avec React" mais c'est peut-être son discours pour l'année prochaine. C'est sur disque maintenant, ainsi cela doit devenir vrai! Il nous a montré un bac à sable quand il construit des projets d'animation comme les confettis qu'il a construits pour Kahn Academy

Puis il nous explique comment il construit cette atmosphère de test de toile dans React. Après de tels confettis amusants, Josh nous a montré comment il a rendu le courrier électronique plus fantaisiste avec etch-a-sketch-esque en supprimant le contenu d'email et en envoyant un email en le faisant plier comme une lettre ?. Il nous a ensuite montré plus d'animations et nous a guidés à travers l'animation axée sur l'action et l'animation axée sur l'état. C'était génial de voir un tel UX génial que l'on pouvait construire avec React et, comme Joshua l'appelait hilarement, CSS de votre grand-mère.

Josh avait un grand point d'accessibilité à la fin,

"Si rien d'autre, nous devrions assurez-vous que nos touches fantaisistes ne sont pas nuisibles pour les personnes atteintes de troubles vestibulaires. "

Il nous a rappelé préfère-réduit-mouvement qui n'est pas soutenu partout, mais Khan Academy a un réglage que vous pouvez définir entre-temps!

Le sous-typage est surévalué: Caleb Meredith

J'ai été immédiatement excité par la conversation de Caleb parce que l'une des premières diapos avait un bébé levrette sur la diapositive ❤!

Cette diapositive faisait en fait la distinction entre JS et OCaml, avec des animaux du côté JS et des plants du côté OCaml. En utilisant cela, il a plongé dans une conversation sur la classification. En fin de compte, il classait JS et plus comme des langages avec sous-typage et OCaml et d'autres sans sous-typage implicite . Il a ensuite expliqué les hauts et les bas du sous-typage. Par exemple, il est populaire parce que le sous-typage est une grande partie de la programmation orientée objet, mais il ajoute également des frais généraux. Il y avait beaucoup de cris à Reason parce qu'il connaissait sa foule ?. Il a suggéré à la foule de remplacer «Raison» par «Ocaml» tout au long de son discours. L'un des principaux points de Caleb était que «vous pouvez conserver l'abstraction sans sous-typer.»

Avenir déclaratif des gestes et des animations en Réactant Native: Krzystof Magiera

Cette discussion a sauté avec Kryzstof avec l'une des premières animations d'un cheval exécuté en 1878, photographié par Eadweard Muybridge

Puis il discuta des animations modernes et de leur traitement sur le fil JavaScript. React Native a une API animée pour aider à la performance des animations. Kryztof a procédé à nous guider à travers le point clé de l'API et le code pour l'implémentation des animations. En nous parlant à travers le système de répondeur JS, il nous a donné plus d'informations sur ce qui se passe dans les coulisses entre le fil de l'interface utilisateur et JS. Relier tout cela ensemble Krysztof a fait une démo de l'animation des gestes et a annoncé la sortie officielle de réagir-native-gesture-handler . Finalement, il a annoncé sa nouvelle bibliothèque reac-native-reanimated que vous pouvez consulter aujourd'hui!

DEJEUNER: ? French Buffet ?

D'accord, donc ce n'était pas une discussion mais il y avait BEAUCOUP DE NOURRITURE! Je pensais que cela méritait une section et une preuve visuelle

Sur Apollo: Peggy Rayzis

Nous ne le savions pas mais en plus d'être ouvert développeur de source chez Apollo, Peggy est aussi un astronaute voyageant dans le temps. Donc, elle nous a pris le temps de voyager à travers l'histoire d'Apollo à partir de 2016. Elle nous a parlé d'Apollo et de comment cela vous aide à interagir avec vos données en utilisant React. Elle a continué en démystifiant le cache normalisé intelligent ? ouf. Le temps passé en 2018 nous a rappelé la version React Apollo 2.1 qui avait une nouvelle API de composant avec des accessoires de rendu

Dans le futur d'Apollo nous discutons Suspense! Plus important encore, la démo de Peggy a récupéré des images aléatoires de "DOGS"! Une démo de pause bien nommée (obtenez-la 'paws'ing). Ensuite, elle a eu une autre démo montrant la cache d'Apollo dans laquelle elle a fouillé différentes races de chiens pour montrer de beaux chiens adorables. Elle a interrompu sa propre requête de recherche avec une autre requête pour montrer le chargement synchrone avec des interruptions en retardant le rendu basé sur la priorisation.

J'ai dû ajouter cette dernière image car qui n'aime pas une visualisation chiot?

Redux répliqué: Jim Purbrick

Cet exposé était axé sur «les expériences partagées de réaction RVR simples». Jim a commencé avec l'histoire d'origine de la façon dont ils ont décidé de construire l'expérience ReactVR. Il a passé en revue quelques exemples de code dans redux pour illustrer où il se prêterait aux actions de redux de gestion de réseau. Jim nous a expliqué le code qu'ils ont créé pour gérer les interactions et gérer les conflits entre deux utilisateurs faisant quelque chose en même temps.

Lancement lundi, ils ont maintenant un jeu Hasbro que vous pouvez jouer avec plusieurs joueurs!

Jim a montré beaucoup plus de code montrant comment le jeu a géré les actions dans les magasins et comment ils ont généré des listes d'actions. Une note qu'il voulait que tout le monde garde à l'esprit est "s'il vous plaît écrivez des tests basés sur la propriété pour vous sauver" beaucoup et beaucoup de temps. Inutile de dire, ils ont mis beaucoup de réflexion et de code puissant dans leurs expériences ReactVR pour leur faire sentir naturel. Il a réfléchi à ce que l'avenir apportera à VR, comme choisir des endroits où aller en ville avec des amis par VR, quel sera le rôle des avatars, comment nous gérerons les interactions comme les poignées de main et plus encore.

Bridging React Native Retour à ses racines: Vincent Riemer

Nous avons commencé par le voyage de Vincent à parler et les projets dont il parlait qui l'ont amené à Réagir Native. Au cours de ce voyage, nous avons pu voir plusieurs des projets qu'il a construits

Après React Native, Vincent a naturellement progressé vers React Native Web. Il a eu un avertissement pour nous faire savoir que l'information suivante était basée sur son instinct ressenti lors de l'utilisation de React Native Web. Il a ensuite essayé de représenter React Native sur le web comme étant «le web d'abord». Après avoir parcouru un tas d'expériences et de projets intéressants, il a présenté React Native DOM . Il se trouve que sa présentation était écrite en elle. Donc nous avions vu une démo tout le temps ?! Il a montré à quel point il est facile de travailler sur le débogage de vos applications avec une démo très dramatique / drôle.

Une autre application qu'il a préparée était une impressionnante application de balayage de code QR. scanne son badge de conférence. Il a fermé son discours avec un rappel de ne pas utiliser réellement son projet (du moins pas encore) et de venir travailler dessus avec lui!

Faire le bien (à gauche) Choses – Contenu directionnel dans Réagir: Maja Wichrowska [19659006] Maja a commencé avec une histoire d'amour qui se termine assez rapidement car airbnb ne supportait pas le texte arabe. Ne vous inquiétez pas, sa conversation a été basée sur la fixation de ce que l'histoire d'amour pourrait avoir une fin heureuse! D'abord elle a discuté des nombreuses raisons pour lesquelles on devrait soutenir le texte de droite à gauche au-delà de ce que c'est la bonne chose à faire (parce que c'est le cas!). Une chose qui se dressait sur le chemin était de comprendre comment prendre en charge également le contenu bidirectionnel, y compris le style, les icônes et les images. Maja a parlé d'une bibliothèque produite par son collègue, réagissent avec la direction ce qui est un excellent outil – mais ils avaient besoin de quelque chose de plus maintenant. La salle a eu une réaction, difficile de dire qui était pour et qui était contre, quand Maja a annoncé que leur solution actuelle était CSS-in-JS ?. Elle nous a ensuite parlé des avantages, des inconvénients et des exigences de leur implémentation.

Voici les liens pour le code qu'ils ont utilisé (y compris la géniale bibliothèque Kent C. Dodds RTL): réagissent avec les styles & rtl-css-js . Ils n'ont pas encore lancé leur solution mais vont le faire bientôt!

Le plaisir des systèmes de type runtime: Michel Weststrate

Michel a commencé cette discussion par une belle histoire qui alignait les échecs de Napoléon avec des hypothèses de type.

Il a indiqué où le manque de code ou d'hypothèses de programmeur avec des types pourrait vous mener dans une bataille perdue de votre propre. Michel nous a rappelé que les vérificateurs de type peuvent vous aider à sortir des tranchées de codage. Ensuite, il a plongé dans les types en temps réel et a continué avec quelques démos.

Après avoir passé en revue plusieurs types comme direct, littéral, union, etc. Il a couvert leurs inconvénients mais nous a donné d'autres stratégies et options. En terminant, il cite une dernière fois Napoléon:

"Les amateurs discutent de tactiques; les professionnels discutent de la logistique. "

Les composants universels: Kurtis Kemple et Samantha Bretous

Kurt et Samantha ont commencé par nous expliquer" ce qui fait une composante universelle Ils ont expliqué comment il devait être réutilisable sur toutes les plateformes, avoir une API bien conçue et être disponibles pour toutes les applications. Ils ont ensuite discuté des complications en faisant un composant universel pour comprendre pourquoi chaque composant doit être un composant universel. Je plaisante) ils ont couvert les avantages pour nous ramener. Kurt a convaincu Samantha d'utiliser des composants universels à ce stade, ce qui est assez chanceux car la prochaine partie de leur conversation était Samantha nous apprendre à commencer. Ils ont parcouru chaque étape, y compris le favori de tout le monde: faire de la documentation. Ils voulaient souligner un point important pour nous assurer de:

"Tout le monde est à bord et ils savent ce que vous faites. Ce n'est pas seulement une décision technique. "

Leur suggestion était de faire un exemple pour montrer aux parties prenantes, aux gens du produit et aux concepteurs comment vous utiliseriez et bénéficieriez des composants universels. Enfin, la paire nous a aidés à comprendre comment se développer en isolation. Puis ils ont couru une démo de storybook.js qui peut être utilisé sur n'importe quelle plateforme. Avant de conclure avec la démo, ils ont discuté de l'optimisation et du contrôle de version.

C'est l'heure de la foudre!

Il y a eu de très bonnes discussions couvrant tout, de la collecte déclarative de données à la performance web. Au lieu de tous les énumérer ici, allez à React Europe pour les vérifier par vous-même ?.

Fin du Jour 1

Quelle belle journée à Paris pour les amoureux de Réagir ?. Le premier jour de la conférence s'est terminé avec un dîner, des boissons et beaucoup de rencontres. Ne soyez pas trop triste, il reste encore une journée de React Europe à venir! Revenez ici pour un autre guide GIF pour vous dire tout à ce sujet!

Avez-vous dit V1 de Kendo UI pour Réagir?

Pourquoi oui je l'ai fait, vous êtes si astucieux ?! Comme, Carl, mon super collègue, dit: «Nous sommes des inconditionnels pour un excellent produit.» Donc, oui, nous avons eu des composants spécifiques à React depuis janvier de cette année, mais nous voulions faire Bien sûr, nous avions une bibliothèque stellaire à sortir pour notre V1.

Nous faisons des webinaires en direct à ProgressNEXT les 30 et 31 mai, où nous allons plonger dans les détails de tout ce que nous publions. Le webinaire spécifique à l'UI Kendo est le 31. Enregistrez-vous ici pour le vérifier, ou bien prenez-le sur notre chaîne YouTube YouTube si vous manquez le show en direct:)