tech deep dive.
React 18: what’s new?
React Live 2022 – We mochten weer!!
De ochtend van de eerste dag van april. Sneeuw! De hoop op heerlijk lenteweer hebben we al eerder laten varen, maar dat het zo bar zou zijn hadden we niet verwacht. Mijn collega Indie Peeters en ik ploeteren over besneeuwde wegen langs het IJ, tegen de ijzige wind in die vrij spel heeft over het water. Met de capuchons van onze jassen zo ver mogelijk over ons hoofd getrokken, zijn we op weg naar Theater Amsterdam.
Ondanks de kou zijn we enigszins opgetogen. Na twee jaar van thuiswerken, digitale meetings en het toch al vele beeldschermwerk van het leven van een developer, mogen we weer eens op pad. Eindelijk weer een live evenement en gelijk één waar we heel veel zin in hebben!
Over React Live
React Live is een jaarlijkse conferentie en onderdeel van meerdere conferenties onder het label ‘Frontend Love’. De eerste en gelijk laatste editie van React Live die ook daadwerkelijk in levende lijve was (2020 was live, maar online) dateert alweer van 2019. Destijds mochten onze collega’s Roel en Rudolph namens Whyellow op pad. Hun ervaringen van toen hebben ze met hun collega’s gedeeld in een FYBB en in een blog.
Dit jaar aan ons dus de taak onze inzichten te delen, maar wel in een iets ander jasje. Bij Whyellow hebben we onze kennis inmiddels ondergebracht in Circles, waaronder de genoemde Front-end Circle die zich (nomen est omen) richt op front-end development. Op dat vlak is React de belangrijkste techniek binnen Whyellow. De Front-end Circle zal de komende tijd dieper mogen duiken in de opgedane kennis en er mooie nieuwe oplossingen mee gaan maken!
Ik neem jullie nu vast mee in onze eerste inzichten n.a.v. React Live 2022.
React 18 én nog veel meer over front-end development
Na een knallende opening wordt de conferentie afgetrapt door Maggie Appleton. Ze gaat in op het gebruik van visuals voor communicatie. Ofwel: gebruik plaatjes in plaats van tekst, want dat snappen we tenminste. Het zijn dan ook wel erg mooie plaatjes die ze laat zien!
Hiermee zet Maggie een trend voor de dag: niet enkel een deep dive in de wereld van React, maar een brede verkenning van alles wat met front-end development te maken heeft. React vormt hierbij de rode draad en slechts bij sommige sprekers draait het enkel en alleen om React.
Zomaar een (grote) greep uit de onderwerpen die voorbij zijn gekomen:
Een eerste kijk in wat versie 18 van React te bieden in de vorm van Concurrent UI en React Server Components, maar ook Web3, Search Engine Optimization (SEO), Accessibility, tooling in de vorm van Storybook en CodeSandbox.
Een tipje van de sluier over het nieuwste van het nieuwste, een soort teaser dus. Precies wat we nodig hebben! En die echte verdieping? ….dat kunnen we zelf! Nu is het aan onze front-end mensen om eruit te pikken wat wij kunnen gebruiken om ons werk nóg mooier te maken.
Maar voor nu voor jullie alvast een (belangrijk) tipje van de sluier….de nieuwe versie van React!
React 18 (Waarschuwing! Developer modus : aan)
React Live vond plaats direct na de officiële release van React 18. De presentaties over Concurrent UI (door Nikhil Sharma) en Server Components (door Aashima Ahuja) sloten hier direct bij aan. Hoewel Server Components nog slechts een Alpha release betreft, zal deze feature later in een minor versie definitief onderdeel worden van React 18.
Concurrent UI: minder vaak renderen en minder DOM-manipulaties
Beide features komen vooral voort uit de behoefte aan snelheid en een betere gebruikerservaring. Concurrent UI doet dit door zaken concurrent uit te kunnen voeren naast de main thread, waardoor de UI responsive blijft.
Ooit is React begonnen met het renderen in de Virtual DOM, wat al behoorlijke performance-winst opleverde. Met Concurrent UI is een volgende stap gemaakt om dit renderproces te kunnen onderbreken om nieuwe wijzigingen tijdens het renderproces toe te kunnen voegen. Alles met als doel: minder vaak renderen en minder DOM-manipulaties.
Meer informatie hierover op reactjs.org.
Server Components: nog meer performance winst
Server Components is een volgende stap in Server Side rendering. Het idee van Server Side is dat de client een (deel van een) reeds gerenderde pagina binnenhaalt, waardoor er geen Javascript meer uitgevoerd hoeft te worden. Het resultaat …voila…performance winst.
Met Server Side rendering, zoals dat al bestond, ging dit enkel om een compleet stuk HTML. Server Components is hierbij een verbetering, omdat hiermee de interactiviteit van een client side applicatie geheel behouden blijft. Componenten die relatief statisch zijn, kunnen server side worden gerenderd en aangevuld worden met client side componenten om de interactieve gebruikerservaring te behouden. Een mooie toevoeging aan React waar we erg naar uitkijken!
Meer informatie hierover op reactjs.org.
Tot slot
Dit waren nog maar enkele interessante zaken die aan bod zijn gekomen tijdens React Live. Zoals gezegd is het nu aan de Front-end Circle om hier heel hard mee aan de slag te gaan en voor onze klanten in te gaan zetten.
We hebben er zin in!
Meer weten over de mogelijkheden van React 18 voor jouw project of zelf meebouwen aan mooie projecten? Ik beantwoord je vragen graag!
Deze blog is geschreven door Joël de Jong, software architect bij Whyellow.