Rodyti HN: Vertex.js – A 1kloc SPA Framework

Mikrosistemų augimas: kodėl kūrėjai atmeta išpūstus „JavaScript“ įrankius

Kūrėjas neseniai „Hacker News“ paskelbė vieno puslapio taikomųjų programų sistemą, sudarytą iš maždaug 1 000 kodo eilučių, ir atsakymas buvo elektrinis. Projektas – minimalistinė SPA sistema – vėl įžiebė diskusijas, kurios žiniatinklio kūrimo bendruomenėje virė jau daugelį metų: ar mūsų įrankiai tapo per sudėtingi jų sprendžiamoms problemoms spręsti? Kai pagrindinė „React“ biblioteka, jo maršrutizatorius, būsenos valdymo sluoksnis ir kūrimo įrankiai kartu sudaro šimtus tūkstančių kodo eilučių, sistema, kuri pateikia maršrutą, reaktyvumą ir komponentų atvaizdavimą vos per 1 000 eilučių, verčia atsakyti į nepatogų klausimą. Įmonėms, kuriančioms klientams skirtas programas, atsakymas į šį klausimą turi realių pasekmių – įkėlimo laikui, kūrėjo produktyvumui ir ilgalaikėms priežiūros išlaidoms.

Ką iš tikrųjų įrodo 1 000 eilučių sistema

Mikro rėmo idėja nėra nauja. Kai jis pasirodė 2010 m., „Backbone.js“ buvo maždaug 1 800 eilučių anotuoto šaltinio kodo. Mithril.js pristatomas iki 10 KB gzip formato. Kiekvienas naujas šios kategorijos įrašas yra vertas dėmesio ne pats eilučių skaičius, o tai, ką jis atskleidžia apie dabartinę naršyklės API būseną. Šiuolaikinės naršyklės pristatomos su vietiniu šablonų palaikymu, istorijos API, tarpiniu serveriu pagrįstu reaktyvumu, pasirinktiniais elementais ir modulio įkėlimu. Prieš dešimtmetį sistemoms reikėjo tūkstančių eilučių, kad būtų normalizuoti skirtumai tarp „Internet Explorer“ ir „Chrome“. Šiandien patyręs kūrėjas gali sukurti visiškai funkcionalų SPA sistemą kaip ploną orkestravimo sluoksnį ant platformos primityvų.

Tai svarbu, nes tai perkelia pokalbį nuo „kurią sistemą turėtume pasirinkti? į "ar mums apskritai reikia karkaso?" Mažiems ir vidutiniams projektams – nukreipimo puslapiui su dinamiškomis sekcijomis, vidiniu prietaisų skydeliu, klientų portalu – atsakymas vis dažniau skamba: gal ne arba bent jau ne sunkus. 1 000 eilučių sistema yra įrodymas, kad platforma subrendo iki taško, kai sistemos darbas mažėja.

Žinoma, tokios sistemos kaip „React“ ir „Vue“ vis dar uždirba savo svarbą didelės apimties programose, turinčiose sudėtingus būsenos medžius, serverio pusės atvaizdavimo poreikius ir daugiau nei 20 kūrėjų komandų, kurios naudojasi griežtomis taisyklėmis. Svarbiausia suprasti, kad tinkamas įrankis visiškai priklauso nuo problemos apimties.

Tikroji „JavaScript“ išsipūtimo kaina

Pačios „Google“ tyrimai nuolat rodo, kad kas 100 milisekundžių papildomo įkėlimo laiko gali sumažinti konversijų rodiklius iki 7 %. Vidutinis tinklalapis dabar pristato daugiau nei 500 KB „JavaScript“ – nuo ​​2015 m. šis skaičius išaugo beveik trigubai. Įmonėms tai nėra abstrakti našumo metrika. Tai tiesiogiai reiškia prarastas pajamas, aukštesnius atmetimo rodiklius ir prastesnę paieškos variklio reitingą.

Problema dar labiau sustiprėja mobiliuosiuose tinkluose. Vidutinės klasės „Android“ įrenginio, jungiančio 3G ryšiu, naudotojas gali palaukti 5–8 sekundes, kol „JavaScript“ turintis puslapis taps interaktyvus, net ir pateikus pradinį HTML. Tai ypač baudžia įmones, aptarnaujančias klientus besivystančiose rinkose, kur įprastas naršymas mobiliuoju telefonu, o tinklo infrastruktūra labai skiriasi.

• Išnagrinėjimo laikas: didelių „JavaScript“ paketų analizė ir kompiliavimas užtrunka ilgiau, net prieš paleidžiant vieną programos kodo eilutę
• Atminties įtampa: sudėtingos sistemos vidinės dalys sunaudoja atmintį, kurią galėtų naudoti pati programa
• Atnaujinimo nuovargis: dėl pagrindinių sistemos atnaujinimų (nuo 1 iki 2 kampo, nuo 2 iki 3 Vue, „React“ klasės komponentai į kabliukus) reikalauja brangių perkėlimo pastangų kas 2–3 metus.
• Priklausomybės grandinės: tipiškame „React“ projekto aplanke node_modules yra 800–1 200 paketų, kurių kiekvienas gali būti saugos pažeidžiamumas arba lūžtantis pakeitimas.
• Kūrimo sudėtingumas: Webpack, Babel, PostCSS ir jų konfigūracijos failai dažnai viršija jų teikiamą programos kodą

Mikrokarkasai apeina didžiąją dalį šių išlaidų. Sumažėjus abstrakcijoms, mažiau dalykų, kuriuos reikia nutraukti, mažiau priklausomybių, kurias reikia patikrinti, ir mažiau baitų, kuriuos reikia siųsti į naršyklę. Įmonei, kuriai reikia greito ir patikimo buvimo žiniatinklyje be specialios priekinės infrastruktūros komandos, matematika vis labiau skatina paprastumą.

Kodėl kūrėjų bendruomenė padalinta

Hacker News diskusija apie mažas SPA sistemas patikimai sukuria dvi priešingas stovyklas. Vienoje pusėje yra kūrėjai, kurie ilgus metus praleido didelėse kodų bazėse, sukurtose „React“ arba „Angular“ pagrindu, ir iš pirmų lūpų matė, kaip sistemos sudėtingumas laikui bėgant didėja. Jie stebėjo, kaip paprastos funkcijos įtraukiamos į kelių dienų užduotis, nes pagal sistemos nuostatas reikia liesti maršrutizatoriaus konfigūraciją, būsenos valdymo sistemą ir bandomuosius diržus, kurie tyčiojasi iš sistemos vidinių dalių. Šiems kūrėjams 1 000 eilučių sistema reiškia išsilaisvinimą – grįžimą prie kiekvienos jų programoje veikiančios kodo eilutės supratimo.

Kita vertus, yra pragmatikai, kurie nurodo, kad sistemos egzistuoja, nes realaus pasaulio programoms ilgainiui reikia to, ką jos teikia: pritaikymo neįgaliesiems paslaugų, internacionalizavimo, kodo skaidymo, serverio atvaizdavimo ir įrankį jau išmanančių kūrėjų samdymo. Jie tvirtina, kad mikrosistema gali būti puiki savaitgalio projektui, tačiau pabandykite suburti penkių žmonių komandą į specialią 1 000 eilučių kodų bazę be Stack Overflow atsakymų ir oficialių dokumentų.

Abi pusės turi pagrįstų dalykų, ir tiesa ta, kad pasirinkimas priklauso nuo konteksto. Vienas įkūrėjas, kuriantis MVP, turi iš esmės kitokius poreikius nei įmonės komanda, prižiūrinti penkerių metų senumo programą. Pavojus kyla taikant įmonės sprendimus paleisties problemoms arba paleisties įrankius įmonės iššūkiams.

Ko šiuolaikinėms įmonėms iš tikrųjų reikia iš jų techninių krūvų

Pagrindinės diskusijos galiausiai yra platesnis klausimas: kaip įmonės turėtų paskirstyti savo ribotus techninius išteklius? Every hour a developer spends configuring a build pipeline or migrating to a new framework version is an hour not spent building features that serve customers. Daugeliui įmonių – ypač mažoms ir vidutinėms operacijoms – idealus technologijos pasirinkimas yra toks, kuris sumažina atotrūkį tarp „turiu idėją“ ir „klientai ja naudojasi“.

Geriausias sprendimas dėl technologijų, kurį gali priimti augantis verslas, yra pasirinkti įrankius, kurie išspręstų šiandienines problemas, nesukeldami rytojaus priežiūros naštos. Nesvarbu, ar tai reiškia 1 000 eilučių sistemą, ar visiškai valdomą platformą, tikslas yra tas pats: praleiskite laiką ties tuo, kas daro jūsų verslą išskirtinį, o ne su infrastruktūra, kurios reikia kiekvienam verslui.

Šis principas apima ne tik sąsajos sistemas. Įmonės reguliariai atkuria tas pačias pagrindines sistemas – naudotojo autentifikavimą, mokėjimų apdorojimą, CRM, sąskaitų faktūrų išrašymą, planavimą – nes to reikalauja jų pasirinktas technologijų paketas. Tokios platformos kaip Mewayz egzistuoja būtent tam, kad pašalintų šį pasikartojantį darbą, siūlydamos 207 iš anksto sukurtus modulius, apimančius viską nuo CRM ir darbo užmokesčio iki rezervavimo sistemų ir analizės. Ta pati filosofija, skatinanti kūrėjus prie mikrostruktūrų – padaryti daugiau su mažiau, pašalinti nereikalingą sudėtingumą – skatina įmones kurti konsoliduotas platformas, kurios pakeičia dešimtis SaaS prenumeratų viena sistema.

Pagrindų spektras: raskite savo mielą vietą

Užuot sisteminio pasirinkimo traktavimą kaip dvejetainį – „mega-framework“ arba „micro-framework“, jis padeda mąstyti spektru. Viename gale turite vanilinį JavaScript be nulio abstrakcijų. Kita vertus, turite pilną meta-framework, pvz., Next.js arba Nuxt, kurie tvarko maršruto parinkimą, atvaizdavimą, duomenų gavimą ir diegimą. Dauguma projektų priklauso kažkur per vidurį.

Klientams skirtai rinkodaros svetainei su keliais interaktyviais elementais gali puikiai tikti mikrokarkasas ar net Alpine.js stiliaus tiesioginis reaktyvumas. Jei naudojate sudėtingą SaaS prietaisų skydelį su realaus laiko duomenimis, vaidmenimis pagrįstais leidimais ir neprisijungus pasiekiamu palaikymu, brandi sistema su turtinga ekosistema yra verta papildomų išlaidų. Klaida yra sunkiausia parinktis, nes ji yra populiariausia, arba lengviausia, nes ji teikia didžiausią intelektą.

Praktinis testas yra nesudėtingas: surašykite visas funkcijas, kurių jūsų programai reikia per ateinančius 12 mėnesių. Jei mikrostruktūra patenkina 90 % tų poreikių, o likusius 10 % galite perkelti per trumpesnį laiką, nei sugaištumėte konfigūruodami didesnę sistemą, laimi mikrostruktūra. Jei į jūsų funkcijų sąrašą įtrauktas serverio atvaizdavimas, sudėtingos formos patvirtinimas, animacijos orkestravimas ir išsamus pritaikymo neįgaliesiems palaikymas, didesnė sistema greičiausiai atsiperka.

Pamokos netechnikos steigėjams ir verslo operatoriams

Jei vadovaujate verslui ir jūsų techninė komanda diskutuoja apie sistemas, štai kas iš tikrųjų svarbu. Pirmiausia paklauskite apie laiką, per kurį bus galima pradėti naudoti pirmą funkciją – kaip greitai naujas komandos kūrėjas gali pateikti reikšmingų pokyčių? Jei atsakymas apima aplinkos sąrankos ir sistemos mokymosi dienas, tai yra įspėjamasis ženklas, neatsižvelgiant į tai, kuri sistema buvo pasirinkta. Antra, paklauskite apie atnaujinimo kelią. Sistemos, kurios kas 18 mėnesių išleidžia nepaprastus pakeitimus, taiko paslėptą mokestį, kuris retai pasirodo pirminiame vertinime.

Trečia, ir svarbiausia, suabejokite, ar jums apskritai reikia pagal užsakymą sukurtos programinės įrangos, skirtos aptariamai funkcijai. Daugelis įmonių kelis mėnesius investuoja kūrėjo laiką kurdamos vidinius įrankius – prietaisų skydelius, CRM sistemas, sąskaitų faktūrų išrašymo srautus, planavimo sąsajas – kurie jau egzistuoja kaip nušlifuoti, prižiūrimi produktai. Tokios platformos kaip „Mewayz“, kuri aptarnauja daugiau nei 138 000 vartotojų su moduliais, apimančiais visą verslo operacijų spektrą, gali panaikinti individualaus tobulinimo poreikį standartinėms verslo funkcijoms. Taip kūrėjų komanda gali sutelkti dėmesį į tikrai unikalius jūsų produkto aspektus – funkcijas, kurių negali suteikti joks paruoštas įrankis.

1. Tinkinto kodo tikrinimas: nustatykite, kurie vidiniai įrankiai dubliuoja esamose platformose pasiekiamas funkcijas
2. Apskaičiuokite tikrąją kainą: atsižvelkite į ne tik pradinį kūrimą, bet ir nuolatinę priežiūrą, saugos pataisas ir funkcijų užklausas.
3. Įvertinkite konsolidavimą: suskaičiuokite esamas „SaaS“ prenumeratas ir palyginkite kainą su integruota platforma.
4. Apsaugokite savo skirtumus: rezervuokite tinkintus kūrimo išteklius funkcijoms, kurios tikrai išskiria jūsų verslą

Ateitis priklauso tyčiniams pasirinkimams

Jaudulys apie 1000 eilučių SPA sistemą iš tikrųjų nėra susijęs su pačia sistema. Kalbama apie augantį programinės įrangos kūrimo judėjimą tyčinio tikslo link – įrankių pasirinkimas todėl, kad jie atitinka problemą, o ne todėl, kad jie dominuoja rinkoje. „JavaScript“ ekosistema pastarąjį dešimtmetį praleido ypatybių ir abstrakcijų ginklavimosi varžybose. Priešingas judėjimas, kurį reprezentuoja mikro rėmeliai, serverio pateikiamas HTML ir platformos savosios API, yra pragmatizmo korekcija.

Įmonėms šis pokytis yra vienareikšmiškai teigiamas. Tai reiškia daugiau galimybių, mažesnes perjungimo išlaidas ir kūrėjo kultūrą, kuri vis labiau vertina paprastumą ir greitį, o ne teorinį išsamumą. Nesvarbu, ar esate individualus verslininkas, renkantis tarp „WordPress“ ir pagal užsakymą sukurtos svetainės, ar CTO, vertinantis, ar kurti ar pirkti kitą vidinį įrankį, galioja tas pats principas: geriausia technologija yra ta, kuri dingsta fone ir leidžia sutelkti dėmesį į klientų aptarnavimą.

1 000 eilučių sistema primena, kad galia nereikalauja sudėtingumo. Veiksmingiausios įmonės ir veiksmingiausios priemonės yra tos, kurios daro būtent tai, ko reikia, ir nieko daugiau.

Dažniausiai užduodami klausimai

Kas yra mikrosistema, tokia kaip Vertex.js?

Mikrosistema yra minimalistinė „JavaScript“ biblioteka, sukurta atlikti pagrindines programos užduotis be daugybės didesnių sprendimų. Vertex.js tai pasiekia suteikdamas esmines SPA funkcijas, pvz., maršrutą ir būsenos valdymą, maždaug 1000 kodo eilučių. Tai prieštarauja sistemoms, kurioms reikia atskirų, sunkesnių bibliotekų maršrutui ar būsenai, todėl sumažėja bendras sudėtingumas ir mažesnių projektų išsipūtimas.

Kodėl kūrėjai pereina prie paprastesnių įrankių?

Daugelis kūrėjų mano, kad šiuolaikiniai „JavaScript“ įrankiai tapo pernelyg sudėtingi vidutiniam projektui. Sunkios sistemos gali sukelti lėtą kūrimo laiką, stačią mokymosi kreivę ir nereikalingas funkcijas. Paprastesni įrankiai, pvz., Vertex.js, siūlo greitesnę ir suprantamesnę kūrimo patirtį, sutelkiant dėmesį į pagrindines problemas, kurias turi išspręsti sistema, ir geriau suderinti su faktiniais projekto reikalavimais.

Ar Vertex.js tinka didelėms, sudėtingoms programoms?

Vertex.js visų pirma skirtas mažesniems projektams, kur svarbiausia yra paprastumas ir mažos papildomos išlaidos. Labai didelėms, sudėtingoms programoms su daugybe interaktyvių komponentų gali būti tinkamesnė sistema su didele ekosistema. Komandoms, kurioms reikia daug iš anksto sukurtų modulių, tokia paslauga kaip „Mewayz“ (siūloma 207 modulius už 19 USD per mėnesį) galėtų suteikti reikiamą vartotojo sąsają ir funkcinius komponentus, kurių trūksta mikrosistemoms.

Ar man vis tiek reikia kūrimo įrankio su Vertex.js?

Nors pats Vertex.js yra lengvas, tikriausiai vis tiek naudosite kūrimo įrankį profesiniam tobulėjimui. Norint susieti kodą, tvarkyti npm priklausomybes ir įgalinti modernias „JavaScript“ funkcijas, reikalingi tokie įrankiai kaip „Vite“ arba „Parcel“. Tačiau bendra įrankių grandinė išlieka paprastesnė nei reikalaujama didesnėms sistemoms, nes išvengsite sudėtingų būsenų valdymo ir maršruto bibliotekų.