Ontwerp en maak met een team een website voor een opdrachtgever waarbij je verschillende performance technieken toepast.
Deze leertaak hoort bij sprint 10 "Performance Matters". Dit is een leertaak die je in een team uitvoert voor een opdrachtgever.
In het college S10W1-01-Sprintplanning-Performance-Matters en de workshop S10W1-03-Samenwerken-in-Github wordt de opdracht en de werkwijze uitgelegd.
Tot nu toe heb je voornamelijk alleen gewerkt aan server-side code, API's en client-side scripting. Een frontender werkt vaak samen in teams zodat je taken kunt verdelen en grote(re) opdrachten in minder tijd kunt realiseren. Als je in een team werkt werk je met meerdere frontenders in één repository samen. Je zult moeten overleggen, afspreken wie waar aan gaat werken, en code en design afspraken maken. Hoe je dat op een goede manier doet leer je in deze sprint.
Je werkt in een team van max. 3 frontenders aan een website voor een opdrachtgever. Zorg er voor dat je duidelijk afspraken maakt en elkaar dagelijks op de hoogte houdt van vorderingen. Samen met jouw team ben je verantwoordelijk voor de planning, het samenwerkingsproces én het eindresultaat.
Deze opdracht gaat over alle fases van de DLC analyseren, ontwerpen, bouwen, integreren en testen.
In de analysefase wordt besproken hoe jullie willen gaan samenwerken, onderzoek je wat jullie gaan maken en maak je een planning.
In de analysefase maak je als team afspraken over hoe je gaat samenwerken.
- Fork deze leertaak en zet de repository klaar voor het team zodat iedereen met dezelfde codebase kan werken.
- Vul een Teamcanvas in, begin met het individuele deel en bespreek jouw persoonlijke doelen met je teamgenoten.
- Vul vervolgens als team de andere vlakken van het Teamcanvas in.
- Maak afspraken over hoe jullie gaan samenwerken, leg de afspraken vast in de wiki.
- How to Collaborate on GitHub
- download het Team Canvas
- Lees instructies over het gebruik van het Teamcanvas in de deeltaak uit sprint 1
In de analysefase bespreek je als team welke werkzaamheden er zijn, wie wat gaat doen en maak je een planning.
- Maak een project board aan op jullie gezamenlijke repository om bij te kunnen houden wie wat doet en wanneer
- Plan voor de aankomende weken alle standups en reviews en noteer de planning in jullie project board.
- Bekijk en bespreek álle User Stories die bij het project horen.
- Bespreek de User Stories die jullie willen oppakken en bedenk wat je voor elke user story moet doen.
- Maak bij elke User Story meerdere taken aan in het project board, geef ze een prioriteit en voeg de namen toe van de mensen die eraan gaan werken. ProTip: Als taken te groot zijn (langer dan een dag duren) is het zinvol ze op te splitsen in meerdere kleinere taken.
- About Githhub Projects, quickstart en best practices
- Wat is een User Story?
- What's Microproductivity?
In de ontwerpfase gaan jullie schetsen en code en design afspraken maken.
In deze Sprint gaan jullie je (ook) richten op de performance van websites. Om de performance te verbeteren kun je verschillende performance technieken toepassen. Voor deze opdracht gaan jullie een aantal Frontend Performance optimalisaties toepassen zoals die te lezen zijn in de Frontend Performance Checklist van Smashing Magazine.
In de checklist worden verschillende technieken behandeld waarmee je een website kan optimaliseren. Deze technieken hebben effect op de HTML, CSS en/of JS. Afspraken over hoe jullie dit in code en design gaan doen leggen jullie vast in de living styleguide.
- Bekijk en bespreek alle User Stories die bij het project horen.
- Teken de structuur van de website die jullie willen maken in een Sitemap en bedenk wat op de pagina's moet komen te staan.
- Schets de User Stories waar jullie aan gaan werken in een Wireflow en maak gezamenlijk breakdown-schetsen.
- Terwijl jullie aan de website gaan werken houden jullie in de living-stylguide bij wat voor HTML, CSS en/of JS voor een functionaliteit, component of de layout nodig is. Clone de bestaande living-styleguide naar jullie repository zodat je deze met je team kan aanvullen en aanpassen.
- (optioneel) Als je als team pull-requests goed onder de knie hebt kan je aan het eind van de sprint de aanpassingen aan de living-styleguide met een pull-request samenvoegen met het origineel dat je bij stap 1 cloned hebt. Let op: je moet dan afspraken maken met de andere teams die voor deze opdrachtgever werken!
- How to create a UX Sitemap: a simple guideline
- Sitemaps & Information Architecture (IA)
- Wireframing User Flow with Wireflows
- Frontend Performance Checklist - Assets Optimizations
- Frontend Performance Checklist - Delivery Optimizations
- Lees instructies over het maken van een Living-styleguide uit sprint 4
In de bouwfase realiseer je de beslissingen uit de ontwerpfase. Na de les over samenwerken in GitHub doe je dat waarschijnlijk op een feature branch die je na het uitwerken van de taak in de integratiefase met een pull-request toevoegt aan het project.
- Werk aan jouw taak. Probeer voor elke afgeronde stap een commit te doen zodat herleidbaar is welke aanpassingen je gemaakt hebt.
- Test de implementatie van jouw taak voor je naar de integratiefase gaat.
Frontend Performance Checklist van Smashing Magazine.
In de integratiefase voer je de aanpassingen door zodat iedereen ze kan zien en er op verder kan bouwen. Waarschijnlijk doe je dit pas na de les over samenwerken in Github.
- Maak een pull-request voor jouw feature.
- Bespreek met je team wanneer pull-requests worden verwerkt en wie ze afhandelt.
- Handel het pull-request af.
- Creating a pull request
- GitHub, Aan een project bijdragen (laat je niet afschrikken door de command line code, jij kunt daar prima GitHub Desktop voor gebruiken!)
In de testfase controleer je of jouw aanpassingen werken zoals bedoeld.
- Test de performance van jouw project, maak issues aan en documenteer je bevindingen in de wiki.
- Test jouw project op meerdere devices en browsers, maak issues aan en documenteer je bevindingen in de wiki.
- Test de toegankelijkheid van jouw project, maak issues aan en documenteer je bevindingen in de wiki.
- Test de bruikbaarheid van jouw project, maak issues aan en documenteer je bevindingen in de wiki.
Definitions of done
Focus sprint 10 - De focus van deze sprint ligt op het beter en sneller laten werken van een website en samenwerken.
Doel van deze opdracht:
- je leert hoe je met een team een website ontwerpt en maakt voor een opdrachtgever waarbij je verschillende performance technieken toepast
Voor deze leertaak gelden de gedragscriteria:
- M: Je combineert aangeboden principes en conventies op het gebied van frontend, interface design en vormgeving
- S: Je werkt in teams, vraagt begeleiding waar nodig en geeft feedback aan teamleden
- S: Je draagt verantwoording voor eigen resultaten, verwerkt ontvangen feedback en wijst teamleden op hun verantwoording
- C: Je kan ontwerpkeuzes, eigen ideeën en producten begrijpelijk overbrengen aan belanghebbenden
- P: Je analyseert een vraag, signaleert knelpunten en volgt de aangeboden oplossingsrichting
Deze opdracht is done als:
- Je hebt met een team aan de opdracht van een opdrachtgever gewerkt
- Je website is online gepubliceerd
- De planning, samenwerking en teamafspraken zijn gedocumenteerd in de Wiki en project-board
- Verschillende Frontend Performance technieken zijn toegepast en gedocumenteerd in de Living-Styleguide