Frontend programmeren en frontend frameworks

In een eerdere blog heeft onze auteur en deskundige op het gebied van frameworks Gabriel Sánchez Cano, één en ander uitgelegd over de relatie tussen software development en frameworks. Daar hebben we verschillende reacties op ontvangen. Daarom vertelt Gabriel in deze blog iets meer over zijn nieuwe uitgave Vue Framework.

Wat leer je eerst?

Om het meeste van een frontend framework eruit te halen is het raadzaam om eerst frontend programmeren met HTML, CSS en JavaScript te leren. Na het leren coderen van webpagina’s met CSS design en na het leren programmeren in JavaScript, zal je in staat zijn om snel één of meer frontend frameworks onder de knie te krijgen.

Vue vs andere frameworks

Het succes van een front-end framework hangt af van veel factoren. Belangrijke factoren zijn bijvoorbeeld de grootte en snelheid van het framework. Een voordeel van Vue.js is een kleine voetafdruk van 18–21KB. Voor veel webdevelopers is dit reden genoeg om voor Vue te kiezen ten opzichte van de andere wichtige en tragere frameworks zoals React.js, Angular.js, en Ember.js. Andere voordelen zijn:

• Eenvoudigheid

Vue heeft de nadelen van andere frameworks zoals Angular, React of Ember verbeterd. De JS/HTML/CSS kennis is eenvoudig geïntegreerd. Vue heeft een veel minder steile leercurve dan deze andere frameworks.

• Flexibiliteit

Vue is makkelijk aan te passen met CSS- en pseudo-frameworks zoals Vuetify en Nuxt.

• Reactiviteit

Geoptimaliseerde re-rendering gefocust op specifieke UI components.

• Veelzijdigheid

Responsieve en interactieve UI voor SPA/PWA web apps.

• Ontwikkelomgeving

Tooling zoals browser Devtools, CLI, Webpack loader en Router en State libraries.

We hebben voor het aanbod binnen Boom beroepsonderwijs (BBO) voor Vue gekozen omdat het een progressief framework is dat gebruikt wordt door miljoenen webdevelopers, webdesigners en bedrijven over de hele wereld. Vue.js heeft een rijk ecosysteem aan libraries en een grote community van gebruikers.

De nieuwe uitgave Vue Framework

De nieuwe BrinkmanICT.info uitgave binnen BBO getiteld Vue Framework bestaat uit twaalf hoofdstukken. Bij de opbouw is gebruikgemaakt van de taxonomie van Romiszowski, waar onderscheid wordt gemaakt tussen kennis (het opslaan van informatie) en vaardigheden (acties uitvoeren om een doel te bereiken). Elke sectie eindigt met een kennistoets en een vaardigheid-lab. Elk hoofdstuk eindigt met een zelfstudieproject.

• Kennistoetsen: kennis van begrippen en procedures.
• Vaardigheid-labs: reproductieve vaardigheid, acties uitvoeren om een doel te bereiken.
• Zelfstudieprojecten: productieve vaardigheid.

In tegenstelling tot reproductieve vaardigheden doen productieve vaardigheden een beroep op de creativiteit en planningsvaardigheden van de student; ze gaan gepaard met (complexe) beslissingsvorming op bewust of onderbewust niveau. De student moet de geleerde informatie spontaan toepassen in nieuwe situaties, waarin niet van tevoren geoefend is. Er moeten nieuwe oplossingen voor nieuwe problemen bedacht worden.

Heb je interesse in deze uitgave? Vraag dan een beoordelingsexemplaar aan bij Bert Visscher, educatief adviseur, b.visscher@boom.nl

De nieuwe uitgave Vue framework met ISBN 9789037257526 is nu beschikbaar en is te bestellen via onze webshop.

Inhoudsopgave en opbouw van Vue framework

1      Inleiding Vue.js

1.1      Vue 3

1.2      Vue directives

1.3      Events

1.4      Conditionals

1.5      Lijsten en lussen

2      Project : Components

2.1      Components

2.2      Reactiviteit

2.3      Life cycle hooks

3      Project: Build tools

3.1      Nodejs en Vue CLI

3.2      Single file components

3.3      Composition API in Vue 3

4      Project: PrimeVUE

4.1      User Interface components

4.2      Formulier components

5      Project: Vuex

5.1      State management met Vuex

5.2      Store acties en mutaties

5.3      Dialogs

6      Project: Vue router

6.1      Vue router

7      Project: Database

7.1      Json database

7.2      Stores synchroniseren

8      Project: Nuxt

8.1      Inleiding Nuxt

9      Project Vuetify

9.1      UI-components

9.2      De button component

9.3      Components met methodes

9.4      Vuetify Grid

10       Project: Nuxt data

10.1       Gegevens verwerken in Nuxt

10.2       Fetch data

10.3       asyncData

10.4       Nuxt server middleware

11       Project: Nuxt Store

11.1       FietsStore in Nuxt

11.2       NuxtStore item creëren

11.3       NuxtStore item deleten

11.4       NuxtStore item updaten

12       Project: Nuxt content module

12.1       De Nuxt content module

12.2       Nuxt SEO