Week 5: Project plan maken met UML

• Application Development
• MBO
• Studiejaar 2

Ga er goed voor zitten

Lesdoelen

1. Jij kan uitleggen waarom de huidige state management niet goed is voor een grote app.

Wat heb je nodig?

Laptop en de nieuwste versie van Dart. 

Oude kennis

Oude kennis ophalen

Wat is het probleem?

In grote apps met veel meer widgets, moeten wij de data managen.

Normaal gesproken doe je dit in de hoogste widget zodat meer Child widgets de data kunnen gebruiken. 

Wat is het probleem?

Stel de ProductDetailPage widget heeft data nodig. 

Nu gaat vanuit MyApp data naar Products naar SingleProduct en uiteindelijk naar ProductDetail via de constructors. Dat terwijl die eerdere widgets niets te maken hebben met die data. 

Wat is het probleem?

Hier aan de rechterkant zie jij een widget tree. Als iets van data wijzigt, dan zal deze de hele widget tree triggeren om te rebuilden zodat ProductDetailPage de juiste informatie heeft. Maar ook de widgets ertussen worden opnieuw gebouwd. Dit zorgt voor een performance impact!

Wat is 'State' en 'State Management'?

Wat is 'State' en 'State Management'?

State = Data which affects the UI (and which might change over time). 

Een voorbeeld hiervan is favorite. Dit is nou typisch een geval van State. 

State

Als je er goed over nadenkt dan is de UI een functie van je data (state). Als jouw data (state) wijzigt, dan veranderd dus ook jouw UI. 

Wat is 'State' en 'State Management'?

Er bestaat app-wide state en widget (local) state. 

App-wide State	Widget (Local) State
Beïnvloed de gehele app	Heeft alleen invloed op een widget en geen ander.
Authenticatie (is de gebruiker ingelogd?)	Moet een loading animatie worden geladen?
Loaded Products moeten geladen zijn	Form input check

Is de gebruiker ingelogd?

Waarom is het een slecht idee om alle informatie (lees data) in de hoogste widget te beheren?

De titel van de app wijzigt

MyApp

Product

ProductOverviewPage

ProductItem

ProductDetailPage

De prijs wijzigt van een product

MyApp

Product

ProductOverviewPage

ProductItem

ProductDetailPage

Alle producten krijgen een attribuut erbij dat alleen in een tegen wordt weergegeven

MyApp

Product

ProductOverviewPage

ProductItem

ProductDetailPage

The Provider Package & Pattern

Provider- package & pattern

Deze package wordt door de Flutter team aangeraden en is zeer populair. 

Deze package zorgt lost veel frontend problemen op die wij nu tegen zijn gekomen.

Docent laat nu een tekening zien hoe dit werkt. 

Provider- package & pattern schets

Bestudeer de tekening hoe de provider package de constructors 'omzeilt' zodat niet alle widgets in de widget tree geüpdatet hoeven te worden. 

Pas kennis toe in eigen project

Pas kennis toe in eigen project

Widget uitzoeken en toepassen

1. Ga naar de YouTube pagina van Flutter
2. Kies een widget waar je meer over wilt weten
3. Pas deze toe in jouw project 

Samenvatting

Nieuwe kennis samenvatten

Lesdoelen

1. Aan het einde van de les kunnen jullie een blauwdruk maken en overerven in JavaScript.
2. Aan het einde van de les kunnen jullie een diagram in een blauwdruk omzetten.

Wie vond deze les moeilijk te volgen of snel gaan?

Ik heb de les goed kunnen volgen

Het ging nog net. Ik moet het laten bezinken.

Het ging te snel/moeilijk.

Vooruitblik

Wat gaan wij de volgende les doen?