├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 hemanth.hm 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CDS 2 | Chrome DevSummit 2016 Notes 3 | 4 | ## KeyNote 5 | > The state of Chrome and the Web Platform today, from the leader of the Chrome team. 6 | 7 | Darin Fisher's (VP of Chrome Engineering) keynote: 8 | 9 | * Mission: Move the web platform forward. 10 | * Over 2 billion active Chrome users across mobile and desktop. 11 | * Not just Chrome, the Web has a reach! 12 | * Links the Web's superpower, physical beacons. [Polymon](https://polymon.polymer-project.org/) 13 | * Every interaction step costs 20% of your potential users! 14 | * The Web is Mobile: Constrains has lead to innovation. 15 | * Build for Mobile Web is a priority: Connectivity constraints 16 | * Almost 60% in developing market are on 2G! 17 | * 230M in US, 460M in India (100M new users every year!) 760M in China. 18 | * 65% of Indian population aren't online yet, 20% in US are not yet online. 19 | * Web works well really well in emerging markets: Flipkart, Voot Viacom18. 20 | * Progressive Web Apps: Radically improving web experience. Not able on technology, it's more about new way of building web experience. 21 | * Demo on [cnet-tech-today](http://cnet.com/tech-today) a progressive webapp. 22 | * Alibaba usecase study: 76% higher conversion due to progressive webapp; Singles day is an event in China on November 11th is the biggest event on the internet, 3 times more than cyber Monday, is on a progressive webapp. 23 | * Fast - 53% of users abundant the site which takes more than 3 seconds to load. 24 | * Refresher on service worker API. 25 | * The Monica Per Test gets a mention. 26 | * Apps should be interactive within 5 seconds over 3G. 27 | * Engaging - Add to Home screen; 4x more engagement due to this feature; prompting users sooner yields 48% more installs. 28 | * Install vs ATHS. 29 | * Improving ATHS flow so the website will be in all apps location. 30 | * Ability to update the home screen icon or the name. 31 | * Push notification: 18 Billion push notifications sent everyday over 50,000 domains using it! 32 | * Seamless Sign-In: 85% reduction in sign in failure for AliExpress, Pinterest 10% increase in desktop logins. 33 | * WebPayments: Payment request API. 34 | * Productivity: Lighthouse, Real World condition testing, Security and Applications panel in Chrome. 35 | * Polymer gets a mention. 36 | * [Beta webcomponents](https://beta.webcomponents.org/) and AMP. 37 | * Predictability: The web should just work for developers. [browser-issue-tracker-search](https://browser-issue-tracker-search.appspot.com/) 38 | * Looking ahead: Web assembly, WebGL 2.0, WebVR, WebAR, WebBluetooth. 39 | 40 | ## Building Progressive Web apps. 41 | > Thao Tran, talks about it. 42 | 43 | * Looking back from the previous year to this in the progress of progressive webapp. 44 | * Toys lasts for a week! Was the Flipkart PWA a unicorn, not really! 45 | * Beyond Flipkart the overall momentum went up. 46 | * 17K across 35 countries for a PWA summit. 47 | * What is a PWA? Radically improving web user experiences; It's a journey; 48 | * [building-indexable-progressive-web-apps](https://webmasters.googleblog.com/2016/11/building-indexable-progressive-web-apps.html) 49 | * Housing.com Android App -> $3.75 and Mobile Web -> $0.07; 30% faster page load; 38% increase in conversion. 50 | * Early beta of [web elm](https://mobile-beta.westelm.com) PWA. 51 | * Infobase Latin America: 65% of traffic is on mobile, < 1s page load time. 52 | * Lyft rolled out an mobile site just to test orders: they had 5x more rides from mobile web! So they are building a PWA which will be `<1MB` compared to 17MB andoird and 75MB ios. 53 | * MakeMyTrip: Same day reservation from mobile web, PWA users book 3x more on their first visit! 54 | * The Weather company (An IBM Business): 18months ago they started: Moved to HTTPS, Web Push notification, 178 countries in 62 languages now! 55 | * PWA: Acquistion; Engagement; Conversion; Retention. 56 | 57 | 58 | ## Sign-in on the web; Credential Management API 59 | > Sabine and Eiji shared best practices for sign-in, and explains how the Credential Management API makes frictionless sign-in possible. 60 | 61 | * Removing friction 62 | * Growth: 54℅ will abandon rather than register. 63 | * autocomplete inputs. 64 | * Avoiding login friction: 92℅ leave the site if they can't recall the password. 65 | * Leverage the power of the browser to make sign-up easier with credential management API. 66 | * Session management and 2 cookie handoff using serviceworkers. 67 | * Launched in Chrome 51. 68 | * Problems that this API solves: Auto sign-in, Smart lock for passwords. 69 | * Auto sign-in across devices. 70 | * Supports multiple accounts. 71 | * Virtually enables a permanent 72 | * Remembers federated accounts. 73 | * Steps: Interrupt the from submission; send an Ajax request; store the credential information; update the UI. 74 | * Federated login cases: Auth; store the identity information; store the credentials. 75 | 76 | ## Faster payments. 77 | > One of the hardest web user experience challenges is enabling users to make payments. Zach shows us how with the new Web Payment API. 78 | 79 | 80 | * Save the world from annoying checkouts form. 81 | * PaymentRequest API: Not a new payment method; Not a gateway or a processor; 82 | * Fundamentally build for users, is a standard-based API making payments easier for users. 83 | * Main goals: Easy checkout and secure payment on Web. 84 | * Supported data types: Credit cards and Android pay; Shipping address, options, phone, email, payer name. 85 | * All the data points are stored and returned from the browser. 86 | 87 | ## Debugging The Web. 88 | > Learn the state of the art in debugging using Chrome DevTools - all you need to know to expand your toolbox. 89 | 90 | * Debugging like a boss: Making it clear on why there was an issue right on the devtools. In Chrome55+ the screen orientation will not affect the content much. 91 | * ES6 + DevTools. 92 | * Text editor like REPL in DevTools. 93 | * Better autocompletion on Objects. 94 | * Substrings completions are better. 95 | * Snippets.... 96 | * Place multiple inline break points in async or any line of code. 97 | * Auto picks up the workspace mapping on drag and drop. (*Source maps) 98 | * CSS coverage. Unuse CSS. 99 | * NodeJS main context debugging in the same devTools. 100 | * Application tab > manifest, clear storage, servicework et.al. 101 | * Auditing PWA: Audit2.0 uses the power of Lighthouse. 102 | 103 | ## Polymer, Web Components & You. 104 | > Taylor Savage and Monica Dinculescu on the current state of Polymer, and how you can use Web Components to improve your development. 105 | 106 | * Mobile device constraints. 107 | * Use the platform. 108 | * Primay focus of Polymer are web-components. 109 | * Web Components V1. (Cross browser web component) 110 | * Polymer 0.5 was an experiment, 1.0 was production-ready, 2.0 shall be web native. 111 | * Who is using Polymer: Comcast, ING, BBVA, Netaporte, Coca-Cola, EA, Predix, Google and others. 112 | * Polymer App Toolbox: Set of web components, CLI, PRPL pattern; Example -> [shop](https://shop.polymer-project.org) 113 | * JUMIA Travels use case: 75% of mobile connection is on 2G in Africa, >2x faster page load on 2G and 6x less data than native app. 114 | * What's next on ploymer? Polymer2.0 - Web component V1 support; Better interoperability; Minimally breaking (backwards compatibility); Supports hybrid mode (i.e both on V1 and V2). 115 | * Polymer is light, it's just 12kb. 116 | * Polymer is about elements! element development is hard; Authors, maintainers and users of elements are the player here. 117 | * 100+ elements in polymer; 3 orgs; 20+ apps; 500+ projects. 118 | * Steps: Think of the features; Map the features to components; 119 | 120 | 121 | 122 | ## Progressive Performance. 123 | > Alex Russell on the important things to focus on in performance, and how to run great experiences on slow, inconsistent networks and low-power devices. 124 | 125 | * [I realized I'd invented webpages](xkcd.com/1367) 126 | * We are in the middle of a crisis. 127 | * RAIL: 100ms/8ms/50ms chunks/1000ms. 128 | * 53% bounce with sites that take more than three seconds to load. 129 | * Collectively we are failing; 130 | * Why are our tools slow? 131 | * Your laptop is a filthy liar. 132 | * Understand the depth of the deficit. 133 | * The truth is in the trace. 134 | * Avg selling price of smart phones are going down; The next million users are buying their first phone. 135 | * Motion Mark: Desktop version is like 25x times faster. 136 | * Power = Heat. 137 | * A desktop can emit 60W of energy; Mobile devices can't do that! 138 | * No thermal paste, no fans, no heat sinks on a mobile device. 139 | * Dark silicon and the end of multicore scaling paper. 140 | * 10.0Wh is all the battery got and it has to deal with GPU, CPU, NFC, Screen, Wifi et.al 141 | * big.LITTLE arch. 142 | * "touch boost"; SMP vs HMP vs EAS. 143 | * Benchmarketing is A Thing! (Can't trust them) 144 | * Mobile CPUs aren't really what think they are. 145 | * MLC Flash is how we make storage cheaper. 146 | * Read Perf: MBP: ~2GB/s and N5X: ~400MB/s. 147 | * Mobile networks hate you! 148 | * Will LTE save us? Networks are slowing down. 149 | * Network overhead of one HTTP request! 150 | * Load less code, load it at the right time and let the browser help us whenever we can. 151 | * Ignorance / Privilege or both is the result of the frameworks today. 152 | * Tools that doesn't use platform well, we end up in the Uncanny Valley. 153 | * Serviceworkers aren't just about offline experience it's also about reliable performance! 154 | * Mobile Hates You; Fight Back! 155 | 156 | ## Real Talk about HTTPS 157 | > Emily shows why the default for the web should be secure, and describes Chrome's mission to be honest with our users about HTTPS. 158 | 159 | * What does HTTP mean for an avg user? 160 | * HTTPS usage today: HTTPS at Google. (Transparency report); On Desktop platform 53% of users are using HTTPS sites; Not the pages but the % of time spent is important; 161 | * HTTPS performance is getting better. Checkout [istlsfastyet](https://istlsfastyet.com) 162 | * Make HTTPS mandatory for privacy sensitive features. 163 | * HTTP2 might also be adding an over head, but it's getting better. 164 | * We need your help to get close to HTTPS everywhere! 165 | * Don't be a Cry wolf victim. 166 | * Chrome has funded to Let's encrypt. 167 | * Ads that are only on HTTP not if they are Google sourced ads. 168 | * Enabling HTTPS webfundamentals. 169 | * Search ranking should not drop, if you have done it right. 170 | * DevTools security panel. 171 | * The near future: In Chrome 56, there shall be a neutral information icon for HTTP pages with password or credit cards input in them. 172 | * `#mark-non-secure-as` in `chrome://flags` 173 | 174 | 175 | ## Planning for Performance: PRPL 176 | > Sam explains how to get the browser to do things under budget - script and resource loading and more. 177 | 178 | * The Pitch: Your manager asks: "Well does this work on mobile?" 179 | * Mobile web is not more a subset of web, it's simply the web! 180 | * Your users are not on the best phones. 181 | * 19s is the avg load time on the mobile web! 182 | * User expects the page to load in 2s. 183 | * What it takes to load a page? Request Page -> Request Assets -> Parse and Paint. 184 | * Network Delivery (for shop app): 185 | * HTTP2 + no bundling on 3g => 5.5 seconds until first paint. 186 | * HTTP2 + no bundling + link rel="preload" on 3g => 3.3 seconds. 187 | * H2 server push + no bundling on 3g => 1.7 seconds. 188 | * H2 server push is not cache aware, lacking resource prioritization, but H2 server push + SW is Nirvana! 189 | * Preload is good for moving the start download time of an asset closer to initial request. 190 | * H2 push is good for cutting out a full RTT. 191 | * Nov 2010 -> 113kb of JS, today in 2106 we are shipping 400+kb of JS. 192 | * V8 internal metrics in Canary. 193 | * Debugging a bundle. (Webpack) 194 | * Webpack bundle analyzer. 195 | * Shipping less parsed code: `