Download to read offline
More Related Content
![[VJCD seminar] Launching of APO-Chan, an Azure Mobile Apps with Xamarin and OSS](https://cdn.slidesharecdn.com/ss_thumbnails/vjcdseminarapo-chanv1-171121071722-thumbnail.jpg?width=640&height=640&fit=bounds)
Frontender in-2016
- 1. …frontender in 2016 “Stateof the union” Filip Bruun Bech-Larsen @filipbech
- 2. This talk • 40-45minutes 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.
- 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 theproblems • 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 • Livesin the background after you close the tab • For network think of it as a proxy (=>offline) • Sync • Push (and notification clicks)
- 10. lets see somecode…
- 15. use sw-toolbox.js forcaching
- 16. Web vs native Theweb 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 somemore code…
- 20.
- 21. Lots of coolnew ES6
- 22. and maybe… • Asyncfunctions (await) • Decorators • Observables…
- 23. Two popular patternshas emerged • Immutable • Observable
- 24.
- 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 stylingto the javascript engine Talk from Google IOhoudini-samples
- 32. The Extensible Web Manifesto ServiceWorker,Houdini, etc.
- 33. What else ishot • Beacons that broadcast a url • Web-bluetooth • Instantly loading pages (AMP, Facebook instant articles) • requestPayment api
- 34.
- 35. How do wesurvive? • 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.