Sveži viri za spletne oblikovalce in razvijalce (januar 2018)

Novo leto 2018 je tu. Če pogledamo napredek pri razvoju spletnih strani pred petimi leti, je popolnoma drugačen od današnjega. Danes so nove metode, orodja in celo popolnoma novo paradigmo ki spreminja način gradnje spletnih strani danes - in VirtualDOM je eden izmed njih.

DOM (objektni model dokumenta) je a drevesni model, ki določa, kako je spletna stran strukturirana. Izbira, prehod in manipuliranje DOM-a je lahko zelo draga oprecija in lahko tudi ovirajo učinkovitost upodabljanja spletnega mesta.

Vendar pa v tem prispevku ne bomo razpravljali o tem, kako deluje VirtualDOM, temveč skupaj z drugimi orodji knjižnice, ki vam omogočajo izvajanje VirtualDOM takoj. Poglejmo jih.

MaquetteJS

An izvajanje VirtualDOM ki vam omogoča gradnjo tekočega uporabniškega vmesnika, ki se posodablja s podatki okoli njega. To je čisti JavaScript in unopiniated knjižnico tako je mogoče uporabite ga skupaj s sintetičnim jezikom, kot je CoffeeScript, TypeScript in JSX. Velika alternativna knjižnica za React.js; MaquetteJS je veliko manjša (samo) 3kb) primerljivo.

ReDOM

To je ena izmed mojih najljubših knjižnic VirtualDOM, saj jo je enostavno poiskati s sintakso. S samo 2Kb, lahko zgradite hitro spletno stran ali komponento HTML po meri. Knjižnica je sestavljena dve primarni funkciji el, ustvariti ali manipulirati element, in mount , da ga dodate izbranemu elementu. Lahko ga naložite v brskalnik in na strani strežnika z NodeJS.

ReactiveJS

Templating UI knjižnica za izgradnjo zelo interaktivne spletne aplikacije. Prvotno izdelan za TheGuardian, je ReactiveJS zgrajen za delo v brskalnikih in mobilnih napravah; zato ste lahko odvisni od njegove zanesljivosti. Prihaja tudi ReactiveJS veliko funkcij, potrebnih za sodobno spletno aplikacijo, kot so Scoped CSS, Custom Components, SVG in animacija.

RiotJS

RitoJS je prijetno delo in lažje se učiti knjižnice za začetnike omogoča definiranje komponente po meri z elementom HTML in atributi HTML, medtem ko bodo prejšnje knjižnice prisiljene uporabljati čisto sintakso JavaScripta.

RiotJS je združljiv z okoljem Node.js ali v brskalnikih in je lahko a odlična alternativa Vue.js glede na podobnosti.

HyperHTML

hiperHTML, kot že ime pove, značilnosti delovanja pri upodabljanju in manipulaciji DOM-a. Z njim lahko ustvarite element po meri in spletno komponento. Deluje tako enostavno kot jQuery, v katerem ga lahko uporabite v brskalniku nalaganje skripta iz CDN in dostop do hiperHTML. Ni potrebe po zapletenih orodje.

Mithril

Mithril je kul, kot se sliši zmogljiva knjižnica JavaScript. Poleg VirutalDOM in komponent, je Mithril opremljen tudi z usmerjanjem in XHR s katerim lahko izdelate spletno aplikacijo na eni strani brez uporabe katere koli druge knjižnice. Merilo kaže, da presega nekatere priljubljene knjižnice, kot so Vue.js, React.js in Angular.

SlimJS

SlimJS je JavaScript knjižnica gradite spletno komponento po meri z uporabo izvornega API-ja Web Component. Ker je zgrajena okoli domačega brskalnika, je SlimJS opremljen z a Polyfill ki shims API v brskalniku, ki ga še ne podpira. To je odličen okvir, če raje sprejmete domači način.

VSVG

Čeprav ima podobna sintaksa kot HTML, je SVG še ena vrsta zver z lastnimi domislicami. Ta knjižnica, kot že ime pove, bo vam omogočajo, da ustvarite in upravljate SVG na letenje.

EmotionSH

EmocijaSH je CSS-in-JS okvir, ki ga boste morda potrebovali pri gradnji spletne strani z VirtualDOM. To vam omogoča, da na vašem spletnem mestu dostavite samo nekaj bitov CSS, ki jih potrebujete dinamično posodabljanje sloga ne da bi bili prepričani v poimenovanje razreda in specifičnost, ker je slog označen samo za komponento, v katero je uporabljen.

Reagirajte komplet za zagon

Če ste v zadnjih letih spremljali splet, boste React (skoraj) našli kjerkoli. To je a 5 kratki video tečaj, ki uvaja React. Če želite slediti industriji, so to pravi kraj za začetek.

Elementi

Elementi so zbirka iOS komponente za izdelavo prototipa aplikacije iOS v programu Sketch. Zgradili so ga ljudje s programom Sketch in posodobili z iPhone X UI.

Modaal

Modaal je JavaScript knjižnica, zgrajena z dostopnostjo v mislih. Bilo je preverjeno za “Podpora WCAG 2.0 Level AA” to (mislim) najbolj dostopna “Modal” knjižnico danes. To je lahek, združljiv z jQuery, in se lahko uporablja za slike, video posnetke in celo Instagram. Poleg tega vam bo ta kratek tečaj Googla pomagal začeti uporabljati spletno dostopnost in zakaj je to pomembno.

WordPressify

Paket NPM, ki vam omogoča, da dobite razvojno okolje WordPress in delate v nekaj minutah. Vse je pripravljeno sodobna orodja, kot so Gulp, LiveReload, PostCSS, Babel tako da se lahko osredotočite na razvoj vašega projekta in ne na nastavitev konfiguracije.

Lando

Lando je tudi priročno orodje za hitro in enostavno vrtenje razvojnega okolja WordPressify ki smo jih pravkar omenili. Toda namesto Node.js je potrebno prednost Dockerja v lahki kontejnerizaciji tehnologijo in ponuja večjo prilagodljivost glede na količino, ki jo želite uporabiti v vašem razvoju.

Na primer, lahko določite različico PHP, omogočite XDebug in namestite Skladatelj.

WP-Docklines

WP-Docklines je a zbirko slik, ki jih lahko uporabite kot izhodišče za izvajanje kontinuirane integracije in dostave za vaše WordPress teme in pluine v storitvah, kot so Bitbucket, CircleCI in Gitlab. Vsaka slika je združena orodja, ki so pogosto potrebna pri razvoju WordPressa kot so PHP Code Sniffer, PHPUnit in WP-CLI.

WP-omarica

WP-Locker je Docker Sestavite konfiguracijo, ki bo v samo nekaj minutah zavrtela razvojno okolje WordPressa. je nastavite z Apache, MySQL in phpMyAdmin in ker razširja sliko WP-Docklines, izvaja tudi dodatna orodja na sliki.

Preprosto vrsto bin / start da ga pustim, nastavite localhost in namestite vtičnike in teme, ki ste jih konfigurirali v konfiguracijski datoteki.

Docusaurus

Še ena odprta koda Facebooka, Docusaurus je orodje za ustvarjanje dokumentacijske spletne strani vašega projekta. Zgrajena z React in Markdown, lahko preprosto sestavite dokumentacijo, jo vzdržujete in celo ustvarite spletni dnevnik za svoje spletno mesto in objavite na straneh Github.

VSCode Yo

Yeoman je paket vozlišč, ki vam omogoča hitro zagon projekta izbira vnaprej izdelanih odrov, ki ustrezajo vašim projektom. Če uporabljate kodo Visual Studio, bo ta vtičnik še bolj racionaliziral zagonski potek dela, kot vam omogoča zaženite “Yo” ukaz iz okna Visual Studio Code.

BluebirdJS

Knjižnica JavaScript, ki omogoča uporabo Obljubi, počakajte, async danes v vseh brskalnikih; je rekel, da celo deluje v Netscapeu. Obljubi je ena izmed najmočnejših točk v najnovejših specifikacijah JavaScripta, ki bi naredite kodo vitkejšo, berljivo in enostavno vzdržljivo.

Lepša

Lepše je orodje formatirajte kodo, da bo skladna s standardom za kodiranje jezika. To bo ponovno napisalo kodo iz prask, ki sledi pravilu, ki vam in vaši ekipi omogoča produktivnejši, namesto da bi razpravljali o stilih pisanja kode.