{"id":13796109,"url":"https://github.com/UseWebPlatform/motto-UseWebPlatform","last_synced_at":"2025-05-13T00:30:40.271Z","repository":{"id":216039473,"uuid":"107111063","full_name":"UseWebPlatform/motto-UseWebPlatform","owner":"UseWebPlatform","description":"Use universal the Web Platform primitives, a patterns and Polymer Project for reusable, performant, maintainable code.","archived":false,"fork":false,"pushed_at":"2017-11-17T13:52:45.000Z","size":57,"stargazers_count":11,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-08-03T23:06:21.207Z","etag":null,"topics":["csr","custom-elements","es6-modules","html-imports","html-template","http2","http2-push","polymer","progressive-web-apps","prpl-pattern","rail-performance-model","service-workers","shadow-dom","usetheplatform","usewebplatform","web-accessibility","web-api","web-workers","webcomponents","webplatform"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/UseWebPlatform.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-16T10:08:58.000Z","updated_at":"2024-08-03T23:06:22.365Z","dependencies_parsed_at":null,"dependency_job_id":"46c4399d-c172-4fd5-b2af-bdf35ef31618","html_url":"https://github.com/UseWebPlatform/motto-UseWebPlatform","commit_stats":null,"previous_names":["usewebplatform/motto-usewebplatform"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseWebPlatform%2Fmotto-UseWebPlatform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseWebPlatform%2Fmotto-UseWebPlatform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseWebPlatform%2Fmotto-UseWebPlatform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/UseWebPlatform%2Fmotto-UseWebPlatform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/UseWebPlatform","download_url":"https://codeload.github.com/UseWebPlatform/motto-UseWebPlatform/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225159846,"owners_count":17430191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["csr","custom-elements","es6-modules","html-imports","html-template","http2","http2-push","polymer","progressive-web-apps","prpl-pattern","rail-performance-model","service-workers","shadow-dom","usetheplatform","usewebplatform","web-accessibility","web-api","web-workers","webcomponents","webplatform"],"created_at":"2024-08-03T23:01:06.262Z","updated_at":"2024-11-18T10:31:04.247Z","avatar_url":"https://github.com/UseWebPlatform.png","language":null,"funding_links":[],"categories":["General resources"],"sub_categories":["Hashtags"],"readme":"# #UseWebPlatform\n\n[![GitHub Stars](https://img.shields.io/github/stars/UseWebPlatform/motto-UseWebPlatform.svg?label=GitHub%20Stars)](https://github.com/UseWebPlatform/motto-UseWebPlatform)\n[![GitHub Watchers](https://img.shields.io/github/watchers/UseWebPlatform/motto-UseWebPlatform.svg?label=GitHub%20Watchers)](https://github.com/UseWebPlatform/motto-UseWebPlatform)\n[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://help.github.com/articles/about-pull-requests/)\n\nUse universal the [Web Platform](https://www.w3.org/standards/) primitives, a patterns and Polymer Project for **reusable**, **performant**, **maintainable** code.\n\n\u003e Motto-in-hashtag-form #UseWebPlatform is extended motto [#UseThePlatform](https://www.polymer-project.org/about).\n\nThe primitives and the patterns:\n\n- [1. CSS Variables, HTML Templates, JavaScript, WebAssembly](#1-css-variables-html-templates-javascript-webassembly)\n- [2. Web Components](#2-web-components)\n- [3. HTTP/2 + Server Push + HTML Imports / ES6 Modules](#3-http2--server-push--html-imports--es6-modules)\n- [4. Service Workers, Web Workers](#4-service-workers-web-workers)\n- [5. Progressive Web Apps](#5-progressive-web-apps)\n- [6. Web Accessibility](#6-web-accessibility)\n- [7. Web APIs](#7-web-apis)\n- [8. PRPL Pattern](#8-prpl-pattern)\n- [9. RAIL Performance Model](#9-rail-performance-model)\n- [10. Polymer Project](#10-polymer-project)\n\n## 1. CSS Variables, HTML Templates, JavaScript, WebAssembly\n\n### CSS Variables, CSS Mixins\n\n- [CSS Variables: Why Should You Care?](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care)\n- [Using CSS custom properties (variables)](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)\n- [What is the difference between CSS variables and preprocessor variables?](https://css-tricks.com/difference-between-types-of-css-variables/)\n- [Polymer custom CSS properties](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties)\n- [Polymer custom CSS mixins](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties#use-custom-css-mixins)\n\n**You Don't Need** SASS, LESS, Stylus, etc.\n\n### HTML Templates\n\n- [HTML \\\u003ctemplate\\\u003e element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)\n- [Polymer data binding helper elements](https://www.polymer-project.org/2.0/docs/devguide/templates)\n- [HTML templates, via JavaScript template literals](https://github.com/PolymerLabs/lit-html)\n\n**You Don't Need** Mustache, Handlebars, Nunjucks, Pug, etc.\n\n### JavaScript\n\n[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.\n\n#### Learn JavaScript properly :exclamation:\n\n- [JavaScript Best Practices](https://www.w3schools.com/js/js_best_practices.asp)\n- [JavaScript Common Mistakes](https://www.w3schools.com/js/js_mistakes.asp)\n- [JavaScript Use Strict](https://www.w3schools.com/js/js_strict.asp)\n- [JavaScript Performance](https://www.w3schools.com/js/js_performance.asp)\n- [JavaScript ES6](http://es6-features.org) - New features: overview \u0026 comparison.\n- [Learn How To Debug JavaScript with Chrome DevTools](https://codeburst.io/learn-how-to-debug-javascript-with-chrome-devtools-9514c58479db)\n- [ES8 was Released and here are its Main New Features](https://hackernoon.com/es8-was-released-and-here-are-its-main-new-features-ee9c394adf66)\n- [Awesome Mobile Web Specialist](https://github.com/PolymerTemple/awesome-mobile-web-specialist)\n\n##### JavaScript Courses\n\n- [freeCodeCamp](https://www.freecodecamp.org)\n- [Codewars JavaScript](https://www.codewars.com/?language=javascript)\n- [Modern JavaScript with Tyler McGinnis](https://www.youtube.com/playlist?list=PLqrUy7kON1meLrM6e7WW02jJ8QongnT7Z)\n- [What are the best websites to learn to code?](https://www.producthunt.com/ask/3452-what-are-the-best-websites-to-learn-to-code)\n\n#### Static Types\n\n- [You Might Not Need TypeScript (or Static Types)](https://medium.com/javascript-scene/you-might-not-need-typescript-or-static-types-aa7cb670a77b)\n- [Polymer Custom Element Properties](https://www.polymer-project.org/2.0/docs/devguide/properties)\n\n**You Don't Need** Dart, TypeScript, Elm, PureScript, CoffeeScript, ClojureScript, etc.\n\n### WebAssembly\n\n[WebAssembly](http://webassembly.org) or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.\n\n**You Don't Need** Google Native Client.\n\n### Drop any frameworks\n\nDrop any frameworks for their bad performance and maintainability, check out the [HNPWA](https://hnpwa.com) apps.\n\n- [You Don't Need jQuery](https://github.com/oneuijs/You-Dont-Need-jQuery)\n- [You might not need a CSS framework](https://hacks.mozilla.org/2016/04/you-might-not-need-a-css-framework/)\n- [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)\n\n**You Don't Need** Angular, jQuery, React, Vue, Bootstrap, Foundation, etc.\n\n## 2. Web Components\n\n[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.\n\n[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.\n\n[The Gold Standard Checklist for Web Components](https://github.com/webcomponents/gold-standard/wiki)\n\nWeb components are based on four main specifications:\n\n- **Custom Elements** lays the foundation for designing and using new types of DOM elements.\n  - [Custom Elements Everywhere](https://custom-elements-everywhere.com)\n- **Shadow DOM** defines how to use encapsulated style and markup in web components.\n  - [Shadow DOM: fast and encapsulated styles](https://meowni.ca/posts/shadow-dom/)\n- **HTML Template** defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.\n- **HTML imports** defines the inclusion and reuse of HTML documents in other HTML documents.\n\n**You Don't Need** Angular Components, React Components, Vue Components, etc.\n\n## 3. HTTP/2 + Server Push + HTML Imports / ES6 Modules\n\nIn 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.\n\n**You Don't Need** Browserify, Rollup, Webpack, etc.\n\nPolymer 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:\n\n## 4. Service Workers, Web Workers\n\n[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.\n\nUse [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.\n\n[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.\n\n**You Don't Need** manually installable native or “hybrid” apps.\n\n## 5. Progressive Web Apps\n\n[Progressive Web Apps](https://developers.google.com/web/progressive-web-apps/) (PWA) are user experiences that have the reach of the web, and are:\n\n- **Reliable** - Load instantly and never show the downasaur, even in uncertain network conditions.\n- **Fast** - Respond quickly to user interactions with silky smooth animations and no janky scrolling.\n- **Engaging** - Feel like a natural app on the device, with an immersive user experience.\n\nThis new level of quality allows Progressive Web Apps to earn a place on the user's **home screen**.\n\n- [Introduction to Progressive Web App Architectures](https://developers.google.com/web/ilt/pwa/introduction-to-progressive-web-app-architectures-slides)\n- [Intro to Progressive Web Apps - Free course](https://www.udacity.com/course/intro-to-progressive-web-apps--ud811)\n- [Progressive Web App Checklist](https://developers.google.com/web/progressive-web-apps/checklist)\n- [The App Shell Model](https://developers.google.com/web/fundamentals/architecture/app-shell)\n- [Support native integration](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/#support_native_integration)\n- [Progressive Web Apps (PWA) and Windows 10](https://forum.kirupa.com/t/progressive-web-apps-pwa-and-windows-10/637192)\n- [How to Save PWA to iOS Homescreen](https://vimeo.com/236430523)\n- [WHY You Should Build A Progressive Web App NOW](https://www.youtube.com/watch?v=0LOk_OgUWGM)\n- [Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage](https://developers.google.com/web/showcase/2017/twitter)\n- [A community-driven list of stats and news related to PWA](https://www.pwastats.com)\n- [Integrating with Browsers and OS - Android Trusted Web Activity (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=_sLa0qhuqcA)\n- [Kickstarting Your Journey to Progressive Web Apps (Chrome Dev Summit 2017)](https://www.youtube.com/watch?v=goafiwzhKMI)\n\n| | Website | PWA (1) | Native App\n--- | --- | --- | ---\nOffline | NO :heavy_minus_sign: | YES :+1: | YES :+1:\nApp stores | NO :heavy_minus_sign: | NO :heavy_minus_sign: (2)(3) | YES :+1:\nResponsive | YES :+1: | YES :+1: | YES :+1:\nSearchable | YES :+1: | YES :+1: | NO :heavy_minus_sign:\nLocal Notifications | NO :heavy_minus_sign: | YES :+1: | YES :+1:\nPush Messages | NO :heavy_minus_sign: | YES :+1: | YES :+1:\nInstall needed to run | NO :+1: | NO :+1: | YES :heavy_minus_sign:\nFast Updates | YES :+1: | YES :+1: | NO :heavy_minus_sign:\nCross-platform | YES :+1: | YES :+1: | NO :heavy_minus_sign:\nPerformance | NO :heavy_minus_sign: | YES :+1: (4) | YES :+1:\nLower dev time and cost | YES :+1: | YES :+1: | NO :heavy_minus_sign:\nLower user acquisition cost | YES :+1: | YES :+1: (5) | NO :heavy_minus_sign:\n**Result** | +2 | +10 :heart: | 0\n\n(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)  \n(2) Progressive Web Apps are coming soon to the Windows Store for Windows 10 Devices. :+1:  \n(3) Updates don’t have to run through an app store. :+1:  \n(4) Performance using RAIL Performance Model, WebAssembly, Web Workers.  \n(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/)\n\n**You Don't Need** Apache Cordova, PhoneGap, Crosswalk, React Native, etc.\n\n## 6. Web Accessibility\n\n[Web Accessibility](https://www.w3.org/WAI/intro/accessibility.php) means that people with disabilities can use the Web.\n\n[A11ycasts with Rob Dodson](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)\n\n## 7. Web APIs\n\nWhen writing code for the Web with JavaScript, there are a great many [Web APIs](https://developer.mozilla.org/en-US/docs/Web/API) available.\n\n[Chrome Samples](https://www.chromestatus.com/samples)\n\n## 8. PRPL Pattern\n\n[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:\n\n- **Push** critical resources for the initial URL route.\n- **Render** initial route.\n- **Pre-cache** remaining routes.\n- **Lazy-load** and create remaining routes on demand.\n\nCSR (Client Side Rendering) with PRPL Pattern has similar performance as SSR (Server Side Rendering).  \n[JAMstack](https://jamstack.org) has similar architecture.\n\n**You Don't Need** SSR using Django, PHP, React, Tomcat, Vue, etc.\n\n### PRPL-50\n\n[Measure **Time to Interactive**](https://youtu.be/0A-2BhEZiM4?t=9m20s)\n\nBudget for TTI on mobile 3G networks is only ~ **50 KB** per route :exclamation:\n\n**Drop any frameworks**. Polymer 2.0 library has around 12 KB, so about 38 KB left for your budget. :tada:\n\n### PRPL Servers\n\n- [prpl-server-node](https://github.com/Polymer/prpl-server-node)\n- [prpl-server-go](https://github.com/CaptainCodeman/prpl-server-go)\n\n#### Features\n\n- [Differential Serving](https://github.com/Polymer/prpl-server-node#differential-serving)\n- [HTTP/2 Server Push](https://github.com/Polymer/prpl-server-node#http2-server-push)\n- [Rendering for Bots (SEO, Open Graph)](https://github.com/Polymer/prpl-server-node#rendering-for-bots)\n\n## 9. RAIL Performance Model\n\n[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:\n\n- **Response** - Input latency (from tap to paint) \u003c 100ms.\n- **Animation** - Each frame's work (from JS to paint) completes \u003c 16ms.\n- **Idle** - Main thread JS work chunked no larger than 50ms.\n- **Load** - Page considered ready to use in 1000ms.\n\n## 10. Polymer Project\n\nUnlock 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.\n\n- [Projects using Polymer](https://github.com/abdonrd/PolymerProjects)\n- [Polymer library](https://www.polymer-project.org/2.0/docs/devguide/feature-overview)\n- [Polymer Patterns](https://github.com/StartPolymer/awesome-polymer/blob/master/README.md#patterns)\n- [Polymer App Toolbox](https://www.polymer-project.org/2.0/toolbox/)\n- [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli)\n- [Polymer CLI Commands](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands)\n- [Polymer IDE plugins](https://github.com/StartPolymer/awesome-polymer#editor-plugins)\n- [Polymer 2.x uses ES6 and compilation to ES5](https://www.polymer-project.org/2.0/docs/es6)\n- [Polymer 3.0 preview uses npm and ES6 Modules](https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview.html)\n- [Integration with other frameworks](https://github.com/StartPolymer/awesome-polymer#integration-with-other-frameworks)\n\nWe have a collection of [Awesome Polymer](https://github.com/StartPolymer/awesome-polymer) resources.\n\nTry [StartPolymer Playgrounds](https://github.com/StartPolymer/playgrounds). :eyes:\n\n---\n\n\u003e Do you like it? Please, star the motto :star: [:top:](#usewebplatform)\n\n---\n\n\u003e Short link: [git.io/UseWebPlatform](https://git.io/UseWebPlatform)\n\n---\n\n### License\n\n[![CC0](http://i.creativecommons.org/p/zero/1.0/88x31.png)](http://creativecommons.org/publicdomain/zero/1.0/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUseWebPlatform%2Fmotto-UseWebPlatform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FUseWebPlatform%2Fmotto-UseWebPlatform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FUseWebPlatform%2Fmotto-UseWebPlatform/lists"}