• code

Framework & Patterns

#webpack #jsframework #performance #PWA

Tools:

Visual Studio Code, Vue developer tools, Webpack, Yarn, Node.js, i18n, Vuex

Frameworks & Patterns — Hoe bouw je met een JS-framework een professionele web app? State-of-the-art frontend webdevelopment werkt als een PWA, mét een virtual DOM, two-way data-binding en state-management.

Vanuit de kennis die we opgedaan hebben in de module Frontend, brengen we het maken van een performante professionele app een stap verder. Grote frontend frameworks geven ons een scala aan mogelijkheden in de browser. We focussen in deze module op concepten en onderdelen die terugkomen in de meest gangbare frameworks.

De kracht achter deze frameworks zit in de module-bundeler Webpack. We starten met het opzetten van een Webpack omgeving om de basis werking en de kracht van deze tool te zien. Met deze kennis stappen we over naar de vooraf opgezette boiler-plate van Vue.js. We bekijken de opties om dit op te zetten en hoe we goede keuzes maken volgens de noden van ons project.

Vervolgens werken we vanuit een test-driven project verder aan diverse web-apps. Om functionaliteit doorheen het hele ontwikkelproces te garanderen werken we met unit- en integration testing.

Dan kunnen we meer functionaliteiten aan onze frontend toevoegen: Het efficient meertalig maken van een web-app. Dit doen we aan de hand van een connectie met een Google Spreadsheet die keys en verschillende vertalingen bevat.

Het uitwerken van een progressive web-app. We garanderen een werking van onze website ook als de netwerk-verbinding (tijdelijk) wegvalt. We maken onze PWA ook toegankelijk zoals een native app, met het behoud van de voordelen van een website.

Onze single page application gaan we ook connecteren met de parallel lopende module full-stack development. Deze module zal inspelen op het coderen van een backend die is voorbereid op een offline-werking van de frontend. Ook worden dan verschillende manieren van authenticatie toegevoegd aan de frontend. Denk aan het gebruik van een JWT en een veilige flow tussen de front- en backend.