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:
- 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, CSS Mixins
- 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
You Don't Need Mustache, Handlebars, Nunjucks, Pug, etc.
- ES8 was Released and here are its Main New Features
- Awesome Mobile Web Specialist
- 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
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
You Don't Need Angular, jQuery, React, Vue, Bootstrap, Foundation, etc.
2. Web Components
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.
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.
3. HTTP/2 + Server Push + HTML Imports / ES6 Modules
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.
4. Service Workers, Web Workers
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.
5. Progressive Web 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|
|Install needed to run||NO
|Lower dev time and cost||YES
|Lower user acquisition cost||YES
(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.
6. Web Accessibility
Web Accessibility means that people with disabilities can use the Web.
7. Web APIs
8. PRPL Pattern
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.
9. RAIL Performance Model
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.
10. Polymer Project
- 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