Nové zdroje pro webové designéry a vývojáře (leden 2018)

Nový rok 2018 je zde. Podíváme-li se na pokrok ve vývoji webu před pěti lety, je to naprosto odlišné od toho, co máme dnes. Dnes jsou nové metody, nástroje a dokonce i zcela nové paradigma který mění způsob, jakým dnes vytváříme webové stránky - a VirtualDOM je jedním z nich.

DOM (Document Object Model) je a stromový model, který definuje, jak je webová stránka strukturována. Volba, procházení a manipulace s DOM by mohla být velmi drahá a možná brání výkonu vykreslování stránek.

V tomto příspěvku však nebudeme diskutovat o tom, jak VirtualDOM pracuje, místo toho, spolu s ostatními nástroji, do kterých se podíváme knihoven, které umožňují implementovat VirtualDOM rovnou. Podívejme se na ně.

MaquetteJS

An implementace VirtualDOM To vám umožní vytvořit tekuté uživatelské rozhraní, které bude aktualizováno s daty kolem něj. Je to čistý JavaScript a unopiniated Knihovna tak je možné použít jej společně se syntetickým jazykem, jako je například CoffeeScript, TypeScript a JSX. Velká alternativní knihovna React.js; MaquetteJS je mnohem menší (pouze 3kb) srovnatelně.

ReDOM

Toto je jedna z mých oblíbených knihoven VirtualDOM, protože je snadné si ji vyzvednout pouhým pohledem na syntaxi. S pouhým 2Kb, můžete vytvořit rychlou webovou stránku nebo vlastní komponentu HTML. Knihovnu tvoří dvou základních funkcí el, vytvořit nebo manipulovat s elementem, a mount přidávat do vybraného prvku. Můžete ji načíst v prohlížeči a na straně serveru pomocí NodeJS.

ReactiveJS

Šablona Knihovna UI pro tvorbu vysoce interaktivní webové aplikace. ReactiveJS, původně postavený pro TheGuardian, je postaven tak, aby fungoval napříč prohlížeči a mobilními zařízeními; takže se můžete spolehnout na jeho spolehlivost. ReactiveJS také přichází s mnoho funkcí potřebných pro moderní webovou aplikaci, jako například Scoped CSS, Custom Components, SVG a animace.

RiotJS

RitoJS je příjemná práce a mnohem snazší je naučit knihovnu pro začátečníky umožňuje definovat vlastní komponentu pomocí elementu HTML a HTML atributy, zatímco předchozí knihovny budou nuceny používat čistou syntaxi JavaScriptu.

RiotJS je kompatibilní s prostředím Node.js nebo v prohlížečích a může být i skvělá alternativa k Vue.js.

HyperHTML

hyperHTML, jak název napovídá, funkce při vykreslování a manipulaci s DOM. Můžete jej použít k vytvoření vlastního prvku a webové komponenty. Funguje to stejně snadno jako jQuery, ve kterém může být použit v prohlížeči načítání skriptu z CDN a přístup k hyperHTML. Není třeba složité nástroje.

Mithril

Mithril je tak cool, jak to zní výkonná knihovna JavaScript. Kromě VirutalDOM a Components je Mithril vybaven také Routingem a XHR, s nimiž můžete vytvořit jednostránkovou webovou aplikaci, aniž byste se museli spoléhat na jinou knihovnu. Benchmark ukazuje, že překonává některé populární knihovny jako Vue.js, React.js a Angular.

SlimJS

SlimJS je knihovna jazyka JavaScript vytvořit vlastní webovou komponentu pomocí nativního rozhraní Web Component API. Vzhledem k tomu, že je postaven v prostředí nativní komponenty prohlížeče SlimJS je vybaven Polyfill , který shims API v prohlížeči, který ji zatím nepodporuje. Je to skvělý rámec, pokud dáváte přednost přijetí nativního způsobu.

VSVG

Zatímco má podobnou syntaxi jako HTML, SVG je jiný druh bestie s vlastními vtipy. Tato knihovna, jak název napovídá, bude vám umožní vytvářet a manipulovat s SVG za běhu.

EmotionSH

EmotionSH je CSS-in-JS framework, který můžete potřebovat při vytváření webu s VirtualDOM. To vám umožní dodávat pouze bity CSS potřebné na vašich stránkách a můžete dynamicky aktualizovat styling bez toho, aby byl konvulován s pojmenováním třídy a specifičností, protože styl je omezen pouze na komponentu, na kterou je aplikován.

Reagujte Starter Kit

Pokud jste v posledních několika letech sledovali web, zjistíte, že React (téměř) každý. Toto je 5 krátkometrážní kurz představující React. Pokud chcete držet krok s průmyslem, mohou být tím pravým místem, kde začít.

Prvky

Prvky je kolekce komponenty iOS pro vytvoření prototypu aplikace iOS v aplikaci Sketch. Je postaven lidmi Sketch a byl aktualizován s iPhone X UI.

Modaal

Modaal je knihovna JavaScript postavená s ohledem na dostupnost. Bylo to ověřeno pro “Podpora WCAG 2.0 Level AA” to (myslím) nejvíce přístupné “Modální” knihovna dnes. To je lehký, jQuery kompatibilní, a může být použit pro obrázky, videa, a dokonce i Instagram. Tento krátký kurz od společnosti Google vám navíc pomůže s přístupem k webu a proč je to důležité.

WordPressify

Balíček NPM, který umožňuje získat vývojové prostředí WordPressu a běží během několika minut. Všechno je s tím moderní nástroje jako Gulp, LiveReload, PostCSS, Babel takže se můžete zaměřit na rozvoj svého projektu spíše ladění konfigurace.

Lando

Lando je také užitečným nástrojem pro rychlé a snadné rozvinout vývojové prostředí WordPressify které jsme právě zmínili výše. Ale místo Node.js to trvá výhodou Dockeru je lehká kontejnerizace technologie a nabízí větší flexibilitu, pokud jde o zásobník, který chcete použít ve svém vývoji.

Můžete například specifikujte verzi PHP, povolte XDebug a nainstalujte Composer.

WP-Docklines

WP-Docklines je a kolekce obrazů, které můžete použít jako základní čáru k provádění nepřetržité integrace a doručování pro vaše WordPress témata a pluins ve službách jako Bitbucket, CircleCI a Gitlab. Každý obrázek je spojen s nástroje běžně potřebné při vývoji WordPressu např. PHP Code Sniffer, PHPUnit a WP-CLI.

WP-Locker

WP-Locker je Docker Compose konfigurace, která spouští vývojové prostředí WordPressu během několika minut. to je s Apache, MySQL a phpMyAdmin a protože rozšiřuje obraz WP-Docklines, provádí také dodatečné nástroje na obraze.

Jednoduše typ bin / start nechat to nakonfigurovat localhost a nainstalovat pluginy a motivy, které jste konfigurovali v konfiguračním souboru.

Docusaurus

Další open-source iniciativa z Facebooku, Docusaurus je nástroj k vytvoření webové stránky dokumentace vašeho projektu. Postaven s React a Markdown, můžete snadno sestavit dokumentaci, udržovat ji a dokonce vytvořit blog pro vaše stránky, a publikovat na stránky Github.

VSCode Yo

Yeoman je balíček uzlů, který umožňuje rychlé spuštění projektu výběr pre-made lešení, které vyhovují vašim projektům. Pokud používáte kód Visual Studio, tento plugin ještě více zrychlí pracovní postup při spuštění spustit “Jo” z okna Visual Studio Code.

BluebirdJS

Knihovna JavaScript, která umožňuje používat Slib, čekej, async dnes ve všech prohlížečích; řekl, že to funguje i v Netscape. Slib je jedním z nejsilnějších bodů v nejnovějších specifikacích JavaScriptu, které by aby byl váš kód štíhlejší, čitelnější a snadno udržovatelný.

Překrásnější

Překrásnější je nástroj formátujte kód tak, aby odpovídal standardu kódování jazyka. Přepíše váš kód ze skriptu podle pravidla umožňujícího vám a vašemu týmu být produktivnější namísto debat nad styly psaní kódu.