Näita HN: Vertex.js – 1kloc SPA raamistik

Mikroraamistike tõus: miks arendajad lükkavad tagasi ülepaisutatud JavaScripti tööriistad

Üks arendaja postitas hiljuti Hacker Newsile ühelehelise rakendusraamistiku, mis oli üles ehitatud ligikaudu 1000 koodireale, ja vastus oli elektriline. Projekt – minimalistlik SPA-raamistik – taaskäivitas veebiarenduse kogukonnas aastaid kestnud debati: kas meie tööriistad on muutunud nende lahendatavate probleemide jaoks liiga keeruliseks? Kui Reacti põhiteek, selle ruuter, olekuhalduskiht ja koostamise tööriistad kaaluvad kokku sadu tuhandeid koodiridu, tekitab raamistik, mis pakub marsruutimist, reaktiivsust ja komponentide renderdamist vaid 1000 reaga, ebamugava küsimuse. Kliendile suunatud rakendusi loovate ettevõtete jaoks on sellele küsimusele vastamisel reaalsed tagajärjed – laadimisaeg, arendaja tootlikkus ja pikaajalised hoolduskulud.

Mida 1000-realine raamistik tegelikult tõestab

Mikroraamistiku idee pole uus. Backbone.js sisaldas 2010. aastal debüteerides ligikaudu 1800 rida annoteeritud lähtekoodi. Mithril.js tarnitakse alla 10 KB gzipituna. Selle kategooria iga uue kirje ei tee tähelepanuväärseks mitte ridade arv ise, vaid see, mida see näitab brauseri API-de praeguse oleku kohta. Kaasaegsed brauserid tarnivad koos malliliteraalide, ajaloo API, puhverserveripõhise reaktiivsuse, kohandatud elementide ja mooduli laadimise natiivse toega. Kümmekond aastat tagasi vajasid raamistikud tuhandeid ridu lihtsalt Internet Exploreri ja Chrome'i erinevuste normaliseerimiseks. Täna saab osav arendaja ehitada täisfunktsionaalse SPA raamistiku õhukese orkestratsioonikihina platvormi primitiivide peale.

See on oluline, kuna see nihutab vestlust teemalt "millise raamistiku peaksime valima?" "Kas meil on üldse raamistikku vaja?" Väikeste ja keskmiste projektide puhul – dünaamiliste jaotistega sihtleht, sisemine armatuurlaud, kliendiportaal – on vastus üha enam: võib-olla mitte või vähemalt mitte raske. 1000-realine raamistik on tõend selle kohta, et platvorm on küpsenud nii kaugele, et raamistiku töö väheneb.

Loomulikult teenivad raamistikud, nagu React ja Vue, endiselt oma kaalu suuremahulistes rakendustes, millel on keerulised olekupuud, serveripoolsed renderdusvajadused ja 20+ arendajameeskonnad, kes saavad kasu jäikadest tavadest. Peamine arusaam on see, et õige tööriist sõltub täielikult probleemi ulatusest.

JavaScripti paisumise tegelik hind

Google'i enda uuringud on järjekindlalt näidanud, et iga 100 millisekundi lisamisega laadimisaeg võib konversioonimäärasid vähendada kuni 7%. Keskmine veebileht tarnib nüüd üle 500 KB JavaScripti – see arv on alates 2015. aastast peaaegu kolmekordistunud. Ettevõtete jaoks ei ole see abstraktne toimivusmõõdik. See tähendab otseselt saamata jäänud tulu, kõrgemaid põrkemäärasid ja otsingumootorite halvemat asetust.

Probleem süveneb mobiilsidevõrkudes. 3G kaudu ühenduva keskklassi Android-seadme kasutaja võib oodata 5–8 sekundit, kuni JavaScripti sisaldav leht muutub interaktiivseks, isegi pärast esialgse HTML-i renderdamist. See on eriti karistav ettevõtete jaoks, kes teenindavad kliente arenevatel turgudel, kus esmajärjekorras mobiilne sirvimine on norm ja võrguinfrastruktuur on dramaatiliselt erinev.

• Parsimise aeg: suurte JavaScripti pakettide sõelumine ja kompileerimine võtab kauem aega, isegi enne ühe rakenduse koodirea käivitamist.
• Mälu surve: keerukad raamistiku sisemised elemendid tarbivad mälu, mida rakendus ise saaks kasutada.
• Värskete väsimine: suuremad raamistiku uuendused (Angular 1 kuni 2, Vue 2 kuni 3, React class komponendid konksudele) sunnivad kulukaid üleviimise jõupingutusi iga 2–3 aasta järel.
• Sõltuvusahelad: tüüpiline Reacti projekti kaust node_modules sisaldab 800–1200 paketti, millest igaüks võib olla potentsiaalne turvaauku või murranguline muudatus.
• Ehitamise keerukus: Webpack, Babel, PostCSS ja nende konfiguratsioonifailid ületavad sageli nende pakutava rakenduse koodi.

Mikroraamid jätavad enamiku nendest kuludest kõrvale. Kui abstraktsioone on vähem, on vähem asju, mida murda, vähem sõltuvusi auditeerida ja vähem baite, mida brauserisse saata. Ettevõtte jaoks, mis vajab kiiret ja usaldusväärset veebi kohalolekut ilma spetsiaalse kasutajaliidese infrastruktuuri meeskonnata, eelistab matemaatika üha enam lihtsust.

Miks arendajate kogukond on jagatud

Häcker Newsi arutelu väikeste SPA-raamistike üle loob usaldusväärselt kaks vastandlikku leeri. Ühel pool on arendajad, kes on aastaid veetnud Reactile või Angularile ehitatud suurtes koodibaasides ja näinud omal nahal, kuidas raamistiku keerukus aja jooksul ühtlustub. Nad on jälginud, kuidas lihtsad funktsioonid muutuvad mitmepäevasteks ülesanneteks, sest raamistiku reeglid nõuavad ruuteri konfiguratsiooni puudutamist, olekuhalduse katlaplaati ja raamistiku sisemisi pilkupüüdvaid rakmeid. Nende arendajate jaoks tähendab 1000-realine raamistik vabanemist – naasmist iga nende rakenduses töötava koodirea mõistmise juurde.

Teisel poolel on pragmaatikud, kes juhivad tähelepanu sellele, et raamistikud on olemas, kuna reaalmaailma rakendused vajavad lõpuks seda, mida nad pakuvad: juurdepääsetavuse utiliidid, rahvusvahelistumine, koodi jagamine, serveripoolne renderdus ja tööriista juba tundvate arendajate palkamine. Nad väidavad, et mikroraamistik võib nädalavahetuse projekti jaoks olla meeldiv, kuid proovige viieliikmelise meeskonnaga liituda eritellimusel valmistatud 1000-reale koodibaasi, millel pole Stack Overflow vastuseid ega ametlikku dokumentatsiooni.

Mõlemal poolel on kehtivad punktid ja tõde on see, et valik sõltub kontekstist. Üksikasutaja, kes ehitab MVP-d, vajab põhimõtteliselt teistsuguseid vajadusi kui viis aastat vana rakendust haldaval ettevõtte meeskonnal. Oht seisneb ettevõtte lahenduste rakendamises käivitusprobleemidele või käivitustööriistade rakendamises ettevõtte väljakutsetele.

Mida tänapäeva ettevõtted oma tehnilistelt ettevõtetelt tegelikult vajavad

Raamistarutelu on lõppkokkuvõttes laiema küsimuse asendusvahend: kuidas peaksid ettevõtted oma piiratud tehnilisi ressursse jaotama? Iga tund, mille arendaja kulutab ehituskonveieri konfigureerimisele või uuele raamistiku versioonile üleminekule, on tund, mida ei kuluta kliente teenindavate funktsioonide loomisele. Paljude ettevõtete jaoks (eriti väikeste ja keskmise suurusega ettevõtete jaoks) on ideaalne tehnoloogia valik selline, mis vähendab lõhet sõnade "mul on idee" ja "kliendid kasutavad seda" vahel.

Parim tehnoloogiline otsus, mida kasvav ettevõte teha saab, on valida tööriistad, mis lahendavad tänaseid probleeme ilma homset hoolduskoormust tekitamata. Ükskõik, kas see tähendab 1000-realist raamistikku või täielikult hallatud platvormi, eesmärk on sama: kulutage aega sellele, mis teeb teie ettevõtte ainulaadseks, mitte infrastruktuurile, mida iga ettevõte vajab.

See põhimõte ulatub esiosa raamistikest kaugemale. Ettevõtted ehitavad regulaarselt ümber samu taustasüsteeme – kasutaja autentimine, maksete töötlemine, kliendisuhete haldus, arveldamine, ajakava koostamine –, sest nende valitud tehnoloogiapakett seda nõuab. Sellised platvormid nagu Mewayz eksisteerivad just selle korduva töö kõrvaldamiseks, pakkudes 207 eelehitatud moodulit, mis hõlmavad kõike alates CRM-ist ja palgaarvestusest kuni broneerimissüsteemide ja analüütikani. Sama filosoofia, mis juhib arendajaid mikroraamistike poole – tehke vähemaga rohkem, kõrvaldage tarbetu keerukus – suunab ettevõtted kasutama konsolideeritud platvorme, mis asendavad kümneid SaaS-i tellimusi ühe süsteemiga.

Raamistikspekter: oma meeldiva koha leidmine

Selle asemel, et käsitleda raamistiku valikut binaarsena – megaraamistikuna või mikroraamistikuna – aitab see mõelda spektrile. Ühes otsas on teil vanilje JavaScript null abstraktsiooniga. Teisel juhul on teil täispunn metaraamistikud, nagu Next.js või Nuxt, mis tegelevad marsruutimise, renderdamise, andmete toomise ja juurutamisega. Enamik projekte kuulub kuhugi keskele.

Mõne interaktiivse elemendiga kliendile suunatud turundussaidile võib mikroraamistik või isegi Alpine.js-stiilis tekstisisene reaktiivsus sobida ideaalselt. Reaalajas andmete, rollipõhiste lubade ja võrguühenduseta toega keeruka SaaS-i armatuurlaua jaoks on rikkaliku ökosüsteemiga küps raamistik väärt üldkulusid. Viga on kõige raskema valiku valimine, kuna see on kõige populaarsem, või kõige kergema valiku valimine, kuna see on intellektuaalselt kõige rahuldustpakkuvam.

Praktiline test on lihtne: loetlege kõik funktsioonid, mida teie rakendus järgmise 12 kuu jooksul vajab. Kui mikroraamistik katab 90% nendest vajadustest ja saate ülejäänud 10% käsitsi rullida lühema ajaga, kui kulutate suurema raamistiku seadistamisele, võidab mikroraamistik. Kui teie funktsioonide loend sisaldab serveripoolset renderdamist, keeruka vormi valideerimist, animatsiooni orkestreerimist ja sügavat juurdepääsetavuse tuge, tasub suurem raamistik end tõenäoliselt ära.

Õppetunnid mittetehnilistele asutajatele ja ettevõtjatele

Kui juhite ettevõtet ja teie tehniline meeskond arutleb raamistike üle, on siin see, mis on tegelikult oluline. Esiteks küsige esmakordse funktsiooni loomiseni kulunud aega – kui kiiresti suudab meeskonna uus arendaja sisulise muudatuse toimetada? Kui vastus hõlmab päevadepikkust keskkonna seadistamist ja raamistiku õppimist, on see hoiatusmärk olenemata valitud raamistikust. Teiseks küsige täiendustee kohta. Raamistikud, mis avaldavad murrangulisi muudatusi iga 18 kuu järel, kehtestavad varjatud maksu, mida esialgsel hindamisel harva esineb.

Kolmandaks, mis kõige tähtsam, küsige, kas teil on kõnealuse funktsiooni jaoks üldse vaja kohandatud tarkvara. Paljud ettevõtted investeerivad kuudepikkust arendajaaega sisemiste tööriistade – armatuurlaudade, CRM-süsteemide, arveldusvoogude, ajakava liideste – loomisse, mis on juba olemas lihvitud ja hooldatud toodetena. Platvorm nagu Mewayz, mis teenindab enam kui 138 000 kasutajat moodulitega, mis hõlmavad kogu äritegevuse spektrit, võib kõrvaldada vajaduse kohandatud arenduse järele täielikult standardsete ärifunktsioonide jaoks. See vabastab teie arendusmeeskonna keskenduma teie toote tõeliselt ainulaadsetele aspektidele – funktsioonidele, mida ükski valmistööriist pakkuda ei saa.

1. Kohandatud koodi auditeerimine: tuvastage, millised sisemised tööriistad dubleerivad olemasolevatel platvormidel saadaolevaid funktsioone.
2. Arvutage tegelik hind: arvestage mitte ainult esialgses arenduses, vaid ka pidevas hoolduses, turvapaigad ja funktsioonitaotlused.
3. Konsolideerimise hindamine: loendage oma praegused SaaS-i tellimused ja võrrelge kulusid integreeritud platvormiga.
4. Kaitske oma eristajaid: reserveerige kohandatud arendusressursse funktsioonide jaoks, mis teie ettevõtet tõeliselt eristavad.

Tulevik kuulub tahtlike valikute juurde

1000-realise SPA raamistiku põnevus ei ole tegelikult seotud raamistikuga. See puudutab tarkvaraarenduse kasvavat liikumist tahtlikkuse suunas – tööriistade valimine sellepärast, et need sobivad probleemiga, mitte sellepärast, et nad domineerivad turul. JavaScripti ökosüsteem on viimase kümnendi veetnud funktsioonide ja abstraktsioonide võidurelvastumises. Vastuliikumine, mida esindavad mikroraamistikud, serveris renderdatud HTML ja platvormipõhised API-d, on parandus pragmatismi poole.

Ettevõtete jaoks on see nihe ühemõtteliselt positiivne. See tähendab rohkem valikuvõimalusi, madalamaid vahetuskulusid ja arendajakultuuri, mis väärtustab üha enam lihtsust ja kiirust teoreetilise täielikkuse asemel. Ükskõik, kas olete üksikettevõtja, kes valib WordPressi ja eritellimusel loodud saidi vahel, või CTO, kes hindab, kas ehitada või osta oma järgmine sisemine tööriist, kehtib sama põhimõte: parim tehnoloogia on see, mis kaob tagaplaanile, võimaldades teil keskenduda oma klientide teenindamisele.

1000-realine raamistik tuletab meile meelde, et võimsus ei nõua keerukust. Kõige tõhusamad ettevõtted – ja kõige tõhusamad tööriistad – on need, mis teevad täpselt seda, mida vaja, ja ei midagi enamat.

Korduma kippuvad küsimused

Mis on mikroraamistik nagu Vertex.js?

Mikroraamistik on minimalistlik JavaScripti teek, mis on loodud rakenduste põhiülesannete täitmiseks ilma suuremate lahendusteta. Vertex.js saavutab selle, pakkudes umbes 1000 koodireas olulisi SPA-funktsioone, nagu marsruutimine ja olekuhaldus. See erineb raamistikest, mis nõuavad marsruutimiseks või olekuks eraldi raskemaid teeke, mis vähendab väiksemate projektide üldist keerukust ja paisumist.

Miks arendajad liiguvad lihtsamate tööriistade poole?

Paljud arendajad arvavad, et tänapäevased JavaScripti tööriistad on muutunud keskmise projekti jaoks liiga keeruliseks. Rasked raamistikud võivad tuua kaasa aeglase ehitusaja, järsu õppimiskõvera ja tarbetuid funktsioone. Lihtsamad tööriistad, nagu Vertex.js, pakuvad kiiremat ja arusaadavamat arenduskogemust, keskendudes olulistele probleemidele, mida raamistik peab lahendama, sobitades paremini projekti tegelike nõuetega.

Kas Vertex.js sobib suure ja keeruka rakenduse jaoks?

Vertex.js on mõeldud peamiselt väiksemate projektide jaoks, kus lihtsus ja madalad üldkulud on võtmetähtsusega. Väga suurte ja paljude interaktiivsete komponentidega keerukate rakenduste jaoks võib sobivam olla funktsioonirikkam raamistik, millel on suur ökosüsteem. Meeskondadele, kes vajavad ulatuslikke eelehitatud mooduleid, võib selline teenus nagu Mewayz (pakkudes 207 moodulit hinnaga 19 $ kuus) pakkuda vajalikke kasutajaliideseid ja funktsionaalseid komponente, mis mikroraamistikul puuduvad.

Kas mul on ikkagi Vertex.js-iga ehitustööriista vaja?

Kuigi Vertex.js ise on kerge, kasutate tõenäoliselt siiski professionaalseks arenguks ehitustööriista. Sellised tööriistad nagu Vite või Parcel on vajalikud teie koodi komplekteerimiseks, npm-sõltuvuste käsitlemiseks ja kaasaegsete JavaScripti funktsioonide lubamiseks. Üldine tööriistaahel on siiski lihtsam kui suuremate raamistike jaoks vajalik, kuna väldite keerulisi olekuhalduse ja marsruutimise teeke.