web development post io2016
TRANSCRIPT
![Page 1: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/1.jpg)
The state of the union
Web development post I/O 2016
Filip Bruun Bech-Larsen@filipbech
![Page 2: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/2.jpg)
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?
![Page 3: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/3.jpg)
Filip
![Page 4: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/4.jpg)
![Page 5: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/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: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/6.jpg)
Lets solve the problems
• Performance => RAIL
• Hardware => APIs
• Offline => ServiceWorker
• Re-engangement => Push events + notifications
![Page 7: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/7.jpg)
Progressive web apps
• RAIL
• Responsive design
• Secure
• ServiceWorker
![Page 8: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/8.jpg)
Performance
• Response (100ms)
• Animation (5-10ms) (transform+opacity & will-change)
• Idle (50ms)
• Load (1s)
![Page 9: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/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: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/10.jpg)
lets see some code…
![Page 11: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/11.jpg)
![Page 12: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/12.jpg)
![Page 13: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/13.jpg)
![Page 14: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/14.jpg)
![Page 16: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/16.jpg)
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: [email protected]
![Page 17: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/17.jpg)
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…
![Page 18: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/18.jpg)
New language features
• Class
• Fat arrow
• Destructuring
• Default parameters
• Rest+spread
• Symbols
• Generators
![Page 19: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/19.jpg)
lets see some more code…
![Page 20: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/20.jpg)
![Page 22: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/22.jpg)
Lots of cool new ES6use today - transpile for compatibility
![Page 23: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/23.jpg)
and maybe…
• Async functions (await)
• Decorators
• Observables…
![Page 24: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/24.jpg)
Two popular patterns has emerged
• Immutable
• Observable
![Page 25: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/25.jpg)
Frameworks
![Page 26: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/26.jpg)
Release candidateAngular Universal
#useThePlatformApp Toolbox
Frameworks
![Page 27: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/27.jpg)
What about style• The platform is catching up with pre-
processors
• Variables (custom properties)
• New layout opportunities• Flexbox• Multicolumn• Grid
• Houdini…
![Page 28: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/28.jpg)
Houdini
Exposing low-level styling to the javascript engine
Talk from Google IOhoudini-samples
![Page 29: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/29.jpg)
![Page 30: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/30.jpg)
![Page 31: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/31.jpg)
![Page 32: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/32.jpg)
![Page 33: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/33.jpg)
The Extensible Web Manifesto
ServiceWorker, Houdini, etc.
![Page 34: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/34.jpg)
What else is hot• Beacons that broadcast a url
• Web-bluetooth
• Instantly loading pages (AMP, Facebook instant articles)
• requestPayment api
![Page 35: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/35.jpg)
phew…
![Page 36: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/36.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 37: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/37.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 39: Web development post io2016](https://reader036.vdocuments.net/reader036/viewer/2022070509/5899d9b11a28ab4a0b8b615d/html5/thumbnails/39.jpg)