Use universal the Web Platform primitives, a patterns and Polymer Project for reusable, performant, maintainable code.
Motto-in-hashtag-form #UseWebPlatform is extended motto #UseThePlatform.
The primitives and the patterns:
- 1. CSS Variables, HTML Templates, JavaScript, WebAssembly
- 2. Web Components
- 3. HTTP/2 + Server Push + HTML Imports / ES6 Modules
- 4. Service Workers, Web Workers
- 5. Progressive Web Apps
- 6. Web Accessibility
- 7. Web APIs
- 8. PRPL Pattern
- 9. RAIL Performance Model
- 10. Polymer Project
- CSS Variables: Why Should You Care?
- Using CSS custom properties (variables)
- What is the difference between CSS variables and preprocessor variables?
- Polymer custom CSS properties
- Polymer custom CSS mixins
You Don't Need SASS, LESS, Stylus, etc.
- HTML <template> element
- Polymer data binding helper elements
- HTML templates, via JavaScript template literals
You Don't Need Mustache, Handlebars, Nunjucks, Pug, etc.
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.
- JavaScript Best Practices
- JavaScript Common Mistakes
- JavaScript Use Strict
- JavaScript Performance
- JavaScript ES6 - New features: overview & comparison.
- Learn How To Debug JavaScript with Chrome DevTools
- ES8 was Released and here are its Main New Features
- Awesome Mobile Web Specialist
- freeCodeCamp
- Codewars JavaScript
- Modern JavaScript with Tyler McGinnis
- What are the best websites to learn to code?
You Don't Need Dart, TypeScript, Elm, PureScript, CoffeeScript, ClojureScript, etc.
WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web.
You Don't Need Google Native Client.
Drop any frameworks for their bad performance and maintainability, check out the HNPWA apps.
- You Don't Need jQuery
- You might not need a CSS framework
- JavaScript back to basics: You might not need React or Angular 2
You Don't Need Angular, jQuery, React, Vue, Bootstrap, Foundation, etc.
Web Components 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.
Web Components let us extend the browser’s built-in component model - the DOM - rather than bring our own.
The Gold Standard Checklist for Web Components
Web components are based on four main specifications:
- Custom Elements lays the foundation for designing and using new types of DOM elements.
- Shadow DOM defines how to use encapsulated style and markup in web components.
- HTML Template defines how to declare fragments of markup that go unused at page load, but can be instantiated later on at runtime.
- HTML imports defines the inclusion and reuse of HTML documents in other HTML documents.
You Don't Need Angular Components, React Components, Vue Components, etc.
In combination with HTTP/2 and Server Push, standard module formats like HTML Imports and ES6 Modules 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.
You Don't Need Browserify, Rollup, Webpack, etc.
Polymer 3.0 library using JavaScript modules via script tag, read more info at MDN import. 🎉
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.
Use 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.
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.
You Don't Need manually installable native or “hybrid” apps.
Progressive Web Apps (PWA) are user experiences that have the reach of the web, and are:
- Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
- Introduction to Progressive Web App Architectures
- Intro to Progressive Web Apps - Free course
- Progressive Web App Checklist
- The App Shell Model
- Support native integration
- Progressive Web Apps (PWA) and Windows 10
- How to Save PWA to iOS Homescreen
- WHY You Should Build A Progressive Web App NOW
- Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
- A community-driven list of stats and news related to PWA
- Integrating with Browsers and OS - Android Trusted Web Activity (Chrome Dev Summit 2017)
- Kickstarting Your Journey to Progressive Web Apps (Chrome Dev Summit 2017)
| Website | PWA (1) | Native App | |
|---|---|---|---|
| Offline | NO ➖ | YES 👍 | YES 👍 |
| App stores | NO ➖ | NO ➖ (2)(3) | YES 👍 |
| Responsive | YES 👍 | YES 👍 | YES 👍 |
| Searchable | YES 👍 | YES 👍 | NO ➖ |
| Local Notifications | NO ➖ | YES 👍 | YES 👍 |
| Push Messages | NO ➖ | YES 👍 | YES 👍 |
| Install needed to run | NO 👍 | NO 👍 | YES ➖ |
| Fast Updates | YES 👍 | YES 👍 | NO ➖ |
| Cross-platform | YES 👍 | YES 👍 | NO ➖ |
| Performance | NO ➖ | YES 👍 (4) | YES 👍 |
| Lower dev time and cost | YES 👍 | YES 👍 | NO ➖ |
| Lower user acquisition cost | YES 👍 | YES 👍 (5) | NO ➖ |
| Result | +2 | +10 ❤️ | 0 |
(1) PWA on Chrome from v59 on Android, Chromebook, Samsung Internet v5.4 on Android, Windows 10 (coming soon)
(2) Progressive Web Apps are coming soon to the Windows Store for Windows 10 Devices. 👍
(3) Updates don’t have to run through an app store. 👍
(4) Performance using RAIL Performance Model, WebAssembly, Web Workers.
(5) Progressive Web Apps vs Native: Which Is Better for Your Business?
You Don't Need Apache Cordova, PhoneGap, Crosswalk, React Native, etc.
Web Accessibility means that people with disabilities can use the Web.
When writing code for the Web with JavaScript, there are a great many Web APIs available.
PRPL 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:
- Push critical resources for the initial URL route.
- Render initial route.
- Pre-cache remaining routes.
- Lazy-load and create remaining routes on demand.
CSR (Client Side Rendering) with PRPL Pattern has similar performance as SSR (Server Side Rendering).
JAMstack has similar architecture.
You Don't Need SSR using Django, PHP, React, Tomcat, Vue, etc.
Budget for TTI on mobile 3G networks is only ~ 50 KB per route ❗
Drop any frameworks. Polymer 2.0 library has around 12 KB, so about 38 KB left for your budget. 🎉
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:
- Response - Input latency (from tap to paint) < 100ms.
- Animation - Each frame's work (from JS to paint) completes < 16ms.
- Idle - Main thread JS work chunked no larger than 50ms.
- Load - Page considered ready to use in 1000ms.
Unlock the Power of Web Components with ES6. Polymer is a JavaScript library that helps you create custom reusable HTML elements, and use them to build performant, maintainable apps.
- Projects using Polymer
- Polymer library
- Polymer Patterns
- Polymer App Toolbox
- Polymer CLI
- Polymer CLI Commands
- Polymer IDE plugins
- Polymer 2.x uses ES6 and compilation to ES5
- Polymer 3.0 preview uses npm and ES6 Modules
- Integration with other frameworks
We have a collection of Awesome Polymer resources.
Try StartPolymer Playgrounds. 👀
Do you like it? Please, star the motto ⭐ 🔝
Short link: git.io/UseWebPlatform
