Tento článek recenzovali Taulant Spahiu a Panayiotis Velisarakos. Děkujeme všem recenzentům SitePointu za to, že obsah SitePoint vytvořili co nejlepší!
Loni v září Google uspořádal Polymer Summit 2015. Během této konference vývojáři poskytli velké množství informací o nových věcech, které Polymer umožnil. Polymer 1.0 byl vydán dříve, což přispělo k očekávání, které tolik lidí na letošní konferenci kladlo. Mezi řečníky tohoto ročníku byl Addy Osmani, inženýr společnosti Google známý svými důležitými příspěvky k několika open source projektům.
Ve své přednášce představil některé nové nástroje, které byly vydány pro vývoj Polymeru. Tyto nástroje poskytují vše, co může vývojář potřebovat vědět o vývoji Polymeru, bez ohledu na předchozí zkušenosti. Mnoho nástrojů, které popíšu, je třeba stáhnout prostřednictvím npm a následně je lze použít přímo v příkazovém řádku vašeho počítače.
Pro ty z vás, kteří nevědí, co je Polymer a chtějí si toto téma prohloubit, než si přečtou můj článek, doporučuji podívat se na tyto zdroje:
- Úvod do webových komponent a polymerů (výukový program)
- Vytvoření součásti galerie obrázků pomocí polymeru
- Vytvoření vlastního prvku formuláře kreditní karty pomocí polymeru
- Průvodce upgradem na Polymer 1.0
Polymer Starter Kit
Polymer tarter kit 1.0 umožňuje vývojářům být v provozu během okamžiku. Zahrnuje sestavení systém poháněný Gulp. Výsledkem je, že vývojáři mohou začít psát svůj vlastní kód a sledovat aktualizaci své aplikace v prohlížeči. Pokud se podíváme na úložiště pro tento projekt, můžeme vidět, že je extrémně dobře udržované, protože hlavní commity jsou zvýrazněny v horní části stránky. Tým Polymeru poskytuje vývojářům veškerou dokumentaci nezbytnou k tomu, aby se noví uživatelé Polymeru cítili pohodlně při jeho používání.
seed-element
Projekt počátečních prvků poskytuje základní desku pro stavební prvky z polymeru. Tím to však nekončí! Seed element vymaže polymerní aplikace a vytvoří úplnou sadu dokumentace různých funkcí, které se Polymer element snaží splnit. Schopnost poskytovat tuto funkci je zajištěna pomocí IronComponent.
Níže vidíme příklad seed-elementu, který žije v prohlížeči. Navíc vidíme, že projekt seed-element nám umožňuje přepínat pohled ze skutečné aplikace na dokumentaci API vygenerovanou pomocí IronComponent prvek.
Pokud se chcete podívat na úložiště projektu seed-element, najdete ho zde. Jak již bylo řečeno, vše, co musíme udělat, je spustit následující příkaz, abychom mohli nainstalovat projekt seed-element na náš počítač.
git clone https://github.com/polymerelements/seed-element && cd seed-elementPolyserve
Dalším nástrojem, na který se podíváme, je Polyserve. Jak název napovídá, tuto aplikaci lze použít k obsluze komponent Polymer v prohlížeči. Ve výše uvedeném GIFu se aplikace používá k obsluze aplikace seed-element. Chcete-li nainstalovat tento nástroj, můžeme spustit následující příkaz. Měli bychom vědět, že k tomu budeme potřebovat příznak -g, protože k němu budeme potřebovat přístup globálně.
npm install -g polyserve
Nyní, když přejdeme do adresáře seed-element, který jsme předtím naklonovali, a spustíme příkaz polyserve , uvidíme stejný výsledek zobrazený v GIFu výše. Tento nástroj je velmi podobný nástroji http-server modul npm. Jak můžete vidět, je neuvěřitelně snadné začít používat Polymer.
Polyup
Polyup je velmi působivý nástroj, který pomohl zmírnit to, co Addy Osmani nazývá „Vina živlu“. To je vina, která přichází v důsledku strávení těžkých hodin budováním prvku v Polymeru verze 0.5, jen abychom si uvědomili, že není kompatibilní s Polymerem 1.0. Je neuvěřitelné, že Polyup automatizuje proces „vyrovnání“ kódu Polymer 0.5, takže je kompatibilní s 1.0. Polyup skutečně prochází vaše soubory a přepisuje prvky pomocí správné syntaxe. Pro ty z vás, kteří mají zájem vidět živý příklad toho, jak Polyup funguje, doporučuji navštívit stránku PolymerLabs Github. Kromě toho můžeme níže vidět snímek obrazovky této stránky.
Polyup lze nainstalovat spuštěním následujícího příkazu:
npm install -g polyup
Po instalaci budou mít vývojáři přístup k nástroji příkazového řádku Polyup. Spuštěním polyup <filename.html> můžeme sedět a dívat se, zatímco Polymer upgraduje komponenty tak, aby byly plně kompatibilní ve verzi 1.0. Když mluvil o Polyup, Addy Osmani zmínil úryvek kódu, který zahrnu níže. Spuštěním tohoto bloku kódu v rámci projektu Polymer bude Polyup procházet každý soubor v projektu s .html a upgradujte všechny tyto soubory na verzi 2.0!
find . -name "*.html" -execdir polyup --overwrite "{}" \;Tester webových komponent
Všichni vývojáři vědí, že testování je nedílnou součástí vývoje. Proto není žádným překvapením, že nedávno byl spuštěn nástroj Web Component Tester, aby vývojáři mohli snadno testovat komponenty Polymer. Byl postaven na moka a Chai, což jsou dva z nejpopulárnějších testovacích rámců, které jsou k dispozici. V důsledku toho může mnoho vývojářů využít své znalosti z testování různých rámců JavaScriptu pomocí těchto testovacích sad k psaní testů pro komponenty Polymer.
Stejně jako Polyup a Polyserve lze tento nástroj stáhnout pomocí npm spuštěním následujícího příkazu:
npm install -g web-component-tester
Po instalaci mají vývojáři přístup k wct nástroj příkazového řádku. Při spuštění v rámci projektu Polymer se tento příkaz spustí na všech souborech v test adresář. Pokud zkontrolujeme strukturu složek z úložiště seed-element, můžeme vidět, že tento testovací adresář je přítomen.
Závěry
Tým Polymer poskytl oblasti vývoje webu všechny prostředky nezbytné k zahájení vytváření aplikací s tímto rámcem. Kromě těchto nástrojů mluvil Addy Osmani také o několika dalších, jako je Vulcanize a Crisper, které jsou mezi komunitou Polymer extrémně populární. Pokud se chcete podívat na jeho přednášku nebo na kteroukoli z dalších přednášek z Polymer Summitu, najdete je na kanálu YouTube konference.