Resurse proaspete pentru designeri web și dezvoltatori (ianuarie 2018)

Anul nou 2018 este aici. Dacă ne uităm la progresul înregistrat în dezvoltarea de web-uri acum cinci ani, este complet diferit de ceea ce avem astăzi. Astăzi sunt noi metode, instrumente și chiar o paradigmă cu totul nouă care modifică modul în care construim site-uri web astăzi - și VirtualDOM este unul dintre ei.

DOM (Model Object Document) este a model de copac care definește modul în care este structurat un site web. Selectarea, traversarea și manipularea DOM ar putea fi o oprerare foarte scumpă și poate împiedică performanța renderingului site-ului dvs..

Cu toate acestea, în acest post nu vom discuta cum funcționează VirtualDOM, în schimb, împreună cu celelalte instrumente, vom examina biblioteci care vă permit să implementați VirtualDOM imediat. Să le verificăm.

MaquetteJS

Un implementarea VirtualDOM care vă permite să construiți o interfață de utilizator fluidă care să fie actualizată cu datele din jurul acesteia. Este un JavaScript și unopiniated biblioteca astfel este posibil să utilizați-l împreună cu o limbă sintetică, cum ar fi CoffeeScript, TypeScript și JSX. O mare bibliotecă alternativă la React.js; MaquetteJS este mult mai mică în dimensiune (numai 3 kb) comparabil.

ReDOM

Aceasta este una dintre bibliotecile mele preferate VirtualDOM, deoarece este ușor de preluat doar prin uita la sintaxa. Cu doar 2Kb, puteți crea o pagină web de redare rapidă sau o componentă HTML personalizată. Biblioteca consta două funcții principale el, pentru a crea sau manipula un element, și montură pentru ao adăuga la un element selectat. Puteți să-l încărcați în browser și pe server cu NodeJS.

ReactiveJS

Un templu UI pentru a construi o aplicație web foarte interactivă. Inițial construit pentru TheGuardian, ReactiveJS este construit pentru a lucra între browsere și dispozitive mobile; astfel încât să puteți depinde de fiabilitatea acesteia. ReactiveJS vine de asemenea cu multe caracteristici necesare pentru o aplicație web modernă chiar în afara casetei, cum ar fi CSS-ul Scoped, Componente personalizate, SVG și animație.

RiotJS

RitoJS este o plăcută pentru a lucra cu și mult mai ușor de a învăța biblioteca pentru începători ca ea permite definirea unei componente personalizate cu element HTML și atributele HTML în timp ce bibliotecile anterioare vor forța să utilizeze sintaxa JavaScript pură.

RiotJS este compatibil cu Node.js environement sau în browsere, și ar putea fi a o alternativa excelenta la Vue.js, avand in vedere similaritatile.

HyperHTML

hyperHTML, așa cum sugerează și numele, oferă performanțe atunci când interpretează și manipulează DOM. Puteți să-l utilizați pentru a crea elemente personalizate și componente Web. Funcționează la fel de ușor ca jQuery în care poate fi folosit în browser de către încărcarea scriptului din CDN și accesarea hyperHTML. Nu este nevoie de complicații scule.

mithril

Pe cât de rece sună, Mithril e a bibliotecă puternică JavaScript. În afară de VirutalDOM și Components, Mithril este, de asemenea, echipat cu Routing și XHR cu care puteți crea o aplicație web pe o singură pagină fără a se baza pe altă bibliotecă. Indicatorul de performanță arată că depășește unele biblioteci populare, cum ar fi Vue.js, React.js și Angular.

SlimJS

SlimJS este o bibliotecă JavaScript pentru construiți o componentă web personalizată utilizând API-ul Web Component nativ. Deoarece este construit în jurul componentei browser-ului nativ SlimJS este echipat cu un Polyfill care afișează API-ul în browserul care nu îl suportă încă. Este un cadru minunat dacă preferați să adoptați calea nativă.

VSVG

În timp ce are o sintaxă similară cu HTML, SVG este un alt tip de fiară cu propriile ciudățenii. Această bibliotecă, așa cum sugerează și numele, o va face vă permit să creați și să manipulați SVG în zbor.

EmotionSH

EmotionSH este CSS-in-JS cadru pe care ați putea avea nevoie atunci când construiți site-ul cu VirtualDOM. Acest lucru vă permite să livrați doar biții de CSS necesare pe site-ul dvs. și puteți actualizați dinamic stilul fără a fi convocat cu denumirea clasei și specificitatea, deoarece stilul este conceput numai pentru Componenta la care este aplicată.

Activați Kitul de pornire

Dacă ați urmat pe web în ultimii ani, veți găsi React (aproape) în fiecare loc. Acesta este un 5 cursuri video scurte introducând React. Dacă doriți să păstrați pasul cu industria, acestea ar putea fi locul potrivit pentru a începe.

element

Elementele este o colecție de Componentele iOS pentru a crea prototipul aplicației iOS în Sketch. Este construit de către oameni de Sketch și a fost actualizat cu iPhone UI.

Modaal

Modaal este o bibliotecă JavaScript construită cu accesibilitate în minte. A fost verificat pentru “WCAG 2.0 Level AA Support” care (cred) cel mai mult accesibil “Modal” biblioteca de astăzi. este ușor, compatibil cu jQuery, și poate fi folosit pentru imagini, videoclipuri și chiar pentru Instagram. În plus, acest curs scurt de la Google vă va ajuta să începeți cu accesibilitatea web și de ce este important.

WordPressify

Un pachet NPM care vă permite să obțineți o dezvoltare în mediul WordPress în câteva minute. Cu totul este înființat instrumente moderne precum Gulp, LiveReload, PostCSS, Babel astfel încât să vă puteți concentra asupra dezvoltării proiectului, mai degrabă decât a reglării configurației.

Lando

Lando este, de asemenea, un instrument util pentru a transforma un mediu de dezvoltare rapid și ușor, la fel de mult WordPressify pe care tocmai am menționat-o mai sus. Dar în loc de Node.js, este nevoie avantajul Docker-ului pentru o containerizare ușoară tehnologia și oferă o mai mare flexibilitate în ceea ce privește stiva pe care doriți să o utilizați în dezvoltarea dvs..

De exemplu, puteți specificați versiunea PHP, activați XDebug și instalați Composer.

WP-Docklines

WP-Docklines este a colectarea de imagini pe care le puteți utiliza ca linie de bază pentru a efectua o integrare și o livrare continuă pentru temele WordPress și pluguri în servicii precum Bitbucket, CircleCI și Gitlab. Fiecare imagine este asociată cu instrumente de obicei necesare atunci când dezvoltați WordPress cum ar fi PHP Code Sniffer, PHPUnit și WP-CLI.

WP-Locker

WP-Locker este configurația Docker Compose pentru a transforma un mediu de dezvoltare WordPress în câteva minute. Este configurați cu Apache, MySQL și phpMyAdmin și din moment ce extinde imaginea WP-Docklines, realizează, de asemenea, instrumentele extra din imaginea în afara casetei.

Pur şi simplu tip bin / Start pentru ao lăsa, configurați gazdă locală și instalați pluginuri și teme pe care le-ați configurat în fișierul de configurare.

Docusaurus

O altă inițiativă deschisă de la Facebook, Docusaurus este un instrument pentru a crea un site web al documentației pentru proiectul dvs.. Construit cu React și Markdown, puteți să compuneți cu ușurință documentația, să o întrețineți și chiar să creați un blog pentru site-ul dvs. și publicați-o în paginile Github.

VSCode Yo

Yeoman este un pachet Node care vă permite să începeți rapid proiectul selectând schele prefabricate care se potrivesc proiectelor tale. Dacă utilizați codul Visual Studio, acest plugin va simplifica mai mult fluxul de lucru de pornire, pe măsură ce vă permite rulați “yo” comanda dreapta din fereastra Visual Studio Code.

BluebirdJS

O bibliotecă JavaScript care vă permite să utilizați Promisiune, aștepta, async astăzi în toate browserele; a spus că funcționează chiar și în Netscape. Promisiune este unul dintre cele mai puternice puncte din cele mai recente specificații JavaScript care ar fi face codul dvs. mai ușor, ușor de citit și ușor de întreținut.

mai frumos

Prettier este un instrument pentru configurați codul pentru a se conforma standardului de codare al limbii. Va rescrie codul din scract după regulă care vă permite să fiți și echipa dvs. mai productiv în loc de a discuta despre stilurile de scriere a codului.