Ipakita ang HN: Vertex.js – Usa ka 1kloc SPA Framework

Ang Pagsaka sa Micro-Frameworks: Ngano nga Gisalikway sa mga Nag-develop ang Nabuak nga JavaScript Tooling

Usa ka developer bag-o lang nagpost ug usa ka panid nga balangkas sa aplikasyon nga gitukod sa halos 1,000 ka linya sa code sa Hacker News, ug ang tubag kay electric. Ang proyekto - usa ka minimalist nga balangkas sa SPA - nagbag-o sa usa ka debate nga nag-uyog sa komunidad sa pagpalambo sa web sa daghang mga tuig: nahimo na ba nga komplikado ang among mga himan alang sa mga problema nga ilang nasulbad? Kung ang kinauyokan nga librarya sa React, ang router niini, ang layer sa pagdumala sa estado, ug ang mga tool sa pagtukod niini kolektibo nga nagtimbang sa gatusan ka libong linya sa code, usa ka balangkas nga naghatud sa ruta, reaktibidad, ug pag-render sa sangkap sa 1,000 lang nga linya nagpugos sa usa ka dili komportable nga pangutana. Para sa mga negosyo nga nagtukod ug mga aplikasyon nga nag-atubang sa kustomer, ang tubag niana nga pangutana adunay tinuod nga mga sangputanan — sa mga oras sa pagkarga, produktibidad sa developer, ug dugay nga gasto sa pagmentinar.

Unsa ang Gipamatud-an sa 1,000-Linya nga Framework

Ang ideya sa usa ka micro-framework dili bag-o. Ang Backbone.js kay halos 1,800 ka linya sa annotated source code sa dihang gi-debut kini niadtong 2010. Mithril.js mipadala ug ubos sa 10KB gzipped. Ang nakapahimo sa matag bag-ong entry sa kini nga kategorya nga hinungdanon dili ang ihap sa linya mismo apan kung unsa ang gipadayag bahin sa karon nga kahimtang sa mga API sa browser. Ang mga modernong browser gipadala uban ang lumad nga suporta alang sa template nga literal, ang History API, Proxy-based nga reactivity, custom nga mga elemento, ug module loading. Usa ka dekada na ang milabay, ang mga frameworks nanginahanglan og liboan ka mga linya aron lang ma-normalize ang mga kalainan tali sa Internet Explorer ug Chrome. Karon, ang usa ka hanas nga developer makahimo sa usa ka fully functional SPA framework isip nipis nga orchestration layer sa ibabaw sa platform primitives.

Mahinungdanon kini tungod kay gibalhin niini ang panag-istoryahanay gikan sa "unsa nga balangkas ang among pilion?" sa "kinahanglan ba kita og usa ka gambalay sa tanan?" Alang sa gagmay-sa-medium nga mga proyekto - usa ka landing page nga adunay dinamikong mga seksyon, usa ka internal nga dashboard, usa ka portal sa kustomer - ang tubag nagkadaghan: tingali dili, o labing menos dili usa ka bug-at. Ang 1,000 ka linya nga balangkas usa ka pruweba nga ang plataporma mihamtong na sa punto diin ang trabaho sa gambalay nagkagamay.

Siyempre, ang mga frameworks sama sa React ug Vue nakakuha gihapon sa ilang gibug-aton sa mga dinagkong aplikasyon nga adunay komplikado nga mga punoan sa estado, mga kinahanglanon sa pag-render sa kilid sa server, ug mga koponan sa 20+ nga mga developer nga nakabenepisyo gikan sa mga estrikto nga kombensyon. Ang yawe nga pagsabot mao nga ang hustong himan nagdepende sa kasangkaran sa problema.

Ang Tinuod nga Gasto sa JavaScript Bloat

Ang kaugalingong panukiduki sa Google makanunayon nga nagpakita nga matag 100 ka millisecond nga dugang nga oras sa pagkarga makapakunhod sa rate sa pagkakabig hangtod sa 7%. Ang median nga panid sa web karon nagpadala na ug kapin sa 500KB nga JavaScript — usa ka numero nga halos tulo ka pilo sukad sa 2015. Para sa mga negosyo, dili kini abstract nga sukatan sa performance. Direkta kini nga gihubad ngadto sa nawala nga kita, mas taas nga bounce rate, ug mas grabe nga ranggo sa search engine.

Gidugangan ang problema sa mga mobile network. Ang usa ka user sa usa ka mid-range nga Android device nga nagkonektar sa 3G mahimong maghulat 5-8 segundos alang sa usa ka JavaScript-bug-at nga panid nga mahimong interactive, bisan human ang unang HTML nahubad. Partikular nga pagsilot kini alang sa mga negosyo nga nagserbisyo sa mga kustomer sa mga bag-ong merkado, diin ang pag-browse nga una sa mobile mao ang naandan ug ang imprastraktura sa network lahi kaayo.

• Parse time: Ang dagkong mga JavaScript bundle mas dugay aron ma-parse ug ma-compile, bisan sa dili pa ma-execute ang usa ka linya sa application code
• Pressyur sa memorya: Ang mga internal nga gambalay sa komplikado naggamit sa memorya nga mahimong gamiton sa aplikasyon mismo
• Pag-update sa kakapoy: Ang dagkong mga pag-upgrade sa framework (Angular 1 ngadto sa 2, Vue 2 ngadto sa 3, Pag-react sa mga sangkap sa klase ngadto sa mga kaw-it) mopugos sa mahal nga mga paningkamot sa paglalin matag 2-3 ka tuig
• Mga kadena sa dependensya: Usa ka tipikal nga React project nga node_modules folder adunay 800-1,200 ka pakete, ang matag usa usa ka potensyal nga kahuyang sa seguridad o makaguba nga pagbag-o
• Paghimo og pagkakomplikado: Ang Webpack, Babel, PostCSS, ug ang ilang mga configuration file kasagaran molapas sa application code nga ilang gisilbi

Ang mga micro-frameworks naglikay sa kadaghanan niini nga mga gasto. Uban sa gamay nga abstraction, adunay gamay nga mga butang nga mabuak, gamay nga dependency nga i-audit, ug mas gamay nga byte nga ipadala sa browser. Para sa negosyo nga nanginahanglan og paspas, kasaligan nga presensya sa web nga walay dedikado nga frontend nga imprastraktura nga team, ang matematika mas mipabor sa kayano.

Nganong Nabahin ang Komunidad sa Developer

Ang Hacker News nga diskusyon libot sa gagmay nga SPA frameworks kasaligang makamugna og duha ka magkaatbang nga kampo. Sa usa ka bahin mao ang mga developers nga migugol ug mga tuig sa dagkong mga codebase nga gitukod sa React o Angular ug nakakita mismo kung giunsa ang pagkakomplikado sa framework sa paglabay sa panahon. Ilang gitan-aw ang yano nga mga feature nga nag-balloon ngadto sa daghang adlaw nga mga buluhaton tungod kay ang mga kombensiyon sa framework nanginahanglan og paghikap sa configuration sa router, state management boilerplate, ug mga test harnesses nga nagbiaybiay sa mga internals sa framework. Para niini nga mga developers, ang 1,000-line framework nagrepresentar sa kalingkawasan — usa ka pagbalik sa pagsabot sa matag linya sa code nga nagdagan sa ilang aplikasyon.

Sa pikas bahin mao ang mga pragmatist nga nagpunting nga adunay mga frameworks tungod kay ang tinuod nga kalibutan nga mga aplikasyon sa katapusan nanginahanglan kung unsa ang ilang gihatag: accessibility utilities, internationalization, code splitting, server-side rendering, ug usa ka hiring pipeline sa mga developer nga nahibal-an na ang himan. Ang usa ka micro-framework mahimong makapalipay alang sa usa ka proyekto sa katapusan sa semana, sila nangatarungan, apan sulayi ang pag-onboard sa usa ka team nga lima sa usa ka pinasahi nga 1,000-linya nga codebase nga walay mga tubag sa Stack Overflow ug walay opisyal nga dokumentasyon.

Ang duha ka kilid adunay balido nga mga punto, ug ang tinuod mao nga ang pagpili kay konteksto. Ang usa ka solo nga founder nga nagtukod og MVP adunay sukaranan nga lahi nga mga panginahanglan kaysa usa ka grupo sa negosyo nga nagmintinar sa usa ka lima ka tuig nga aplikasyon. Ang kapeligrohan anaa sa paggamit sa mga solusyon sa negosyo sa mga problema sa pagsugod, o mga himan sa pagsugod sa mga hagit sa negosyo.

Unsa ang Tinuod nga Gikinahanglan sa Modernong mga Negosyo Gikan sa Ilang Tech Stack

Ang debate sa framework sa katapusan usa ka proxy alang sa usa ka mas dako nga pangutana: unsaon paggahin sa mga negosyo sa ilang limitado nga teknikal nga mga kapanguhaan? Kada oras nga gigugol sa usa ka developer sa pag-configure sa usa ka pipeline sa pagtukod o paglalin sa usa ka bag-ong bersyon sa balangkas usa ka oras nga wala gigasto sa mga bahin sa pagtukod nga nagserbisyo sa mga kustomer. Para sa daghang negosyo — ilabina ang gagmay ug tunga sa gidak-on nga mga operasyon — ang sulundon nga pagpili sa teknolohiya mao ang usa nga makapamenos sa gintang tali sa "Ako adunay ideya" ug "gigamit kini sa mga kustomer."

Ang labing maayo nga desisyon sa teknolohiya nga mahimo sa usa ka nagtubo nga negosyo mao ang pagpili sa mga himan nga makasulbad sa mga problema karon nga wala maghimo ug palas-anon sa pagpadayon sa ugma. Nagpasabot man kana og 1,000 ka linya nga gambalay o bug-os nga pagdumala nga plataporma, ang tumong mao ra: igahin ang imong panahon sa unsay nakapahimo sa imong negosyo nga talagsaon, dili sa imprastraktura nga gikinahanglan sa matag negosyo.

Kini nga prinsipyo milabaw pa sa frontend frameworks. Ang mga negosyo kanunay nga nagtukod pag-usab sa parehas nga backend nga mga sistema - pag-authenticate sa gumagamit, pagproseso sa pagbayad, CRM, pag-invoice, pag-iskedyul - tungod kay gipangayo kini sa ilang gipili nga tech stack. Ang mga plataporma sama sa Mewayz tukma nga naglungtad aron wagtangon kining balik-balik nga trabaho, nga nagtanyag sa 207 ka pre-built modules nga naglangkob sa tanan gikan sa CRM ug payroll ngadto sa booking system ug analytics. Ang sama nga pilosopiya nga nagduso sa mga developers ngadto sa micro-frameworks — pagbuhat ug mas daghan sa gamay, pagwagtang sa wala kinahanglana nga pagkakomplikado — nagduso sa mga negosyo ngadto sa gihiusa nga mga plataporma nga mopuli sa dose ka mga subskripsyon sa SaaS sa usa ka sistema.

Ang Framework Spectrum: Pagpangita sa Imong Sweet Spot

Imbes nga tagdon ang pagpili sa balangkas isip binary — mega-framework o micro-framework — makatabang kini sa paghunahuna sa mga termino sa spectrum. Sa usa ka tumoy, ikaw adunay vanilla JavaScript nga adunay zero abstraction. Sa pikas bahin, aduna kay full-stack meta-frameworks sama sa Next.js o Nuxt nga nagdumala sa pag-ruta, pag-render, pagkuha sa datos, ug pag-deploy. Kadaghanan sa mga proyekto anaa sa tunga-tunga.

Alang sa usa ka site sa marketing nga nag-atubang sa kustomer nga adunay pipila ka mga interactive nga elemento, ang usa ka micro-framework o bisan ang Alpine.js-style inline nga reaktibidad mahimong labing angay. Alang sa usa ka komplikadong SaaS dashboard nga adunay real-time nga datos, mga permiso nga gibase sa papel, ug suporta sa offline, ang usa ka hamtong nga gambalay nga adunay usa ka dato nga ekosistema mao ang bili sa overhead. Ang sayop mao ang pag-default sa pinakabug-at nga opsyon tungod kay kini ang pinakasikat, o ang pag-default sa pinakagaan tungod kay kini ang labing intelektwal nga makatagbaw.

Ang praktikal nga pagsulay prangka: ilista ang matag bahin nga gikinahanglan sa imong aplikasyon sa sunod nga 12 ka bulan. Kung ang usa ka micro-framework naglangkob sa 90% sa mga panginahanglanon ug mahimo nimong i-hand-roll ang nahabilin nga 10% sa labing gamay nga oras kaysa imong igugol sa pag-configure sa usa ka mas dako nga balangkas, ang micro-framework ang modaog. Kung ang imong lista sa feature naglakip sa server-side rendering, complex form validation, animation orchestration, ug deep accessibility nga suporta, ang mas dako nga framework lagmit mobayad sa kaugalingon.

Mga Leksyon para sa Non-Technical Founders ug Business Operators

Kon nagnegosyo ka ug ang imong teknikal nga grupo nagdebate sa mga gambalay, ania ang importante. Una, pangutan-a ang bahin sa oras sa una nga bahin - unsa kadali ang usa ka bag-ong developer sa team nagpadala usa ka makahuluganon nga pagbag-o? Kung ang tubag naglakip sa mga adlaw sa pag-setup sa palibot ug pagkat-on sa balangkas, kana usa ka timaan sa pasidaan bisan unsa pa ang gipili nga balangkas. Ikaduha, pangutana bahin sa dalan sa pag-upgrade. Ang mga balangkas nga nagpagawas sa mga pagbag-o sa paglapas matag 18 ka bulan nagpahamtang ug tinago nga buhis nga panagsa ra makita sa inisyal nga ebalwasyon.

Ikatulo, ug labaw sa tanan, pangutana kung kinahanglan nimo ang custom-built software para sa function nga gipangutana. Daghang mga negosyo ang namuhunan sa mga bulan sa panahon sa developer sa paghimo sa internal nga mga himan - mga dashboard, mga sistema sa CRM, mga agos sa pag-invoice, mga interface sa pag-iskedyul - nga naglungtad na ingon gipasinaw, gipadayon nga mga produkto. Ang usa ka plataporma sama sa Mewayz, nga nagsilbi sa kapin sa 138,000 ka mga tiggamit nga adunay mga module nga naglangkob sa tibuok nga spectrum sa mga operasyon sa negosyo, mahimong makawagtang sa panginahanglan alang sa custom nga pagpalambo sa hingpit alang sa standard nga mga gimbuhaton sa negosyo. Kini nagpagawas sa imong development team sa pag-focus sa tinuod nga talagsaon nga mga aspeto sa imong produkto — ang mga feature nga walay off-the-shelf nga himan ang makahatag.

1. I-audit ang imong custom code: Ilha kung unsang internal nga himan ang duplicate nga functionality nga anaa sa kasamtangan nga mga platform
2. Kalkulahin ang tinuod nga gasto: Hinungdan dili lang sa inisyal nga pag-uswag kondili padayon nga pagmentinar, mga patch sa seguridad, ug mga hangyo sa feature
3. Timbang-timbanga ang pagkonsolida: Ipha ang imong kasamtangang mga subskripsyon sa SaaS ug itandi ang gasto batok sa usa ka integrated platform
4. Panalipdi ang imong mga differentiators: I-reserve ang custom development resources para sa mga feature nga tinuod nga nagpalain sa imong negosyo

Ang Umaabot Iya sa Tinuyo nga mga Pagpili

Ang kahinam sa palibot sa 1,000-linya nga SPA nga gambalay dili gayud mahitungod sa gambalay mismo. Kini mahitungod sa usa ka nagtubo nga kalihukan sa software development ngadto sa intentionality — pagpili sa mga himan tungod kay sila mohaom sa problema, dili tungod kay sila nagdominar sa merkado. Ang JavaScript ecosystem migugol sa katapusang dekada sa usa ka lumba sa armas sa mga bahin ug abstraction. Ang counter-movement, nga girepresentahan sa micro-frameworks, server-rendered HTML, ug platform-native APIs, usa ka pagtul-id ngadto sa pragmatismo.

Alang sa mga negosyo, kini nga pagbalhin dili klaro nga positibo. Nagpasabot kini og dugang nga mga kapilian, mas ubos nga gasto sa pagbalhin, ug usa ka kultura sa developer nga mas gipabilhan ang kayano ug katulin sa teoretikal nga pagkakompleto. Kung ikaw usa ka solo nga negosyante nga nagpili tali sa WordPress ug usa ka custom-built nga site, o usa ka CTO nga nagtimbang-timbang kung maghimo o mopalit sa imong sunod nga internal nga himan, parehas nga prinsipyo ang magamit: ang labing kaayo nga teknolohiya mao ang usa nga nawala sa background, gitugotan ka nga mag-focus sa pagserbisyo sa imong mga kustomer.

Ang 1,000-linya nga balangkas nagpahinumdom kanato nga ang gahum wala magkinahanglan og pagkakomplikado. Ang labing epektibo nga mga negosyo — ug ang labing epektibo nga mga himan — mao ang naghimo sa eksakto kung unsa ang kinahanglan ug wala nay lain pa.

Mga Pangutana nga Kanunayng Gipangutana

Unsa ang micro-framework sama sa Vertex.js?

Ang usa ka micro-framework usa ka minimalist nga librarya sa JavaScript nga gidesinyo sa pagdumala sa kinauyokan nga mga buluhaton sa aplikasyon nga wala ang kadaghanan sa dagkong mga solusyon. Nakab-ot kini sa Vertex.js pinaagi sa paghatag ug hinungdanong gamit sa SPA—sama sa pagruta ug pagdumala sa estado—sa mga 1,000 ka linya sa code. Sukwahi kini sa mga frameworks nga nanginahanglan og bulag, mas bug-at nga mga librarya para sa pagruta o estado, nga makapamenos sa kinatibuk-ang pagkakomplikado ug bloat para sa gagmay nga mga proyekto.

Nganong naglihok ang mga developer padulong sa mas simple nga mga himan?

Daghang mga developer ang mibati nga ang modernong JavaScript tooling nahimong sobra ka komplikado alang sa kasagaran nga proyekto. Ang bug-at nga mga framework mahimong magpaila sa hinay nga mga oras sa pagtukod, usa ka taas nga kurba sa pagkat-on, ug dili kinahanglan nga mga bahin. Ang mas simple nga mga himan sama sa Vertex.js nagtanyag og mas paspas, mas masabtan nga kasinatian sa pag-uswag pinaagi sa pagtutok sa mga importanteng problema nga kinahanglang sulbaron sa usa ka framework, nga mas mohaom sa aktuwal nga mga kinahanglanon sa proyekto.

Ang Vertex.js ba angay alang sa usa ka dako, komplikado nga aplikasyon?

Ang Vertex.js nag-una nga gidisenyo alang sa mas gagmay nga mga proyekto diin ang kayano ug ubos nga overhead mao ang yawe. Alang sa dako kaayo, komplikado nga mga aplikasyon nga adunay daghang interactive nga mga sangkap, ang usa ka labaw nga puno sa feature nga gambalay nga adunay lapad nga ekosistema mahimong mas haom. Para sa mga team nga nanginahanglan ug daghang pre-built modules, ang serbisyo sama sa Mewayz (nagtanyag og 207 modules sa $19/mo) makahatag sa gikinahanglang UI ug functional nga mga component nga kulang sa micro-framework.

Kinahanglan pa ba ko og build tool gamit ang Vertex.js?

Samtang ang Vertex.js mismo gaan, lagmit mogamit ka gihapon og himan sa pagtukod alang sa propesyonal nga kalamboan. Ang mga himan sama sa Vite o Parcel gikinahanglan aron i-bundle ang imong code, pagdumala sa mga dependency sa npm, ug pagpagana sa modernong mga feature sa JavaScript. Bisan pa, ang kinatibuk-ang toolchain nagpabilin nga mas simple kaysa sa gikinahanglan sa mas dagkong mga frameworks, samtang imong gilikayan ang komplikado nga state-management ug routing library.