└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # #UseWebPlatform 2 | 3 | [![GitHub Stars](https://img.shields.io/github/stars/UseWebPlatform/motto-UseWebPlatform.svg?label=GitHub%20Stars)](https://github.com/UseWebPlatform/motto-UseWebPlatform) 4 | [![GitHub Watchers](https://img.shields.io/github/watchers/UseWebPlatform/motto-UseWebPlatform.svg?label=GitHub%20Watchers)](https://github.com/UseWebPlatform/motto-UseWebPlatform) 5 | [![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://help.github.com/articles/about-pull-requests/) 6 | 7 | Use universal the [Web Platform](https://www.w3.org/standards/) primitives, a patterns and Polymer Project for **reusable**, **performant**, **maintainable** code. 8 | 9 | > Motto-in-hashtag-form #UseWebPlatform is extended motto [#UseThePlatform](https://www.polymer-project.org/about). 10 | 11 | The primitives and the patterns: 12 | 13 | - [1. CSS Variables, HTML Templates, JavaScript, WebAssembly](#1-css-variables-html-templates-javascript-webassembly) 14 | - [2. Web Components](#2-web-components) 15 | - [3. HTTP/2 + Server Push + HTML Imports / ES6 Modules](#3-http2--server-push--html-imports--es6-modules) 16 | - [4. Service Workers, Web Workers](#4-service-workers-web-workers) 17 | - [5. Progressive Web Apps](#5-progressive-web-apps) 18 | - [6. Web Accessibility](#6-web-accessibility) 19 | - [7. Web APIs](#7-web-apis) 20 | - [8. PRPL Pattern](#8-prpl-pattern) 21 | - [9. RAIL Performance Model](#9-rail-performance-model) 22 | - [10. Polymer Project](#10-polymer-project) 23 | 24 | ## 1. CSS Variables, HTML Templates, JavaScript, WebAssembly 25 | 26 | ### CSS Variables, CSS Mixins 27 | 28 | - [CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) 29 | - [Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) 30 | - [What is the difference between CSS variables and preprocessor variables?](https://css-tricks.com/difference-between-types-of-css-variables/) 31 | - [Polymer custom CSS properties](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties) 32 | - [Polymer custom CSS mixins](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins) 33 | 34 | **You Don't Need** SASS, LESS, Stylus, etc. 35 | 36 | ### HTML Templates 37 | 38 | - [HTML \ element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template) 39 | - [Polymer data binding helper elements](https://www.polymer-project.org/2.0/docs/devguide/templates) 40 | - [HTML templates, via JavaScript template literals](https://github.com/PolymerLabs/lit-html) 41 | 42 | **You Don't Need** Mustache, Handlebars, Nunjucks, Pug, etc. 43 | 44 | ### JavaScript 45 | 46 | [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) (JS) is a lightweight interpreted or JIT-compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as node.js, Apache CouchDB, Adobe Acrobat, Google Apps Script, Google BigQuery UDF, etc. 47 | 48 | #### Learn JavaScript properly :exclamation: 49 | 50 | - [JavaScript Best Practices](https://www.w3schools.com/js/js_best_practices.asp) 51 | - [JavaScript Common Mistakes](https://www.w3schools.com/js/js_mistakes.asp) 52 | - [JavaScript Use Strict](https://www.w3schools.com/js/js_strict.asp) 53 | - [JavaScript Performance](https://www.w3schools.com/js/js_performance.asp) 54 | - [JavaScript ES6](http://es6-features.org) - New features: overview & comparison. 55 | - [Learn How To Debug JavaScript with Chrome DevTools](https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db) 56 | - [ES8 was Released and here are its Main New Features](https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66) 57 | - [Awesome Mobile Web Specialist](https://github.com/PolymerTemple/awesome-mobile-web-specialist) 58 | 59 | ##### JavaScript Courses 60 | 61 | - [freeCodeCamp](https://www.freecodecamp.org) 62 | - [Codewars JavaScript](https://www.codewars.com/?language=javascript) 63 | - [Modern JavaScript with Tyler McGinnis](https://www.youtube.com/playlist?list=PLqrUy7kON1meLrM6e7WW02jJ8QongnT7Z) 64 | - [What are the best websites to learn to code?](https://www.producthunt.com/ask/3452-what-are-the-best-websites-to-learn-to-code) 65 | 66 | #### Static Types 67 | 68 | - [You Might Not Need TypeScript (or Static Types)](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b) 69 | - [Polymer Custom Element Properties](https://www.polymer-project.org/2.0/docs/devguide/properties) 70 | 71 | **You Don't Need** Dart, TypeScript, Elm, PureScript, CoffeeScript, ClojureScript, etc. 72 | 73 | ### WebAssembly 74 | 75 | [WebAssembly](http://webassembly.org) or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web. 76 | 77 | **You Don't Need** Google Native Client. 78 | 79 | ### Drop any frameworks 80 | 81 | Drop any frameworks for their bad performance and maintainability, check out the [HNPWA](https://hnpwa.com) apps. 82 | 83 | - [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery) 84 | - [You might not need a CSS framework](https://hacks.mozilla.org/2016/04/you-might-not-need-a-css-framework/) 85 | - [JavaScript back to basics: You might not need React or Angular 2](https://react-etc.net/entry/javascript-back-to-basics-you-might-not-need-react-or-angular-2) 86 | 87 | **You Don't Need** Angular, jQuery, React, Vue, Bootstrap, Foundation, etc. 88 | 89 | ## 2. Web Components 90 | 91 | [Web Components](https://www.webcomponents.org/introduction) are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. 92 | 93 | [Web Components](https://developers.google.com/web/fundamentals/web-components/) let us extend the browser’s built-in component model - **the DOM** - rather than bring our own. 94 | 95 | [The Gold Standard Checklist for Web Components](https://github.com/webcomponents/gold-standard/wiki) 96 | 97 | Web components are based on four main specifications: 98 | 99 | - **Custom Elements** lays the foundation for designing and using new types of DOM elements. 100 | - [Custom Elements Everywhere](https://custom-elements-everywhere.com) 101 | - **Shadow DOM** defines how to use encapsulated style and markup in web components. 102 | - [Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/) 103 | - **HTML Template** defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime. 104 | - **HTML imports** defines the inclusion and reuse of HTML documents in other HTML documents. 105 | 106 | **You Don't Need** Angular Components, React Components, Vue Components, etc. 107 | 108 | ## 3. HTTP/2 + Server Push + HTML Imports / ES6 Modules 109 | 110 | In combination with [HTTP/2](https://developers.google.com/web/fundamentals/performance/http2/) and [Server Push](https://developers.google.com/web/fundamentals/performance/http2/#server_push), standard module formats like [HTML Imports](https://w3c.github.io/webcomponents/spec/imports/) and [ES6 Modules](http://exploringjs.com/es6/ch_modules.html) let us declare **fine-grained dependencies** and efficiently deliver them to the client in optimally cacheable form, without relying on complicated packaging tools and loaders. 111 | 112 | **You Don't Need** Browserify, Rollup, Webpack, etc. 113 | 114 | Polymer 3.0 library using [JavaScript modules via script tag](https://caniuse.com/#feat=es6-module), read more info at [MDN import](https://developer.mozilla.org/cs/docs/Web/JavaScript/Reference/Statements/import). :tada: 115 | 116 | ## 4. Service Workers, Web Workers 117 | 118 | [Service Workers](https://developers.google.com/web/fundamentals/primers/service-workers/) let us build pure web apps that users can access even when their devices are **offline** or network conditions are poor, whereas previously we might have had to resort to manually installable native or “hybrid” apps. 119 | 120 | Use [Workbox](https://developers.google.com/web/tools/workbox/) to simplify your development by making it easy to take advantage of powerful service worker features, eliminate boilerplate code, and automate service worker generation. 121 | 122 | [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) is a simple means for web content to run scripts in **background threads**. The worker thread can perform tasks without interfering with the user interface. 123 | 124 | **You Don't Need** manually installable native or “hybrid” apps. 125 | 126 | ## 5. Progressive Web Apps 127 | 128 | [Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) (PWA) are user experiences that have the reach of the web, and are: 129 | 130 | - **Reliable** - Load instantly and never show the downasaur, even in uncertain network conditions. 131 | - **Fast** - Respond quickly to user interactions with silky smooth animations and no janky scrolling. 132 | - **Engaging** - Feel like a natural app on the device, with an immersive user experience. 133 | 134 | This new level of quality allows Progressive Web Apps to earn a place on the user's **home screen**. 135 | 136 | - [Introduction to Progressive Web App Architectures](https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures-slides) 137 | - [Intro to Progressive Web Apps - Free course](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811) 138 | - [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist) 139 | - [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell) 140 | - [Support native integration](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#support_native_integration) 141 | - [Progressive Web Apps (PWA) and Windows 10](https://forum.kirupa.com/t/progressive-web-apps-pwa-and-windows-10/637192) 142 | - [How to Save PWA to iOS Homescreen](https://vimeo.com/236430523) 143 | - [WHY You Should Build A Progressive Web App NOW](https://www.youtube.com/watch?v=0LOk_OgUWGM) 144 | - [Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage](https://developers.google.com/web/showcase/2017/twitter) 145 | - [A community-driven list of stats and news related to PWA](https://www.pwastats.com) 146 | - [Integrating with Browsers and OS - Android Trusted Web Activity (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=_sLa0qhuqcA) 147 | - [Kickstarting Your Journey to Progressive Web Apps (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=goafiwzhKMI) 148 | 149 | | | Website | PWA (1) | Native App 150 | --- | --- | --- | --- 151 | Offline | NO :heavy_minus_sign: | YES :+1: | YES :+1: 152 | App stores | NO :heavy_minus_sign: | NO :heavy_minus_sign: (2)(3) | YES :+1: 153 | Responsive | YES :+1: | YES :+1: | YES :+1: 154 | Searchable | YES :+1: | YES :+1: | NO :heavy_minus_sign: 155 | Local Notifications | NO :heavy_minus_sign: | YES :+1: | YES :+1: 156 | Push Messages | NO :heavy_minus_sign: | YES :+1: | YES :+1: 157 | Install needed to run | NO :+1: | NO :+1: | YES :heavy_minus_sign: 158 | Fast Updates | YES :+1: | YES :+1: | NO :heavy_minus_sign: 159 | Cross-platform | YES :+1: | YES :+1: | NO :heavy_minus_sign: 160 | Performance | NO :heavy_minus_sign: | YES :+1: (4) | YES :+1: 161 | Lower dev time and cost | YES :+1: | YES :+1: | NO :heavy_minus_sign: 162 | Lower user acquisition cost | YES :+1: | YES :+1: (5) | NO :heavy_minus_sign: 163 | **Result** | +2 | +10 :heart: | 0 164 | 165 | (1) PWA on [Chrome from v59 on Android](https://developers.google.com/web/updates/2017/02/improved-add-to-home-screen), [Chromebook](https://youtu.be/m-sCdS0sQO8?t=16m12s), [Samsung Internet v5.4 on Android](https://medium.com/samsung-internet-dev/announcing-samsung-internet-v5-4-stable-fd941e0dcd58), Windows 10 (coming soon) 166 | (2) Progressive Web Apps are coming soon to the Windows Store for Windows 10 Devices. :+1: 167 | (3) Updates don’t have to run through an app store. :+1: 168 | (4) Performance using RAIL Performance Model, WebAssembly, Web Workers. 169 | (5) [Progressive Web Apps vs Native: Which Is Better for Your Business?](https://www.technology.org/2017/07/28/progressive-web-apps-vs-native-which-is-better-for-your-business/) 170 | 171 | **You Don't Need** Apache Cordova, PhoneGap, Crosswalk, React Native, etc. 172 | 173 | ## 6. Web Accessibility 174 | 175 | [Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) means that people with disabilities can use the Web. 176 | 177 | [A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g) 178 | 179 | ## 7. Web APIs 180 | 181 | When writing code for the Web with JavaScript, there are a great many [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) available. 182 | 183 | [Chrome Samples](https://www.chromestatus.com/samples) 184 | 185 | ## 8. PRPL Pattern 186 | 187 | [PRPL](https://developers.google.com/web/fundamentals/performance/prpl-pattern/) is a pattern for structuring and serving Progressive Web Apps (PWAs), with an emphasis on the performance of app delivery and launch. It stands for: 188 | 189 | - **Push** critical resources for the initial URL route. 190 | - **Render** initial route. 191 | - **Pre-cache** remaining routes. 192 | - **Lazy-load** and create remaining routes on demand. 193 | 194 | CSR (Client Side Rendering) with PRPL Pattern has similar performance as SSR (Server Side Rendering). 195 | [JAMstack](https://jamstack.org) has similar architecture. 196 | 197 | **You Don't Need** SSR using Django, PHP, React, Tomcat, Vue, etc. 198 | 199 | ### PRPL-50 200 | 201 | [Measure **Time to Interactive**](https://youtu.be/0A-2BhEZiM4?t=9m20s) 202 | 203 | Budget for TTI on mobile 3G networks is only ~ **50 KB** per route :exclamation: 204 | 205 | **Drop any frameworks**. Polymer 2.0 library has around 12 KB, so about 38 KB left for your budget. :tada: 206 | 207 | ### PRPL Servers 208 | 209 | - [prpl-server-node](https://github.com/Polymer/prpl-server-node) 210 | - [prpl-server-go](https://github.com/CaptainCodeman/prpl-server-go) 211 | 212 | #### Features 213 | 214 | - [Differential Serving](https://github.com/Polymer/prpl-server-node#differential-serving) 215 | - [HTTP/2 Server Push](https://github.com/Polymer/prpl-server-node#http2-server-push) 216 | - [Rendering for Bots (SEO, Open Graph)](https://github.com/Polymer/prpl-server-node#rendering-for-bots) 217 | 218 | ## 9. RAIL Performance Model 219 | 220 | [RAIL](https://developers.google.com/web/fundamentals/performance/rail) is a user-centric performance model. Every web app has these four distinct aspects to its life cycle, and performance fits into them in different ways: 221 | 222 | - **Response** - Input latency (from tap to paint) < 100ms. 223 | - **Animation** - Each frame's work (from JS to paint) completes < 16ms. 224 | - **Idle** - Main thread JS work chunked no larger than 50ms. 225 | - **Load** - Page considered ready to use in 1000ms. 226 | 227 | ## 10. Polymer Project 228 | 229 | Unlock the Power of Web Components with ES6. [Polymer](https://www.polymer-project.org) is a JavaScript library that helps you create custom **reusable** HTML elements, and use them to build **performant**, **maintainable** apps. 230 | 231 | - [Projects using Polymer](https://github.com/abdonrd/PolymerProjects) 232 | - [Polymer library](https://www.polymer-project.org/2.0/docs/devguide/feature-overview) 233 | - [Polymer Patterns](https://github.com/StartPolymer/awesome-polymer/blob/master/README.md#patterns) 234 | - [Polymer App Toolbox](https://www.polymer-project.org/2.0/toolbox/) 235 | - [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) 236 | - [Polymer CLI Commands](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands) 237 | - [Polymer IDE plugins](https://github.com/StartPolymer/awesome-polymer#editor-plugins) 238 | - [Polymer 2.x uses ES6 and compilation to ES5](https://www.polymer-project.org/2.0/docs/es6) 239 | - [Polymer 3.0 preview uses npm and ES6 Modules](https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview.html) 240 | - [Integration with other frameworks](https://github.com/StartPolymer/awesome-polymer#integration-with-other-frameworks) 241 | 242 | We have a collection of [Awesome Polymer](https://github.com/StartPolymer/awesome-polymer) resources. 243 | 244 | Try [StartPolymer Playgrounds](https://github.com/StartPolymer/playgrounds). :eyes: 245 | 246 | --- 247 | 248 | > Do you like it? Please, star the motto :star: [:top:](#usewebplatform) 249 | 250 | --- 251 | 252 | > Short link: [git.io/UseWebPlatform](https://git.io/UseWebPlatform) 253 | 254 | --- 255 | 256 | ### License 257 | 258 | [![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/) 259 | --------------------------------------------------------------------------------