Friss források a webes tervezők és fejlesztők számára (2018. január)

Itt van az új 2018-as év. Ha öt évvel ezelőtt megnézzük a webfejlesztés előrehaladását, akkor teljesen más, mint ma. Ma van új módszerek, eszközök és még egy teljesen új paradigma amely megváltoztatja a honlapok építésének módját - és a VirtualDOM az egyik.

A DOM (Document Object Model) a fa modell, amely meghatározza a weboldal strukturálását. A DOM kiválasztása, áthaladása és manipulálása egy nagyon drága meglepetés és lehet akadályozza a webhely megjelenítési teljesítményét.

Ebben a bejegyzésben azonban nem fogjuk megvitatni, hogyan működik a VirtualDOM, hanem a többi eszközzel együtt megvizsgáljuk könyvtárak, amelyek lehetővé teszik a VirtualDOM megvalósítását azonnal. Nézzük meg őket.

MaquetteJS

egy a VirtualDOM megvalósítása amely lehetővé teszi, hogy folyékony felhasználói felületet hozzon létre, amely folyamatosan frissül az azt körülvevő adatokkal. Ez egy tiszta JavaScript és unopiniated a könyvtár így lehetséges használja ezt a szintetikus nyelvet, mint például a CoffeeScript, a TypeScript és a JSX. Nagyszerű alternatív könyvtár a React.js-hoz; A MaquetteJS mérete sokkal kisebb (csak 3KB) összehasonlíthatóan.

ReDOM

Ez az egyik kedvenc VirtualDOM könyvtárom, hiszen egyszerűen csak a szintaxist nézve fel lehet venni. Csak 2Kb, gyorsan szerkeszthető weboldalt vagy egyéni HTML összetevőt építhet. A könyvtár áll két elsődleges funkció el, elem létrehozásához vagy manipulálásához, és hegy hozzáadni egy kiválasztott elemhez. A NodeJS segítségével betöltheti a böngészőbe és a szerveroldali oldalra.

ReactiveJS

Sablon UI-könyvtár, amely nagy interaktív webalkalmazást épít. A TheGuardian számára eredetileg épített ReactiveJS a böngészők és a mobil eszközök között működik; így függhet a megbízhatóságától. A ReactiveJS is jön a modern webalkalmazáshoz szükséges számos funkció jobb a dobozon kívül, például a Scoped CSS, az Custom Components, az SVG és az animáció.

RiotJS

A RitoJS kellemesen dolgozhat és sokkal könnyebben tanulhat könyvtárat kezdőknek lehetővé teszi egy egyedi összetevő definiálását a HTML elemgel és a HTML attribútumok, míg a korábbi könyvtárak a tiszta JavaScript szintaxis használatára kényszerülnek.

A RiotJS kompatibilis a Node.js környezettel vagy a böngészőkkel, és lehet a nagyszerű alternatíva a Vue.js-nak, ha a similarties.

HyperHTML

hyperHTML, ahogy a neve is mutatja, a teljesítményt a DOM megjelenítésekor és manipulálásakor nyújtja. Használhatja azt egyéni elem és webes összetevő létrehozásához. Olyan egyszerű, mint a jQuery, amelyben a böngészőben használható a szkript betöltése a CDN-ből és a hyperHTML elérése. Nem kell bonyolult szerszámok.

Mithril

Mithril annyira hűvös, mint egy hang erős JavaScript-könyvtár. A VirutalDOM és a Components mellett a Mithril Routing és XHR is van felszerelve egyetlen oldal webes alkalmazást építhet más könyvtárakra való hivatkozás nélkül. A benchmark azt mutatja, hogy felülmúlja a népszerű könyvtárakat, mint például a Vue.js, a React.js és az Angular.

SlimJS

A SlimJS egy JavaScript könyvtár egyedi webkomponens létrehozása a natív webes összetevő API segítségével. Mivel a natív böngésző összetevője épül, a SlimJS a Polyfill amely az API-t a böngészőben, amely még nem támogatja. Ez egy nagyszerű keret, ha inkább a natív módon fogadja el.

VSVG

Bár a HTML-hez hasonló szintaxissal rendelkezik, az SVG egy másik fajta vadállat, melynek saját hányadai vannak. Ez a könyvtár, ahogy azt a név is sugallja, lesz lehetővé teszi az SVG létrehozását és kezelését a repülés közben.

EmotionSH

Az EmotionSH A CSS-in-JS keretrendszer, amelyre szükség lehet, amikor a VirtualDOM webhelyet építi. Ez lehetővé teszi, hogy csak a webhelyén szükséges CSS-eket szállíthasson, és megteheti dinamikusan frissíti a stílust anélkül, hogy az osztálynevet és a specifitást összevonták volna, mivel a stílust csak az összetevőre vágják fel, amelyet alkalmazni kell.

Reagáljon a Starter Kit-re

Ha az utóbbi pár évben követte az internetet, mindenhol megtalálod a React-ot (majdnem). Ez egy 5 rövid videofelvétel a React bemutatásával. Ha lépést akar tartani az iparággal, ezek lehetnek a megfelelő hely az induláshoz.

Elements

Az elemek egy gyűjtemény iOS komponensek az iOS alkalmazás prototípus létrehozásához a vázlatban. Ezt az emberek a vázlat szerint építették, és iPhone X UI-val frissítették.

Modaal

A Modaal egy JavaScript-könyvtár, amelyet az elérhetőség szem előtt tart. Ez már ellenőrzött “WCAG 2.0 Level AA támogatás” ez (azt hiszem) a legjobban hozzáférhető “módbeli” könyvtár ma. ez könnyű, jQuery kompatibilis, és használható képek, videók és még Instagram. Ezen túlmenően ez a rövid Google kurzus segít abban, hogy elkezdhessük a webes hozzáférhetőséget, és miért fontos ez.

WordPressify

Az NPM csomag, amely lehetővé teszi, hogy perceken belül egy WordPress fejlesztői környezetet kapjon. Ez mind létrejött modern eszközök, mint a Gulp, a LiveReload, a PostCSS, a Babel így összpontosíthat a projekt fejlesztésére, nem pedig hangolásra.

Lando

A Lando egy praktikus eszköz arra is, hogy gyorsan és egyszerűen spin-up egy fejlesztési környezetet hozzon létre WordPressify amit már említettünk. De a Node.js helyett ez szükséges A Docker előnye, hogy egy könnyű konténer technológia, és nagyobb rugalmasságot biztosít a fejlesztés során használni kívánt veremben.

Például lehet adja meg a PHP-verziót, engedélyezze az XDebug-ot, és telepítse a Composer-t.

WP-Docklines

A WP-Dockline a olyan képek gyűjteménye, amelyeket alapvonalként használhat a folyamatos integráció és a szállítás végrehajtásához a WordPress témákhoz és pluinokhoz, például a Bitbucket, a CircleCI és a Gitlab szolgáltatásokhoz. Minden kép össze van kötve a WordPress fejlesztése során általánosan szükséges eszközök például a PHP kód Sniffer, a PHPUnit és a WP-CLI.

WP-Locker

A WP-Locker Docker Konfigurálja a konfigurációt a WordPress fejlesztőkörnyezetének centrifugálásához percek alatt. Ez az Apache, a MySQL és a phpMyAdmin segítségével és mivel kiterjeszti a WP-Docklines képet, az extra eszközöket is elvégzi a dobozon kívüli képen.

Egyszerűen típus bin / Start hagyja, konfigurálja a helyi kiszolgáló és telepítse a bővítményeket és a konfigurációs fájlban konfigurált témák.

Docusaurus

Egy másik nyílt forráskódú Facebook kezdeményezés, A Docusaurus eszköz a projekt dokumentációs weboldalának létrehozásához. A React és Markdown használatával készült dokumentumok könnyen dokumentálhatók, karbantarthatók, és akár blogot is létrehozhatnak webhelyére, és közzéteszi a Github oldalakra.

VSCode Yo

A Yeoman egy csomópontcsomag, amely lehetővé teszi a projekt gyors indítását az Ön által tervezett állványok kiválasztása. Ha Visual Studio kódot használ, ez a bővítmény még egyszerűbbé teszi az indítási munkafolyamatot, mivel lehetővé teszi futtassa a “yo” parancsot a Visual Studio Code ablakból.

BluebirdJS

A JavaScript könyvtár lehetővé teszi a használatát Ígéret, várják, aszinkron ma minden böngészőben; azt mondta, még Netscape-ben is működik. Ígéret az egyik legerősebb pont a legújabb JavaScript-specifikációkban tegye a kódot könnyebbé, olvashatóbbá és könnyebben karbantarthatóvá.

szebb

A Prettier egy eszköz formázza a kódot, hogy megfeleljen a nyelv kódolási szabványának. A kódot átírja a scracth-ből a szabályt lehetővé tevő szabályzatból termelékenyebb ahelyett, hogy a kódírási stílusokról vitatkozna.