#UseWebPlatform ^{_{Czech v1.4.0 - 2017-12-04}}

Používejte API webové platformy, vzory, polyfilly a lehké knihovny pro znovu použitelný, výkonný, udržitelný a čitelný kód.

Deset pravidel:

• 1. Stavte na Ecma a W3C standardech
• 2. Vyhněte se front-endovým frameworkům
• 3. Negenerujte HTML na straně back-endu
• 4. JavaScript, CSS Properties, HTML Templates, Web Workers, WebAssembly
• 5. PRPL vzor
• 6. Inkrementální aktualizace a sdílené závislosti
• 7. Custom elementy a pravidla přístupného webu
• 8. Progresivní webové aplikace PWA
• 9. Neopakujte se
• 10. Modulární web pro všechny

1. Stavte na Ecma a W3C standardech

Tvořte lepší web postavený na nových W3C standardech Custom Elements v1 a Shadow DOM v1 umožňující rozšířit W3C DOM jako jediný framework. Komplexní webové aplikace tvořte modulárně z mnoha zapouzdřených custom elementů s vlastním stromem pomocí Shadow DOM. Dodržujte metodu progressive enhancement za pomoci W3C polyfillů.

Tyto a níže uvedené Ecma a W3C standardy umožňují psát dlouhodobě udržitelný kód ✨ #WriteMaintainableCode ✨ a čitelný kód pro většinu webových vývojářů ✨ #WriteReadableCode ✨.

Další užitečné zdroje

Web Components

• What are web components?
• Building Components
• Shadow DOM: fast and encapsulated styles
• Custom Elements Everywhere (Polymer Summit 2017)
• Custom Elements Everywhere

Nepotřebujete Angular Components, React Components, Vue Components, atd.

Polyfilly

• Web Components Polyfills
• Polymer 3.0 - No Polyfills Needed! 🎉
• Polyfill.io - Upgrade the web. Automatically.

2. Vyhněte se front-endovým frameworkům

Těžké a složité frameworky pro front-end (Angular, Bootstrap, Ember, jQuery, React, Vue, atd.) zpomalují načtení (žerou data, výkon i baterii) a omezují vývoj, udržitelnost a snadné rozšiřování webových stránek a aplikací. Srovnání frameworků pomocí progresivních webových aplikací (PWA) je na stránce HNPWA, zde porovnejte časy pro interaktivní zobrazení.

CSS frameworky (Bootstrap, Foundation, atd.) obsahují velké množství nepoužívaného (unused) CSS kódu na dané stránce. Nepoužívejte CSS frameworky, tím se vyhnete stahování zbytečných kilobajtů a umožníte prohlížeči začít dříve renderovat stránku.

Custom elementy se Shadow DOM řeší z větší části problematiku nepoužívaného CSS a JS kódu, která se nechá měřit pomocí DevTools Coverage. Členit CSS kód pomocí Shadow DOM je výkonější, než pomocí JS, viz pěkný článek Shadow DOM: fast and encapsulated styles.

Náklady na zpracování JS kódu jsou vetší než u jiných dat, viz pěkný článek The Cost Of JavaScript.

Další užitečné zdroje

Proč nepotřebujete frameworky

• Web Components VS Frameworks
• You Don't Need jQuery
• You might not need a CSS framework
• JavaScript back to basics: You might not need React or Angular 2

3. Negenerujte HTML na straně back-endu

SSR

Není třeba SSR (server-side rendering) pro generování HTML kódu na straně serveru, z něj přes API získávejte jen JSON data, tím šetříte drahá data na pomalých sítích, výkon i baterii na straně klienta. Vyhněte se pomalým a složitým back-endovým frameworkům generující HTML, např. ASP.NET, Django, Laravel, React, Tomcat, Vue, atd.

Webové stránky nebo aplikace bez SSR mohou při opětovném zobrazení již běžet z lokální Service Worker Cache paměti, tím se pak chovají stejně jako nativní aplikace pro Android, iOS, macOS či Windows.

CSR

Kombinace CSR (client-side rendering) + PRPL vzor + W3C Service Worker Cache + CDN řeší rychlé načtení webových stránek a aplikací (front-endu). Service Worker Cache jim umožňuje běžet offline, bez připojení k internetu. Komunikace se serverem (back-endem) probíhá přes JSON API, GraphQL nebo REST API. Pro tyto API je vhodné použít např. Node.js, Go lang nebo Python. Příkladem je ✨ JAMstack ✨.

Back-end

Nechte správu o složitý back-end cloud službám, nemusíte pak řešit horizontální škálování, SLA a GDPR jako "data processor".

Například cloud Firebase je dobře navržen pro multi-platformní vývoj aplikací. Jeho služba Firebase Functions krásně řeší modularitu back-endu, viz příklady v git repozitáři Cloud Functions for Firebase Sample Library. Firebase je připraven na GDPR.

Jestli vás baví back-end nebo nechcete cloud, tak se podívejte na jiná řešení ze seznamů Awesome Serverless.

Jestli potřebujete CMS pro váš front-end, tak si vyberte ze seznamu HeadlessCMS.

Máte-li málo času nebo nemáte prostředky, tak zkuste najít potřebné API na tržišti RapidAPI.

SEO

SEO webových stránek a aplikací řešte pomocí ✨ Headless Chrome ✨.

Projekt Polymer vyvíjí PRPL server, který umí search bótům podstrčit statickou stránku (bez JavaScriptu) vygenerovanou pomocí Headless Chrome.

Další užitečné zdroje

Proč CSR

• JAMstack vs Isomorphic Server Side Rendering
• An API-First Development Approach
• Postman makes API development faster, easier, and better

JSON API

• The Benefits of Using JSON API
• Pragmatic JSON API Design
• You Might Not Need GraphQL
• Sending json api object using postman

GraphQL

• The GitHub GraphQL API
• GraphQL Server on Cloud Functions for Firebase
• Altair GraphQL Client
• Apollo GraphQL
• Apollo Client Developer Tools
• The Fullstack Tutorial for GraphQL

Firebase

• Extending Firebase to the Web (Firebase Dev Summit 2017)
• Introducing Cloud Firestore (Firebase Dev Summit 2017)
• Write Production Quality Cloud Functions (Firebase Dev Summit 2017)

RapidAPI

• Mashape’s API Marketplace is now part of RapidAPI
• 20 Tutorials on How to Create Your Own API

SEO

• Solving SEO with Headless Chrome (Polymer Summit 2017)
• Puppeteer Playground
• Rendertron - headless rendering service

4. JavaScript, CSS Properties, HTML Templates, Web Workers, WebAssembly

JavaScript

Programujte ve standardizovaném jazyce Ecma JavaScript ES6 (ECMAScript 2015), který umí číst všichni webový vývojáři. Naučte se správně tento jazyk, pomůžou vám odkazy níže.

Jazyk TypeScript či jiné JS preprocessory (Dart, CoffeeScript) nejsou na front-endu třeba, neboť knihovna Polymer rozšiřuje HTML Properties na elementu o statické typy, private a protected typy, výchozí hodnotu, read-only stav a jiné, více na stránce Declare Properties. S těmito properties pracuje plugin Polymer IDE. Výhodou je, že se nepotřebujete učit další nový jazyk.

Jestli potřebujete nasadit TypeScript, třeba pro komplexní webové komponenty, tak projekt Polymer udržuje dekoratéry pro tento jazyk, uloženy jsou v gitu polymer-decorators. Nejdříve pečlivě zvažte, zda potřebujete TypeScript, který svádí k používaní nového jazyka, který není standardizovaný a tím pádem je výsledný kód težko udržitelný a není čitelný pro všechny. Viz tento pěkný článek You Might Not Need TypeScript (or Static Types) a komentář k článku TypeScript vs. JavaScript.

CSS

Kódujte ve standardizovaném jazyce W3C CSS3, který umí číst všichni webový vývojáři. Tento jazyk byl rozšířen o dynamické proměnné W3C CSS Properties. Díky polyfillu je možné rozšířit CSS o CSS Mixins (metody). Tato dvě rozšíření jazyka CSS a modularita CSS na úrovni custom elementů se Shadow DOM vám umožňuje opustit statické CSS preprocessory, např. SASS, LESS, Stylus. Výhodou je, že se nepotřebujete učit další nový jazyk. Jestli potřebujete rozšířit CSS o nové vlastnosti či funkce, tak použijte postprocessor PostCSS, který nemění jazyk CSS.

Polymer pomocí paper elementů ukazuje, že pro Material Design není třeba rozšiřovat jazyk CSS o preprocessory. Modularita CSS pomocí custom elementů se Shadow DOM vám umožňuje aplikovat jen potřebné styly pro dané zobrazení webové stránky nebo aplikace. Tato modularita z větší části řeší problematiku nepoužívaného (unused) CSS na stránce.

HTML Templates

Využívejte vlastnosti W3C HTML Templates namísto HTML preprocessorů (Handlebars, Nunjucks, Pug) nebo JS templatů. Na cestě je ✨ lit-html ✨, který přináší několik výhod oproti JSX a bude podporován knihovnou Polymer v3.0.

Web Workers

Používejte W3C Web Workers API pro spouštění skriptů ve vláknech na pozadí, neovlivňující vlákno uživatelského rozhraní.

WebAssembly

Výkonnostní kód pište v jazyce C nebo C++ pomocí W3C WebAssembly, které nahrazuje Chrome Native Client.

Další užitečné zdroje

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

Nepotřebujete SASS, LESS, Stylus, atd.

HTML Templates

• HTML <template> element
• Polymer data binding helper elements
• HTML templates, via JavaScript template literals

Nepotřebujete Mustache, Handlebars, Nunjucks, Pug, atd.

JavaScript

Naučte se správně jazyk JavaScript ❗

• 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
• Find up to date snippets for common JavaScript use cases
• JavaScript Array Explorer

Kurzy jazyka JavaScript

• freeCodeCamp
• Codewars JavaScript
• Modern JavaScript with Tyler McGinnis
• What are the best websites to learn to code?

Statické typy

• You Might Not Need TypeScript (or Static Types)
• Polymer Custom Element Properties

Nepotřebujete Dart, TypeScript, Elm, PureScript, CoffeeScript, ClojureScript, atd.

Web Workers

• WebWorkers: Code Session - Supercharged

5. PRPL vzor

✨ PRPL Pattern ✨ je vzor pro strukturování a zobrazování progresivních webových aplikací (PWA), s důrazem na jejich výkon a spouštění.

Jednotlivé webové komponenty (JS moduly) se stahují binárně najednou (jen jednou) při prvním dotazu na server (HTTP/2) na základě dané trasy (URL), kde jsou potřeba pro render na straně klienta.

PRPL-50

Měřte čas potřebný pro interaktivní zobrazení (Time to Interactive) webové stránky nebo aplikace. Tento čas je závislý na množství přenesených dat. Na 3G mobilních sítích je omezení přibližně 50 KB per trasu ❗

Lehká knihovna Polymer v2.0 má přibližně 12 KB, takže zbývá asi 38 KB pro vaše data. 🎉

Další zajímavé odkazy

PRPL servery

• prpl-server-node
• prpl-server-go

Funkce PRPL serveru

• Differential Serving
• HTTP/2 Server Push
• Rendering for Bots (SEO, Open Graph)

Limit 50 KB

• Building m.uber: Engineering a High-Performance Web App for the Global Market

6. Inkrementální aktualizace a sdílené závislosti

Využívejte kombinaci HTTP/2 + Server Push + standardní formáty modulů, jako jsou HTML Imports nebo ES6 Modules umožňující inkrementální sdílené závislosti a jejich efektivní doručení ke klientovi přes cache, bez složitých nástrojů a zavaděčů, jako jsou např. Browserify, Rollup, Webpack, atd. Tato kombinace řeší zároveň inkrementální aktualizace výsledné webové stránky nebo aplikace. Pro tuto kombinaci umí Polymer build proces sestavit závislosti, více na stránce Build for production.

Další užitečné zdroje

Polymer v3.0

Knihovna Polymer v3.0 využívá ES6 moduly via script tag namísto HTML importů, více informací na stránce MDN import. Dále dynamický import modulů.

7. Custom elementy a pravidla přístupného webu

Při vytváření custom elementů dodržujte checklist The Gold Standard Checklist for Web Components. Jejich zdrojový kód je čten častěji, než je psán, proto pište kód pro lidi ❗

Dodržujte W3C pravidla přístupného webu, se kterými pomáhají již vytvořené Polymer komponenty.

Na cestě je nová generace Polymer elementů, které se zaměřují na vylepšení výkonu, menší API a lepší rozšiřitelnost pomocí dědičnosti ES6 tříd, viz pěkné video Evolving the Next Generation of Polymer Elements (Polymer Summit 2017) a článek The future of elements.

Další užitečné zdroje

Custom elementy

• Custom Element Best Practices

Přístupnost webu

• A11ycasts with Rob Dodson
• Totally Tooling Tips: Accessibility Testing
• Pragmatic Accessibility: A How-To Guide for Teams (Google I/O '17)
• Accessibility is My Favorite Part of the Platform - Google I/O 2016
• PWAs in any context (Progressive Web App Summit 2016)
• Accessible Components: Labeling -- Polycasts #51
• Accessible Components: Screen readers -- Polycasts #50
• Accessible Components: Keyboard access -- Polycasts #49
• A11y with Polymer (The Polymer Summit 2015)
• The future of accessibility for custom elements - 2017-10

Unused CSS

• Oh No! Our Stylesheet Only Grows and Grows and Grows!
• Monitoring unused CSS by unleashing the raw power of the DevTools Protocol

8. Progresivní webové aplikace PWA

Rychlé modulární progresivní webové aplikace vytvoříte s architekturou ✨ App Shell ✨ za pomoci web komponent s lehkou knihovnou (např. Polymer, SkateJS, Slim.js), PRPL vzoru a checklistu Progressive Web App Checklist, ze kterého pochopíte co obnáší tato nová cesta pro webové aplikace. ✨ best-performing apps ✨

Progresivní webové aplikace se chovají "stejně" jako nativní aplikace na platformě Android. Na platformách iOS a Windows není zatím plná podpora. Na platformách Chrome OS (Chromebook, Chromebox, Chromebase) a Chromium OS (CloudReady) beží nativně. Jejich progresivní přístup jim umožňuje běžet kdekoliv díky mnoha webovým prohlížečům. 🎉

PWA aplikace v produkci ukazují, že mají význam, viz statistiky PWA Stats. 👍

Webová platforma již nyní má několik rozhraní, které umožňují komunikovat s hardwarem, např. GamePad API, Generic Sensor API, Web Bluetooth API, WebUSB API a na cestě jsou Web NFC API, Standby API.

Projekt Polymer

Kód PWA aplikací je díky projektu Polymer a hotovým web komponentám čitelný a udržitelný, viz například kód demo PWA shopu, demo PWA news a PWA aplikace Polymer Summit 2017. 👍

Stav aplikace můžete spravovat pomocí vzorů Mediator Pattern nebo Global Mediator Pattern, ten za pomoci knihovny UniFlow nebo Redux.

Výhody PWA oproti nativní aplikaci

• Reload stránky pomocí tahem prstu po stránce.
• TBD

Další užitečné zdroje 👀

Úvod do PWA

• Progressive Web Apps - PWA Roadshow
• Introduction to Progressive Web App Architectures
• Intro to Progressive Web Apps - Free course
• Support native integration
• WHY You Should Build A Progressive Web App NOW
• Twitter Lite PWA Significantly Increases Engagement and Reduces Data Usage
• Kickstarting Your Journey to Progressive Web Apps (Chrome Dev Summit 2017)
• Polymer 2.0 — Building Progressive Web Apps with Enhanced Web Platform Features
• PWAs with Polymer: a checklist
• Creating UX that “Just Feels Right” with Progressive Web Apps (Google I/O '17)
• Web Push Notifications: Permission UX
• Integrating with Browsers and OS - Android Trusted Web Activity (Chrome Dev Summit 2017)
• Trusted Web activities are a new way to integrate PWA with Android app
• Awesome PWA - Useful resources for creating Progressive Web Apps.
• Progressive Tooling

Podpora PWA ze strany prohlížečů a operačních systémů OS

• Chrome / Chromium: The New and Improved Add to Home screen
• Add Progressive Web Apps to your Home screen in Firefox for Android
• How to Save PWA to iOS Homescreen
• Safari service workers and other PWA good news stories
• Progressive Web Apps (PWA) and Windows 10
• Google wants Progressive Web Apps to replace Chrome apps

Porovnání PWA s nativní aplikací pro Android či iOS

	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 na Chrome od v59 na Androidu, Chromebook, Samsung Internet v5.4 na Androidu, Windows 10 (brzy)
(2) Progresivní webové aplikace se brzy objeví ve Windows Store pro Windows 10. 👍
(3) Aktualizace nemusí probíhat prostřednictvím obchodu s aplikacemi. 👍
(4) Performance použitím RAIL Performance Model, Web Workers, WebAssembly.
(5) Progressive Web Apps vs Native: Which Is Better for Your Business?

Nepotřebujete Apache Cordova, PhoneGap, Crosswalk, React Native, atd.

Seznamy PWA aplikací

• Outweb
• PWA Directory
• pwa.rocks

9. Neopakujte se

Píšte dokumentaci a testy pomocí Web Component Tester pro každý znovu použitelný custom element, který žije ve vlastním git repozitáři s landing a demo stránkou ✨ #WriteReusableCode ✨. To vám umožňuje tvořit stabilní webové komponenty a neopakovat se (DRY: Don't repeat yourself).

10. Modulární web pro všechny

Veřejné znovu použitelné custom elementy pro ostatní publikujte na platformě GitHub. Tyto elementy pak ukládejte do katalogu webcomponents.org, kde je již přes 1500 elementů. 🎉

Webové komponenty jako W3C standard vylepšují a nahrazují Angular Components, Vue Components a jiné, viz projekt Custom Elements Everywhere.

Notifikace z platformy GitHub hlídejte nejlépe pomocí aplikace Octobox. S platformou GitHub vás seznámí GitHub Guides a tryGit.

Motto ve formě hashtagu #UseWebPlatform vzniklo rozšířením motta #UseThePlatform.

---

Informace o projektu Polymer a komunitě Polymeristi.

Licence

#UseWebPlatform, jehož autorem je Josef Ježek,
podléhá licenci Creative Commons Uveďte původ 4.0 Mezinárodní.