More Related Content
What's hot (19)
Similar to Web development post io2016 (20)
More from Filip Bruun Bech-Larsen (20)
Recently uploaded (20)
Web development post io2016
- 1. The state of the union Web development post I/O 2016 Filip Bruun Bech-Larsen @filipbech
- 2. This talk • 40-45 minutes of trends and bleeding edge stuff • Questions as we go and at the end • I will tweet a link to the slides afterwards (@filipbech) • Topics • Web vs. Native • New Language features in JavaScript • Frameworks • Styles • What else is hot?
- 3. Filip
- 5. Web vs native • Performance • Hardware • Offline • Re-engangement • just one target-platform • no gate-keepers • easy to deploy and update • the link…
- 6. Lets solve the problems • Performance => RAIL • Hardware => APIs • Offline => ServiceWorker • Re-engangement => Push events + notifications
- 7. Progressive web apps • RAIL • Responsive design • Secure • ServiceWorker
- 8. Performance • Response (100ms) • Animation (5-10ms) (transform+opacity & will-change) • Idle (50ms) • Load (1s)
- 9. Service worker • Lives in the background after you close the tab • For network think of it as a proxy (=>offline) • Sync • Push (and notification clicks)
- 10. lets see some code…
- 15. use sw-toolbox.js for caching
- 16. Web vs native The web is catching up, and even though native will always be ahead, we have a valid alternative with PWAs. The biggest drawback now is Apple support of ServiceWorker. Tell Apple we want it: [email protected]
- 17. Modern javascript • Backwards compatibility is the power of the web. but also the horror (we can’t just bump the major version and introduce breaking changes) • For years that meant nothing happened • The standard has started evolving again…
- 18. New language features • Class • Fat arrow • Destructuring • Default parameters • Rest+spread • Symbols • Generators
- 19. lets see some more code…
- 21. Now for a demo http://localhost/
- 22. Lots of cool new ES6 use today - transpile for compatibility
- 23. and maybe… • Async functions (await) • Decorators • Observables…
- 24. Two popular patterns has emerged • Immutable • Observable
- 25. Frameworks
- 26. Release candidate Angular Universal #useThePlatform App Toolbox Frameworks
- 27. What about style • The platform is catching up with pre-processors • Variables (custom properties) • New layout opportunities • Flexbox • Multicolumn • Grid • Houdini…
- 28. Houdini Exposing low-level styling to the javascript engine Talk from Google IOhoudini-samples
- 33. The Extensible Web Manifesto ServiceWorker, Houdini, etc.
- 34. What else is hot • Beacons that broadcast a url • Web-bluetooth • Instantly loading pages (AMP, Facebook instant articles) • requestPayment api
- 35. phew…
- 36. How do we survive? • Take a chill-pill • Embrace the extensible web using frameworks/tools • Use new features in dev, and compile for compatibility • Use resources to stay up to date • Newsletters • Blogs • Twitter • Conferences • Meetups
- 37. Resources Newsletters • http://www.oreilly.com/webops-perf/newsletter.html • http://javascriptweekly.com/ • http://esnextnews.us12.list- manage.com/subscribe?u=d3a2c4d93441c84c0a1e6e808&id=705caf4dc7 • https://www.smashingmagazine.com/the-smashing-newsletter/ • http://html5weekly.com/ • http://css-weekly.com/ • http://www.ng-newsletter.com/ • http://5thingsangular.github.io/ Podcasts • Javascript jabber • Javascript Air • The Web ahead • The web platform podcast • Shop talk • Adventures in Angular • Angular Air Blogs • https://developers.google.com/web/updates/ • https://developer.mozilla.org/en-US/ • https://www.smashingmagazine.com/ • http://blog.chromium.org/ • https://www.christianheilmann.com/ • https://addyosmani.com/blog/ • https://www.igvita.com/archives/ • https://toddmotto.com/ • https://jakearchibald.com/ • http://labs.ft.com/articles/ • https://sarasoueidan.com/articles/ • https://remysharp.com/ • http://www.bennadel.com/ • https://www.nczonline.net/ • http://v8project.blogspot.dk/ • https://blog.angularjs.org/ Twitter • https://twitter.com/toddmotto • https://twitter.com/SaraSoueidan • https://twitter.com/kentcdodds • https://twitter.com/theefer • https://twitter.com/stopsatgreen • https://twitter.com/Paul_Kinlan • https://twitter.com/aerotwist • https://twitter.com/paul_irish • https://twitter.com/jaffathecake • https://twitter.com/mafintosh • https://twitter.com/brucel • https://twitter.com/ChromiumDev • https://twitter.com/davidwalshblog • https://twitter.com/briantford