Repository files navigation

Používejte APIwebové 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

Tvořte lepší web postavený na nových W3C standardechCustom Elements v1 aShadow DOM v1 umožňující rozšířit W3CDOM 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 metoduprogressive enhancement za pomoci W3Cpolyfillů.

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

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ánceHNPWA, 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ánekShadow DOM: fast and encapsulated styles.

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

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.

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řesJSON API,GraphQL neboREST API. Pro tyto API je vhodné použít např. Node.js, Go lang nebo Python. Příkladem je ✨JAMstack ✨.

Nechte správu o složitý back-end cloud službám, nemusíte pak řešithorizontální škálování,SLA aGDPR 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ářiCloud Functions for Firebase Sample Library. Firebase je připraven naGDPR.

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

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

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.

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řujeHTML Properties na elementu o statické typy, private a protected typy, výchozí hodnotu, read-only stav a jiné, více na stránceDeclare Properties. S těmito properties pracuje pluginPolymer IDE. Výhodou je, že se nepotřebujete učit další nový jazyk.

Jestli potřebujete nasaditTypeScript, třeba pro komplexní webové komponenty, tak projekt Polymer udržuje dekoratéry pro tento jazyk, uloženy jsou v gitupolymer-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ánekYou Might Not Need TypeScript (or Static Types) akomentář k článku TypeScript vs. JavaScript.

Kódujte ve standardizovaném jazyce W3CCSS3, který umí číst všichni webový vývojáři. Tento jazyk byl rozšířen o dynamické proměnné W3CCSS Properties. Díky polyfillu je možné rozšířit CSS oCSS 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 postprocessorPostCSS, 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.

Využívejte vlastnosti W3CHTML 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.

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

Výkonnostní kód pište v jazyce C nebo C++ pomocí W3CWebAssembly, které nahrazujeChrome Native Client.

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

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

Využívejte kombinaciHTTP/2 +Server Push + standardní formáty modulů, jako jsouHTML Imports neboES6 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ánceBuild for production.

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

Dodržujte W3Cpravidla 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é videoEvolving the Next Generation of Polymer Elements (Polymer Summit 2017) a článekThe future of elements.

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 checklistuProgressive 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áchChrome OS (Chromebook,Chromebox,Chromebase) aChromium 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 statistikyPWA 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ě jsouWeb NFC API,Standby API.

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

Stav aplikace můžete spravovat pomocí vzorůMediator Pattern neboGlobal Mediator Pattern, ten za pomoci knihovnyUniFlow neboRedux.

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

Píštedokumentaci atesty 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).

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

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

Notifikace z platformy GitHub hlídejte nejlépe pomocí aplikaceOctobox. S platformou GitHub vás seznámíGitHub Guides atryGit.

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

Informace o projektu Polymer a komunitě Polymeristi.

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