This talk summarizes trends and new technologies in web development. It discusses how the performance of web apps is catching up to native apps through technologies like service workers, push notifications, and responsive design in progressive web apps. The talk also covers new JavaScript features like classes, arrows functions, and async/await. Popular frameworks and patterns like React, Angular and immutable/observable data are mentioned. Resources for staying up to date on new developments are provided.

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

38. Thanks
• @filipbech
• filipbech.github.io