Chrome Dev Summit Summary 2013 part 1 - what’s hot ?

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

Credits and full information

http://developer.chrome.com/devsummit

Keynote by Linus Upson VP Engineering for Chrome

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

Mobile UX by Paul Kinlan

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

Network connectivity by Jake Archibald

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

#perfmatters: 60fps layout and rendering by Tom Wiltzius and Nat Duca

#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

#perfmatters: Optimizing network performance by Ilya Grigorik

#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)

Chrome DevTools for Mobile by Paul Irish

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 !

Chrome DevTools for Mobile by Paul Irish

• And NOW Mobile Simulation on Chrome dev tools !

Chrome DevTools for Mobile by Paul Irish

• http://www.youtube.com/watch?v=gZH1d2Co1X0&feature=youtu.be&t=14m20s

Chrome DevTools for Mobile by Paul Irish

• For CSS: soon available : the layer panel

(in 3D)• LESS, SASS

and others in CDT

Dart for the modern web developerby Kasper Lund and Seth Ladd

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 !

GDG Montreal next talk:Chrome Apps (Pete Lepage)

Coffee break and after :• Pete Lepage (Google Inc.), will now present us

the Chrome Apps !

• 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…

To be continued…

To be continued…

To be continued…

To be continued…