Uued ressursid veebidisaineritele ja arendajatele (jaanuar 2018)

Uus aasta 2018 on siin. Kui me vaatame veebiarenduse edusamme viis aastat tagasi, on see täiesti erinev sellest, mis meil täna on. Täna on uusi meetodid, vahendid ja isegi täiesti uus paradigma see muudab veebisaitide ehitamise viisi - ja VirtualDOM on üks neist.

DOM (Document Object Model) on a puu mudel, mis määratleb veebisaidi ülesehituse. DOMi valimine, liikumine ja manipuleerimine võib olla väga kallis meeleavaldus ja võib takistavad teie saidi esitlustoimingut.

Sellel ametikohal me aga ei arutle, kuidas VirtualDOM toimib, vaid koos teiste tööriistadega uurime teegid, mis võimaldavad teil VirtualDOMi rakendada kohe. Vaatame need välja.

MaquetteJS

An VirtualDOMi rakendamine mis võimaldab teil luua vedeliku kasutajaliidese, mis ajakohastab seda ümbritsevate andmetega. See on puhas JavaScript ja lõpetamata seega on võimalik kasutage seda koos sünteetilise keelega nagu CoffeeScript, TypeScript ja JSX. Suur alternatiivne raamatukogu React.js'ile; MaquetteJS on palju väiksem (ainult 3kb) võrdlemisi.

ReDOM

See on üks minu lemmik-Virtuaalraamatukogudest, kuna seda saab lihtsalt süntaksit vaadata. Ainult 2Kb, saate luua kiirelt renderdava veebilehe või kohandatud HTML-osa. Raamatukogu koosneb kaks peamist funktsiooni el, elemendi loomiseks või manipuleerimiseks, ja kinnitus selle lisamiseks valitud elemendile. Seda saab laadida brauserisse ja serveri külge NodeJS-iga.

ReactiveJS

Mallimine Kasutajaliidese raamatukogu, mis loob väga interaktiivse veebirakenduse. Algselt TheGuardianile ehitatud ReactiveJS on loodud töötama brauserite ja mobiilseadmete vahel; seega võite sõltuda selle usaldusväärsusest. ReactiveJS ka kaasas palju funktsioone, mis on vajalikud tänapäeva veebirakenduse jaoks, paremale, näiteks COP, kohandatud komponendid, SVG ja animatsioon.

RiotJS

RitoJS on meeldiv töötada ja palju lihtsam õppida raamatukogu algajatele võimaldab määrata HTML-elemendiga kohandatud komponendi ja HTML-atribuudid, samas kui eelmised raamatukogud sunnivad kasutama puhta JavaScript-süntaksit.

RiotJS on ühilduv Node.js-i keskkonnaga või brauseritega ja võib olla a suurepärane alternatiiv Vue.js-ile, arvestades similarties.

HyperHTML

hyperHTML, nagu nimigi ütleb, funktsioonid DOM-i muutmisel ja manipuleerimisel. Võite seda kasutada kohandatud elemendi ja veebikomponendi loomiseks. See toimib nii lihtne kui jQuery, kus seda saab brauseris kasutada skripti laadimine CDN-ist ja hüperHTML-i kasutamine. Pole vaja keerulist tööriistad.

Mithril

Mithril on nii lahe kui heli võimas JavaScript-raamatukogu. Lisaks VirutalDOM'ile ja komponentidele on Mithril varustatud ka Routing ja XHR-ga saate luua ühe lehekülje veebirakendust ilma, et toetuksite ühelegi teisele raamatukogule. Võrdlusuuring näitab, et see ületab mõned populaarsed raamatukogud nagu Vue.js, React.js ja nurk.

SlimJS

SlimJS on JavaScripti teek ehitada kohandatud veebikomponent natiivse veebikomponendi API abil. Kuna see on ehitatud kohaliku brauseri komponendi ümber, on SlimJS varustatud a Polüfill mis särab API-d brauseris, mis seda veel ei toeta. See on suurepärane raamistik, kui soovid omapäraselt vastu võtta.

VSVG

Kuigi see on sarnane HTML-i süntaksiga, on SVG veel üks omamoodi metsaline. See raamatukogu, nagu nimigi ütleb, hakkab võimaldab luua ja hallata SVG-d lennul.

EmotionSH

EmotionSH on CSS-in-JS raamistik, mida võib vajada VirtualDOM-i veebilehe loomisel. See võimaldab teil pakkuda ainult teie saidil vajalikke CSS-i bitte värskendab dünaamiliselt stiili ilma klassikohase nimetuse ja spetsiifilisuseta, kuna stiil on skaneeritud ainult komponendile, mida seda rakendatakse.

Reageeri stardikomplekt

Kui olete viimase paari aasta jooksul veebi jälginud, leiate React'i (peaaegu) igal pool. See on 5 lühikese video kursust, mis tutvustab Reacti. Kui soovite tööstusega sammu pidada, võivad need olla õige koht alustamiseks.

Elemendid

Elemendid on iOS komponendid, et luua iOS-i rakenduse prototüüp Sketchis. Inimesed on selle ehitanud Sketch'i abil ja uuendatud iPhone X UI-ga.

Modaal

Modaal on ligipääsetavusega ehitatud JavaScript-raamatukogu. See on olnud kontrollitud “WCAG 2.0 taseme AA tugi” see (ma arvan) kõige rohkem kättesaadav “Modal” raamatukogu täna. See on kerge, ühilduv jQuery ja seda saab kasutada piltide, videote ja isegi Instagrami jaoks. Lisaks aitab see Google'i lühike kursus alustada veebi juurdepääsetavust ja miks see on oluline.

WordPressify

NPM pakett, mis võimaldab teil mõne minuti jooksul WordPressi arenduskeskkonna saada. See on kõik loodud kaasaegsed vahendid, nagu Gulp, LiveReload, PostCSS, Babel nii saate keskenduda oma projekti pigem häälestamise konfiguratsioonile.

Lando

Lando on ka mugav vahend arenduskeskkonna kiireks ja kergeks pööramiseks WordPressify mida me eespool mainisime. Kuid Node.js asemel võtab see Dockeri eeliseks on kerge konteiner tehnoloogia ja see pakub suuremat paindlikkust stacki puhul, mida soovite oma arenduses kasutada.

Näiteks saate määrake PHP versioon, lubage XDebug ja installige Composer.

WP-dokid

WP-dokid on a piltide kogum, mida saate kasutada pideva integreerimise ja edastamise baasjoonena teie WordPressi teemade ja pluiinide jaoks sellistes teenustes nagu Bitbucket, CircleCI ja Gitlab. Iga pilt on komplekteeritud WordPressi arendamisel üldiselt vajalikud vahendid nagu PHP kood Sniffer, PHPUnit ja WP-CLI.

WP-Locker

WP-Locker on Docker Koosta konfiguratsioon WordPressi arenduskeskkonna spinimiseks vaid mõne minuti jooksul. see on loodud Apache, MySQL ja phpMyAdminiga ja kuna see laiendab WP-Docklinesi kujutist, teostab see ka täiendavaid tööriistu, mis jäävad väljapoole.

Lihtsalt tüüp bin / start lubage see seadistada localhost ja installige pluginad ja teemad, mis on konfigureeritud konfiguratsioonifailis.

Docusaurus

Veel üks avatud lähtekoodiga Facebooki algatus, Docusaurus on vahend teie projekti dokumentatsiooni veebisaidi loomiseks. Rakenduse React and Markdown abil saate hõlpsalt dokumenteerida, säilitada ja isegi luua oma saidile blogi ja avaldage see Githubi lehekülgedele.

VSCode Yo

Yeoman on sõlmpakett, mis võimaldab teil projekti käivitamiseks kiiresti valides teie projektidele sobivad tellingud. Kui kasutate Visual Studio koodi, täiustab see plugin käivitamise tööprotsessi veelgi, kuna see võimaldab teil käivitage “Yo” käsk otse Visual Studio koodi aknast.

BluebirdJS

JavaScripti raamatukogu seda võimaldab teil kasutada Lubadus, ootama, async täna kõikides brauserites; ütles, et see töötab isegi Netscape'is. Lubadus on üks kõige tugevamaid punkte viimastes JavaScript-spetsifikatsioonides muuta oma kood lihtsamaks, loetavamaks ja kergemini hooldatavaks.

Prettier

Prettier on vahend vormindage oma kood, et see vastaks keele kodeerimisstandardile. See kirjutab teie koodi ümber scracth'ist, järgides reeglit, mis võimaldab teil ja teie meeskonnal olla koodi kirjutamise stiilide üle arutlemisel.