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: tcook@apple.com
- 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