Evolution of web development

A glance over the history of web development and it's evolution to modern tools and how accessibility and performance have become an important role of it.

Transcript

1. The Evolution of Web Development Jabran Ra f ique - 18 September 2021 WP Brigade, Sialkot
2. World Wide Web Sir Tim Berners-Lee 1990 CERN Wikipedia
3. The beginning 1994 Netscape Navigator 1995 Internet Explorer 1995 Opera 2003 Safari 2004 Firefox 2008 Chrome
4. HTML • Mark up for documents • Assist-able • De facto in web browsers • Subsets • XHTML • XML Unsplash
5. CSS • Style sheet / presentation • Cascading / speci f icity • Ignore-able • Browser support vary • CSS Houdini Unsplash
6. JavaScript • Interactivity • ECMAScript • JScript • Node JS Unsplash
7. PHP • Scripting • Runs on server • Secure environment • Gateway / Renders markup Unsplash Personal Home Page Hypertext Preprocessor
8. Wikipedia
9. AJAX • Asynchronous • Dynamic • Interactive • Performant Wikipedia
10. jQuery • DOM tree manipulation • Cross browser compatible • Easy to use API • Plugins Unsplash
11. Modern world Unsplash
12. Wikipedia
13. Tooling • Grunt • Gulp • Bower • RollJS • Webpack • ESBuild Unsplash
14. Boilerplates • Create React App • Create guten block • Create Next App Unsplash
15. Jamstack • Static contents • APIs, JavaScript • Pre-render at build time • Couple with headless CMS • Performance https://jamstack.org/generators/ Wikipedia
16. Jamstack anatomy Build Static pages CDN API Headless CMS Elastic Database
17. Performance • Accessibility • User Experience • Conversion
18. daraz.pk
19. covid.gov.pk
20. nadra.gov.pk
21. pakrail.gov.pk
22. Performance • Low-end device • Poor network coverage • Blocking resources • JavaScript • Inline styles • Web fonts • Images • Large/unused resource chunks Unsplash
23. Further learning • Mozilla Web Docs (MDN) • YouTube • Udemy • Egghead.io • Epic React by Kent C. Dodds • LinkedIn Learn with Lynda • Ultimate Courses by Todd Motto • Dev Courses by Wes Bos
24. Jabran Ra f ique Tech Lead @jabranr