Friske ressourcer til webdesignere og udviklere (januar 2018)
Det nye år 2018 er her. Hvis vi ser på fremskridt i webudvikling for fem år siden, er det helt anderledes end hvad vi har i dag. I dag er der nye metoder, værktøjer og endda et helt nyt paradigme det ændrer måden vi opbygger websites i dag på - og VirtualDOM er en af dem.
DOM (Document Object Model) er en træmodel, der definerer, hvordan en hjemmeside er struktureret. At vælge, krydse og manipulere DOM'en kan være en meget dyr opreration og måske hæmmer dit websteds ydeevne.
Men i dette indlæg vil vi ikke diskutere hvordan VirtualDOM fungerer, i stedet for sammen med de andre værktøjer, vil vi se nærmere på biblioteker, der giver dig mulighed for at implementere VirtualDOM med det samme. Lad os tjekke dem ud.
MaquetteJS
en implementering af VirtualDOM der giver dig mulighed for at opbygge en fluid user-interface, der holder opdateret med dataene omkring det. Det er en ren JavaScript og unopiniated bibliotek er det således muligt at brug det sammen med et syntetisk sprog som CoffeeScript, TypeScript og JSX. Et godt alternativ bibliotek til React.js; MaquetteJS er meget mindre i størrelse (kun 3 kb) sammenligneligt.
ReDOM
Dette er et af mine foretrukne VirtualDOM-biblioteker, da det er let at hente det bare ved at se på syntaksen. Med kun 2Kb, Du kan opbygge en hurtiggengivende webside eller brugerdefineret HTML-komponent. Biblioteket består af to primære funktioner el, at oprette eller manipulere et element, og mount for at tilføje det til et valgt element. Du kan indlæse den i browser og server-side med NodeJS.
ReactiveJS
En templering UI-bibliotek til at opbygge meget interaktiv webapplikation. ReactiveJS blev oprindeligt bygget til TheGuardian, og er bygget til at fungere på tværs af browsere og mobile enheder. så du kan stole på dens pålidelighed. ReactiveJS leveres også med mange funktioner, der er nødvendige for moderne webapplikation lige udenfor boksen, som Scoped CSS, Custom Components, SVG og animation.
RiotJS
RitoJS er en behagelig at arbejde med og meget lettere at lære bibliotek for begyndere som det giver mulighed for at definere en brugerdefineret komponent med HTML element og HTML-attributterne, mens de tidligere biblioteker vil tvinge til at bruge ren JavaScript-syntaks.
RiotJS er kompatibel med Node.js miljø eller i browsere, og kan være a godt alternativ til Vue.js givet billederne.
HyperHTML
hyperHTML, som navnet antyder, har ydeevne ved gengivelse og manipulation af DOM. Du kan bruge den til at oprette brugerdefineret element og webkomponent. Det virker lige så nemt som jQuery, hvor det kan bruges i browseren ved indlæsning af scriptet fra CDN'en og adgang til hyperHTML. Intet behov for kompliceret værktøj.
Mithril
Så sejt som det lyder, er Mithril en kraftfuldt JavaScript-bibliotek. Bortset fra VirutalDOM og Components, er Mithril også udstyret med Routing og XHR med hvilket Du kan opbygge en enkelt web-applikation uden at stole på noget andet bibliotek. Benchmark viser, at det overgår nogle populære biblioteker som Vue.js, React.js og Angular.
SlimJS
SlimJS er et JavaScript-bibliotek til bygg brugerdefineret webkomponent ved hjælp af den indbyggede webcomponent API. Siden det er bygget omkring den indbyggede browser komponent, er SlimJS udstyret med a polyfill som shims API'en i browser, der ikke understøtter det endnu. Det er en god ramme, hvis du foretrækker at vedtage den indfødte måde.
VSVG
Mens den har lignende syntaks til HTML, er SVG et andet slags dyr med sine egne egenskaber. Dette bibliotek, som navnet antyder, vil giver dig mulighed for at oprette og manipulere SVG på farten.
EmotionSH
EmotionSH er CSS-in-JS-rammer, som du måske har brug for, når du opbygger websted med VirtualDOM. Dette giver dig mulighed for kun at levere bits af CSS på dit websted, og du kan Opdater dynamikken dynamisk uden at blive convuleret med klassen navngivning og specificitet som stilen er scopped til kun den komponent det er anvendt til.
Reager Starter Kit
Hvis du har fulgt internettet i de sidste par år, finder du React (næsten) hvor som helst. Dette er en 5 kortvideo kursus introducerer React. Hvis du vil holde øje med branchen, kan det være det rigtige sted at komme i gang.
elementer
Elementer er en samling af iOS komponenter til at oprette iOS app prototype i Sketch. Det er bygget af folket af Sketch og blevet opdateret med iPhone X UI.
Modaal
Modaal er et JavaScript-bibliotek bygget med tilgængelighed i tankerne. Det har været verificeret for “WCAG 2.0 Level AA Support” det (jeg tror) mest tilgængelig “Modal” bibliotek i dag. Det er letvægts, jQuery-kompatibel og kan bruges til billeder, videoer og endda Instagram. Desuden vil dette korte kursus fra Google hjælpe dig med at komme i gang med Web Accessibility og hvorfor det er vigtigt.
WordPressify
En NPM-pakke, der giver dig mulighed for at få et WordPress-udviklingsmiljø på gang i løbet af få minutter. Det er helt oprettet med moderne værktøjer som Gulp, LiveReload, PostCSS, Babel så du kan fokusere på at udvikle dit projekt temmelig tuning-up konfiguration.
Lando
Lando er også et praktisk værktøj til hurtigt og nemt at rotere et udviklingsmiljø meget gerne WordPressify som vi lige har nævnt ovenfor. Men i stedet for Node.js tager det fordel af Docker en letvægts containerisering teknologi og det giver mere fleksibilitet i løbet af den stack du gerne vil bruge i din udvikling.
For eksempel kan du Angiv PHP-versionen, aktiver XDebug, og installer Komponist.
WP-Docklines
WP-Docklines er en indsamling af billeder, som du kan bruge som basislinje til at udføre kontinuerlig integration og levering til dine WordPress temaer og pluins i tjenester som Bitbucket, CircleCI og Gitlab. Hvert billede er bundtet med værktøjer, der er nødvendige for at udvikle WordPress såsom PHP Code Sniffer, PHPUnit og WP-CLI.
WP-Locker
WP-Locker er Docker Komponere konfiguration til at rotere et WordPress udviklingsmiljø på få minutter. det er oprettet med Apache, MySQL og phpMyAdmin og da den udvider WP-Docklines-billedet, udfører den også de ekstra værktøjer på billedet udenfor boksen.
ganske enkelt type bin / starten at lade det, konfigurere localhost og installer plugins og temaer, som du har konfigureret i konfigurationsfilen.
Docusaurus
Et andet open source-initiativ fra Facebook, Docusaurus er et værktøj til at oprette en dokumentationswebsted for dit projekt. Bygget med React og Markdown, kan du nemt komponere dokumentation, vedligeholde det og endda lave en blog til dit websted, og offentliggøre det på Github Pages.
VSCode Yo
Yeoman er en Node-pakke, der giver dig mulighed for hurtigt at starte projektet Valg af præfabrikerede stilladser, der passer til dine projekter. Hvis du bruger Visual Studio Code, vil dette plugin strømline startup-workflowet endnu mere, som det giver dig mulighed for køre “Yo” kommando lige fra vinduet Visual Studio Code.
BluebirdJS
Et JavaScript-bibliotek der giver dig mulighed for at bruge Løfte, vente, async i dag i alle browsere; sagde det virker endda i Netscape. Løfte er et af de stærkeste punkt i de nyeste JavaScript-specifikationer, der ville gør din kode slankere, læsbar og let vedligeholdt.
Prettier
Prettier er et værktøj til formatér din kode for at være i overensstemmelse med sprogets kodningsstandard. Det vil omskrive din kode fra scracth efter reglen, så du og dit team kan være mere produktiv i stedet for at diskutere over kodeskrivning stilarter.
