< terug naar nieuws
dinsdag 16 april 2019

Dennis bezocht React Amsterdam 2019

De reis naar Amsterdam begon al vroeg om op tijd aan te komen bij de Kromhouthal.

De conferentie begon met een gezamenlijk ontbijt waarna er werd toegelicht wat het programma van de dag zal zijn. Hierbij was het geluid erg slecht en in het begin nauwelijks te verstaan. Maar in de loop van de dag werd het telkens beter en waren de presentaties wel goed te volgen.

Er waren 2 tracks om te volgen, “General React” en “React Native”.
Ik zelf heb op het moment weinig te doen met React Native en ben daarom vooral bij de general track geweest. Het overgrote deel van de groep koos ook voor de general track en deze groep werd steeds groter.

Pair programming met +- 1400 mensen

Bij de meeste presentaties werden er verschillende stukken code gedemonstreerd en/of samen met het publiek ingevuld. Dit was erg interessant om duidelijk te maken en uit te leggen hoe iets werkt. Mensen konden hier ook input op leveren en dan krijg je een soort pair programming.

React Hooks

Een terugkomend iets in de verschillende presentaties was React Hooks. Hierover was geen specifieke talk maar bij iedere presentatie kwam wel aan bod dat dit een erg goede toevoeging is in react versie 16.8.

Hooks zijn functies die je laten inhaken op de React state en lifecycle features vanuit een functie component. Hiermee is het mogelijk om react te gebruiken zonder classes te schrijven.

Er zijn een aantal standaard hooks zoals useState maar het is ook mogelijk om zelf hooks te maken.

De presentaties

Als eerst waren er 2 presentaties over basis React. Eerst gaf Kent C. Dodds een presentatie over de React fundamentals, hij gaf tips over het gebruik van React. Hij zegt dat als je begrijpt wat de dom precies doet en waarom, bijvoorbeeld door te bekijken hoe JSX compiled met babel, het beter te begrijpen is wat React doet / zou moeten doen waardoor je betere code schrijft en het ook makkelijker te debuggen is.
Hier zijn slides: https://github.com/kentcdodds/requisite-react/tree/master/slides.

Hierna vertelde Siddharth Kshetrapal over refactoring in React. Dit was vooral basiskennis, maar ik heb er wel een paar dingen van opgestoken.

Wat Siddharth vooral zei is: 

  • Schrijf eerst unittest voordat je gaat refactoren, zo zorg je dat de componenten na de refactor nog steeds dezelfde werking hebben als daarvoor;
  • Zorg dat de functies en logica binnen het eigen component blijven, bijvoorbeeld als je een formulier component hebt moet de onSubmit functie ook binnen dat component zitten, zo blijft het formulier component goed herbruikbaar;
  • Gebruik children i.p.v. een prop voor iets wat generiek is, het voordeel hiervan is dat de gebruiker van het component meer flexibel is zonder dat hij het component zelf zou moeten aanpassen.

De door Siddharth gebruike slides zijn te zien op: https://sid.studio/refactoring

Daarna waren er twee presentaties over React en design:

  • Andrey Okonetchnikov vertelde over wat design systems zijn en hoe deze de brug tussen een developer en een designer kleiner maken. Airbnb heeft een tool ontwikkeld “React sketchapp” (https://airbnb.design/Painting-with-code) waarmee react componenten in sketch gerenderd kunnen worden. Dit maakt het mogelijk om met deze componenten een design system op te bouwen;
  • Mark Dalgleish van Seek uit Australië vertelde daarna ook over hoe tools designen voor react makkelijker kunnen maken.

    Hij vertelde over een tool genaamd “Playroom” (https://github.com/seek-oss/playroom) waarmee je simpel in meerdere iteraties, on the fly een design system kan ontwikkelen met bestaande componenten.

Deze tools lijken mij erg interessant en het is zeker iets waar ik verder in ga duiken om te kijken of we dit kunnen gaan inzetten bij TLN waar ik momenteel gedetacheerd ben.

Max stoiber werkt tegenwoordig bij GitHub, doordat zijn laatste startup (Spectrum) door GitHub is overgenomen. Hij kwam vertellen over de technologie keuzes en geleerde lessen bij het ontwikkelen van Spectrum.

Spectrum is een chat applicatie voor developers. Lessons learned zijn:

  • Denk goed na bij het kiezen van “core” technologieën die later lastig aan te passen zijn. Bijvoorbeeld een database is later lastig te veranderen als deze helemaal geïntegreerd is in de applicatie en data bevat;
  • Ben transparant naar je gebruikers zodat zij al feedback kunnen geven op jou ideeën. Bijvoorbeeld: Spectrum is een chat app voor developers, het ontwikkelteam had een erg ingewikkelde WYSIWYG-editor ontwikkeld, wat erg tijdrovend was. Terwijl developers er eigenlijk niet op zaten te wachten en het prima vinden om markdown te gebruiken (veel simpeler en sneller te ontwikkelen);
  • Let op bij het gebruik van cutting edge technologieën, gebruikers zitten er niet altijd op te wachten en het risico dat een technologie “ten onder” gaat en er geen support meer is is vaak erg groot;
  • Gebruik bestaande technologieën, ga het wiel niet zelf nogmaals uitvinden. Andere partijen hebben vaak alle edgecases getest en uitgewerkt en zijn hier beter in omdat ze gefocust zijn op dat ene product terwijl dit product mogelijk een klein onderdeeltje is van jou product. Bijvoorbeeld een WYSIWYG-editor, er zijn er genoeg die prima functioneren, bij het zelf bouwen zijn er zoveel dingen waar rekening mee gehouden moet worden, bijvoorbeeld leesbaarheid en mobiel.

Peggy Razis van Apollo vertelde wat over Developer experience en vooral gericht op GraphQL.

GraphQL is voor communicatie tussen client en api. En het helpt developers om meer productief te zijn.

Voordelen van het gebruik van GraphQL zijn:

  • Het voorkomen van teveel fetchen. Dit zorgt ervoor dat de applicatie langzamer word en ook voor een slechtere developer experience omdat hiervoor veel custom code gemaakt moet worden;
  • Kleinere payload;
  • Minder client/server “roundtrips”.

Ze geeft aan dat vrolijkheid van een developer en developer experience belangrijk is. 

Ze is ook voorstander van het gebruik van typescript omdat dit instant feedback geeft. Hierbij vroeg ze wie in de zaal gebruik maakte van typescript en dat was ongeveer 10% van de mensen.

Bij haar werkgever Apollo hebben ze een platform ontwikkeld, ApolloGraphQL (https://www.apollographql.com/). Dit bevat open source devtools en cloud services om de developer experience te verbeteren.

Elizabeth Oliveira vertelde over SVG. Ze was erg muzikaal en presenteerde een aantal projecten waarbij zij SVG heeft ingezet om het er cooler uit te laten zien. Ze demonstreerde een project waarbij ze SVG's heeft gebruikt om een cool design te maken in react (https://cassette-tape.now.sh/). Dit is een cassette tape waarmee je geluid kunt opnemen in de browser om muziek mee te maken, ze demonstreerde dit door zelf te gaan rappen. Dit was erg cool!

Ze noemt SVG: “afbeelding met superkrachten”. Je kan een SVG op verschillende manieren gebruiken binnen React:

  • Importeren als React component;
  • Binnen de JSX defineren. Dit heeft als voordeel dat er geen extra http request word gedaan en je er allerlei dingen van JSX mee kunt doen, zoals props toewijzen e.d.

Al met al een erg inspirerende dag waarvan ik een hoop heb opgestoken!

Hierbij de live-streams van alle talks om ze nog eens terug te kijken: General track en de Native track

< terug naar nieuws