Faaali le HN: Vertex.js - A 1kloc SPA Framework

O le Si'itia o Micro-Frameworks: Aisea ua teena ai e le au atiaʻe le faʻaogaina o meafaigaluega JavaScript

Na fa'apipi'i talu ai nei e se tagata fa'atupuina se fa'ava'a e tasi-itulau o lo'o fausia i totonu pe tusa ma le 1,000 laina fa'ailoga i le Hacker News, ma o le tali atu o le eletise. O le poloketi - o se faʻavae SPA laʻititi - na faʻatupuina ai se felafolafoaiga ua faʻafefeteina i le atinaʻeina o upega tafaʻilagi mo le tele o tausaga: pe ua faigata tele a tatou meafaigaluega mo faʻafitauli latou te foia? Pe a fuaina le faletusi autu a React, lona router, lona tulaga pulega setete, ma ana meafaigaluega faufale faʻatasi i le faitau selau o afe o laina o code, o se faʻavae e tuʻuina atu ai le taʻavale, gaioiga, ma le tuʻuina atu o vaega i na o le 1,000 laina faʻamalosia se fesili le mautonu. Mo pisinisi o lo'o fausia ni talosaga e fa'asaga i tagata fa'atau, o le tali i lena fesili e iai a'afiaga moni - i taimi o uta, fa'atupuina o mea e gaosia, ma tau mo le tausiga umi.

O le a le 1,000-Line Framework e Fa'amaonia Moni

O le manatu ole micro-framework e le fou. O le Backbone.js e tusa ma le 1,800 laina o fa'ailoga puna fa'amatalaga ina ua fa'aalia i le 2010. Mithril.js va'a i lalo ole 10KB gzipped. O le a le mea e fa'ailoaina ai fa'ailoga fou ta'itasi i lenei vaega e le o le laina e fa'ailoa mai e uiga i le tulaga o lo'o i ai nei o su'esu'ega API. O tagata su'esu'e fa'aonaponei o lo'o va'aia ma le lagolago fa'ale-aganu'u mo fa'ata'ita'iga fa'ata'ita'i, le History API, Proxy-based reactivity, aganu'u elemene, ma le utaina o module. I le sefulu tausaga talu ai, e manaʻomia e faʻavaʻa le faitau afe o laina e faʻavasega ai eseesega i le va o Internet Explorer ma Chrome. I aso nei, e mafai e se tagata atia'e fa'apitoa ona fausia se auivi SPA e fa'atino atoatoa e fai ma fa'aputu manifinifi i luga o fa'atama'i fa'avae.

E taua lenei mea ona e suia ai le talanoaga mai le "o le fea faʻavae e tatau ona tatou filifilia?" ia "tatou te manaomia se auivi uma?" Mo galuega laiti-i-medium - o se itulau tulaueleele ma vaega faʻamalosi, se dashboard i totonu, se faʻailoga tagata faʻatau - o le tali e faʻatuputeleina: atonu e leai, pe le o se mea mamafa. O le 1,000-laina auivi o se faamaoniga lea ua matua le tulaga i le tulaga ua faaitiitia ai le galuega a le auivi.

O le mea moni, o auivi e pei o React ma Vue o loʻo maua pea lo latou mamafa i talosaga tetele faʻatasi ai ma laʻau lavelave a le setete, manaʻoga tuʻuina atu i le server, ma 'au a le 20+ atiaʻe o loʻo faʻamanuiaina mai faʻasalalauga faigata. O le fa'amatalaga autu o le meafaigaluega sa'o e fa'alagolago atoa i le lautele o le fa'afitauli.

O le Tau Moni o le Javascript Bloat

O su'esu'ega a Google lava ia na fa'aalia i taimi uma o 100 milliseconds uma o le taimi fa'aopoopo fa'aopoopo e mafai ona fa'aititia ai le fua faatatau o le liua i le 7%. O le itulau autu o le upega tafa'ilagi o lo'o fa'atau atu i luga ole 500KB o le JavaScript - o se fuainumera ua toeititi faatoluina talu mai le 2015. Mo pisinisi, e le'o se fua fa'atatau o fa'atinoga. E fa'aliliu sa'o i tupe maua leiloa, maualuga fa'afiti fua, ma sili atu fa'avasegaina o masini su'esu'e.

O le fa'afitauli ua fa'aopoopoina i luga o feso'otaiga fe'avea'i. O se tagata fa'aoga ile vaeluagalemu ole masini Android e feso'ota'i i luga ole 3G e ono fa'atali mo le 5-8 sekone mo se itulau mamafa-JavaScript e fa'afeso'ota'i, tusa lava pe ua uma ona fa'aalia le HTML muamua. Ose fa'asalaga fa'apitoa lea mo pisinisi o lo'o tautuaina tagata fa'atau i maketi o lo'o tula'i mai, lea o le su'esu'ega fa'amuamua i telefoni feavea'i o le masani ma e matua'i ese'ese atina'e feso'ota'iga.

• Taimi fa'avasega: E umi se taimi e fa'avasega ma tu'ufa'atasi ai fusi JavaScript lapopo'a, e o'o lava a'o le'i fa'atinoina se laina e tasi o le fa'ailoga tusi talosaga
• O'omiga o le manatua: O fa'ava'a lavelave i totonu e fa'aaogaina manatua e mafai ona fa'aoga e le talosaga lava ia
• Fa'afou le vaivai: Fa'aleleia atili fa'ava'a tetele (Angular 1 i le 2, Vue 2 i le 3, Tali vaega vaega i matau) fa'amalosia taumafaiga tau femalaga'iga ta'i 2-3 tausaga
• Pi'i fa'alagolago: O se faila masani a le React project's node_modules o lo'o iai le 800-1,200 afifi, o ia mea ta'itasi e ono a'afia ai le saogalemu po'o le gau o suiga
• Fausia le lavelave: Webpack, Babel, PostCSS, ma a latou faila fetuutuunai e masani ona sili atu i le numera o talosaga latou te tautuaina

Micro-frameworks e fa'asaga i le tele o nei tau. Faatasi ai ma le itiiti ifo o mea faʻapipiʻi, e itiiti mea e malepe, itiiti faʻalagolago e suʻe suʻega, ma itiiti paita e lafo i le browser. Mo se pisinisi o lo'o mana'omia se 'upega tafa'ilagi vave ma fa'atuatuaina e aunoa ma se 'au fa'apitoa fa'apitoa pito i luma, o le numera e fa'atuputeleina le fa'afaigofieina.

Aisea ua Vaevaeina ai le Community Developer

O le talanoaga a le Hacker News e uiga i tama'i auivi a le SPA e fa'atuatuaina e fa'atupuina ai ni tolauapiga fa'afeagai se lua. I le tasi itu o loʻo i ai le au atinaʻe ua faʻaaluina le tele o tausaga i codebases tetele na fausia i luga o le React poʻo le Angular ma ua vaʻaia muamua pe faʻafefea ona faʻapipiʻi faʻalavelave faʻavae i le taimi. Sa latou matamata i foliga faigofie o paluni i galuega e tele aso ona o le auivi e mana'omia ai le pa'i atu i le faatulagaga o le alalaupapa, fa'aauala o le pulega a le setete, ma mea fa'ata'ita'i e tauemu i totonu. Mo nei tagata atiaʻe, o le 1,000-laina auivi o loʻo faʻatusalia le saʻolotoga - o se toe foʻi i le malamalama i laina taʻitasi uma o loʻo faʻaogaina i la latou talosaga.

I le isi itu o lo'o fa'ailoa mai e fa'apea o lo'o i ai fa'ava'a ona e mana'omia e fa'aoga moni a le lalolagi mea latou te tu'uina atu: fa'aoga avanoa, fa'ava-o-malo, vaeluaga o tulafono, fa'auiga-itu-aumau, ma le fa'afaigaluegaina o tagata atia'e ua uma ona iloa le meafaigaluega. Atonu e manaia se auivi laiti mo se poloketi o le faaiuga o le vaiaso, latou te finau mai, ae taumafai i luga o se au e toalima i le 1,000-laina codebase faʻapitoa e leai ni tali Stack Overflow ma leai ni faʻamaumauga aloaia.

O itu uma e lua e iai manatu aoga, ma o le mea moni o le filifiliga e faʻatatau. O se tagata fa'avae to'atasi o lo'o fausia se MVP e matua'i 'ese'ese mana'oga nai lo se 'au atina'e o lo'o tausia se talosaga e lima tausaga. O le tulaga lamatia o loʻo taoto i le faʻaogaina o fofo o atinaʻe i faʻafitauli amata, poʻo meafaigaluega amata i luitau tau atinaʻe.

O Mea e Mana'omia Moni e Pisinisi Fa'aonaponei Mai La latou Fa'aputuga Fa'atekinolosi

O le felafolafoaiga fa'avae o le mea mulimuli lava e fai ma sui mo se fesili tele: fa'afefea ona fa'asoa e pisinisi a latou punaoa fa'atekinisi? O itula uma e fa'aalu ai e le tagata atia'e le fa'atulagaina o se paipa faufale po'o le femalaga'i i se fa'ava'a fou o se itula e le fa'aalu i le faufaleina o foliga e tautua ai tagata fa'atau. Mo le tele o pisinisi - ae maise galuega laiti ma le vaeluagalemu - o le filifiliga sili ona lelei tekinolosi o se tasi lea e faʻaitiitia ai le va i le va o le "E i ai soʻu manatu" ma le "faʻaaogaina e tagata faʻatau."

O le fa'ai'uga fa'atekonolosi sili e mafai ona faia e se pisinisi fa'atupula'ia o le filifilia lea o meafaigaluega e fo'ia ai fa'afitauli o aso nei e aunoa ma le fa'atupuina o le avega o le tausiga a taeao. Pe o lona uiga o se auivi 1,000-laina po o se tulaga pulea atoatoa, o le sini e tutusa: faʻaalu lou taimi i mea e tulaga ese ai lau pisinisi, ae le o atinaʻe e manaʻomia e pisinisi uma.

O lenei mataupu faavae e fa'alautele atu i tua atu o auivi pito i luma. Pisinisi e masani ona toe fausia ia lava faiga pito i tua - faʻamaonia e tagata faʻaoga, faʻagasologa o totogi, CRM, pili, faʻatulagaina - ona e manaʻomia e latou tech tech stack. O fa'avae e pei o Mewayz o lo'o i ai tonu e fa'aumatia ai lenei galuega faifaipea, e ofoina atu 207 modules na mua'i fausia e aofia ai mea uma mai le CRM ma totogi i faiga fa'amau ma au'ili'ili. O le filosofia lava lea e una'ia ai le au atia'e aga'i i micro-frameworks - fai le tele ma le fa'aitiitia, fa'ate'aina le lavelave fa'aletonu - e fa'aoso pisinisi agai i fa'avae tu'ufa'atasi e sui ai le tele o saofaga SaaS i se faiga e tasi.

O le Fusi o Alaleo: Su'eina o Lou Nofoaga Manaia

Nai lo le fa'avasegaina o le filifiliga fa'avae e pei o le binary — mega-framework po'o micro-framework - e fesoasoani le mafaufau i tulaga o alaleo. I le tasi pito, o loʻo ia te oe vanilla JavaScript ma leai ni faʻamatalaga. I le isi, o loʻo ia te oe faʻapipiʻi atoa meta-frameworks e pei o Next.js poʻo Nuxt e faʻatautaia le taʻavale, faʻaliliuina, feʻaveaʻi faʻamatalaga, ma le faʻapipiʻiina. O le tele o poloketi e iai i se mea i le ogatotonu.

Mo se 'upega tafa'ilagi fa'atauga o lo'o feagai ma tagata fa'atau ma ni nai elemene feso'ota'i, o se micro-framework po'o Alpine.js-style inline reactivity atonu e fetaui lelei. Mo se lavelave SaaS dashboard ma faʻamatalaga moni, faʻatagaga faʻavae, ma le tuʻufaʻatasia lagolago, o se faʻavaa matua ma se faʻaogaina o meaola faanatura e aoga tele i luga. O le mea sese o le fa'aletonu i le filifiliga sili ona mamafa ona e sili ona lauiloa, po'o le fa'aletonu i le sili ona mama ona e sili ona fa'amalieina le mafaufau.

O le su'ega fa'atino e sa'o: lisi mea uma e mana'omia e lau talosaga i le isi 12 masina. Afai o se micro-framework e aofia ai le 90% o na mana'oga ma e mafai ona e ta'avale le 10% totoe i le taimi itiiti nai lo le taimi e te fa'aalu e fa'atulaga ai se auivi tele, e malo le micro-framework. Afai o lau lisi fa'aaliga e aofia ai le fa'aliliuina o le itu-server, fa'amaoniaina o fomu lavelave, fa'asologa o mea fa'afiafia, ma le fesoasoani loloto e mafai ona maua, e ono totogia e le auivi tele.

A'oa'oga mo Fa'atonu Fa'ainisinia ma Fa'alapotopotoga Fa'apisinisi

Afai o lo'o e fa'atautaia se pisinisi ma o lo'o felafolafoa'i lau 'au fa'atekinisi fa'avae, o le mea tonu lea e taua. Muamua, fesili e uiga i le taimi e faʻaalia muamua ai - o le a le vave e mafai ai e se tagata fou atiaʻe i luga o le 'au ona lafo se suiga anoa? Afai o le tali e aofia ai aso o le fa'atulagaina o le si'osi'omaga ma a'oa'oga auivi, ose fa'ailoga lapata'i tusa lava po'o le a le fa'avae na filifilia. Lona lua, fesili e uiga i le auala faʻaleleia. O ta'iala e fa'amatu'u mai ai suiga i le ta'i 18 masina e fa'atupu ai se lafoga natia e seasea aliali mai i le ulua'i iloiloga.

Tolu, ma le mea e sili ona taua, fesili pe e te mana'omia le polokalame faufale fa'apitoa mo le galuega o lo'o fesiligia. O le tele o pisinisi e fa'aalu masina o le taimi o le atina'e e fausia ai meafaigaluega i totonu - dashboards, CRM system, invoicing flows, fa'asologa o feso'ota'iga - o lo'o i ai e pei o mea fa'apolopolo, tausia lelei. O se tulaga e pei o Mewayz, lea e sili atu i le 138,000 tagata faʻaoga faʻatasi ai ma modules o loʻo vaʻaia le fusi o alaleo atoa o gaioiga faʻapisinisi, e mafai ona faʻaumatia le manaʻoga mo le atinaʻeina o aganuʻu atoa mo galuega masani pisinisi. Ole mea lea e fa'asa'oloto ai lau 'au atina'e e taula'i atu i itu uiga fa'apitoa o lau oloa - o foliga e leai se mea faigaluega e le mafai ona maua.

1. Su'e lau fa'ailoga masani: Fa'ailoa po'o fea meafaigaluega fa'alotoifale e fa'aluaina galuega fa'atino o lo'o maua i tulaga o iai nei
2. Fa'atatau le tau moni: Fa'atatau e le na'o le amataga o le atina'e ae o le fa'aauau pea o le fa'aleleia, fa'apipi'i puipuiga, ma talosaga fa'apitoa
3. Su'esu'e fa'atasi: Faitau au saofaga SaaS o lo'o iai nei ma fa'atusatusa le tau i se fa'avae tu'ufa'atasi
4. Puipui au fa'aeseesega: Fa'asao puna'oa fa'ale-aganu'u mo fa'ailoga e tu'u'ese'ese moni ai lau pisinisi

O le Lumana'i e Aiā i Filifiliga Fa'amoemoeina

O le fiafia e uiga i le 1,000-laina SPA fa'avae e le'o fa'atatau i le auivi lava ia. E fa'atatau i le fa'atupula'ia o gaioiga i le atina'eina o polokalama fa'akomepiuta aga'i i le fa'amoemoe - filifilia o mea faigaluega ona e fetaui ma le fa'afitauli, ae le ona latou te pulea le maketi. O le fa'anatura o le Javascript ua fa'aalu le sefulu tausaga talu ai i se tu'uga fa'aauupega o foliga ma fa'amatalaga. O le fa'agaioiga fa'asagatau, o lo'o fa'atusalia e micro-frameworks, server-rendered HTML, ma platform-native APIs, o se fa'asa'oga aga'i i fa'ata'ita'iga.

Mo pisinisi, o lenei suiga e matua'i lelei. O lona uiga o le tele o filifiliga, fa'aitiitia le tau fesuia'i, ma se aganu'u a le atina'e e fa'atuputeleina le fa'atauaina o le faigofie ma le saoasaoa nai lo le atoatoaga fa'apitoa. Pe o oe o se tagata fai pisinisi toatasi e filifili i le va o le WordPress ma se saite fau aganu'u, po'o se CTO e iloilo pe fau pe fa'atau lau isi meafaigaluega fa'alotoifale, e fa'aoga lava le mataupu faavae lava lea e tasi: o le tekonolosi sili o le mea lea e mou atu i tua, e mafai ai ona e taula'i i le tautuaina o au tagata fa'atau.

O le auivi 1,000-laina e faamanatu mai ai ia i tatou e le manaʻomia e le mana le lavelave. O pisinisi sili ona aoga — ma mea faigaluega sili ona aoga — o pisinisi ia e faia tonu le mea e mana'omia ae leai se isi mea.

Fesili e Fai soo

O le a le micro-framework pei o Vertex.js?

O le micro-framework o se faletusi JavaScript laititi ua fuafuaina e fa'atautaia galuega autu o talosaga e aunoa ma le tele o fofo tetele. E ausia e Vertex.js lenei mea e ala i le tuʻuina atu o galuega faʻapitoa a le SPA-e pei o le taʻavale ma le pulega o le setete-i le tusa ma le 1,000 laina o code. E fa'atusatusa lea ma fa'ava'a e mana'omia ni faletusi tu'ueseese ma mamafa mo le ta'avale po'o le setete, e fa'aitiitia ai le lavelave atoa ma le fa'ateteleina mo galuega laiti.

Aisea ua aga'i atu ai le au atina'e i mea faigaluega faigofie?

E manatu le to'atele o tagata atia'e o mea faigaluega fa'aonaponei o le JavaScript ua ova le lavelave mo le galuega masani. O fa'avaa mamafa e mafai ona fa'ailoa mai ai le fa'agesegese o taimi fau, o le a'oa'oga tifato, ma mea e le mana'omia. O mea faigaluega faigofie e pei o Vertex.js e ofoina atu ai se poto masani tau atina'e e sili atu ona vave ma malamalama e ala i le taula'i atu i fa'afitauli taua e mana'omia e se auivi e fo'ia, ma fa'aoga lelei ma mana'oga moni o le poloketi.

E talafeagai le Vertex.js mo se fa'aoga lavelave tele?

Vertex.js o lo'o fa'atulaga muamua mo galuega laiti e fa'atauva'a ma fa'atauva'a. Mo fa'aoga lapopo'a ma lavelave ma le tele o vaega feso'ota'i, e sili atu ona talafeagai se auivi fa'a'oa fa'apitoa ma le tele o fa'anatura. Mo 'au o lo'o mana'omia ni fa'aoga tetele, o se auaunaga e pei o Mewayz (o lo'o ofoina atu le 207 modules mo le $19/mo) e mafai ona maua ai le UI e mana'omia ma vaega fa'atino e leai se micro-framework.

Ou te mana'omia pea se meafaigaluega fau ma Vertex.js?

E ui ina mama le Vertex.js lava ia, ae e te fa'aaogaina pea se meafaigaluega faufale mo le atina'e fa'apolofesa. Meafaigaluega e pei o le Vite poʻo le Parcel e manaʻomia e faʻapipiʻi ai lau code, faʻaogaina le npm faʻalagolago, ma mafai ai ona faʻaogaina le JavaScript faʻaonaponei. Ae ui i lea, o le aotelega o mea faigaluega e tumau pea le faigofie nai lo mea e manaʻomia e faʻavaʻa tetele, pe a e aloese mai le lavelave o le pulega a le setete ma le faʻaogaina o faletusi.