Tuoreet resurssit web-suunnittelijoille ja kehittäjille (tammikuu 2018)

Uusi vuosi 2018 on täällä. Jos tarkastelemme web-kehityksen edistymistä viisi vuotta sitten, se on täysin erilainen kuin tänään. Tänään on uusia menetelmät, työkalut ja jopa aivan uusi paradigma joka muuttaa tapaa rakentaa verkkosivustoja tänään - ja VirtualDOM on yksi niistä.

DOM (Document Object Model) on a puumalli, joka määrittää, miten verkkosivusto on jäsennelty. DOM: n valitseminen, liikkuminen ja manipulointi voisi olla erittäin kallis opreration ja voi haittaa sivustosi tuottamistehoa.

Tässä keskustelussa emme kuitenkaan keskustele siitä, miten VirtualDOM toimii, vaan muiden työkalujen ohella tutkimme kirjastot, joiden avulla voit toteuttaa VirtualDOMin heti. Tarkistetaan ne.

MaquetteJS

VirtualDOM: n käyttöönotto jonka avulla voit rakentaa nestemäisen käyttöliittymän, joka päivittyy sen ympärillä olevien tietojen kanssa. Se on puhdas JavaScript ja unopiniated kirjasto on siis mahdollista käytä sitä yhdessä synteettisen kielen, kuten CoffeeScript, TypeScript ja JSX, kanssa. Suuri vaihtoehtoinen kirjasto React.js: lle; MaquetteJS on paljon pienempi (vain 3kb).

ReDOM

Tämä on yksi suosikkini VirtualDOM-kirjastoista, koska se on helppo poimia vain tarkastelemalla syntaksia. Vain 2 Kb, voit rakentaa nopeasti muokkaavan web-sivun tai mukautetun HTML-komponentin. Kirjasto koostuu kaksi ensisijaista toimintoa el, luoda tai käsitellä elementtiä, ja asentaa lisätä sen valittuun elementtiin. Voit ladata sen selaimeen ja palvelinpuolelle NodeJS: n avulla.

ReactiveJS

Malli UI-kirjasto rakentaa erittäin interaktiivista web-sovellusta. Alunperin TheGuardianille rakennettu ReactiveJS on rakennettu toimimaan selaimissa ja mobiililaitteissa; joten voit riippua sen luotettavuudesta. ReactiveJS tulee myös monia ominaisuuksia, joita tarvitaan moderneille web-sovelluksille, aivan kuin se on, kuten Scoped CSS, Custom Components, SVG ja animaatio.

RiotJS

RitoJS on miellyttävä työskennellä ja paljon helpompi oppia kirjastoa aloittelijoille sallii mukautetun komponentin määrittämisen HTML-elementillä ja HTML-määritteet, kun aiemmat kirjastot pakottavat käyttämään puhdasta JavaScript-syntaksia.

RiotJS on yhteensopiva Node.js-ympäristöön tai selaimiin, ja se voi olla a hyvä vaihtoehto Vue.jsille, kun samantyyppisiä.

HyperHTML

hyperHTML, kuten nimi viittaa, sisältää suorituskyvyn DOM: n muokkaamisessa ja muokkaamisessa. Sen avulla voit luoda mukautettuja elementtejä ja Web-komponentteja. Se toimii yhtä helppoa kuin jQuery, jossa sitä voi käyttää selaimessa ladata komentosarjan CDN: stä ja käyttää hyperHTML: tä. Ei tarvitse monimutkaista työkalut.

Mithril

Mithril on niin viileä kuin se on tehokas JavaScript-kirjasto. VirutalDOM: n ja komponenttien lisäksi Mithril on varustettu myös reitityksellä ja XHR: llä voit rakentaa yhden sivun web-sovelluksen luottamatta mihinkään muuhun kirjastoon. Benchmark osoittaa, että se ylittää joitakin suosittuja kirjastoja, kuten Vue.js, React.js ja Angular.

SlimJS

SlimJS on JavaScript-kirjasto rakenna mukautettua Web-komponenttia käyttämällä natiivia Web Component API -ohjelmaa. Koska se on rakennettu ympäröivään selainkomponenttiin, SlimJS on varustettu a Polyfill joka ohittaa sovellusliittymän selaimessa, joka ei tue sitä vielä. Se on loistava kehys, jos haluat käyttää natiivia tapaa.

VSV-G-

Vaikka sillä on samanlainen syntaksi HTML: n kanssa, SVG on toinen sellainen peto, jolla on omat kvillit. Tämä kirjasto, kuten nimi viittaa, tulee voit luoda ja käsitellä SVG: tä lennossa.

EmotionSH

EmotionSH on CSS-in-JS-kehys, jota saatat tarvita, kun rakennat verkkosivustoa VirtualDOM: n kanssa. Tämän avulla voit toimittaa vain sivustossasi tarvittavat CSS-koodit ja voit päivittää tyylin dynaamisesti ilman, että luokitellaan luokan nimen ja spesifisyyden kanssa, koska tyyli on leikattu vain osaan, johon sitä käytetään.

React Starter Kit

Jos olet seurannut verkkoa parin viime vuoden aikana, löydät React (lähes) joka paikassa. Tämä on 5 lyhytvideokurssia, jossa esitellään React. Jos haluat pysyä mukana toimialalla, nämä voivat olla oikea paikka aloittaa.

elementit

Elements on kokoelma iOS-komponentit luovat iOS-sovellusprototyypin Sketchissa. Ihmiset ovat rakentaneet sen Sketch-ohjelmalla ja ne on päivitetty iPhone X UI: llä.

Modaal

Modaal on JavaScript-kirjasto, joka on rakennettu saatavuudesta. On ollut vahvistettu “WCAG 2.0 Level AA -tuki” se (mielestäni) eniten saatavilla “Modaalinen” kirjasto tänään. Sen kevyt, jQuery-yhteensopiva, ja sitä voidaan käyttää kuviin, videoihin ja jopa Instagramiin. Lisäksi tämä tämä lyhyt Google-kurssi auttaa sinua aloittamaan Web-esteettömyyden ja miksi se on tärkeää.

WordPressify

NPM-paketti, jonka avulla voit saada WordPress-kehitysympäristön käyttöön muutamassa minuutissa. Se on kaikki perustettu modernit työkalut, kuten Gulp, LiveReload, PostCSS, Babel joten voit keskittyä projektin kehittämiseen melko herkästi.

Lando

Lando on myös kätevä työkalu kehitettäessä ympäristöä nopeasti ja helposti WordPressify että olemme juuri maininneet edellä. Node.js: n sijaan se vie Dockerin etuna on kevyt kontti teknologia ja se tarjoaa enemmän joustavuutta, kun halutaan käyttää pinota, jota haluat käyttää kehityksessänne.

Esimerkiksi voit määritä PHP-versio, ota XDebug käyttöön ja asenna Composer.

WP-Docklines

WP-Dockline on a kokoelma kuvia, joita voit käyttää perusviivana jatkuvan integroinnin ja toimituksen suorittamiseen WordPress-teemojasi ja pluinejasi palveluissa, kuten Bitbucket, CircleCI ja Gitlab. Jokainen kuva on mukana työkaluja, joita tarvitaan yleisesti WordPressin kehittämisessä kuten PHP-koodi Sniffer, PHPUnit ja WP-CLI.

WP-Locker

WP-Locker on Docker Säveltää kokoonpanon WordPress-kehitysympäristön pyörittämiseksi muutamassa minuutissa. se on määritetty Apache, MySQL ja phpMyAdmin ja koska se laajentaa WP-Docklines-kuvaa, se suorittaa myös ylimääräisiä työkaluja, jotka ovat kuvan ulkopuolella.

Yksinkertaisesti tyyppi bin / start anna sen määrittää paikallinen isäntä ja asenna laajennuksia ja teemat, jotka olet määrittänyt määritystiedostossa.

Docusaurus

Toinen avoimen lähdekoodin aloite Facebookista, Docusaurus on työkalu, jolla voit luoda projektisi dokumentointisivuston. React and Markdownin avulla rakennettu dokumentti voidaan helposti laatia, ylläpitää ja jopa luoda blogi sivustoosi, ja julkaise se Github-sivuille.

VSCode Yo

Yeoman on solmupaketti, jonka avulla voit käynnistää projektin nopeasti valitsemalla valmiiksi tehdyt rakennustelineet, jotka sopivat projekteihisi. Jos käytät Visual Studio -koodia, tämä laajennus tehostaa käynnistyksen työnkulkua entisestään suorita “yo” komento suoraan Visual Studio Code -ikkunasta.

BluebirdJS

JavaScript-kirjasto voit käyttää Lupaus, odottaa, async tänään kaikissa selaimissa; sanoi, että se toimii jopa Netscapessa. Lupaus on yksi viimeisimpien JavaScript-eritelmien vahvimmista kohdista tee koodisi kevyemmäksi, luettavammaksi ja helposti huollettavaksi.

kauniimpi

Prettier on työkalu alustaa koodisi kielen koodausstandardin mukaisesti. Se kirjoittaa koodisi uudelleen scracthista, joka seuraa sääntöä, jonka avulla voit ja joukkueesi olla tuottavampi sen sijaan, että keskusteltaisit koodin kirjoittamista koskevista tyylistä.