Whakaatuhia te HN: Vertex.js – He Anga 1kloc SPA

Te Hunga ake o nga Anga-Moroiti: He aha nga Kaihanga e Akiri ana i nga Utauta JavaScript kua pupuhi

I tukuna e te kaiwhakawhanake he anga tono wharangi kotahi i hangaia i roto i te 1,000 rarangi waehere ki Hacker News, a he hiko te whakautu. Ko te kaupapa — he anga SPA iti rawa — i whakaara ake i te tautohetohe kua rukurua i roto i te hapori whanaketanga paetukutuku mo nga tau: kua tino uaua a tatou taputapu mo nga raru e whakaotihia ana e ratou? Ko te whare pukapuka matua a React, ko tana pouara, tana paparanga whakahaere kawanatanga, me ana taputapu hanga i te kotahi rau mano o nga rarangi waehere, he anga e tuku ararere, tauhohenga, me te whakaputa i nga waahanga i roto i te 1,000 noa nga raina ka raru te patai. Mo nga pakihi e hanga ana i nga tono e anga ana ki nga kaihoko, he tino hua te whakautu ki taua patai — i nga waa uta, te hua o te kaiwhakawhanake, me nga utu tiaki mo te wa roa.

He aha te 1,000-Raina Anga Tino Whakakitea

Ehara i te mea hou te whakaaro mo te anga moroiti. Ko te Backbone.js he 1,800 nga rarangi o te waehere puna korero i te wa i timata ai i te tau 2010. Ka tukuna a Mithril.js ki raro i te 10KB kua tohua. Ko te mea e whakanuia ana ia urunga hou i roto i tenei waahanga ehara i te tatau raina ake engari ko nga mea e whakaatuhia ana mo te ahuatanga o naianei o nga API tirotiro. Ka tukuna e nga kaitirotiro hou me te tautoko taketake mo nga kupu tauira tauira, te History API, te tauhohenga takawaenga, nga huānga ritenga, me te uta kōwae. I te tekau tau ki muri, e hia mano nga rarangi e hiahiatia ana e nga anga hei whakarite i nga rereketanga i waenga i a Internet Explorer me Chrome. I tenei ra, ka taea e te kaiwhakawhanake mohio te hanga anga SPA tino mahi hei paparanga angiangi ki runga ake o te papaaapapa.

He mea nui tenei na te mea ka huri te korerorero mai i "ko tehea anga hei whiriwhiri?" ki "e hiahia ana tatou i tetahi angamahi katoa?" Mo nga kaupapa iti-ki-te-waenga - he wharangi taunga me nga waahanga hihiri, he papatohu o roto, he tomokanga kaihoko - kei te piki haere te whakautu: kaore pea, kaore ranei i te taumaha. Ko te angamahi 1,000-raina he tohu kua pakeke te turanga ki te waahi kei te iti haere te mahi a te anga.

Ae ra, ko nga anga penei i a React me Vue kei te whiwhi taumaha i roto i nga tono nui-nui me nga rakau whenua uaua, nga hiahia whakaputa taha-tumau, me nga roopu o nga kaiwhakawhanake 20+ e whai hua ana i nga huihuinga pakari. Ko te maaramatanga matua ko te taputapu tika ka whakawhirinaki katoa ki te whānuitanga o te raru.

Te Utu Tuturu o JavaScript Bloat

Ko te rangahau ake a Google i whakaatu tonu ko ia 100 manomano o te wa uta ka taea te whakaiti i nga reiti whakawhiti ki te 7%. Ka tukuna atu e te wharangi ipurangi waenga i te 500KB o JavaScript — he whika kua tata toru ki te toru mai i te tau 2015. Mo nga pakihi, ehara tenei i te inenga mahi waitara. Ka whakamaori tika ki nga moni kua ngaro, nga reiti tāwhana teitei ake, me te pai ake o nga rarangi miihini rapu.

Ko te raruraru kei runga i nga whatunga waea. Ko te kaiwhakamahi kei runga i te taputapu Android e hono ana i runga i te 3G ka tatari pea mo te 5-8 hēkona mo te whaarangi JavaScript-taimaha kia tauwhitiwhiti, ahakoa i muri i te whakaputanga o te HTML tuatahi. He tino whiu tenei mo nga pakihi e mahi ana ki nga kaihoko i roto i nga maakete ka puta ake, ko te tirotiro waea-tuatahi te tikanga me te tino rerekee o nga hanganga whatunga.

• Wā poroporoaki: He roa ake ngā paihere JavaScript nui ki te wetewete me te whakahiato, ahakoa i mua i te mahi o te rarangi kotahi o te waehere tono
• Pehanga mahara: Ka pau te anga o roto i te mahara ka taea e te tono ake te whakamahi
• Whakahoutia te rohirohi: Ko nga whakamohoatanga anga matua (Angular 1 ki te 2, Vue 2 ki te 3, Tauhohe i nga waahanga o te akomanga ki nga matau) ka whakapau kaha ki nga mahi heke ia 2-3 tau
• Nga mekameka ti'aturi: Kei roto i te kōpaki node_modules o te kaupapa React e 800-1,200 nga kohinga, he whakaraeraetanga haumarutanga pea, he huringa pakaru ranei
• Hangaia te matatini: Tukutuku, Babel, PostCSS, me o raatau konae whirihoranga ka nui ake i te waehere tono ka tukuna e ratou

Ko nga anga-micro e tahae ana i te nuinga o enei utu. Na te iti o nga tangohanga, he iti ake nga mea hei wawahi, he iti ake nga whakawhirinakitanga hei tirotiro, me te iti ake o nga paita hei tuku ki te tirotiro. Mo te pakihi e hiahia ana kia tere, kia pono te aroaro o te paetukutuku me te kore he roopu hangahanga o mua, kei te pai ake te pangarau ki te ngawari.

He aha te Hapori Kaiwhakawhanake i Wehea ai

Ko te korero a Hacker News mo nga anga SPA iti e hanga pono ana e rua nga puni whakahē. I tetahi taha ko nga kaiwhakawhanake kua maha nga tau i roto i nga turanga waehere nui i hangaia i runga i te React, i te Angular ranei, a kua kite i te ahua o te whakahiatotanga o te anga i roto i te waa. Kua maataki ratou i nga ahuatanga ngawari ka uru ki roto i nga mahi maha-ra na te mea ko nga tikanga o te anga me pa atu ki te whirihoranga pouara, te pereti whakahaere a te kawanatanga, me nga taputapu whakamatautau e tawai ana i nga anga o roto. Mo enei kaiwhakawhanake, he anga raina 1,000 e tohu ana i te whakaoranga — he hokinga ki te mohio ki nga rarangi waehere katoa e rere ana i roto i ta raatau tono.

Kei tera taha ko te hunga whaiwhakaaro e kii ana kei te noho tonu nga anga na te mea ka hiahia nga tono o te ao ki nga mea e whakaratohia ana e ratou: nga taputapu urunga, te whakaurunga o te ao, te wehewehe waehere, te whakaputa taha tūmau, me te paipa utu a nga kaiwhakawhanake kua mohio ki te taputapu. He rawe pea te anga moroiti mo te kaupapa o te wiki, ka tohe ratou, engari ka ngana ki te whakauru i te roopu o te rima ki te turanga rarangi 1,000-raina kua tohua kaore he whakautu Stack Overflow me te kore tuhinga whaimana.

He tohu whaimana nga taha e rua, a ko te mea pono he horopaki te whiringa. Ko te kaiwhakarewa takitahi e hanga ana i te MVP he rereke nga hiahia o te roopu hinonga e pupuri ana i te tono mo te rima tau te pakeke. Ko te morearea kei te tono otinga hinonga ki nga raru whakaoho, taputapu whakaoho ranei ki nga wero hinonga.

He aha nga Pakihi o Naianei e hiahiatia ana mai i a raatau hangarau hangarau

Ko te taupatupatu anga i te mutunga he takawaenga mo tetahi patai nui ake: me pehea e tohatoha ai nga pakihi i o raatau rauemi hangarau iti? Ia haora ka pau te kaiwhakawhanake ki te whirihora i te paipa hangahanga, ki te heke ranei ki tetahi anga anga hou he haora kaore i pau nga waahanga hanga e mahi ana ki nga kaihoko. Mo te maha o nga pakihi — ina koa nga mahi iti me te rahi-waenganui — ko te whiriwhiri hangarau tino pai ko tetahi e whakaiti ana i te aputa i waenga i te "He whakaaro taku" me "kei te whakamahi nga kaihoko."

Ko te whakatau hangarau pai ka taea e te pakihi e tipu haere ana ko te whiriwhiri taputapu hei whakaoti rapanga o enei ra me te kore e hanga i nga taumahatanga tiaki apopo. Ahakoa te tikanga he anga 1,000-raina, he papaaa whakahaere katoa ranei, he rite tonu te whainga: whakapau i to wa ki nga mea e motuhake ai to pakihi, kaua ki nga hanganga e hiahiatia ana e ia pakihi.

Ka toro atu tenei maataapono ki tua atu i nga anga o mua. Ka hanga ano e nga pakihi nga punaha o muri - te whakamotuhēhēnga kaiwhakamahi, te tukatuka utu, te CRM, te nama, te whakarite - na te mea kei te tonohia e ta raatau waahanga hangarau. Ko nga papanga penei i Mewayz kei te noho tika ki te whakakore i tenei mahi tukurua, e tuku ana i nga waahanga 207 kua oti te hanga i mua i te hanga i nga mea katoa mai i te CRM me te utu utu ki nga punaha tono me nga tātaritanga. Ko te kaupapa ano e akiaki ana i nga kaiwhakawhanake ki nga anga-moroiti - kia nui ake te mahi me te iti ake, ka whakakore i te tino uaua - ka akiaki nga pakihi ki nga papaaho whakakotahi hei whakakapi i te maha o nga ohaurunga SaaS ki te punaha kotahi.

Te Anga Awhiowhio: Te Kimi I To Wahi Reka

Engari ki te whakaaro i te kowhiringa anga hei taarua — anga-mega, anga moroiti ranei — ka awhina i te whakaaro mo te awhiowhio. I tetahi pito, kei a koe te vanilla JavaScript me te kore tangohanga. I tetahi atu, kei a koe nga anga-meta-katoa penei i a Next.js, Nuxt ranei e whakahaere ana i te ararere, te whakaputa, te tiki raraunga, me te tuku. Ko te nuinga o nga kaupapa kei waenganui.

Mo te pae hokohoko e anga ana ki nga kaihoko me etahi huānga tauwhitiwhiti, he anga-moroiti, ara Alpine.js-style hohohenga roraina pea te tino pai. Mo te papatohu SaaS matatini me nga raraunga tuuturu, whakaaetanga i runga i nga mahi, me te tautoko tuimotu, he anga pakeke me te puunaha rauwiringa kaiao nui te utu. Ko te hapa kei te taunoa ki te whiringa tino taumaha na te mea ko te mea rongonui rawa atu, ka taunoa ranei ki te mea mama na te mea ko te tino pai o te hinengaro.

He maamaa te whakamatautau mahi: whakarārangihia ia ahuatanga e hiahiatia ana e to tono i roto i nga marama 12 e whai ake nei. Mena kei te kapi te 90% o aua hiahia e tetahi anga-moroiti, ka taea e koe te huri-a-ringa i te toenga 10% i roto i te wa iti ake i to whakapaunga ki te whirihora i tetahi anga nui ake, ka toa te anga-moroiti. Mēnā kei roto i tō rārangi āhuatanga te tāhuahua taha-tūmau, te whakamanatanga puka matatini, te whakahoahoa hākoritanga, me te tautoko urunga hohonu, ka utua e te angamahi nui ake.

Nga Akoranga mo nga Kaihanga Hangarau-kore me nga Kaihanga Pakihi

Mena kei te whakahaere pakihi koe, kei te tautohetohe to roopu hangarau i nga anga, koinei te mea nui. Tuatahi, patai mo te wa ki te whakaatu tuatahi - me pehea te tere o te kaiwhakawhanake hou o te roopu ki te tuku huringa whai kiko? Mena ko te whakautu ko nga ra o te tatūnga taiao me te ako anga, he tohu whakatupato tera ahakoa ko tehea anga i tohua. Tuarua, patai mo te ara whakamohoatanga. Ko nga anga e tuku ana i nga huringa pakaru ia 18 marama ka whakatau he taake huna karekau e puta ki te arotake tuatahi.

Tuatoru, me te mea nui, patai mehemea kei te hiahia koe i nga rorohiko hanga-rite mo te mahi e pa ana. He maha nga pakihi e whakangao ana i nga marama o te wa kaiwhakawhanake ki te hanga taputapu o roto - papatohu, punaha CRM, rerenga nama, atanga whakahōtaka - he mea kua orohia, kua mau tonu. Ko te tüäpapa pënei i a Mewayz, neke atu i te 138,000 nga kaiwhakamahi me nga waahanga o te katoa o nga mahi pakihi, ka taea te whakakore i te hiahia mo te whanaketanga ritenga mo nga mahi pakihi paerewa. Ma tenei e tuku to roopu whanaketanga ki te aro ki nga ahuatanga tino ahurei o to hua — nga ahuatanga kaore e taea e nga taputapu o waho te whakarato.

1. Tirotirohia to waehere ritenga: Tautuhia he aha nga taputapu o roto e rua nga taumahinga e waatea ana i roto i nga papaaho o mua
2. Tātaihia te utu pono: Kaua e mahi i te whanaketanga tuatahi engari ko te tiaki tonu, te whakamarumaru, me nga tono ahuatanga
3. Aromātaihia te whakatōpūtanga: Tatauhia ō ohaurunga SaaS o nāianei ka whakatairitehia te utu ki tētahi tūāpapa whakauru
4. Tiakihia o rerekee: Rahuihia nga rauemi whanaketanga ritenga mo nga ahuatanga e tino wehe ai to pakihi

Ko te heke mai no nga whiringa whakaaro nui

Ko te harikoa mo te angamahi SPA 1,000-raina ehara i te mea mo te anga ake. E pa ana ki te tipu haere i roto i te whanaketanga rorohiko ki te hiahia — te kowhiri taputapu na te mea e pai ana ki te raru, ehara i te mea kei te rangatira ratou i te maakete. Kua pau te rauwiringa kaiao JavaScript i nga tau tekau kua hipa i roto i te whakataetae patu mo nga ahuatanga me nga tangohanga. Ko te nekehanga-a-te-whakaaro, e tohuhia ana e nga anga-moroiti, te HTML i tukuna e te tūmau, me nga API taketake-tuara, he whakatikanga ki te whakaaro pono.

Mo nga pakihi, he tino pai tenei nekehanga. Ko te tikanga he maha atu nga whiringa, he iti ake nga utu whakawhiti, me te ahurea kaiwhakawhanake e whakanui ake ana i te ngawari me te tere i runga i te whakaotinga o te kaupapa. Ahakoa he kaipakihi takitahi koe e whiriwhiri ana i waenga i te WordPress me te pae hanga ritenga, he CTO ranei e arotake ana mena ka hanga, ka hoko mai ranei i to taputapu o roto o muri mai, ka pa ano te kaupapa: ko te hangarau tino pai ko te mea ka ngaro ki te papamuri, ka taea e koe te aro ki te mahi ki o kaihoko.

Ko te angamahi 1,000-raina e whakamaumahara ana ki a tatou karekau he uaua ki te mana. Ko nga pakihi tino whai hua — me nga taputapu tino whai hua — ko nga pakihi e mahi tika ana, kaore he mea ke atu.

Patai Auau

He aha te anga moroiti penei i a Vertex.js?

Ko te anga moroiti he whare pukapuka JavaScript iti i hangaia hei hapai i nga mahi tono matua me te kore te nuinga o nga otinga nui ake. Ka tutuki tenei e Vertex.js ma te whakarato i nga mahinga SPA tino nui—penei i te ararere me te whakahaere kawanatanga—i roto i te 1,000 rarangi waehere. He rereke tenei ki nga anga e hiahia ana ki nga whare pukapuka motuhake, taumaha ake mo te ararere, te ahua ranei, ka whakaiti i te uauatanga me te pupuhi mo nga kaupapa iti.

He aha nga kaiwhakawhanake e neke ana ki nga taputapu ngawari ake?

He maha nga kaiwhakawhanake kua whakaaro kua tino uaua rawa atu nga taputapu JavaScript hou mo te kaupapa toharite. Ka taea e nga anga taumaha te whakauru i nga waa hanga puhoi, he pihi ako teitei, me nga ahuatanga kore. Ko nga taputapu ngawari ake penei i a Vertex.js e tuku ana i te wheako whanaketanga tere ake, maamaa ake ma te aro ki nga raru nui me whakaoti e te angamahi, kia pai ake te whakarite ki nga whakaritenga o te kaupapa.

He pai a Vertex.js mo te tono nui, uaua?

Ko te Vertex.js te mea matua i hangaia mo nga kaupapa iti ko te ngawari me te iti o runga te mea matua. Mo nga tono tino nui, uaua me te maha o nga waahanga tauwhitiwhiti, he pai ake pea te anga-ahuatanga me te puunaha rauwiringa kaiao. Mo nga kapa e hiahia ana ki te maha o nga waahanga kua oti te hanga, ka taea e tetahi ratonga penei i a Mewayz (e tuku ana i nga waahanga 207 mo te $19/mo) te whakarato i te UI e tika ana me nga waahanga mahi kaore he anga moroiti.

Me hiahia tonu ahau ki tetahi taputapu hanga me Vertex.js?

Ahakoa he mama noa a Vertex.js ake, ka whakamahi tonu koe i tetahi taputapu hanga mo te whakawhanaketanga ngaio. Ko nga taputapu penei i a Vite, Parcel ranei e tika ana hei paihere i to waehere, hei hapai i nga whakawhirinakitanga npm, me te whakahohe i nga ahuatanga JavaScript hou. Heoi, he maamaa ake te mekameka taputapu katoa i era e hiahiatia ana e nga anga nui ake, na te mea ka karo koe i nga whare pukapuka whakahaere-a-iwi me te ararere.