Nové zdroje pre návrhárov webových stránok a vývojárov (január 2018)

Nový rok 2018 je tu. Ak sa pozrieme na vývoj v oblasti vývoja webových aplikácií pred piatimi rokmi, je to úplne odlišné od toho, čo máme dnes. Dnes sú nové metód, nástrojov a dokonca úplne novú paradigmu ktorý mení spôsob, akým budeme dnes stavať webové stránky - a VirtualDOM je jedným z nich.

DOM (Document Object Model) je a stromový model, ktorý definuje štruktúru webovej stránky. Výber, prechádzanie a manipulácia s DOM môže byť veľmi drahá oprela a môže prekážajú výkonnosti vykresľovania stránok.

Avšak v tomto príspevku nebudeme diskutovať o tom, ako VirtualDOM pracuje, namiesto toho spolu s ostatnými nástrojmi budeme skúmať knižnice, ktoré vám umožnia implementovať VirtualDOM hneď. Pozrime sa na to.

MaquetteJS

implementácia VirtualDOM ktorý vám umožňuje vytvárať používateľské rozhranie, ktoré sa aktualizuje s údajmi okolo neho. Je to čistý jazyk JavaScript a unopiniated knižnica je tak možné používajte ho spolu so syntetickým jazykom, ako sú napríklad CoffeeScript, TypeScript a JSX. Skvelá alternatívna knižnica pre React.js; MaquetteJS je oveľa menšia veľkosť (iba 3kilobajt) porovnateľne.

redo

Jedná sa o jednu z mojich najobľúbenejších knižníc VirtualDOM, pretože je jednoduché ju vyzdvihnúť len pri pohľade na syntax. Len s 2 kB, môžete vytvoriť rýchlo vykresľujúcu webovú stránku alebo vlastný komponent HTML. Knižnica tvorí dve základné funkcie el, vytvoriť alebo manipulovať s prvkom, a kôň aby ste ho pridali k vybranému prvku. Môžete ho načítať v prehliadači a server-side s NodeJS.

ReactiveJS

Templovanie UI knižnicu na vytváranie vysoko interaktívnej webovej aplikácie. Pôvodne postavený pre TheGuardian, ReactiveJS je navrhnutý tak, aby pracoval medzi prehliadačmi a mobilnými zariadeniami. takže môžete spoľahnúť na jeho spoľahlivosť. ReactiveJS tiež prichádza s mnoho funkcií, ktoré sú potrebné pre moderné webové aplikácie priamo mimo krabici, ako napr. CSS, Custom Components, SVG a animácie.

RiotJS

RitoJS je príjemná práca s a oveľa jednoduchšie sa učiť knižnicu pre začiatočníkov umožňuje definovať vlastný komponent s prvkom HTML a atribúty HTML, kým predchádzajúce knižnice budú nútiť používať čistú syntax JavaScript.

RiotJS je kompatibilný s Node.js environement alebo v prehliadačoch a môže byť a skvelá alternatíva k Vue.js vzhľadom na podobnosti.

HyperHTML

hyperHTML, ako to naznačuje názov, predstavuje výkon pri vykresľovaní a manipulácii DOM. Môžete ho použiť na vytvorenie vlastného prvku a webového komponentu. Funguje to tak jednoducho ako jQuery, v ktorom ho môže používať v prehliadači načítanie skriptu z CDN a prístup k hyperHTML. Nie je potrebné zložité náradie.

Mithril

Ako chladné, ako to vyznieva, Mithril je výkonná knižnica JavaScript. Okrem komponentov VirutalDOM a komponentov je Mithril vybavený aj smerovaním a XHR môžete vytvoriť jednu webovú aplikáciu bez toho, aby ste spoliehali na inú knižnicu. Benchmark ukazuje, že prekonáva niektoré populárne knižnice, ako napríklad Vue.js, React.js a Angular.

SlimJS

SlimJS je knižnica JavaScript vytvorte vlastnú webovú komponentu pomocou natívneho komponentu Web Component API. Vzhľadom k tomu, že je postavený v okolí natívnej zložky prehliadača SlimJS je vybavený a polyfill ktorý podáva rozhranie API v prehliadači, ktorý ho ešte nepodporuje. Je to skvelý rámec, ak preferujete prirodzený prístup.

VSVG

Aj keď má podobnú syntax ako HTML, SVG je ďalším druhom šelmy s vlastnými vlastnosťami. Táto knižnica, ako naznačuje názov, bude umožňujú vytvárať a manipulovať SVG za behu.

EmotionSH

EmotionSH je CSS-in-JS framework, ktorý budete potrebovať pri vytváraní webových stránok s VirtualDOM. To vám umožní doručiť iba tie časti CSS, ktoré sú potrebné na vašich stránkach a môžete dynamicky aktualizovať styling bez toho, aby sme sa pokúšali s pomenovaním a špecifickosťou triedy, pretože štýl sa zameriava iba na komponent, na ktorý sa vzťahuje.

Reakcia Starter Kit

Ak ste sledovali web v posledných pár rokoch, nájdete React (takmer) kdekoľvek. Toto je 5 krátky video kurz predstavujúci React. Ak chcete držať krok s týmto odvetvím, mohlo by to byť pravé miesto na začatie.

elements

Elements je zbierka komponenty iOS na vytvorenie prototypu aplikácie iOS v aplikácii Sketch. Je postavený ľuďmi spoločnosťou Sketch a bol aktualizovaný pomocou aplikácie iPhone X UI.

Modaal

Modaal je JavaScriptová knižnica postavená s prístupnosťou v mysli. Bolo to overené pre “Podpora úrovne AA WCAG 2.0” to (myslím) najviac prístupný “modal” knižnica dnes. to je ľahký, kompatibilný s jQuery a môže byť použitý pre obrázky, videá a dokonca aj pre Instagram. Navyše, tento krátky kurz od spoločnosti Google vám pomôže začať s prístupnosťou webu a prečo je to dôležité.

WordPressify

Balík NPM, ktorý vám umožní získať vývojové prostredie WordPress v priebehu niekoľkých minút. Je to všetko nastavené moderné nástroje ako Gulp, LiveReload, PostCSS, Babel aby ste sa mohli sústrediť na rozvíjanie konfigurácie vášho projektu.

Lando

Lando je tiež užitočným nástrojom na rýchle a jednoduché rozvíjanie vývojového prostredia WordPressify ktoré sme práve spomenuli vyššie. Ale namiesto Node.js to trvá výhodou Docker je ľahká kontajnerizácia technológie a ponúka väčšiu flexibilitu v súvislosti s balíkom, ktorý chcete použiť vo vašom vývoji.

Napríklad, môžete zadajte verziu PHP, aktivujte XDebug a nainštalujte Composer.

WP-Docklines

WP-Docklines je a zbieranie obrázkov, ktoré môžete použiť ako základnú líniu na vykonávanie kontinuálnej integrácie a doručovania pre vaše WordPress témy a piny v službách ako Bitbucket, CircleCI a Gitlab. Každý obrázok je zviazaný s nástroje bežne potrebné pri vývoji WordPress napríklad PHP Code Sniffer, PHPUnit a WP-CLI.

WP-Locker

WP-Locker je konfigurácia Docker Compose, ktorá spúšťa vývojové prostredie WordPress za pár minút. to je nastaviť Apache, MySQL a phpMyAdmin a pretože rozširuje obraz WP-Docklines, vykonáva tiež extra nástroje na obrázku mimo krabice.

jednoducho typ bin / Start nechajte ho, nakonfigurujte localhost a inštalovať doplnky a tém, ktoré ste konfigurovali v konfiguračnom súbore.

Docusaurus

Iná iniciatíva s otvoreným zdrojom od spoločnosti Facebook, Docusaurus je nástroj na vytvorenie dokumentačnej webovej stránky vášho projektu. Postavený s React a Markdown, môžete ľahko zostaviť dokumentáciu, udržiavať ju a dokonca vytvárať blog pre vaše stránky, a publikujte ho na stránkach spoločnosti Github.

VSCode Yo

Yeoman je balík uzlov, ktorý vám umožní rýchlo spustiť projekt výber vopred pripravených lešení, ktoré vyhovujú vašim projektom. Ak používate kód Visual Studio, tento plugin zjednoduší štartovací pracovný postup ešte ďalej, ako to umožňuje spustiť “yo” príkaz priamo z okna Visual Studio Code.

BluebirdJS

Knižnica JavaScript, ktorá vám umožňuje používať sľub, očakávať, asynchrónne dnes vo všetkých prehliadačoch; povedal, že funguje aj v Netscape. sľub je jedným z najsilnejších bodov v najnovších špecifikáciách jazyka JavaScript aby bol váš kód štíhlejší, čitateľnejší a ľahko udržiavateľný.

krajší

Prettier je nástrojom formát vášho kódu tak, aby zodpovedal norme kódovania jazyka. Prepíše váš kód zo scracth podľa pravidiel, ktoré vám a vášmu tímu umožnia produktívnejšia, než aby diskutovali o štýloch písania kódu.