tech deep dive.

React Live 2019: deze nieuwe inzichten kregen wij.

Leeswaarschuwing

In onze ‘tech zone’ belichten we de wat meer technische kant van onze kennis, ervaringen en meningen. Is dit te technisch? Lees dan onze andere blogseries waarin we de business-kant en praktische toepassingen van slimme technologieën belichten. Toch een korte beschrijving voor de iets minder technisch onderlegde lezer: 

Op vrijdag 13 september vond de React Live conferentie plaats in het Theater Amsterdam. Een conferentie met als middelpunt React waar dit jaar maar liefst 13 sprekers hun kennis en liefde voor React hebben gedeeld met de wereld.

Bij Whyellow zijn veel developers enthousiast over React en meer dan de helft van onze frontend projecten is ontwikkeld met behulp van deze techniek. Daarom heb ik met collega Rudolph de kans gekregen om React Live 2019 mee te maken en te zien wat de nieuwste ontwikkelingen zijn op het gebied van frontend development en React.

In deze blog bespreken wij graag de punten die we het meest interessant vonden.

React live 2019 Whyellow blog

Whyellow nieuwsbrief

Nooit meer iets missen van Whyellow? Schrijf je dan in voor onze nieuwsbrief.

Wat is React eigenlijk?

React (ook wel React.js of ReactJS genoemd) is een Javascriptbibliotheek om gebruikersinterfaces mee te bouwen. React werd in 2011 door Facebook ontwikkeld vanuit de behoefte om de code van grote webapplicaties beter beheersbaar te maken. Het was in eerste instantie een intern project en werd gebruikt voor het Facebook- en Instagramplatform. In 2013 introduceerde Facebook React aan het publiek en maakte er een opensourceproject van. Sindsdien groeit het gebruik van React en wordt de bibliotheek door meer dan één miljoen websites gebruikt, waaronder grote namen als Netflix en Uber. React wordt op GitHub onderhouden door Facebook en een community van individuele ontwikkelaars en bedrijven. Bron: Wikipedia

Standardized themes

De eerste spreker (Sid, geen achternaam) heeft in zijn talk genaamd “What goes into building a design system” gesproken over het standaardiseren van thema’s waarin hij aan het begin van een project samen met zijn designer een thema opzet in javascript. Dit thema beschrijft bijvoorbeeld een lijst van kleurcodes die gebruikt mogen worden in het project. Denk aan 10 tinten grijs, 10 tinten rood, 10 tinten blauw, etc.

Omdat het thema ‘gewoon’ javascript is, zijn de kleuren makkelijk te benaderen vanuit je React componenten en kan je heel makkelijk wisselen van styling. Een voordeel hiervan is dat je één centrale plek voor het thema van je applicatie hebt. Hierdoor krijg je dus niet dat  de ene knop net iets donkerder grijs is dan de andere door het gebruik van verschillende hexcodes. Ook zorgt dit ervoor dat discussies met je designer makkelijker worden, omdat je de keuze beperkt en niet meer uit honderden hexcodes hoeft te kiezen.

MobX State Tree (MST)

Veel van de sprekers bij React Live waren erg enthousiast over een library genaamd MobX State Tree. Deze helpt met het bijhouden van je application state. Tot nu toe hebben we bij Whyellow altijd gebruik gemaakt van Redux om onze application state bij te houden. Veel sprekers bij React Live waren echter sterke voorstanders van MST en bevalen dit ook aan. Voordelen van MST zouden zitten in performance en lagere complexiteit/minder code. Dit klinkt natuurlijk als muziek in de oren voor iedere developer en daarom gaan we hier bij Whyellow zeker dieper in duiken.

Performance in React

Yoav Niran, een software engineer van het bedrijf Cloudinary, heeft in zijn presentatie laten zien hoe hij de performance van een React applicatie aanzienlijk kan verbeteren met behulp van een aantal slimme technieken. Hij demonstreerde dit met een kleine applicatie waarin hij een lijst met foto’s toonde die hij had gemaakt gedurende de conferentie.

Telkens als hij een foto selecteerde werd de volledige lijst opnieuw gerenderd, terwijl dit eigenlijk alleen nodig was voor de geselecteerde foto. Hier heeft Yoav laten zien dat het gebruik van list keys erg belangrijk is. React weet dan welk component in een lijst is aangepast en rendeert dus alleen dat component opnieuw. Ook heeft Yoav nog een stukje memoization laten zien waardoor uitkomsten van zware methodes gecached worden en de volgende keer dus sneller uitgevoerd kunnen worden.

Als laatste zou de applicatie ook alleen de foto’s moeten renderen die zichtbaar zijn voor de gebruiker. Dit probleem heeft Yoav opgelost door virtual scrolling toe te passen, voor velen waarschijnlijk een bekend concept. Chrome heeft van een virtual scrolling optie ingebouwd die je aan kan zetten, maar bij andere browsers is dit niet het geval. Yoav heeft tijdens zijn demo zijn eigen virtual scrolling methode geschreven.

Aan de slag

Vol inspiratie kwamen we terug van React Live 2019. In een “fill your brain”-sessie hebben we onze nieuw opgedane kennis gedeeld met collega’s. We gaan zeker met een aantal van de hierboven genoemde zaken aan de slag. Als we iets te melden hebben, delen we dat ook zeker met jullie via de website.

De organisatie van React Live 2020 is al in gang gezet. Uiteraard zal Whyellow ook daar weer van de partij zijn.

Deze blog is geschreven door Roel Guerand en Rudolph Lesire, Developers bij Whyellow.

Weten of Whyellow ook voor jou een geschikte werkgever is?
We maken graag kennis met je.

Maak afspraak