frontender in-2016
TRANSCRIPT
![Page 1: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/1.jpg)
…frontender in 2016
“State of the union”
Filip Bruun Bech-Larsen@filipbech
![Page 2: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/2.jpg)
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?
![Page 3: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/3.jpg)
Filip
![Page 4: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/4.jpg)
![Page 5: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/5.jpg)
Web vs native• Performance
• Hardware
• Offline
• Re-engangement
• just one target-platform
• no gate-keepers
• easy to deploy and update
• the link…
![Page 6: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/6.jpg)
Lets solve the problems
• Performance => RAIL
• Hardware => APIs
• Offline => ServiceWorker
• Re-engangement => Push events + notifications
![Page 7: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/7.jpg)
Progressive web apps
• RAIL
• Responsive design
• Secure
• ServiceWorker
![Page 8: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/8.jpg)
Performance
• Response (100ms)
• Animation (5-10ms) (transform+opacity & will-change)
• Idle (50ms)
• Load (1s)
![Page 9: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/9.jpg)
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)
![Page 10: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/10.jpg)
lets see some code…
![Page 11: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/11.jpg)
![Page 12: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/12.jpg)
![Page 13: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/13.jpg)
![Page 14: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/14.jpg)
![Page 16: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/16.jpg)
Web vs native
The web will win for most purposes…
The biggest drawback now is Apple support of ServiceWorker.Tell Apple we want it: [email protected]
![Page 17: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/17.jpg)
New language features
• Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators
![Page 18: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/18.jpg)
lets see some more code…
![Page 19: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/19.jpg)
![Page 21: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/21.jpg)
Lots of cool new ES6
![Page 22: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/22.jpg)
and maybe…
• Async functions (await)
• Decorators
• Observables…
![Page 23: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/23.jpg)
Two popular patterns has emerged
• Immutable
• Observable
![Page 24: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/24.jpg)
Frameworks
![Page 25: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/25.jpg)
![Page 26: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/26.jpg)
What about style• The platform is catching up with pre-
processors
• Variables (custom properties)
• New layout opportunities• Flexbox• Multicolumn• Grid
• Houdini…
![Page 27: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/27.jpg)
Houdini
Exposing low-level styling to the javascript engine
Talk from Google IOhoudini-samples
![Page 28: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/28.jpg)
![Page 29: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/29.jpg)
![Page 30: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/30.jpg)
![Page 31: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/31.jpg)
![Page 32: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/32.jpg)
The Extensible Web Manifesto
ServiceWorker, Houdini, etc.
![Page 33: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/33.jpg)
What else is hot• Beacons that broadcast a url
• Web-bluetooth
• Instantly loading pages (AMP, Facebook instant articles)
• requestPayment api
![Page 34: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/34.jpg)
phew…
![Page 35: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/35.jpg)
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
![Page 36: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/36.jpg)
ResourcesNewsletters• 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
![Page 38: Frontender in-2016](https://reader036.vdocuments.net/reader036/viewer/2022070514/58804f711a28ab22088b570b/html5/thumbnails/38.jpg)