Kom met ons mee naar de React Conference Live!

Benieuwd hoe het is om op de React afdeling binnen Social Brothers te werken? Wij vinden het belangrijk dat onze teams zich blijven doorontwikkelen en op de hoogte zijn van de laatste trends en ontwikkelingen. Daarom is ons team een aantal weken geleden naar de React Conference Live in Amsterdam is geweest. 17 professionals hebben hen meer verteld over het nieuw ontwikkelde React framework en technieken. Lees snel verder om meer te lezen over deze dag. 

Good morning 8:30 – 11:15

We begonnen onze dag om 8.30 in het Theater Amsterdam. Een erg mooie locatie, centraal gelegen in Amsterdam aan het water. Bij binnenkomst stond de koffie, lekkere broodjes en een gratis goodies al klaar. Na een bakje koffie en lekker ontbijtje waren wij helemaal klaar om de dag te beginnen, we hebben namelijk een lange dag voor de boeg van 9.00 tot 18.10.

Na een korte introductie van de organisatie, werd het spits afgebeten door de eerste spreker Maggie appleton, Lead Designer bij Hash. 

Zij vertelde over de rol van psychologie bij programmeren en hoe het visualiseren van logica in code enorm kan helpen om het beter te begrijpen. Code is gemaakt voor computers om te begrijpen, niet per se voor mensen. Mensen denken veel meer in context en voorbeelden, terwijl computers in letters en getallen denken. Hieruit hebben we een aantal tools meegenomen welke we kunnen gebruiken om complexe logica uit onze applicaties te visualiseren om zo onze projecten beter te documenteren. Uit deze talk hebben wij een aantal handige tools meegenomen. In de toekomst willen we deze tools gebruiken om complexe logica uit onze applicaties te visualiseren, zo kunnen we onze projecten beter documenteren.

Vervolgens was het woord aan Debbie O’Brien, Head Developer Advocate bij Bit. Zij vertelde ons hoe de development wereld zich heeft ontwikkeld van een grote allesomvattende codebase, naar mooie, kleine repositories d.m.v. microservices. Front-end development blijft hier echter nog in achter, waardoor front-end nog steeds met enorme codebases werkt zonder mogelijkheid om je project op te delen in kleine, standalone mini-projecten. Oplossingen hiervoor zijn bijvoorbeeld monorepos of NPM-libraries, maar hier ontbreekt goede tooling nog in, waardoor deze oplossing ook niet erg schaalbaar is. De oplossing hiervoor: bit.dev. Een tool waarmee je stukken van je project heel gemakkelijk kunt publiceren naar een NPM-library, deze los kunt onderhouden en een duidelijk overzicht hebt van alle losse elementen/componenten in de library. Wij willen deze tool zelf ook gaan toepassen. De tools kan ons ondersteunen bij het verbeteren van oudere projecten, zonder dat dit al te veel onderhoudstijd kost. 

Next up, Sid Kshetrapal, Developer bij GitHub. De titel van zijn talk? “Walking the line between flexibility and consistency in component libraries“. Wat niks anders betekent dan, hoe ontwikkel je stukken code voor een project die enerzijds consistentie bieden en anderzijds de ontwikkelaar vrijheid biedt om eigen aanpassingen te doen. Een probleem waar ontwikkelaars dagelijks tegenaan lopen. Als voorbeeld gebruikte hij een case study van een refactor traject van een element bij GitHub. Onderstaande screenshots zijn allemaal gebaseerd op hetzelfde component, met dezelfde functies; een lijst tonen waarin ieder element in die lijst iets van een tekst en/of icoon toont met een actie wanneer je erop klikt. Hij heeft kunnen laten zien hoe dit mogelijk is met hetzelfde component: erg flexibel, maar toch consistent.

Na deze inhoudsvolle talk was het de beurt aan Yann Braga, Software ontwikkelaar bij Chromatic. Chromatic is het bedrijf achter Storybook, de tool die wij gebruiken om onze componenten te documenteren en visualiseren in een soort handboek. Yann vertelde ons hoe Storybook niet alleen gebruikt kon worden voor het visueel testen, maar ook voor interactief testen. Je kunt namelijk interactie-tests uitvoeren in Storybook, waarbij je bijvoorbeeld aangeeft dat de gebruiker op een dropdown klikt en je vervolgens verwacht dat er een submenu zichtbaar is. Het mooie van Storybook hierbij is dat je in een browser omgeving precies kan zien waar de test-agent op klikt en waar het mogelijk ook fout gaat. Dit vult echt het gat tussen unit-testing en end-to-end testing en gaan wij zeker meenemen in onze projecten. 

Vervolgens was het de beurt aan Luc van Kampen, Front-end consultant bij Passionate People. Luc vertelde ons over hoe authenticatie er uit kan zien in de toekomst van het internet. Na Web 1.0 en Web 2.0 staat namelijk Web 3.0 voor de deur, wat volledig draait om een gedecentraliseerd netwerk. Iedere deelnemer van dit netwerk is tegelijk een hoster van dit netwerk, in tegenstelling tot het huidige web waarbij je maar één hostingserver hebt. Dit biedt hele andere mogelijkheden tot dingen zoals authenticatie, waardoor je mogelijk nooit meer een wachtwoord hoeft in te voeren bij websites. Een interessante visie, maar voor nu nog te vaag om mee te nemen in onze projecten.

Ronde twee 11:50 – 13:30

Na de koffie kwam Nader Dabit, Developer Relations at Edge & Node. Hij vertelde ons ook over Web 3.0 als de toekomst van het internet, maar ging daarbij meer in op de tools en stack die gebruikt werd om hier applicaties op te ontwikkelen. Voor de front-end kan nog steeds React gebruikt worden, maar om met de blockchain te communiceren zijn weer hele andere tools beschikbaar. Ook een leuke en interessante talk die we gaan meenemen in de toekomst, maar voor nu helaas nog te vaag. 

Vervolgens kwam Simeon Griggs, Senior Solutions Engineer bij Sanity, aan het woord. Hij vertelde ons over real-world use-cases van het CMS Sanity, en welke lessen er zijn getrokken uit het  onboarden van grote merken zoals Spotify. Hierbij legde hij de focus vooral op het vertalen en structureren van content. Vertalen kan bijvoorbeeld op het niveau van een publicatie maar ook op veldniveau. Daarnaast liet hij zien hoe modellen geconfigureerd worden binnen Sanity en dat dit voornamelijk via code gaat. Dit is een groot voordeel voor developers, aangezien klanten dan niet bij de configuratieopties kunnen. Uiteindelijk een leuk inzicht gekregen in dit CMS, maar onderaan de streep was deze talk vooral een verkooppraatje. 

Na Simoen, was de beurt aan Aashima Ahiuja, Front-end ontwikkelaar bij Miro. Zij vertelde ons over hoe het server-side renderen van React Applicaties steeds makkelijker wordt door Server Components, een tool die vanuit React beschikbaar is. Wat achtergrondinformatie: het renderen van je React applicatie zorgt ervoor dat je direct HTML teruggeeft aan de gebruiker, in plaats van alleen een hoop Javascript. Dit zorgt er weer voor dat zoekmachines zoals Google  de website goed kunnen indexeren. Standaard levert React namelijk alleen javascript code, maar met tools als NextJS kan dit makkelijk op de server gerenderd worden. React Server Components spelen hierop in doordat de ontwikkelaar nu exact aan kan geven welke code voor de server en welke code voor de cliënt gebruikt gaat worden. Zo kun je bijvoorbeeld het formatteren van een datum enkel op de server doen, zodat dat weer een hoop Javascript aan de cliënt scheelt. Deze feature is nu nog in Alpha, maar de toegevoegde waarde is al enorm. Dit is zeker iets wat we in onze projecten gaan meenemen.

Hierna was het woord aan Ives van Hoorne, maker van CodeSandbox. Eerst even wat achtergrondinformatie: CodeSandbox is een tool waarmee je kleine delen code gemakkelijk kunt delen, en de volledige omgeving voor je wordt opgezet. Je hele React/NextJS pakket wordt geïnstalleerd en gehost door CodeSandbox, jij hoeft alleen wat code te schrijven en te delen. CodeSandbox Projects is de overtreffende trap hiervan, waarbij je gehele projecten kunt hosten op CodeSandbox. Je kunt dan gemakkelijk projecten delen met collega’s en hier samen – tegelijk – aan programmeren. Dit allemaal via een web interface zodat je zelfs tijdens je treinreis op je iPad je code kunt inzien en wijzigen. De feature is nu nog in gesloten alpha, maar wij hebben plekje weten te bemachtigen op de lijst van testers! Deze tool gaan we dus snel uitproberen.

Na de lunch 14:30 – 15:55

Na de lunch kwam Michael Jackson aan het woord, Co-Founder & CEO bij Remix. Remix is een library/tool waarmee je makkelijk React op de server kunt laten renderen, net zoals bijvoorbeeld NextJS doet. Hij vertelde ons over het design principe achter deze tool en waarom dit het leven van developers zoveel makkelijker maakt. Een erg inhoudsvolle talk waarbij we toffe inzichten hebben gekregen in het Remix framework. Onze toolset staat redelijk vast dus we zullen er niet snel op overstappen, maar het heeft ons goede inzichten voor de toekomst gegeven. 

Hierna was het woord aan Medhat Dawoud, front-end consultant bij Passionate People. Hij toonde ons een aantal makkelijke en snelle performance wins in React. Ook liet hij zien welke tooling er beschikbaar is om dit inzichtelijk te maken. De grootste performance wins zaten in het selecteren van libraries die kleiner zijn dan de alternatieven. Hier is het van belang om altijd de kleinst mogelijke optie te kiezen, zodat de downloadgrootte van het javascript bestand zo klein mogelijk blijft. Andere manieren om de performance te verbeteren zijn technieken om enkel elementen te renderen die op dat moment in je scherm zichtbaar zijn. Normaal gesproken renderen browsers namelijk een hele pagina, maar dat is zonde van de moeite wanneer je maar een klein deel in je venster ziet. Tot slot liet Medhat nog zien hoe je je code kunt splitsen in losse kleine bestanden in plaats van een grote. Dit zorgt ervoor dat je alleen de code download die je dan nodig hebt, en niet alles in één keer.

De laatste talk voor de pauze werd gehouden door Anuradha Kumari, front-end consultant bij Passionate People. Hoe kun je websites beter maken door aan accessibility te denken? Het voorbeeld dat zij ons gaf, zorgt ervoor dat screenreaders makkelijker de taal van je website kunnen detecteren en daardoor ook makkelijker kunnen voorlezen. Een goed inzicht, maar niet heel diepgaand.

Laatste rondes na de middagbreak 16:30 – 18:10

Tijd voor Roy Derks, Developer Experience bij Hackteam, waar we meer geleerd hebben over “Back-end for front-end” principes. Hierbij maak je een kleine back-end die specifiek bedoeld is voor één front-end (een back-end is normaliter juist heel breed opgezet). Hiermee kun je een stuk logica van de front-end weghalen en een API maken die hiervoor op maat gemaakt is. Je lost een slechte interface van de API voor jouw specifieke website op. Het nadeel is wel dat je alsnog een stuk logica moet schrijven om dit mogelijk te maken, waardoor je het probleem dus eigenlijk een stapje opschuift. Wel is een back-end een stuk meer geschikt voor dit soort logica dan een front-end, dus al met al een nuttige talk waarvan we zeker wat gaan meenemen naar onze projecten.

Fukuzaki, Developer Relations Engineer bij Storyblok gaf nieuwe inzichten over hoe hun CMS ingezet kan worden voor het vertalen van content. Ook hierbij was het weer een beetje een verkooppraatje, alleen met het verschil dat wij Storyblok al een lange tijd op onze radar hebben staan door de toffe functionaliteit die dit CMS biedt. Wat resulteerde in een korte workshop over de CMS van onze interesse. 

Als een-na-laatste van de dag was Dwane Hemming aan het woord, hij is Javascript Developer Advocate bij Vonage. Hij vertelde ons over Web Components. Dit wordt namelijk al langer gezien als de toekomst van webontwikkeling aangezien het er voor zorgt dat je component-gebaseerd kunt werken in de browser, iets wat normaal alleen kan met frameworks als React. Hij legde de focus op de huidige staat van Web Components en hoe dit samen kan werken met React, maar ook vooral hoe het beter kan. De conclusie, het is slecht te gebruiken in combinatie met frameworks als React. Jammer, want dat maakt het voor ons onbruikbaar. Het biedt wel weer toffe inzichten over hoe we deze techniek ooit mogelijk kunnen adopteren.

Als allerlaatste spreker hebben we geluisterd naar Nikhil Sharma, SDE design systems bij Postman. Hoe kan je de UX van React applicaties gemakkelijk verbeteren door indicaties van loaders op een efficiënte manier in te zetten. Dit klinkt simpel, maar het tonen van de staat van de applicatie aan de gebruiker is een van de belangrijkste UX-onderdelen. Daarnaast wil je natuurlijk ook de totale laadtijd van je applicatie zo laag mogelijk houden, waar je ook weer technieken voor hebt. Nikhil ging hierbij vooral in op de nieuwste update van React en welke features hierin zitten die helpen bij het oplossen van deze problemen.

Met deze talk kwam er een einde aan een toffe, leerzame dag vol met informatie. Er werd nog een kleine afterparty georganiseerd bij het Theater, maar ons team is nog even van Amsterdam gaan genieten. Al met al een mooie dag, en we kijken al uit naar volgend jaar!