Nauji ištekliai žiniatinklio dizaineriams ir kūrėjams (2018 m. Sausio mėn.)

Naujasis 2018 metai čia. Jei prieš penkerius metus pažvelgsime į žiniatinklio kūrimo pažangą, tai visiškai skiriasi nuo šiandienos. Šiandien yra naujų metodai, įrankiai ir netgi visiškai nauja paradigma kad šiandien keičiasi mūsų svetainių kūrimo būdas - ir VirtualDOM yra vienas iš jų.

DOM (dokumento objekto modelis) yra a medžio modelis, kuris apibrėžia, kaip svetainė yra struktūrizuota. Pasirinkimas, judėjimas ir manipuliavimas DOM gali būti labai brangu ir gali trukdo jūsų svetainės teikimui.

Tačiau šiame pranešime mes nekalbėsime apie tai, kaip veikia „VirtualDOM“, o kartu su kitais įrankiais žvelgsime į bibliotekos, leidžiančios įgyvendinti VirtualDOM tuoj pat. Patikrinkime juos.

MaquetteJS

An VirtualDOM įgyvendinimas kuri leidžia jums sukurti skysčio vartotojo sąsają, kuri nuolat atnaujinama su jais esančiais duomenimis. Tai grynas „JavaScript“ ir nebaigtas todėl galima naudokite jį kartu su sintetine kalba, pvz., „CoffeeScript“, „TypeScript“ ir „JSX“. Puiki alternatyvi biblioteka React.js; MaquetteJS yra daug mažesnis (tik 3kb) palyginti.

ReDOM

Tai yra viena iš mano mėgstamų VirtualDOM bibliotekų, nes ją lengva paimti tik žiūrint į sintaksę. Su tik 2 KB, galite sukurti sparčiai atvaizduojamą tinklalapį arba pasirinktinį HTML komponentą. Biblioteką sudaro dvi pagrindinės funkcijos el, sukurti arba valdyti elementą, ir kalno pridėti jį prie pasirinkto elemento. Ją galite įkelti į naršyklę ir serverio pusę su „NodeJS“.

ReactiveJS

Šablonas UI biblioteka, kurianti labai interaktyvią interneto programą. Pradžioje „TheGuardian“ sukurta „ReactiveJS“ yra sukurta veikti visose naršyklėse ir mobiliuosiuose įrenginiuose; todėl galite priklausyti nuo jo patikimumo. Taip pat ateina „ReactiveJS“ daug funkcijų, reikalingų šiuolaikinei žiniatinklio programai, pvz., „Scoped CSS“, „Custom Components“, SVG ir animacija.

RiotJS

RitoJS yra malonu dirbti ir daug lengviau išmokti biblioteką pradedantiesiems leidžia nustatyti pasirinktinį komponentą su HTML elementu ir HTML atributai, o ankstesnės bibliotekos bus priverstos naudoti gryną „JavaScript“ sintaksę.

„RiotJS“ yra suderinama su „Node.js“ aplinka arba naršyklėmis ir gali būti a puiki alternatyva „Vue.js“, atsižvelgiant į lygiavertes.

„HyperHTML“

hiperHTML, kaip rodo pavadinimas, funkcijos, kai pateikiami ir manipuliuojami DOM. Ją galite naudoti, kad sukurtumėte pasirinktinį elementą ir žiniatinklio komponentą. Jis veikia taip pat lengvai, kaip ir jQuery, kuriame jis gali būti naudojamas naršyklėje įkeliant scenarijų iš CDN ir prieigos prie hiperHTML. Nėra sudėtingos įrankiai.

Mithril

Mithril yra toks kietas, kaip skamba galinga „JavaScript“ biblioteka. Be „VirutalDOM“ ir „Components“, „Mithril“ taip pat turi „Routing“ ir „XHR“ galite sukurti vienos puslapio žiniatinklio taikomąją programą nepasikliaudami jokia kita biblioteka. Lyginamoji analizė rodo, kad ji pranoksta kai kurias populiarias bibliotekas, pvz., „Vue.js“, „React.js“ ir „Angular“.

SlimJS

SlimJS yra „JavaScript“ biblioteka kurti tinkintą žiniatinklio komponentą naudodami vietinę žiniatinklio komponento API. Kadangi jis yra pastatytas aplink vietinį naršyklės komponentą, „SlimJS“ yra įrengtas a „Polyfill“ kuri apgaubia API naršyklėje, kuri to dar nepalaiko. Tai puiki sistema, jei norite priimti vietinį būdą.

VSVG

Nors ji turi panašią sintaksę su HTML, SVG yra dar viena žvėrių rūšis, turinti savo nuosprendžius. Ši biblioteka, kaip rodo pavadinimas, bus leidžia sukurti ir valdyti SVG skristi.

EmotionSH

Emocija yra „CSS-in-JS“ sistema, kurią jums gali prireikti kuriant „VirtualDOM“ svetainę. Tai leidžia jums pristatyti tik jūsų svetainėje reikalingus CSS bitus dinamiškai atnaujina stilių be konvekcijos su klasės pavadinimu ir specifiškumu, nes stilius yra nuskaitytas tik į komponentą, kuriam jis taikomas.

React Starter Kit

Jei per pastaruosius kelerius metus sekėte žiniatinklį, „React“ (beveik) rasite visur. Tai yra 5 trumpo vaizdo kursai, pristatantys React. Jei norite neatsilikti nuo pramonės, tai gali būti tinkama vieta pradėti.

Elementai

Elementai yra kolekcija „iOS“ komponentai sukuria „iOS“ programos prototipą eskize. Jis sukurtas žmonių pagal eskizą ir atnaujintas „iPhone X UI“.

Modaal

„Modaal“ yra „JavaScript“ biblioteka, sukurta atsižvelgiant į prieinamumą. Tai buvo patikrinta “WCAG 2.0 lygio AA palaikymas” tai (manau) labiausiai prieinama “Modalas” bibliotekoje. Tai lengvas, jQuery suderinamas ir gali būti naudojamas vaizdams, vaizdo įrašams ir net Instagram. Be to, šis trumpas „Google“ kursas padės jums pradėti naudotis „Web Accessibility“ ir kodėl tai svarbu.

WordPressify

NPM paketas, leidžiantis gauti „WordPress“ kūrimo aplinką ir veikti per kelias minutes. Visa tai sukurta modernios priemonės, pvz., „Gulp“, „LiveReload“, „PostCSS“, „Babel“ todėl galite sutelkti dėmesį į savo projekto kūrimą, o ne įprasta konfigūracija.

Lando

„Lando“ taip pat yra patogus įrankis, leidžiantis greitai ir lengvai sukonstruoti vystymosi aplinką WordPressify kad mes ką tik minėjome anksčiau. Tačiau vietoj „Node.js“ reikia „Docker“ privalumas yra lengvas konteineris technologija ir suteikia daugiau lankstumo norint naudoti savo kūrinį.

Pavyzdžiui, galite nurodykite PHP versiją, įjunkite „XDebug“ ir įdiekite kompozitorių.

WP-Docklines

WP-Docklines yra a vaizdų rinkinys, kurį galite naudoti kaip pradinę padėtį, norint atlikti nuolatinę integraciją ir pristatymą „WordPress“ temoms ir „pluins“ paslaugoms, pvz., „Bitbucket“, „CircleCI“ ir „Gitlab“. Kiekvienas vaizdas yra susietas su įrankiai, paprastai reikalingi kuriant „WordPress“ pvz., PHP kodas Sniffer, PHPUnit ir WP-CLI.

WP-spintelė

„WP-Locker“ yra „Docker“ Sudarykite konfigūraciją, kad per kelias minutes sukurtumėte „WordPress“ kūrimo aplinką. tai yra su „Apache“, „MySQL“ ir „phpMyAdmin“ ir kadangi jis praplečia „WP-Docklines“ atvaizdą, jis taip pat atlieka papildomus įrankius, esančius „out-of-the-box“.

Tiesiog tipas bin / start leisti, sukonfigūruokite localhost ir įdiegti papildinius ir temos, kurias konfigūruojate konfigūracijos faile.

Docusaurus

Kita „Facebook“ atviro kodo iniciatyva, „Docusaurus“ yra įrankis, skirtas sukurti projekto dokumentacijos svetainę. Sukurtas su „React and Markdown“, galite lengvai kurti dokumentaciją, ją prižiūrėti ir net sukurti tinklaraštį savo svetainei, ir skelbti jį „Github“ puslapiuose.

VSCode Yo

Yeoman yra mazgo paketas, leidžiantis greitai pradėti projektą pasirenkant paruoštus pastolius, atitinkančius jūsų projektus. Jei naudojate „Visual Studio“ kodą, šis papildinys dar labiau supaprastins pradžios darbo eigą, nes tai leidžia paleisti “Yo” komandą tiesiai iš „Visual Studio Code“ lango.

„BluebirdJS“

„JavaScript“ biblioteka leidžia naudoti Pažadas, laukti, async šiandien visose naršyklėse; sakė, kad net veikia „Netscape“. Pažadas yra vienas svarbiausių paskutinių „JavaScript“ specifikacijų taškų kad jūsų kodas būtų paprastesnis, lengviau skaitomas ir lengvai prižiūrimas.

Gražiau

Gražesnis yra įrankis formatuokite kodą, kad jis atitiktų kalbos kodavimo standartą. Jis perrašys jūsų kodą iš „scracth“, vadovaudamasis taisyklėmis, leidžiančiomis jums ir jūsų komandai produktyviau, o ne diskutuoti apie kodo rašymo stilius.