Webutvikling - teknologiske trender

Transcript

1. Trender innen webutvikling EVRY Winter Gathering 2014 6. feburar, Ilsetra I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 1 Ketil Flataker Nils Erik Asmundvaag EVRY Consulting
2. Innhold • Fra web 1.0 til web 3.0 o Den mobile weben • Responsive web design o Mobile first • Single-page applications o Rike internett-applikasjoner • Smidig utviklingsmetodikk o Scrum Trender innen webutvikling 2 EVRY Winter Gathering 2014
3. I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Fra web 1.0 til web 3.0 3
4. Fra web 1.0 til web 3.0 Trender innen webutvikling 4 EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn
5. Fra web 1.0 til web 3.0 Trender innen webutvikling 5 EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn Web 2.0 Interaksjon Sosiale medier Bruker-produsert
6. Fra web 1.0 til web 3.0 Trender innen webutvikling 6 EVRY Winter Gathering 2014 Web 1.0 Enveis Read only web Handlevogn Web 2.0 Interaksjon Sosiale medier Bruker-produsert Web 3.0 Semantisk web Linked data
7. Den mobile webben Trender innen webutvikling 7 EVRY Winter Gathering 2014 2013 1% - 40 % 50 % 9 %
8. I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Responsive web design 8
9. Responsive web design • Lage sider som gir en optimal brukeropplevelse • Enkle å lese og navigere med et minimum av scrolling, panorering og zooming • På tvers av enheter (telefon, nettbrett, PC) • Layout tilpasses dynamisk til visningsmiljøet Trender innen webutvikling 9 EVRY Winter Gathering 2014
10. Responsive web design • Mange begreper • Responsive web • Tilpasset web • Mobil web Trender innen webutvikling 10 EVRY Winter Gathering 2014
11. Responsive web design • Fleksibel layout o Flytende og proporsjonal o Relative størrelser og måleenheter • Media queries o Identifisere type medium og fysiske karakteristikker o Kan finjustere og optimalisere CSS o Ny meta-tag: viewport • Fleksibelt media o Må sette begrensing for bredden o Moderne nettlesere vil skalere bilder proporsjonalt o Utfordringer med bakgrunner og sprites Trender innen webutvikling 11 EVRY Winter Gathering 2014
12. Responsive web design • Kan også handle om kontekst o I hvilken setting brukeren besøker nettstedet o Kan ha forskjellig behov avhengig av tid og sted - Hjemme foran PCen eller via mobilen på farten • Ikke erstatning for mobil-nettsteder o Kan være gode grunner for å skille mobil og desktop Trender innen webutvikling 12 EVRY Winter Gathering 2014
13. Responsive web design • Kontekstavhengig web, eksempel Trender innen webutvikling 13 EVRY Winter Gathering 2014
14. Mobile first • Designfilosofi • Utgangspunktet er nettsider tilpasset mobile enheter • Legger til funksjonalitet etter som skjermen blir større • Ta det viktigste først Trender innen webutvikling 14 EVRY Winter Gathering 2014
15. I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Single-page applications 1 5
16. Single-page applications • En web-applikasjon eller site som består av én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon/ Native app Trender innen webutvikling 16 EVRY Winter Gathering 2014
17. Single-page applications • En web-applikasjon eller site som består av én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon • All kode (HTML, CSS, JavaScript) lastes samtidig, eller dynamisk ved behov o Siden lastes ikke på nytt, ei heller tar andre sider over kontrollen, men moderne web- teknologi kan gi brukeren opplevelsen av at applikasjonen består av flere sider o Innebærer ofte asynkron kommunikasjon med serveren bak kulissene Trender innen webutvikling 17 EVRY Winter Gathering 2014
18. Single-page applications • En web-applikasjon eller site som består av én side o Målet er å gi en bedre (fluid) brukeropplevelse – likt en tradisjonell applikasjon • All kode (HTML, CSS, JavaScript) lastes samtidig, eller dynamisk ved behov o Siden lastes ikke på nytt, ei heller tar andre sider over kontrollen, men moderne web- teknologi kan gi brukeren opplevelsen av at applikasjonen består av flere sider o Innebærer ofte asynkron kommunikasjon med serveren bak kulissene • Teknologi o AJAX – asynkron kommunikasjon med serveren o JSON/XML – dataoverføringsformater Trender innen webutvikling 18 EVRY Winter Gathering 2014
19. Single-page applications Trender innen webutvikling 19 EVRY Winter Gathering 2014
20. Rike internett-applikasjoner • En web-applikasjon som ligner en tradisjonell applikasjon o Tidligere ofte implementert i Flash/Flex, Silverlight eller som Java applets o Nå brukes HTML og JavaScript eller rammeverk som genererer klient-kode (AngularJS – rammeverk – Knockout Library) • Gjør weben mer interaktiv • Enkel distribusjon og vedlikehold/oppdatering • Ren Arkitektur • Stiller få krav til klient - Eksponerer kode/sikkerhet - Nettleseravhengig/cache Trender innen webutvikling 20 EVRY Winter Gathering 2014
21. I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 Trender innen webutvikling Smidig utviklingsmetodikk 2 1
22. Smidig utviklingsmetodikk • Engelsk: Agile • Karakterisert ved at få eller ingen detaljer om en løsning er avtalt før utvikling starter o Utseende og funksjonalitet utformes i samarbeid mellom bruker og utvikler i iterasjoner o Brukeren må hele tiden prioritere gjenstående oppgaver og er ikke garantert å få med alt o Det viktigste/det som gir størst forretningsverdi implementeres først • Fordeler o Kan raskt snu om på produktet hvis prioriteringer endres o Større sannsynlighet for et ‘brukbart’ produkt • Utfordringer o Uvant for brukere å være så involvert o Føles ofte som en usikker kontraktsform Trender innen webutvikling 22 EVRY Winter Gathering 2014
23. Smidig utviklingsmetodikk • Personlig mening o Bra måte å jobbe på o Smidig utvikling har skiftet fokuset til å produsere noe som faktisk er brukbart o Gir større eierskap i organisasjonen o Tvinger brukere/prosjekteiere til å prioritere o Kan begynne å bruke løsningen tidligere enn ved tradisjonell utvikling Trender innen webutvikling 23 EVRY Winter Gathering 2014
24. Smidig utviklingsmetodikk • Eksempel: Scrum Trender innen webutvikling 24 EVRY Winter Gathering 2014
25. I n s p i r a t i o n a l p r e s e n t a t i o n , p a r t 1 2 5