4 Highlights van Frontend Developer Love Conference

Enrise

10 april 2018

Op 15 en 16 februari vond zowel de Frontend Love als de VueJs Amsterdam conferentie plaats in Theater Amsterdam. Topics waren de 3 meest populaire Javascript tools: Angular, Vue en React. Key contributors binnen de scene kwamen aan bod en deelden tips, meningen en informatie over de JavaScript tools, toepassingen en de toekomst. Nu ben ik niet echt geïnteresseerd in Angular, dus mijn focus ging voornamelijk naar React en Vue. Van alles wat ik leerde en meekreeg focus ik me in dit artikel op 4 highlights: MobX, WebComponents, Progressive Web Application en React 16.

MobX

Als je gewend bent om te werken met het mvc-model zoals in Laravel, dan is Redux een hele andere manier van denken. Alle state data bevindt zich in de store en is immutable; actions moeten gedispatched worden als je state data wilt aanpassen en reducers zorgen ervoor dat de wijzigingen als een copy naar de store gestuurd worden, de store update de state en state triggert het renderen van een component in React.

Dataflow van Redux binnen React.

Dataflow van Redux binnen React.

In MobX daarentegen mag je meerdere stores aanmaken, is data niet immutable, kan je binnen je store functies aanmaken die je data muteren en kan je listeners aan properties toevoegen of ‘observers’ om ervoor te zorgen dat views automatisch worden gerenderd als de waarde is aangepast.

links: redux - rechts: mobx

links: redux – rechts: mobx

Doordat het overeenkomt met hoe models en collections worden aangemaakt in andere programmeertalen is het makkelijker om het onder de knie te krijgen dan Redux. Mobx is niet zozeer beter of slechter, maar weer een ander hulpmiddel van state management.

Web Components

Webcomponents worden ondersteund door (bijna) alle browsers en maken het mogelijk om custom HTML-elementen te maken met Vanilla JS, HTML en CSS.

Over het algemeen maak je gebruik van de volgende 4 technieken.

1. Custom Elements: Een custom element is een class die extend van HTMLElement. Om ervoor te zorgen dat je het binnen je HTML-pagina kan gebruiken moet het geregistreerd worden op de volgende manier

class NyanCat extends HTMLElement {...}
window.customElements.define('nyan-cat', NyanCat);


2. ShadowDom
: Om je element af te sluiten van de buitenwereld (encapsulation) kan je de shadowdom toevoegen aan je custom element, maar het is geen vereiste. Het voordeel hiervan is dat je ervoor kan zorgen dat het element er altijd, overal hetzelfde uit blijft zien. Zoals het <video> element. Hierna kan het element aangeroepen worden met de custom tag
<nyan-cat></nyan-cat>.

nyanCat.attachShadow({mode: 'closed'});

HTML import: Om ervoor te zorgen dat de browser van je element afweet, moet deze nog wel ingeladen worden. Dit wordt gedaan via de <link> tag. Door de ‘rel’ attribuut als waarde 'import' te geven, laten we de browser weten dat we een custom element laden. 

<link rel="import" href="/path/to/imports/nyan-cat.html">

HTML Templates: Templates worden gebruikt om de layout van je element te definiëren.
<template id="nyan-template">
     <div class="nyan-container">
   <img src='nyan-nyan.png'/>
   <span>nyan nyan nyan</span>
     </div>
</template>


Progressive Web Application (PWA)

De meeste browsers ondersteunen webcomponents, maar niet alle browsers zijn het eens met de implementaties. Om ervoor te zorgen dat je web-components in alle browsers kunt toepassen, kan je een Web Components Shiv gebruiken van Polymor.

Het bouwen van native applicaties is cool. En tools zoals React-Native, Xamarin en Flutter geven de mogelijkheid om met 1 taal voor verschillende platformen te bouwen. Het nadeel is wel dat je per systeem je applicatie moet bouwen.

PWA’s zijn in feite webapplicaties die zich voordoen als native apps, met het voordeel dat het toegankelijk is voor iedereen met een internetbrowser. Met de handige tool van Google LightHouse kun je je huidige website binnen no-time om te zetten naar een PWA.

Een paar voordelen van PWA zijn.

  • Geen app store nodig om de app te downloaden;
  • Werkt ook offline;
  • Toegankelijk voor iedereen met een browser, ongeacht besturingssysteem (responsive);
  • Is altijd up-to-date door het gebruik van ServiceWorkers;
  • Installeerbaar als app op je homescreen;
  • SEO-vriendelijk;
  • Het werkt met HTML, CSS en JavaScript zonder te compilen.

De technieken achter PWA worden ondersteund door de meeste browsers, met uitzondering van Safari. Smartphones zijn in staat om webapps even vloeiend of soms zelf vloeiender te laten werken dan native apps.

We zijn nog niet op het punt dat PWA’s onze native apps kunnen vervangen. Zo heeft een PWA nog geen toegang tot alle native functionaliteiten zoals BlueTooth, NFC en wakelock, is er een gelimiteerde opslagruimte en kunnen PWA’s nog niet communiceren met andere applicaties op je apparaat, denk aan Intents in Android. Buiten dat ziet de toekomst er voor PWA’s gecombineerd met AMP er goed uit.

REACT 16

React 16 is de nieuwste versie van React. De core is volledig opnieuw opgebouwd, waarbij de API voor een groot deel hetzelfde is gebleven. Hierdoor zitten er niet al te veel wijzigingen in de code die wij als developers schrijven. Toch zijn er een paar nieuwe functionaliteiten.

Zo kunnen we meerdere elementen returnen zonder lege div-wrapper hack. Door gebruik te maken van een array, <Fragments> of <>  hebben we controle over errors per component met de ‘componentDidCatch’ lifecycle function. Components kunnen buiten het parent-element renderen door middel van portals en er is een betere ondersteuning voor server-side rendering. En er is nog meer onderweg.

Context: Redux en Mobx zorgt ervoor dat prop-drilling voorkomen kan worden door een Provider die toegankelijk is voor alle onderliggende React componenten. De Context API doet ook precies dat, maar dan simpeler, met de volgende 3 vereisten:

  • De createContext methode creëer de de context (leest logisch)
  • De Provider maakt de context toegangelijk
  • De Consumer maakt het mogelijk om de waarde uit de context te halen.
const Context = createContext();

<Context.Provider value={{ catType: 'nyan'}}>

 <App />

</Context.Provider>

<Context.Consumer>

 {({ catType }) => <p>{`Type of cat is ${catType}`</p>}

</Context.Consumer>

 

LifeCycle Updates: De lifecycle functions zijn methodes die worden aangeroepen binnen React in een specifieke orde, wat hier beter wordt uitgelegd dan ik dat zou kunnen doen in een paar zinnen.

De grootste verandering is dat de methodes componentWillMount, componentWIllUpdate en componentWillReceiveProps verouderd zijn en komen te vervallen.

Ze worden vervangen door componentDidlMount, componentDidUpdate en getDerivedStateFromProps.

Strict Mode: Om te forceren dat code wordt geschreven volgens de best practices van React, kan het <StrictMode> element geïmporteerd worden. Wanneer er dan een conventionele fout wordt geconstateerd, wordt dit in de console weergeven.

Beyond React: Async is de volgende stap binnen React en het team is druk bezig met de implementaties. Tijdens de conferentie is er al gesproken over Time Slicing en de Suspense API, wat een beknopte samenvatting was van deze talk.

Tijdens de conferentie is er nog zoveel meer verteld. Zoals hoe je makkelijk je Jquery code kan refactoren naar Vuejs, hoe je native apps ontwikkelt met Vue en Nativescript, over state animations en Nuxt… Teveel om om te noemen. Maar MobX, WebComponents, Progressive Web Application en React 16 waren mijn 4 highlights van deze twee conferentiedagen.