Svježi resursi za web-dizajnere i razvojne programere (siječanj 2018.)

Nova godina 2018. je ovdje. Ako pogledamo napredak u razvoju weba prije pet godina, to je potpuno drugačije od onoga što imamo danas. Danas postoje nove metode, alati, pa čak i potpuno novu paradigmu koja danas mijenja način na koji gradimo web stranice - a VirtualDOM je jedan od njih.

DOM (objektni model dokumenta) je a model stabla koji definira način strukturiranja web-mjesta. Odabir, prelazak i manipuliranje DOM-om mogao bi biti vrlo skup i može otežava izvedbu prikaza vaše web-lokacije.

Međutim, u ovom postu nećemo raspravljati o tome kako VirtualDOM radi, nego ćemo zajedno s ostalim alatima razmotriti knjižnice koje vam omogućuju implementaciju VirtualDOM-a odmah. Provjerimo ih.

MaquetteJS

implementacija VirtualDOM-a koji vam omogućuje da napravite fluidno korisničko sučelje koje se ažurira podacima oko njega. To je čisti JavaScript i unopiniated knjižnicu je moguće koristite ga zajedno sa sintetičkim jezikom kao što su CoffeeScript, TypeScript i JSX. Velika alternativna knjižnica za React.js; MaquetteJS je mnogo manji (samo 3 KB) usporedivo.

ReDOM

Ovo je jedna od mojih omiljenih VirtualDOM knjižnica, jer je lako pokupiti samo gledanjem sintakse. Sa samo 2 KB, možete izgraditi web-stranicu s brzim prikazivanjem ili prilagođenu HTML komponentu. Knjižnica se sastoji dvije osnovne funkcije el, stvoriti ili manipulirati elementom, i montiranje da biste je dodali odabranom elementu. Možete ga učitati u pregledniku i na strani poslužitelja s NodeJS.

ReactiveJS

Templating UI knjižnica za izgradnju vrlo interaktivne web aplikacije. Izvorno izgrađen za TheGuardian, ReactiveJS je izgrađen za rad u svim preglednicima i mobilnim uređajima; tako da možete ovisiti o njezinoj pouzdanosti. ReactiveJS također dolazi s mnoge značajke potrebne za modernu web aplikaciju, kao što su Scoped CSS, Custom Components, SVG i animacija.

RiotJS

RitoJS je ugodan za rad i mnogo lakše učiti knjižnicu za početnike omogućuje definiranje prilagođene komponente s HTML elementom i HTML atributi dok će prethodne knjižnice prisiliti na korištenje čiste JavaScript sintakse.

RiotJS je kompatibilan s Node.js okolinom ili u preglednicima, a može biti i odlična alternativa Vue.js s obzirom na sličnosti.

HyperHTML

hyperHTML, kao što ime implicira, značajke izvedbe pri prikazivanju i manipuliranju DOM-om. Možete ga koristiti za izradu prilagođenog elementa i web-komponente. Djeluje tako lako kao jQuery u kojem se može koristiti u pregledniku učitavanje skripte iz CDN-a i pristupanje hiperHTML-u. Nema potrebe za kompliciranim postavljanje alata.

Mithril

Kao što zvuči cool, Mithril je moćna JavaScript biblioteka. Osim VirutalDOM i Components, Mithril je također opremljen rutiranjem i XHR-om s kojim možete izraditi web-aplikaciju na jednoj stranici bez oslanjanja na bilo koju drugu knjižnicu. Benchmark pokazuje da nadmašuje neke popularne knjižnice kao što su Vue.js, React.js i Angular.

SlimJS

SlimJS je JavaScript biblioteka za izgraditi prilagođenu web-komponentu pomoću izvornog API-ja web-komponente. Budući da je izgrađen okolo izvorni komponenta preglednika SlimJS je opremljen sa Polyfill koji shims API u pregledniku koji ga još ne podržava. To je izvrstan okvir ako želite usvojiti autohtoni način.

VSVG

Iako ima sličnu sintaksu u HTML-u, SVG je druga vrsta zvijeri s vlastitim čudima. Ova knjižnica, kao što ime sugerira, hoće omogućuju vam stvaranje i upravljanje SVG-om u letu.

EmotionSH

EmocijaSH je CSS-in-JS okvir koji bi vam mogao biti potreban pri izradi web stranice s VirtualDOM-om. To vam omogućuje isporuku samo bitova CSS-a potrebnih na vašoj web-lokaciji i možete dinamički ažurirati stil a da se ne skrivaju s imenovanjem i specifičnošću klase jer je stil označen samo za komponentu na koju se primjenjuje.

Reagirajte početni komplet

Ako ste pratili web u posljednjih nekoliko godina, pronaći ćete React (gotovo) svugdje. Ovo je 5 kratki video tečaj o Reactu. Ako želite držati korak s industrijom, to bi moglo biti pravo mjesto za početak.

Elementi

Elementi su zbirka iOS komponente za izradu prototipa aplikacije iOS u Sketch-u. Izgrađena je od strane Sketch-a i ažurirana je iPhoneom UI.

Modaal

Modaal je JavaScript biblioteka izgrađena s mogućnošću pristupa. Bilo je potvrđeno za “WCAG 2.0 Razina AA podrške” da (mislim) najviše dostupan “Modalni” knjižnicu danas. to je lagan, jQuery kompatibilan, i može se koristiti za slike, videozapise, pa čak i Instagram. Nadalje, ovaj kratki tečaj Googlea pomoći će vam da započnete s Web Accessibility i zašto je to važno.

WordPressify

NPM paket koji vam omogućuje da dobijete WordPress razvojno okruženje i pokrenete ga za nekoliko minuta. Sve je spremno modernih alata kao što su Gulp, LiveReload, PostCSS, Babel tako da se možete usredotočiti na razvoj vašeg projekta, a ne na podešavanje konfiguracije.

Lando

Lando je također zgodan alat za brzo i jednostavno okretanje razvojnog okruženja, što je vrlo slično WordPressify koje smo upravo spomenuli. Ali umjesto Node.js potrebno je prednost Dockera je lagana kontejnerizacija tehnologija i nudi veću fleksibilnost u smislu skupa koji želite koristiti u svom razvoju.

Na primjer, možete odredite verziju PHP-a, omogućite XDebug i instalirajte Skladatelj.

WP-Docklines

WP-Docklines je zbirke slika koje možete koristiti kao polaznu osnovu za izvođenje kontinuirane integracije i isporuke za vaše WordPress teme i pluine u uslugama kao što su Bitbucket, CircleCI i Gitlab. Svaka je slika u paketu alate koji su obično potrebni pri razvoju WordPressa kao što su PHP Code Sniffer, PHPUnit i WP-CLI.

WP-Locker

WP-Locker je Docker Sastavite konfiguraciju za vrtnju WordPress razvojnog okruženja u samo nekoliko minuta. to je postaviti s Apache, MySQL i phpMyAdmin i budući da proširuje WP-Docklines sliku, ona također izvodi dodatne alate na slici izvan okvira.

Jednostavno tip bin / početak da to dopustim, konfigurirati localhost i instalirati dodatke i teme koje ste konfigurirali u konfiguracijskoj datoteci.

Docusaurus

Još jedna inicijativa otvorenog koda od Facebooka, Docusaurus je alat za izradu web-stranice dokumentacije vašeg projekta. Ugrađeni s React i Markdown, možete jednostavno sastaviti dokumentaciju, održavati je, pa čak i izraditi blog za svoju web-lokaciju i objavite ga na Github stranicama.

VSCode Yo

Yeoman je paket čvorova koji vam omogućuje brzo pokretanje projekta odabirom unaprijed izrađenih skela koje odgovaraju vašim projektima. Ako upotrebljavate Visual Studio Code, ovaj dodatak pojednostavit će početni tijek rada jer vam to omogućuje pokrenite “Yo” naredbu izravno iz prozora Visual Studio Code.

BluebirdJS

JavaScript knjižnica koja omogućuje korištenje Obećanje, čekati, async danas u svim preglednicima; kaže da čak radi iu Netscapeu. Obećanje je jedna od najjačih točaka u najnovijim JavaScript specifikacijama koje bi učinite svoj kod leaner, čitljivijim i lako održivim.

ljepše

Lakši je alat formatirajte svoj kôd tako da odgovara standardu kodiranja jezika. To će prepisati vaš kôd iz vreće slijedeći pravilo koje će vam i vašem timu biti produktivniji umjesto debatiranja o stilovima pisanja koda.