Hōʻike HN: Vertex.js - He 1kloc SPA Framework

Ka Piʻi ʻana o nā Micro-Frameworks: No ke aha e hōʻole ai nā mea hoʻomohala i nā mea hana JavaScript bloated

Ua hoʻopuka hou kekahi mea hoʻomohala i ka papa hana noiʻi ʻaoʻao hoʻokahi i kūkulu ʻia ma kahi o 1,000 mau laina code i Hacker News, a ʻo ka pane ʻana he uila. ʻO ka papahana - kahi hoʻolālā SPA liʻiliʻi - ua hoʻomaka hou i kahi hoʻopaʻapaʻa i hoʻopaʻapaʻa ʻia i loko o ke kaiāulu hoʻomohala pūnaewele no nā makahiki: ua paʻakikī paha kā mākou mau mea hana no nā pilikia a lākou e hoʻoponopono ai? I ka manawa o ka waihona waihona nui o React, kona router, kona papa hoʻokele mokuʻāina, a me kāna mau mea hana kūkulu i hui pū ʻia i nā haneli haneli o nā laina code, kahi hoʻolālā e hāʻawi ana i ka routing, reactivity, a me ka hoʻololi ʻana i nā mea i loko o nā laina 1,000 wale nō e koi i kahi nīnau hōʻoluʻolu. No nā ʻoihana e kūkulu ana i nā noi e kū pono ana i nā mea kūʻai aku, he hopena maoli ka pane i kēlā nīnau - i nā manawa hoʻouka, ka hoʻonui ʻana o ka mea hoʻomohala, a me nā koina mālama lōʻihi.

He aha ka 1,000-Line Framework i hōʻoia maoli ʻia

ʻAʻole mea hou ka manaʻo o kahi micro-framework. ʻO Backbone.js ma kahi o 1,800 laina o ka helu kumu kumu i hōʻike ʻia i kona hoʻomaka ʻana i ka makahiki 2010. Hoʻouna ʻia ʻo Mithril.js ma lalo o 10KB gzipped. ʻO ka mea e ʻike nui ʻia ai kēlā me kēia komo hou i kēia māhele ʻaʻole ka helu laina ponoʻī akā ʻo ka mea e hōʻike ai e pili ana i ke kūlana o kēia manawa o nā API polokalamu. Hoʻouna ʻia nā mākaʻikaʻi o kēia wā me ke kākoʻo maoli no nā huaʻōlelo kikoʻī, ka History API, Proxy-based reactivity, nā mea maʻamau, a me ka hoʻouka ʻana i nā module. He ʻumi makahiki i hala aku nei, pono nā frameworks i mau tausani laina e hoʻokaʻawale i nā ʻokoʻa ma waena o Internet Explorer a me Chrome. I kēia lā, hiki i ka mea hoʻomohala akamai ke kūkulu i kahi hoʻolālā SPA holoʻokoʻa ma ke ʻano he papa hoʻoheheʻe lahilahi ma luna o nā mea kahiko o ka paepae.

He mea nui kēia no ka mea, e ho'ololi i ke kama'ilio 'ana mai "ke kumu hea e koho ai?" i "makemake mākou i kahi papa hana?" No nā papahana liʻiliʻi a me ka liʻiliʻi - kahi ʻaoʻao pae me nā ʻāpana ikaika, kahi dashboard i loko, kahi puka mea kūʻai aku - ke piʻi nei ka pane: ʻaʻole paha, a i ʻole he mea kaumaha. He mea hōʻoia ka 1,000-line framework i ke oʻo ʻana o ka paepae a hiki i ka emi ʻana o ka hana o ka framework.

ʻOiaʻiʻo, loaʻa i nā frameworks e like me React a me Vue ko lākou paona ma nā noi nui me nā kumulāʻau mokuʻāina paʻakikī, nā pono hoʻololi ʻaoʻao server, a me nā hui o 20+ mea hoʻomohala e pōmaikaʻi ana i nā hui paʻa. ʻO ka ʻike koʻikoʻi, ʻo ka mea paahana kūpono e pili pono ana i ka laulā o ka pilikia.

Ke kumu kūʻai maoli o JavaScript Bloat

Ua hōʻike mau ʻia ka noiʻi ponoʻī a Google e hiki i kēlā me kēia 100 milliseconds o ka manawa hoʻouka i hoʻohui ʻia ke hōʻemi i ka helu hoʻololi a hiki i ka 7%. Hoʻouna ʻia ka ʻaoʻao pūnaewele puni honua ma luna o 500KB o JavaScript - kahi helu i aneane ʻekolu paʻi mai ka makahiki 2015. No nā ʻoihana, ʻaʻole kēia he metric hana abstract. Unuhi pololei ia i ka loaʻa kālā nalowale, ka nui o ka bounce rate, a me ka ʻoi aku ka maikaʻi o ke kūlana ʻenekini huli.

Hoʻohui ʻia ka pilikia ma nā pūnaewele paʻa lima. Hiki i ka mea hoʻohana ma ka polokalamu Android waena waena e hoʻopili ana ma luna o 3G ke kali i 5-8 kekona no ka ʻaoʻao kaumaha JavaScript e lilo i mea pāʻani, ʻoiai ma hope o ka hana ʻana o ka HTML mua. He hoʻopaʻi nui kēia no nā ʻoihana e lawelawe ana i nā mea kūʻai aku ma nā mākeke e kū mai ana, kahi i maʻamau ka mākaʻikaʻi paʻa lima a ʻokoʻa ka ʻoihana pūnaewele.

• Parse time: Nui nā puʻupuʻu JavaScript e lōʻihi i ka hoʻopaʻa ʻana a me ka hōʻuluʻulu ʻana, ʻoiai ma mua o ka hoʻokō ʻia ʻana o ka laina hoʻokahi o ka helu palapala noi
• Ke kaomi hoʻomanaʻo: Hoʻopau nā ʻōhua paʻakikī i ka hoʻomanaʻo i hiki ke hoʻohana ʻia e ka palapala noi ponoʻī
• Hoʻohou i ka luhi: ʻO nā hoʻomaikaʻi ʻana i ka papa hana nui (Angular 1 a i ka 2, Vue 2 a i 3, E hoʻohuli i nā ʻāpana papa i nā makau) e hoʻoikaika i ka hoʻoikaika ʻana i ka neʻe ʻana i kēlā me kēia 2-3 makahiki
• Nā kaulahao hilinaʻi: Aia i loko o ka waihona node_modules o ka papahana React maʻamau he 800-1,200 pūʻolo, ʻo kēlā me kēia me ka pilikia palekana a i ʻole ka hoʻololi ʻana
• Kūkulu i ka paʻakikī: Webpack, Babel, PostCSS, a me kā lākou mau faila hoʻonohonoho i ʻoi aku ma mua o ka palapala noi a lākou e lawelawe nei

Micro-frameworks sidestep ka hapa nui o kēia mau koina. Me ka liʻiliʻi o nā abstractions, liʻiliʻi nā mea e wāwahi ai, liʻiliʻi nā mea hilinaʻi e hoʻopaʻa ʻia, a liʻiliʻi nā byte e hoʻouna i ka polokalamu kele pūnaewele. No kahi ʻoihana e pono ana i kahi pūnaewele wikiwiki a hilinaʻi me ka ʻole o ka hui ʻoihana hoʻolaʻa mua, ʻoi aku ka makemake o ka makemakika i ka maʻalahi.

No ke aha i Māhele ʻia ai ka Community Developer

ʻO ke kūkākūkā Hacker News e pili ana i nā ʻōhua SPA liʻiliʻi e hoʻopuka pono i ʻelua kahua hoʻomoana kūʻē. Ma kekahi ʻaoʻao, aia nā mea hoʻomohala i hoʻohana i nā makahiki i nā codebases nui i kūkulu ʻia ma React a i ʻole Angular a ʻike mua i ke ʻano o ka paʻakikī o ka framework i ka manawa. Ua nānā lākou i nā hiʻohiʻona maʻalahi i nā hana he nui i nā lā he nui no ka mea e koi ana nā kuʻina o ka framework i ka hoʻopili ʻana i ka hoʻonohonoho router, ka paila hoʻokele mokuʻāina, a me nā mea hoʻāʻo e hoʻomāʻewaʻewa ana i ka framework internals. No kēia mau mea hoʻomohala, he 1,000-line framework e hōʻike ana i ka hoʻokuʻu ʻia - he hoʻi i ka hoʻomaopopo ʻana i kēlā me kēia laina code e holo ana i kā lākou noi.

Ma ka ʻaoʻao ʻē aʻe he poʻe pragmatist e kuhikuhi ana aia nā frameworks no ka mea e pono ai nā noi honua maoli i ka mea a lākou e hāʻawi ai: nā pono e hiki ai ke komo, internationalization, code splitting, server-side rendering, a me kahi pipeline hoʻolimalima o nā mea hoʻomohala i ʻike mua i ka hāmeʻa. He mea leʻaleʻa paha kahi micro-framework no kahi papahana hopena pule, hoʻopaʻapaʻa lākou, akā e hoʻāʻo e kau i kahi hui o ʻelima a i kahi codebase 1,000-line bespoke me ka pane ʻole Stack Overflow a ʻaʻohe palapala mana.

He mau helu kūpono ko nā ʻaoʻao ʻelua, a ʻo ka mea ʻoiaʻiʻo, ʻo ke koho ʻana i ka pōʻaiapili. ʻO kahi mea hoʻokumu hoʻokahi e kūkulu ana i kahi MVP he ʻokoʻa nā pono ma mua o kahi hui ʻoihana e mālama ana i kahi noi ʻelima makahiki. Aia ka pilikia ma ka hoʻohana ʻana i nā hoʻonā ʻoihana i nā pilikia hoʻomaka, a i ʻole nā mea hana hoʻomaka i nā pilikia ʻoihana.

He aha nā ʻoihana hou e pono ai mai kā lākou Tech Stack

ʻO ka hoʻopaʻapaʻa hoʻopaʻapaʻa ka hope loa he mea koho no ka nīnau nui aʻe: pehea e hoʻokaʻawale ai nā ʻoihana i kā lākou kumu waiwai ʻenehana liʻiliʻi? ʻO kēlā me kēia hola e hoʻohana ai ka mea hoʻomohala i ka hoʻonohonoho ʻana i kahi pipeline kūkulu ʻia a i ʻole ka neʻe ʻana i kahi mana hoʻolālā hou he hola ʻaʻole i hoʻohana ʻia i ke kūkulu hale e lawelawe ana i nā mea kūʻai. No nā ʻoihana he nui - ʻoi aku ka nui o nā hana liʻiliʻi a waena - ʻo ka koho ʻenehana kūpono kahi mea e hōʻemi i ka ʻokoʻa ma waena o "He manaʻo koʻu" a "ke hoʻohana nei nā mea kūʻai aku."

ʻO ka hoʻoholo ʻenehana maikaʻi loa e hiki ai i kahi ʻoihana ulu ke koho ʻana i nā mea hana e hoʻoponopono ai i nā pilikia o kēia lā me ka ʻole o ka hoʻokumu ʻana i ke kaumaha mālama ʻana i ka lā ʻapōpō. ʻO ia ka manaʻo he 1,000-line framework a i ʻole he kahua hoʻokele piha, ʻo ka pahuhopu ka mea like: e hoʻolilo i kou manawa ma ka mea e kū hoʻokahi ai kāu ʻoihana, ʻaʻole ma nā ʻoihana e pono ai kēlā me kēia ʻoihana.

Kō aku kēia kuʻuna ma mua o nā ʻano hana mua. Hoʻokumu hou nā ʻoihana i nā ʻōnaehana backend like - ka hōʻoia ʻana o ka mea hoʻohana, ka hoʻoili ʻana i ka uku, CRM, invoicing, ka hoʻonohonoho ʻana - no ka mea e koi ana kā lākou ʻenehana koho. Loaʻa nā paepae e like me Mewayz e hoʻopau i kēia hana hou, hāʻawi ʻia 207 mau modula i kūkulu mua ʻia e uhi ana i nā mea āpau mai CRM a me ka uku uku a hiki i nā ʻōnaehana hoʻopaʻa inoa a me nā ʻikepili. ʻO ka manaʻo hoʻokahi e alakaʻi i nā mea hoʻomohala i nā micro-frameworks - e hana hou aku me ka liʻiliʻi, e hoʻopau i ka paʻakikī pono ʻole - e alakaʻi i nā ʻoihana i nā paepae i hoʻohui ʻia e hoʻololi i nā haneli o nā kau inoa SaaS me kahi ʻōnaehana hoʻokahi.

Ke Kūlana Kūlana: Ke ʻimi nei i kou wahi ʻono

Ma mua o ka mālama ʻana i ke koho framework ma ke ʻano he binary — mega-framework a i ʻole micro-framework — kōkua ia i ka noʻonoʻo ʻana i kahi kikoʻī. I kekahi hopena, loaʻa iā ʻoe ka JavaScript vanilla me nā abstractions ʻole. Ma ka ʻaoʻao ʻē aʻe, loaʻa iā ʻoe nā meta-frameworks piha e like me Next.js a i ʻole Nuxt e mālama ana i ka routing, rendering, kiʻi ʻikepili, a me ka waiho ʻana. Aia ka hapa nui o nā papahana ma waena.

No kahi kahua kūʻai kūʻai e kū pono ana i nā mea kūʻai aku me kekahi mau mea pili, ʻo kahi micro-framework a i ʻole Alpine.js-style inline reactivity ka mea kūpono loa. No kahi dashboard SaaS paʻakikī me ka ʻikepili manawa maoli, nā ʻae i hoʻokumu ʻia i ka hana, a me ke kākoʻo offline, ʻoi aku ka maikaʻi o kahi ʻōhua oʻo me kahi kaiaola waiwai. Ke kuhi nei ka hewa i ka koho kaumaha loa no ka mea ʻo ia ka mea kaulana loa, a i ʻole ke kuhi hewa ʻana i ka mea māmā loa no ka mea ʻoi aku ka ʻoluʻolu o ka naʻauao.

Maikaʻi ka hoʻāʻo ʻana: e papa inoa i kēlā me kēia hiʻohiʻona e pono ai kāu palapala noi i nā mahina he 12 e hiki mai ana. Inā uhi ʻia kahi micro-framework i ka 90% o ia mau pono a hiki iā ʻoe ke ʻōwili lima i ke koena 10% i ka manawa liʻiliʻi ma mua o kou hoʻolilo ʻana i kahi hoʻonohonoho ʻoi aku ka nui, lanakila ka micro-framework. Inā loaʻa i kāu papa inoa hiʻohiʻona ka hāʻawi ʻana i ka ʻaoʻao kikowaena, ka hōʻoia ʻana i ke ʻano paʻakikī, ka hoʻonohonoho ʻana i ka animation, a me ke kākoʻo ʻike hohonu, ʻoi aku ka uku o ka framework nui nona iho.

Nā Haʻawina no nā mea hoʻokumu ʻenehana ʻole a me nā mea hana ʻoihana

Inā ʻoe e holo ana i kahi ʻoihana a ke hoʻopaʻapaʻa nei kāu hui ʻenehana i nā frameworks, eia ka mea nui. ʻO ka mea mua, e nīnau e pili ana i ka manawa e hōʻike mua ai - pehea ka wikiwiki e hiki ai i kahi mea hoʻomohala hou ma ka hui ke hoʻouna i kahi loli kūpono? Inā pili ka pane i nā lā o ka hoʻonohonoho kaiapuni a me ke aʻo ʻana i ka framework, he hōʻailona hōʻailona kēlā me ka nānā ʻole i ke ʻano o ke ʻano i koho ʻia. ʻO ka lua, e nīnau e pili ana i ke ala hoʻonui. Ke kau nei nā papa hana e hoʻokuʻu ana i nā loli i kēlā me kēia 18 mahina i ka ʻauhau huna i ʻike pinepine ʻole ʻia i ka loiloi mua.

ʻO ke kolu, a ʻo ka mea nui loa, e nīnau inā pono ʻoe i nā lako polokalamu i kūkulu ʻia no ka hana i nīnau ʻia. Nui nā ʻoihana e hoʻolilo i mau mahina o ka manawa hoʻomohala e kūkulu i nā mea hana i loko - dashboards, CRM system, invoicing flows, scheduling interfaces - i kēia manawa e like me nā huahana i mālama ʻia. ʻO kahi paepae e like me Mewayz, e lawelawe ana ma luna o nā mea hoʻohana 138,000 me nā modula e hoʻopuni ana i ka kiko piha o nā hana ʻoihana, hiki ke hoʻopau i ka pono o ka hoʻomohala maʻamau no nā hana ʻoihana maʻamau. Hoʻokuʻu kēia i kāu hui hoʻomohala e kālele i nā mea kūʻokoʻa maoli o kāu huahana - nā hiʻohiʻona ʻaʻole hiki ke hāʻawi ʻia i waho.

1. E hoʻopaʻa i kāu code maʻamau: E ʻike i nā mea hana paʻa i loko o nā hana ʻelua i loaʻa i nā paepae e kū nei
2. E helu i ke kumu kūʻai ʻoiaʻiʻo: ʻAʻole i ka hoʻomohala mua wale nō akā i ka mālama mau ʻana, nā pale palekana, a me nā noi hiʻohiʻona
3. E noʻonoʻo i ka hoʻohui ʻana: E helu i kāu mau kau inoa SaaS o kēia manawa a e hoʻohālikelike i ke kumukūʻai me kahi kahua hoʻohui ʻia
4. Paʻa i kāu mau mea ʻokoʻa: Mālama i nā kumuwaiwai hoʻomohala maʻamau no nā hiʻohiʻona e hoʻokaʻawale maoli i kāu ʻoihana

No nā Koho Manaʻo ka wā e hiki mai ana

ʻO ka hauʻoli e pili ana i kahi hoʻolālā SPA laina 1,000 ʻaʻole pili maoli i ka framework ponoʻī. E pili ana ia i ka neʻe ʻana o ka hoʻomohala polokalamu i ka manaʻo - koho i nā mea hana no ka mea kūpono lākou i ka pilikia, ʻaʻole no ka mea ʻoi lākou i ka mākeke. Ua hoʻohana ka kaiaola JavaScript i nā makahiki he ʻumi i hala i ka heihei lima o nā hiʻohiʻona a me nā abstractions. ʻO ka hoʻoneʻe kūʻē, i hōʻike ʻia e nā micro-frameworks, HTML i hāʻawi ʻia e ka server, a me nā API ʻōiwi maoli, he hoʻoponopono i ka pragmatism.

No nā ʻoihana, maikaʻi loa kēia hoʻololi. ʻO ia ke ʻano o nā koho ʻē aʻe, nā kumukūʻai hoʻololi haʻahaʻa, a me kahi moʻomeheu hoʻomohala e hoʻonui i ka waiwai o ka maʻalahi a me ka wikiwiki ma mua o ka hoʻopiha ʻana. Inā he ʻoihana kūʻokoʻa ʻoe e koho ana ma waena o WordPress a me kahi kahua i kūkulu ʻia, a i ʻole he CTO e loiloi ana inā e kūkulu a kūʻai paha i kāu mea hana kūloko hou aʻe, pili ka loina like: ʻo ka ʻenehana maikaʻi loa ka mea e nalowale i ke kua, e ʻae iā ʻoe e nānā i ka lawelawe ʻana i kāu mea kūʻai aku.

Ke hoʻomanaʻo nei ka hoʻolālā 1,000-laina iā mākou ʻaʻole pono ka mana i ka paʻakikī. ʻO nā ʻoihana maikaʻi loa - a me nā mea hana pono loa - ʻo ia ka mea e hana pololei i ka mea e pono ai a ʻaʻohe mea ʻē aʻe.

Nīnau pinepine

He aha ka micro-framework e like me Vertex.js?

ʻO kahi micro-framework kahi waihona JavaScript liʻiliʻi i hoʻolālā ʻia e lawelawe i nā hana noi nui me ka ʻole o ka nui o nā hāʻina nui. Hoʻokō ʻo Vertex.js i kēia ma ka hāʻawi ʻana i nā hana SPA koʻikoʻi—e like me ke ala ala a me ka hoʻokele mokuʻāina—ma kahi o 1,000 laina o ke code. He ʻokoʻa kēia me nā frameworks e koi ana i nā hale waihona puke ʻokoʻa a ʻoi aku ka kaumaha no ka hoʻokele ʻana a i ʻole ka mokuʻāina, e hōʻemi ana i ka paʻakikī holoʻokoʻa a me ka bloat no nā papahana liʻiliʻi.

No ke aha e neʻe nei nā mea hoʻomohala i nā mea hana maʻalahi?

Ke manaʻo nei nā mea hoʻomohala he nui ka paʻakikī o nā mea hana JavaScript hou no ka papahana maʻamau. Hiki i nā papa hana koʻikoʻi ke hoʻolauna i nā manawa kūkulu lohi, kahi pihi aʻo kiʻekiʻe, a me nā hiʻohiʻona pono ʻole. Hāʻawi nā mea hana maʻalahi e like me Vertex.js i kahi ʻike hoʻomohala ʻoi aku ka wikiwiki a me ka hoʻomaopopo ʻana ma o ka nānā ʻana i nā pilikia koʻikoʻi e pono ai ke hoʻoponopono ʻia, e hoʻolikelike me nā koi maoli o ka papahana.

He kūpono anei ʻo Vertex.js no kahi noi nui a paʻakikī?

Hoʻolālā mua ʻia ʻo Vertex.js no nā papahana liʻiliʻi kahi mea nui o ka maʻalahi a me ke poʻo haʻahaʻa. No nā noi nui loa a paʻakikī me nā ʻāpana pili he nui, ʻoi aku ka maikaʻi o kahi ʻōnaehana waiwai nui me kahi kaiaola nui. No nā hui e makemake ana i nā modula nui i kūkulu mua ʻia, hiki i kahi lawelawe e like me Mewayz (hāʻawi 207 modules no $19/mo) hiki ke hāʻawi i ka UI pono a me nā mea hana i nele i kahi micro-framework.

Pono au i mea hana kūkulu me Vertex.js?

ʻOiai he māmā ʻo Vertex.js ponoʻī, e hoʻohana mau ana ʻoe i kahi mea hana kūkulu no ka hoʻomohala ʻoihana. Pono nā mea hana e like me Vite a i ʻole Parcel e hoʻopili i kāu code, mālama i nā mea hilinaʻi npm, a hiki i nā hiʻohiʻona JavaScript hou. Eia nō naʻe, ʻoi aku ka maʻalahi o ke kaulahao holoʻokoʻa ma mua o nā mea i koi ʻia e nā frameworks nui aʻe, ʻoiai ʻoe e pale aku i ka paʻakikī o ka hoʻokele mokuʻāina a me nā hale waihona puke.