chrome dev summit summary 2013 part 1 - what’s hot ?
DESCRIPTION
Google Developer Group Montreal: "We will summarize the recent conference Google Chrome Dev Summit day1 and day2 of mid-November and talk about the many new technologies around Chrome you must know !" Presentation from +Sacha Leprêtre Nteo Inc.TRANSCRIPT
![Page 1: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/1.jpg)
Sacha Leprêtre@sachalepretre
2013-12-12
Blog http://gtugmontreal.blogspot.ca / Twitter: @gtugmontreal / Google+ page: GDG Montreal
was…
Chrome Dev Summit Summary what’s hot ?
The tech you must be aware ofpart 1
![Page 2: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/2.jpg)
Credits and full information
http://developer.chrome.com/devsummit
![Page 3: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/3.jpg)
Keynote by Linus Upson VP Engineering for Chrome
![Page 4: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/4.jpg)
Keynote by Linus Upson VP Engineering for Chrome
• Web History• GOAL: Close the gap between native app and web app
• Rendering Performance– Expectation on mobile: everything is minimum 60 frame/s– Ex: GPU, webanimations– EX: Reducing Garbage collection pause time … working with v8 team– Performance measure and dashboard– In mobile: javascript performance improved 50% in the last year– Octane benchmark for v8 : + javascript latency measure + emscripten code + asm.js style code + large javscript code
• Networking Performance– Mobile data compression proxy (jpgeg to webp , video to WebM (VP9)– ServiceWorker an attempt fo rewrite App cache .
• API: – webgl webrtc (check https://apprtc.appspot.com) webaudio– Vibration API, Geolocation API, Web notification API
• UI Patterns– Request auto complete: for form , usefull for payments– Polymer, HTML tags in HTML tags, on top of webcomponents– Add to home screen on chrome for android– Source in : multiple resolution images
• Développer Productivity – The layer panel– DART Dart.js PNACL pepperjs– contributing to cordova
![Page 5: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/5.jpg)
Mobile UX by Paul Kinlan
![Page 6: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/6.jpg)
Mobile UX by Paul Kinlan
• 53% of sites still had a desktop experience• 25% of sites didn’t fit in a mobile viewport• 83% of site had hard to touch areas• A Tool to help:
http://developers.google.com/speed/pagespeed/insights/?ux=1
![Page 7: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/7.jpg)
Network connectivity by Jake Archibald
![Page 8: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/8.jpg)
Network connectivity by Jake Archibald
• App cache is not a solution • Navigator.online
• Service Worker !– as a background page– Check html5rocks next month for more on
serviceworker
![Page 9: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/9.jpg)
#perfmatters: 60fps layout and rendering by Tom Wiltzius and Nat Duca
![Page 10: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/10.jpg)
#perfmatters: 60fps layout and rendering by Tom Wiltzius and Nat Duca
• A challenge to fit every thing in 16ms
• Painting is slow ! : avoid repainting• Use dev tools• Use layers http://jankfree.org/examples/parallax.html
• On mobile: Touch latency, Avoid big listeners.. while page load, Touch Cancel is important, click has a 300 ms delays
![Page 11: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/11.jpg)
#perfmatters: Optimizing network performance by Ilya Grigorik
![Page 12: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/12.jpg)
#perfmatters: Optimizing network performance by Ilya Grigorik
• Since M26, Chrome uses it’s own Async DNS Resolver• SPDY open networking internet protocol for reducing
page loading time• Experimental QUIC (Quick UDP Internet Connection)
tunneling protocol atop UDP: LOW LATENCY!• Chrome Data Compression• WebSocket Compression• Timing-Allow-Origin:* (allows your server to transmit
full timing info.. Google analytics can analyze and check w3c User Timing : polyfill)
![Page 13: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/13.jpg)
Chrome DevTools for Mobile by Paul Irish
![Page 14: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/14.jpg)
Chrome DevTools for Mobile by Paul Irish
• Plug your android Device– check on chrome: chrome://inspect/#devices– Toggle screencast !
• Mobile Simulation on Chrome dev tools !
![Page 15: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/15.jpg)
Chrome DevTools for Mobile by Paul Irish
• And NOW Mobile Simulation on Chrome dev tools !
![Page 16: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/16.jpg)
Chrome DevTools for Mobile by Paul Irish
• http://www.youtube.com/watch?v=gZH1d2Co1X0&feature=youtu.be&t=14m20s
![Page 17: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/17.jpg)
Chrome DevTools for Mobile by Paul Irish
• For CSS: soon available : the layer panel
(in 3D)• LESS, SASS
and others in CDT
![Page 18: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/18.jpg)
Dart for the modern web developerby Kasper Lund and Seth Ladd
![Page 19: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/19.jpg)
Dart for the modern web developerby Kasper Lund and Seth Ladd
• DART = Language and libraries +Tools + VM + Compiler to JavaScript
• DART is easy and powerfull (inlining, types or not etc…)
• DART compiler to js most of the time better of direct js ! And cross browser javascript !
![Page 20: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/20.jpg)
GDG Montreal next talk:Chrome Apps (Pete Lepage)
Coffee break and after :• Pete Lepage (Google Inc.), will now present us
the Chrome Apps !
![Page 21: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/21.jpg)
• In next slides, part 2 and 3 of the summary, will be discussed in next GDG Montreal meetings
• See you in our next events !
Chrome dev summit summaryTo be continued…
![Page 22: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/22.jpg)
To be continued…
![Page 23: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/23.jpg)
To be continued…
![Page 24: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/24.jpg)
To be continued…
![Page 25: Chrome Dev Summit Summary 2013 part 1 - what’s hot ?](https://reader036.vdocuments.site/reader036/viewer/2022062703/554f6c4ab4c905bb178b4eaf/html5/thumbnails/25.jpg)
To be continued…