Skip to content

Use universal the Web Platform primitives, a patterns and Polymer Project for reusable, performant, maintainable code.

Notifications You must be signed in to change notification settings

UseWebPlatform/motto-UseWebPlatform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

58 Commits
Β 
Β 

Repository files navigation

#UseWebPlatform

GitHub Stars GitHub Watchers PRs welcome

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

CSS Variables, CSS Mixins

You Don't Need SASS, LESS, Stylus, etc.

HTML Templates

You Don't Need Mustache, Handlebars, Nunjucks, Pug, etc.

JavaScript

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.

Learn JavaScript properly ❗

JavaScript Courses

Static Types

You Don't Need Dart, TypeScript, Elm, PureScript, CoffeeScript, ClojureScript, etc.

WebAssembly

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 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.

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.

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.

Polymer 3.0 library using JavaScript modules via script tag, read more info at MDN import. πŸŽ‰

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.

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.

6. Web Accessibility

Web Accessibility means that people with disabilities can use the Web.

A11ycasts with Rob Dodson

7. Web APIs

When writing code for the Web with JavaScript, there are a great many Web APIs available.

Chrome Samples

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.

PRPL-50

Measure Time to Interactive

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. πŸŽ‰

PRPL Servers

Features

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

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.

We have a collection of Awesome Polymer resources.

Try StartPolymer Playgrounds. πŸ‘€


Do you like it? Please, star the motto ⭐ πŸ”


Short link: git.io/UseWebPlatform


License

CC0