Kao web programer, nastojim redovito procjenjivati svoj alat i utvrđivati mogu li bez ovog ili onog alata. Nedavno istražujem koliko je lako razviti složenu front end aplikaciju bez front end okvira.
Što je JavaScript okvir?
Jednostavno rečeno, JavaScript okvir je alat koji možete iskoristiti za razvoj naprednih web aplikacija, posebno SPA-a.
Nekada bi web programeri implementirali logiku krajnjeg korisnika oslanjajući se uvelike na vanilin JS i jQuery. No, kako su front end aplikacije postajale sve složenije, alati su se povećavali kako bi udovoljili toj složenosti.
Okviri koji su danas popularni imaju nekoliko osnovnih sličnosti. Većina prednjih okvira / knjižnica, od Vue do React, pružaju neku kombinaciju sljedećeg:
- Sinkronizacija stanja i pogleda
- Usmjeravanje
- Sustav predložaka
- Komponente za višekratnu upotrebu
Jesu li okviri još uvijek potrebni?
Ovisi o tome kako naglašavate riječ koja je potrebna. Mnogi bi tvrdili da okviri prednjeg kraja nisu i nikada nisu bili potrebni. Ipak su vrlo korisni alati.
Dakle, pitanje je: jesu li okviri današnji jQuery? Hoće li se problemi koje rješavaju rješavati promjenama poput onih u DOM API-ju?
Teško je reći, ali napredak u izvornom JS-u, specifikacijama web komponenata i lako podesivim alatima za izgradnju, olakšao je razvoj SPA-a bez okvira kao što je ikada bio.
Da bih to dalje ispitao, razvio sam aplikaciju na jednoj stranici koristeći samo vanilin JavaScript, izvorne web komponente i paket. Na tom je putu bilo pregršt zamki i poteškoća koje su naglasile snage JS okvira.
Istodobno, nakon što sam prošao početne prepreke, iznenadio sam se koliko je jednostavno bilo stvoriti aplikaciju za jednu stranicu sa samo vanili JS-om.
Pregled
Primjena je jednostavna. Riječ je o aplikaciji recepata s osnovnim CRUD mogućnostima. Korisnik može stvoriti, urediti, izbrisati, omiljeno i filtrirati popis recepata.
Komponente
Izrada web komponente također je jednostavna. Stvorite klasu koja se proširuje HTMLElement(ili HTMLParagraphElementi tako dalje), a zatim je koristite za definiranje prilagođenog elementa.
Također možete koristiti kuke životnog ciklusa kao što su connectedCallback, disconnectedCallback, attributeChangedCallback.
Usmjeravanje
Usmjeravanje aplikacije recepata također je prilično jednostavno. S obzirom na navigacijski događaj, sadržaj aplikacije postavljam na odgovarajuću web komponentu.
U početku sam koristio npm paket pod nazivom Vanilla JS Router. S API-jem povijesti preglednika nije toliko složeno implementirati vlastiti u manje od 100 redaka koda! Napomena: Ne implementiram doista složenu logiku kao što su zaštitnici ruta.
To je kratki sažetak. Želim zadržati ovaj članak na razumnoj dužini. Mogu napisati naknadni post s temeljitijim objašnjenjem prijave. Implementirao sam neke zabavne značajke poput beskonačnog pomicanja, prilagođenog programa za povlačenje i ispuštanje i još mnogo toga!
Retrospektiva
Nakon izrade aplikacije, uzeo sam neko vrijeme da razmislim o prednostima i nedostacima cijelog procesa od početka do kraja. Počet ću s lošim vijestima.
Protiv
Specifikacija je i dalje u promjeni
Specifikacije web komponente su i stare i nove. Postoji puno duže nego što sam prvotno mislio. Web komponente je po prvi puta predstavio Alex Russell na Fronteers Conference 2011. Međutim, potisak web komponenata zaista je porastao u posljednjih godinu ili dvije. Kao takvi, u specifikaciji ima još puno previranja. Na primjer, napušten je HTML uvoz, iako se većina dokumentacije / resursa još uvijek poziva na njih.
Testiranje
Ne postoji puno namjenskih resursa za testiranje izvornih web komponenata. Postoje neki obećavajući alati poput skatejs ssr i testera web komponenata tvrtke Polymer. Ali ti su alati stvarno namijenjeni upotrebi u njihovim knjižnicama. To predstavlja neke poteškoće za upotrebu s izvornim web komponentama.
Otkrivanje promjena
Nevjerojatno je imati osnovni sustav koji automatski sinkronizira pogled s podatkovnim modelom. To je ono što je mnoge prije svega privuklo kutnim i drugim okvirima.
Održavanje sinkronizacije stanja s prikazom nije tako teško u malim razmjerima. Ali vrlo brzo može izmaći kontroli i nađete se na dodavanju tona slušatelja događaja i birača upita.
DOM sjene
Stvarno sam rastrgana zbog DOM-a iz sjene. S jedne strane, volim ideju kapsule. To je razuman obrazac dizajna, čini vaš stil kaskadom lakšim za upravljanje, pojednostavljuje vaše brige i tako dalje. Međutim, to također predstavlja probleme kada želite da neke stvari prodru u tu kapsulaciju (poput zajedničkog lista stilova), a u tijeku su rasprave o najboljem načinu za to.
Generiranje DOM struktura
Dio veličanstvenosti okvira / knjižnica poput Angular i React jest to što su oni majstori svog DOMaina. Odnosno, izvrsno su u učinkovitom prikazivanju i ponovnom prikazivanju struktura u DOM-u. S bloga Angular University:
Angular ne generira HTML, a zatim ga prosljeđuje pregledniku da bi se on raščlanio, već Angular generira DOM strukture podataka izravno!Primjerice, Angular, za razliku od jQuery, izravno prikazuje DOM strukture podataka. To jest, umjesto da HTML proslijedi pregledniku na raščlanjivanje, a zatim na prikaz u DOM strukturama podataka. Ovo je učinkovitije jer uklanja taj korak raščlanjivanja. Virtualni DOM je također vrlo koristan jer vam onemogućuju ponovno prikazivanje svega svaki put kada trebate ažurirati svoj pogled.
Pros
S druge strane, postoje neke neporecive prednosti razvoja aplikacija na ovaj način:
Veličina snopa
Konačni proizvod može biti (naglasak na limenci ) toliko manji i kompaktniji od bilo čega razvijenog modernim okvirom. Na primjer, konačna verzija moje potpuno opremljene aplikacije za recepte bila je manja od upola manje svježe kutne građe.
Napomena: Ovo su ažurirane, optimizirane veličine snopa.
Razumijevanje
Ako ste stvarno razvili samo okvir i njegov CLI, to može biti izvrsna vježba za izradu web aplikacije bez dodatnih alata. Kao nekome tko želi postići određenu razinu svladavanja (u mjeri u kojoj je to moguće) web razvoja, bilo mi je neophodno da dobijem više praktičnog iskustva s alatima za izgradnju, API-jema preglednika, uzorcima dizajna itd.
Izvođenje
Nevjerojatno je što ovi front end okviri i knjižnice rade iza kulisa. Međutim, možete platiti cijenu izvedbe ako se odlučite koristiti bilo koju od njih; ne postoji besplatan ručak. Mnogo je potencijalnih povlačenja performansi: bilo da se radi o izgubljenim renderiranjima, suvišnim preslušavačima, dubinskoj usporedbi objekata ili nepotrebnim i velikim DOM manipulacijama. Ovdje možete izrezati puno složenosti implementirajući stvari od nule.
Čini se da su timovi Angular i React svjesni tih zamki te su pružili stvari poput nadjačavanja metode shouldUpdate i onPush ChangeDetection kao sredstva za daljnju optimizaciju performansi.
Jednostavnost i vlasništvo nad kodom
Riskirate kad god unesete kod treće strane. Ovaj se rizik smanjuje provjerenim i provjerenim knjižnicama / okvirima, ali nikad istinski eliminiran. Ako se sami ili sa svojim timom možete izvući s pisanjem koda, možete smanjiti taj rizik i održavati bazu koda koju znate unutar i izvan nje.
Bilješke i zanimljive sitnice
Imao sam eksploziju surađujući sa Parcelom. Ponekad se osjećao malo ograničenije od Webpacka kada sam pokušavao zaobići određene rubne slučajeve, ali otkrio sam da je linija s oznakom 'zero config' uglavnom bila istinita.
Također mi je jasno da mnogi React označavaju kao "biblioteku", a Vue kao "progresivni" okvir. Iako razumijem razloge za to, mislim da React, Vue i Angular rješavaju mnoge iste probleme. Stoga ih sve zajedno razmatram pod pojmom „okviri“.
Zašto ne koristiti matricu ili polimer? Želio sam što je više moguće izbjeći upotrebu paketa, knjižnica i okvira. Želio sam vidjeti koliko su se web standardi povisili kako bi zadovoljili suvremeni razvoj (osim alata za izgradnju).
Siguran sam da postoje mnogi drugi načini razvoja SPA-a ili front end aplikacije uopće bez većeg okvira ili biblioteke, ovdje sam pokušao na jedan način, a volio bih čuti o drugima!
Sažetak
Izvrsna heuristika za odluku o korištenju ili neupotrebi okvira je ono što ja nazivam "prijelomna točka". Kako vaša aplikacija raste, dolazi do točke u kojoj na kraju stvarate vlastiti okvir kako biste ponovno iskoristili funkcionalnost i strukturu. Na primjer, imate hrpu obrazaca i želite stvoriti logiku za ponovnu upotrebu za reaktivnu provjeru valjanosti.
Ako završite u ovom trenutku, morate odlučiti isplati li se uložiti vrijeme u stvaranje sustava kako biste postigli ono što možete brzo postići pomoću okvira ili knjižnice. Bit će različitih prekretnica, ovisno o vremenskim ograničenjima ili proračunskim ograničenjima, ali okviri su i dalje vrlo relevantni s obzirom na prave scenarije.
Usprkos tome, velik dio onoga što rade okviri vjerojatno će postati lakše raditi s manjim knjižnicama i / ili izvornim kodom kako vrijeme prolazi. Uzmimo za primjer moju prijavu. Istodobno, ako veliki okviri i knjižnice ostanu svestrani, mogu se mijenjati, prilagoditi i zadržati. Ako ne, mogu završiti poput jQueryja - većinom oruđa iz prošlosti.
Zaključak
Zaključno, postoje obećavajući načini razvoja složenih front end aplikacija bez okvira. Međutim, specifikacije za stvari poput web-komponenata i dalje se razvijaju i treba razraditi probleme. Okviri i dalje čine puno nevjerojatnih stvari i mogu razvoj učiniti mnogo glatkijim.
U ovom trenutku, koliko vidim, prednosti upotrebe okvira često nadmašuju nedostatke. Međutim, ako okviri ne počnu rješavati nove probleme i nastave se razvijati, na kraju će nestati.
Resursi
Vodič za kutne početnike: Zašto kutni? Vrhunske prednosti
Napomena: Ovaj je post dio tekuće serije Angular for Beginners, ovdje je kompletna serija: Angular For Beginners ... blog.angular-university.io Usporedba s drugim okvirima - Vue.js
Vue.js - Progresivni JavaScript okvir vuejs.org Optimizacija izvedbe - Reagiraj
Interno, React koristi nekoliko pametnih tehnika kako bi smanjio broj skupih DOM operacija potrebnih za ažuriranje ... web-komponenata responsejs.org
Kao programeri, svi znamo da je dobra ponovna upotreba koda što je više moguće. To tradicionalno nije bilo tako ... developer.mozilla.org Najdublji razlog zašto postoje moderni JavaScript okviri
Vidio sam mnogo, mnogo ljudi koji slijepo koriste moderni okvir poput React, Angular ili Vue.js. Ti okviri pružaju ... medium.com Stiliziranje web komponenata pomoću zajedničkog lista stilova
Web komponente nevjerojatna su nova značajka weba koja omogućava programerima da definiraju vlastite prilagođene HTML elemente ... www.smashingmagazine.com