Voor veel van de toegestroomde aanwezigen was dit überhaupt een mijlpaal. Voor hen was dit namelijk de eerste TechNight in het nieuwe pand van Developers.nl. Iedereen keek zijn ogen uit, waarna de bar al snel gevonden werd. Nadat Maarten de avond voor geopend had verklaard, nam spreker Roy Derks het stokje van hem over.

Voor degenen die hem niet kennen hierbij een kleine intro: Roy is een Frontend enthousiasteling en voornamelijk gespecialiseerd in Javascript. Hij spreekt op verschillende conferenties en geeft zowel starters als advanced trainingen over React en React Native. React Native is net als zijn grote broer ontwikkeld door Facebook.

Wat in de zomer van 2013 begon als een hackathon project groeide binnen de kortste keren uit tot een van populairste open-source frameworks. Developers kunnen in korte tijd een mobiele app tevoorschijn toveren, zonder hierbij gespecialiseerd te zijn in native IOS of Android programmeertalen. Toch zal het voor de meeste niet web-developers nog even wennen zijn. Javascript is gegroeid door de jaren heen en eindelijk volwassen geworden. Ecmascript 6 is ontwikkeld, waardoor Javascript niet langer het ’scripttaaltje’ is. ES6/ES2015+ features zijn dan ook volledig toe te passen in de ontwikkeling van een React Native applicatie.

Roy start zijn talk met uitleg over Expo. Expo is een open source tool die geheel gebouwd is voor de ontwikkeling van React Native apps. Native options, waaronder camera en push notificaties, behoren tot de mogelijkheden. Door middel van de Expo app, kun je gemakkelijk een React Native applicatie op je mobiel tonen en dat is precies waarvoor Roy het gebruikt. In tegenstelling tot React maakt React Native geen gebruik van web components, maar native components. Een aantal bekende zijn het View en Text component. Zoals de naam al aangeeft, wordt het View component als basis gezien van elke applicatie. Dit was in native app ook het geval zoals met IOS, de UIView en bij Android de android.view. In een view kunnen weer components geplaats worden zoals het Text component. Content opmaken, zoals met css werkt net iets anders in React Native. Er kan inline styling mee worden gegeven in object notatie. Een voorbeeld hiervan is: style={width: 50, height: 50, backgroundColor: 'powderblue'}. Zoals je kunt zien heeft het veel weg van css, maar het is net niet hetzelfde met de camelCase notatie. In delen van grids kan het ook gedaan worden, omdat in React Native gebruik gemaakt kan worden van Flexbox. Hiermee is het maken van indelingen een peulenschil geworden. Naast de basics laat Roy ons ook kennis maken met wat meer advanced zaken, waaronder state management en de mogelijkheden tot het ophalen van data uit een api. Al met al een hoop stof om zelf mee aan de slag te gaan en dat was zijn bedoeling. Hij laat ons op de valreep ook nog zien hoe we een React Native app kunnen builden in zowel Android als IOS. Hiermee kwam er bijna een einde aan de TechNight, maar niet voordat iedereen van een drankje was voorzien.