JavaScript v AMP a inovace jménem amp-script

Vzhůru dolů 03.10.2019 14:07 JavaScript v AMPNaposledy upraveno: – Autor: Martin Michálek Už asi víte, že na psaní JavaScriptu musíte v AMP jít trochu jinak než u obyčejných webových stránek. Běžný autorský JavaScript je zde zcela zakázaný. Prostě smůla. To se projevuje zejména tím, že stránka obsahující značku a jeho obsahu z nástrojové sady, kterou se tvoří dnešní weby. Z pohledu šíře možností pro tvorbu moderních interaktivních webů v AMP vlastně už dnes moc omezení není. Jen je potřeba dělat věci jinak. Však čtěte. Možná, že budete příjemně překvapení. Komponenty uživatelského rozhraní Karusely, záložkové navigace, lightboxy, sdílecí ikonky, komentářové služby… K dispozici jsou vám i nástroje pro spouštění reklamy a analytiky. Chcete například lightbox? Je to jednoduché: Nemusíte napsat ani řádku javascriptového kódu, což je příjemné zejména pro programátorsky méně zběhlé autory stránek. Autoři AMP připravili ke stovce komponent, které vám budou velice pravděpodobně pro výrobu běžného webu stačit. Seznam komponet najdete v dokumentaci na amp.dev. Interaktivita, uchování stavu amp-bind, amp-state a další komponenty pro dynamickou práci s obsahem posunují naše možnosti dále. Pro ilustraci – dynamická změna CSS třídy se může provést následovně: Ahoj! Změň barvu O komponentách pro dynamické chování si můžete opět přečíst v dokumentaci na amp.dev. Vyzdvihnu některé z nich: amp-bind a amp-state – „bajndování“ a ukládání stavu. amp-form – dynamické formuláře. amp-list – stažení aktuálních dat z vašeho API pro zobrazení v AMP stránce. amp-mustache – šablonovací jazyk Mustache pro výpis dynamických části stránky. amp-selector – uživatel vybere z několika položek a jeho výběr někam pošlete. Systém akcí a událostí AMP také nabízí možnost vyvolání události na základě akce uživatele přes atribut on="": Tlačítko vyvolávající akci Vše vysvětlíme: eventName je vyžadované jméno akce. Globálně dostupná akce je například tap , dále pak akce související se zobrazováním či schováváním prvků: hide, show a toggleVisibility. targetId je vyžadovaná hodnota atributu id prvku, který hodláme ovlivňovat. V AMP jsou k dispozici také speciální cíle jako navigateTo pro přechod na URL nebo rodiče iframe a dále mj. také goBack, print nebo scrollTo pro skok zpět v historii prohlížení, tisk stránky nebo posun na určitý prvek. methodName je volitelný název metody cílového objektu. Většina komponent má nějaké metody k dispozici, viz dokumentace. Pokud ji nedefinujeme, použije se výchozí metoda objektu. arg=value jsou volitelné parametry metody. A ještě pár příkladů: Ukaž obrázky V on="tap:photo-slides" říkáme, že se po kliknutí na tlačítko má oslovit prvek identifikovaný jako photo-slides a provést výchozí akce takto označené komponenty . Z dokumentace bychom vyčetli, že jde o akci open, která dotčený lightbox otevírá. Ahoj! Schovej Zde jsme prostřednictvím on="tap:warning-message.hide" nakázali, ať se po kliknutí schová prvek warning-message. Detaily o systému akcí a událostí najdete na amp.dev. amp-iframe Komponenta poslední záchrany. V amp-iframe můžete za určitých okolností použít JavaScript tak, jak jste zvyklí. Alespoň omezeně. Velmi se to hodí při vkládání kódu třetí strany, třeba map od Seznamu nebo Googlu. Ukázka: Pro více informací o amp-iframe jděte i v tomto případě na amp.dev. Autorský JavaScript v amp-script Komponenta amp-script je vcelku nová, ale myslím si, že razantně změní způsob tvorby AMP stránek, ale i to, jak se o AMPu uvažuje. Pojďme si ještě ukázat, jak JS v AMP funguje: Ahoj! // ahoj.js const button = document.getElementById ; button.addEventListener => ); Kód tedy umístíme na do souboru ahoj.js na naši doméně. Pokud JavaScriptu rozumíte ještě méně než já, pak vězte, že kód obstarává čekání na kliknutí na tlačítko . Když se tohle přihodí, vymění text „Ahoj!“ za „Nazdar!“. Takhle to vypadá jako starý dobrý běžný JavaScript ve starých dobrých běžných stránkách, že ano? Nenechte se mýlit, funguje to úplně jinak. Video: Kristofer Baxter: amp-script Představení komponenty na AMP Conf 2019. → YouTube kanál amp-script cílí zejména na dva problémy současného JavaScriptu. První je to, že prohlížeč vždy pracuje v jednom vlákně. V jedné frontě zároveň zpracovává JavaScript, CSS a další prvky stránky, zároveň vykresluje a ještě k tomu musí reagovat na pokusy uživatele o interakci. To je pomalé. Druhý problém je v šíři možností. Ani zkušení javascriptoví vývojáři si často neuvědomují, jaké dopady bude mít kód, který píší, na výkon stránky. Někdy stačí jeden document.write a výkon stránky je ohrožený. amp-script běží ve vedlejším vlákně a neohrozí tak vykreslování stránky. Zdroj: Paul Bakaus. vrdl.in/ampexpo Jak to tedy komponenta amp-script řeší? Service Worker a dvě vlákna JS kód v AMPu běží ve Web Worker, vedlejším vlákně. Bude tak mít svou „vymezenou parcelu na pískovišti“. Na rozdíl o běžně obtížné práce s Web Workery ale v AMP o nich vývojář prakticky neví. Worker DOM Podobně jako moderní javascriptové frameworky bude kvůli rychlosti pracovat s virtuálním DOM stromem, ovšem technologií Web Worker bude zpracovávaný mimo hlavní vlákno prohlížeče. To je dvakrát dobrá zpráva, protože obyčejně není z Web Workeru možné do DOMu přistupovat. Více o Worker DOM. Omezení Jeden amp-script může mít maximální 10 kB, všechny dohromady ve stránce pak 150 kB. Je možné kód spouštět jen na akci uživatele. K dispozici také nejsou všechny vlastnosti známé z běžného JavaScriptu. Podívejte se na tabulku kompatibility. Komponenta amp-script podporuje populární javascriptové frameworky jako React, Angular, Vue.js… nebo jQuery, pokud jinak nedáte. amp-script je velké téma, určitě se k němu ještě vrátíme. V tuhle chvíli vás alespoň pošlu na další zdroje: amp-script v dokumentaci: vrdl.in/ampscript Paul Bakaus ukazuje AMP jako frontendový framework na WebExpo 2019: vrdl.in/ampexpo Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .