React Amsterdam 2019

Stinkende code en gemeenschappelijke taal?

Yuraymar Stewart
Apr 17 · 5 min read

Refactoring React

Tijdens de ‘Refactoring React’ talk heeft Siddharth Kshetrapal ons nieuwe inzichten gegeven over patronen en strategieën voor het bouwen van component in React. Deze worden hieronder toegelicht.

Gedrag en Interactie 🔄

Vaak benoemen wij, de developers, de interactie van een component in plaats van het gedrag van een component. Siddharth vindt dat het gebruik van HTML-conventies voor event handlers een goed idee is, maar dat dit voor aannames zorgt.

Overerven van props ⏬

Met React is het mogelijk om properties van componenten door te sturen naar andere componenten. Sid geeft aan dat dat de volgorde van het doorsturen van deze properties van belang is.

Geen props in state? 🤷‍♂️

Sidd geeft aan dat het onnodig is om properties te mappen aan de state.

Wat nemen we mee? ✅

Door Sidd hebben we geleerd dat er bij het programmeren toch situaties zijn waar er goed over de implementatie nagedacht moet worden. Doen we dit niet, dan kan dat leiden tot zogenaamde ‘code smells’. Dit betekent niet dat er een bug is, maar dat er mogelijk iets mis kan gaan.

Gemeenschappelijke taal

Als developers weten we als geen ander dat het wel eens een uitdaging kan zijn om met een designer te communiceren. Met dit gedachtegoed stelt Andrey Okonetchnikov een concept voor: een Design System. Dit beperkt namelijk het maken van oneindige variaties van User Interface elementen.

Taal > Techniek 🗣

De grootste uitdaging hier is dat designers een andere taal hebben. Designers ontwerpen mooie afbeeldingen/illustraties, maar deze kunnen niet zonder enige moeite omgezet worden naar een UI. Designers gebruiken polygons, vierkanten, driehoeken en rechthoeken, terwijl ontwikkelaars andere talen gebruiken, zoals bijvoorbeeld: HTML, CSS en JS.

Hoe? 🤔

De oplossing om de communicatie tussen designers en developers te verbeteren c.q. te elimineren, is om een tussentaal te implementeren, namelijk: UI Primitives. Wij bouwen op basis van UI Primitives, dus het is dan ook logisch dat we ook dusdanig communiceren.

Waarom? 🧐

Door UI Primitives te gebruiken overbruggen we de taal van designers en van developers. Er ontstaat duidelijkheid en overzichtelijkheid voor de designer, developer en de eindgebruiker. Ook is het dan mogelijk om gebruik te maken van interactieve UI-kits. Deze kunnen met behulp van plug-ins uit tools zoals Sketch geëxporteerd worden. Hier kunnen designers hun ontwerpen ook in verschillende “states” testen zonder ook maar één regel code te schrijven.

Gebruik van HTML-elementen
Gebruik van UI Primitives

Wat nemen we mee? ✅

Door Andrey hebben we geleerd dat het voornamelijk gaat om communicatie tussen designers en developers en dat wij deze communicatie kunnen verbeteren door UI Primitives te gebruiken in plaats van HTML elementen. React biedt ons namelijk deze flexibiliteit. Bij gracious implementeren we dus vanaf nu UI Primitves in onze React projecten en we maken gebruik van interactieve UI-kits.

graciousagency

We are gracious,. We have more than ten years of experience in the digital industry. We excel at creating, building and promoting awesome brands, in other words create synergy between the disciplines design, development and marketing.

471

471 claps
Yuraymar Stewart

Written by

Front-end Developer at gracious

graciousagency

We are gracious,. We have more than ten years of experience in the digital industry. We excel at creating, building and promoting awesome brands, in other words create synergy between the disciplines design, development and marketing.