State of the union

1. …frontender in 2016
“State of the union”
Filip Bruun Bech-Larsen
@filipbech

2. This talk
• 40-45 minutes of trends and bleeding edge stuff
• Questions at the end (or afterwards if we run out of time)
• 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 will win for most purposes…
The biggest drawback now is Apple support of ServiceWorker.
Tell Apple we want it: tcook@apple.com

17. New language features
• Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators

18. lets see some more
code…

20. $
http://localhost/

21. Lots of cool new ES6

22. and maybe…
• Async functions (await)
• Decorators
• Observables…

23. Two popular patterns has emerged
• Immutable
• Observable

24. Frameworks

26. What about style
• The platform is catching up with pre-processors
• Variables (custom properties)
• New layout opportunities
• Flexbox
• Multicolumn
• Grid
• Houdini…

27. Houdini
Exposing low-level styling to the javascript engine
Talk from Google IOhoudini-samples

32. The Extensible Web
Manifesto
ServiceWorker, Houdini, etc.

33. What else is hot
• Beacons that broadcast a url
• Web-bluetooth
• Instantly loading pages (AMP, Facebook instant
articles)
• requestPayment api

34. phew…

35. 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

36. 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

37. Thanks
• @filipbech
• filipbech.github.io