Bouwstenen voor een moderne webapplicatie

779 views

Published on

Afstudeerpresentatie van Hendrik Nijmeijer.

Ook worden er nieuwe technieken als HTML5 gebruikt.


Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
779
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bouwstenen voor een moderne webapplicatie

  1. 1. Bouwstenen voor een moderne webapplicatie<br />Kansen voor de developer<br />Hendrik Nijmeijer<br />
  2. 2. Wat is een webapplicatie?<br /> Platformonafhankelijk<br /> Geen lokale installatie<br /> Eenvoudig te koppelen<br />
  3. 3. Server<br />Browser<br />
  4. 4. De opbouw<br />
  5. 5. Ontwerp<br />Ontwerp<br />
  6. 6.
  7. 7. Fundering<br />
  8. 8. (On)stabiel<br />“Yourappmayworkgreat 90% of the time. <br />Butifyou abandon customers in their time of need, they’reunlikely to forgetit”<br />
  9. 9. Browsers<br />Moderne browsers<br />Internet Explorer 9<br />Firefox 4.0<br />Chrome<br />Safari (Mac)<br />Nog veel gebruikt<br />Opera<br />Firefox 3.6<br />IE 8<br />IE 7<br />IE 6<br />Safari (Windows)<br />Maar ook…<br /><ul><li> Resolutie
  10. 10. Flash?
  11. 11. Javascript?
  12. 12. Transparantie?
  13. 13. ….</li></ul>Op smartphones<br />Safari (iPhone & iPad)<br />Android<br />Blackberry<br />Symbian (Nokia)<br />
  14. 14.
  15. 15. Defensief Programmeren<br />“Hmm, hoe ga ik deze kick-ass feature werkend krijgen in alle browsers?”<br />Gracefuldegredation<br />Implementeer de functionaliteit<br />Zorg er voor dat deze ook werkt in oudere browsers<br />Progressiveenhancement<br />Zorg er voor dat de content beschikbaar is in alle browsers<br />Voeg de functionaliteit toe <br />
  16. 16. Tools<br />Herkennen: Modernizr.js<br />Toevoegen: Polyfills<br />
  17. 17. Onderhoudbaarheid<br />Code documenteren<br />Gebruik versiebeheer<br />Indeling van bestanden<br />Duidelijke naamgeving van classes<br />
  18. 18. Eenvoudig uit te breiden<br />Frameworks<br />Modulair<br />Design Patterns<br />
  19. 19. Events in Javascript<br />Ik ben blauw!<br />:-)<br />Event<br />kleur-veranderd<br /> {kleur: rood}<br />Ik lekker ook!<br />Ha!<br />:-(<br />
  20. 20. Geraamte<br />
  21. 21. Technieken<br />CSS3<br />Media Queries<br />HTML5<br /><video><br /><canvas><br />etc.<br />
  22. 22. Lazyloading<br />Laad assets pas wanneer ze nodig zijn<br />
  23. 23.
  24. 24. Afwerking<br />
  25. 25. “Nothing ruins a great website<br />like people using it.“<br />
  26. 26. “Design forwhenthings go wrong.”<br />
  27. 27. GetDefensive<br />Implementatie<br /><ul><li>Maak de errorpagina’s functioneel
  28. 28. Test met echte woorden
  29. 29. Gebruik unit-tests</li></ul>Na launch<br /><ul><li>Bekijk de logs</li></ul>GOED<br />FOUT<br />GetDefensive<br />
  30. 30. Instant Utility<br />Gelijk bruikbaar<br />Start met echte data<br />Inloggen met Facebook/Twitter-account<br />
  31. 31. Leesbare URL’s<br />helloworld.com/blog/232<br />helloworld.com/blog/post/2011/mijn_32_katten<br />
  32. 32. Account<br />http://twitter.com/HendrikN<br />Lijst<br />http://twitter.com/HendrikN/politiek<br />
  33. 33. Open Doors<br />RSS<br />API<br />Widget/App<br />
  34. 34. Bedankt<br />

×