Skip to content

UseWebPlatform/motto-UseWebPlatform-cs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 

Repository files navigation

#UseWebPlatform v1.2.0

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

Deset pravidel:

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 vám umožňují psát udržitelný kód (maintainable code) a zajišťují lepší dostupnost webových vývojářů.

Další zajímavé odkazy

Web Components

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

Polyfilly

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.

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

Další zajímavé odkazy

Proč nepotřebujete frameworky

3. PRPL vzor

PRPL 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é custom elementy se stahují při prvním dotazu na server a to najednou (jen jednou) 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

Funkce PRPL serveru

Limit 50 KB

4. Negenerujte HTML na straně serveru

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.

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. Příkladem je JAMstack.

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 bude připraven na GDPR, viz FAQ.

Jestli vás baví back-end nebo nechcete cloud, tak se podívejte na jiná řešení ze seznamu 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 webových stránek a aplikací řešte pomocí Headless Chrome.

Další zajímavé odkazy

Proč CSR

JSON API

GraphQL

Firebase

RapidAPI

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

JavaScript

Programujte ve standardizovaném jazyce 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.

CSS

Programujte ve standardizovaném jazyce 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.

Další zajímavé odkazy

CSS Variables, CSS Mixins

Nepotřebujete SASS, LESS, Stylus, atd.

HTML Templates

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

JavaScript

Naučte se správně jazyk JavaScript ❗

Kurzy jazyka JavaScript

Statické typy

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

Web Workers

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ší zajímavé odkazy

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.

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

Další zajímavé odkazy

Custom elementy

Přístupnost webu

Unused CSS

8. Progresivní webové aplikace PWA

Rychlé modulární progresivní webové aplikace vytvoříte s architekturou App Shell za pomoci custom elementů s Polymer knihovnou, PRPL vzoru a checklistu Progressive Web App Checklist (best-performing apps).

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

Další zajímavé odkazy

Úvod do PWA

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.

9. Neopakujte se

Píšte dokumentaci a testy pomocí Web Component Tester pro každý znovu použitelný custom element (reusable code), který žije ve vlastním git repozitáři s landing a demo stránkou. 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 1300 elementů. Notifikace z platformy GitHub hlídejte nejlépe pomocí aplikace Octobox.

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


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


Informace o projektu Polymer a komunitě Polymeristi.

Licence

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