HN көрсету: Vertex.js – 1kloc SPA Framework

Шағын фреймворктардың өсуі: Неліктен әзірлеушілер JavaScript құралдарының кебуінен бас тартады

Жақында әзірлеуші Hacker News-ке шамамен 1000 код жолынан тұратын бір беттік қолданба құрылымын жариялады және жауап электрлік болды. Жоба — минималистік SPA шеңбері — веб-әзірлеу қауымдастығында жылдар бойы қызып келе жатқан пікірталас тудырды: біздің құралдарымыз олар шешетін мәселелер үшін тым күрделі болды ма? React негізгі кітапханасы, оның маршрутизаторы, оның күйін басқару қабаты және оның құрастыру құралдарының салмағы жүздеген мың код жолын құрайтын болса, маршруттауды, реактивтілікті және компонентті көрсетуді небәрі 1000 жолда қамтамасыз ететін құрылым ыңғайсыз сұрақ тудырады. Тұтынушыға арналған қолданбаларды құрастыратын компаниялар үшін бұл сұрақтың жауабы жүктеп алу уақытында, әзірлеушінің өнімділігінде және ұзақ мерзімді техникалық қызмет көрсету шығындарында нақты салдарларға ие болады.

1000 жолдық құрылым шын мәнінде нені дәлелдейді

Шағын жақтау идеясы жаңа емес. Backbone.js 2010 жылы дебют жасағанда шамамен 1800 жолдық аннотацияланған бастапқы код болды. Mithril.js 10 Кбайт gzip форматында жеткізіледі. Бұл санаттағы әрбір жаңа жазбаны назар аударарлық нәрсе - жолдар санының өзі емес, ол шолғыш API интерфейстерінің ағымдағы күйі туралы ашатын нәрсе. Қазіргі браузерлер үлгі литералдарына, History API интерфейсіне, проксиге негізделген реактивтілікке, реттелетін элементтерге және модульді жүктеуге арналған жергілікті қолдаумен жеткізіледі. Он жыл бұрын Internet Explorer мен Chrome арасындағы айырмашылықтарды қалыпқа келтіру үшін фреймворктерге мыңдаған жол қажет болды. Бүгінде білікті әзірлеуші платформа примитивтерінің үстіне жұқа оркестрлік қабат ретінде толық функционалды SPA құрылымын құра алады.

Бұл маңызды, себебі ол әңгімені "қай жақтауды таңдауымыз керек?" «Бізге негізі қажет пе?» Шағын және орта жобалар үшін — динамикалық бөлімдері бар бастапқы бет, ішкі бақылау тақтасы, тұтынушы порталы — жауап барған сайын: мүмкін емес немесе, ең болмағанда, ауыр емес. 1000 жолдық фреймворк платформаның жұмысы қысқаратын деңгейге дейін жетілгенінің дәлелі.

Әрине, React және Vue сияқты фреймворктер күрделі күй ағаштары, серверлік көрсету қажеттіліктері және қатаң конвенциялардан пайда алатын 20+ әзірлеушілер тобы бар ауқымды қолданбаларда әлі де өз салмағын алады. Негізгі түсінік - дұрыс құрал толығымен мәселенің ауқымына байланысты.

JavaScript Bloat-тың нақты құны

Google-дың жеке зерттеулері әр 100 миллисекунд қосылған жүктеу уақытының конверсия жылдамдығын 7%-ға дейін төмендететінін дәйекті түрде көрсетті. Медиандық веб-бет қазір 500 КБ-тан астам JavaScript жібереді — бұл көрсеткіш 2015 жылдан бері үш есе дерлік өсті. Кәсіпорындар үшін бұл абстрактілі өнімділік көрсеткіші емес. Ол тікелей жоғалған табысқа, жоғары шығу жылдамдығына және іздеу жүйесінің нашар рейтингіне айналады.

Мәселе мобильді желілерде күрделене түсті. 3G арқылы қосылатын орта диапазондағы Android құрылғысының пайдаланушысы бастапқы HTML көрсетілгеннен кейін де JavaScript-ті қамтитын бет интерактивті болу үшін 5-8 секунд күтуі мүмкін. Бұл әсіресе ұялы телефонды бірінші шолу қалыпты жағдай болып табылатын және желі инфрақұрылымы күрт өзгеретін дамып келе жатқан нарықтардағы тұтынушыларға қызмет көрсететін компанияларды жазалайды.

• Талдау уақыты: Үлкен JavaScript бумаларын талдау және компиляциялау, тіпті қолданба кодының бір жолы орындалмай тұрып, ұзағырақ уақыт алады
• Жад қысымы: Күрделі фреймворк ішкі құрылғылары қолданбаның өзі пайдалана алатын жадты тұтынады
• Жаңарту шаршауы: Негізгі құрылымдық жаңартулар (1-ден 2-ге дейін бұрыштық, Vue 2-ден 3-ке дейін, класс құрамдастары ілмектерге реакция) әр 2-3 жыл сайын қымбат тұратын көші-қон әрекеттерін мәжбүрлейді
• Тәуелділік тізбегі: Әдеттегі React жобасының node_modules қалтасында 800-1200 бума бар, олардың әрқайсысында ықтимал қауіпсіздік осалдығы немесе үзіліс өзгерісі бар
• Құраудың күрделілігі: Webpack, Babel, PostCSS және олардың конфигурация файлдары көбінесе олар қызмет ететін қолданба кодынан асып түседі

Шағын жақтаулар бұл шығындардың көпшілігін айналып өтеді. Абстракциялар аз болса, бұзатын нәрселер аз, тексеруге тәуелділіктер аз және браузерге жіберілетін байт аз болады. Арнайы интерфейстік инфрақұрылым тобы жоқ жылдам, сенімді веб-қатысуды қажет ететін бизнес үшін математика қарапайымдылықты көбірек ұнатады.

Әзірлеушілер қауымдастығы неге бөлінген

Кішкентай SPA құрылымдары төңірегінде Hacker News талқылауы екі қарама-қарсы лагерьді сенімді түрде жасайды. Бір жағында көптеген жылдар бойы React немесе Angular негізінде жасалған үлкен кодтық базаларда жұмыс істеген және уақыт өте келе құрылымдық күрделіліктің қалай қосылатынын өз көзімен көрген әзірлеушілер бар. Олар қарапайым мүмкіндіктер шарын көп күндік тапсырмаларға айналдыруды көрді, себебі рамка конвенциялары маршрутизатор конфигурациясын, күйді басқару тақтасын және құрылымның ішкі бөліктерін мазақтайтын сынақ белдеулерін қажет етеді. Бұл әзірлеушілер үшін 1000 жолдық құрылым босатуды білдіреді — олардың қолданбасында жұмыс істейтін кодтың әрбір жолын түсінуге оралу.

Екінші жақта фреймворктардың бар екенін атап көрсететін прагматистер бар, өйткені нақты әлем қолданбалары сайып келгенде олар қамтамасыз ететін нәрселерді қажет етеді: қол жетімділік утилиталары, интернационализация, кодты бөлу, серверлік көрсету және құралды бұрыннан білетін әзірлеушілерді жалдау. Микро фреймворк демалыс күндеріндегі жоба үшін тамаша болуы мүмкін, дейді олар, бірақ Stack Overflow жауаптары мен ресми құжаттамасыз бес адамнан тұратын 1000 жолдық кодтық базаға қосылып көріңіз.

Екі жақтың да дұрыс нүктелері бар, ал таңдау контекстік болып табылады. MVP құрушы жеке құрылтайшының бес жылдық қосымшаны қолдайтын кәсіпорын командасына қарағанда түбегейлі басқа қажеттіліктері бар. Қауіпті кәсіпорын шешімдерін іске қосу мәселелеріне немесе іске қосу құралдарын кәсіпорын мәселелеріне қолдануда.

Қазіргі заманғы бизнеске олардың технологиялық стекінен шын мәнінде не қажет

Негізгі пікірталас, сайып келгенде, үлкен сұраққа прокси болып табылады: бизнес шектеулі техникалық ресурстарды қалай бөлуі керек? Әзірлеушінің құрастыру құбырын конфигурациялауға немесе жаңа фреймворк нұсқасына көшіруге жұмсайтын әрбір сағаты тұтынушыларға қызмет көрсететін мүмкіндіктерді құруға жұмсалмаған сағат болып табылады. Көптеген бизнес үшін, әсіресе шағын және орта операциялар үшін, «менде идея бар» және «тұтынушылар оны пайдалануда» арасындағы алшақтықты азайтатын тамаша технология таңдауы болып табылады.

Өсіп келе жатқан бизнес жасай алатын ең жақсы технологиялық шешім - ертеңгі техникалық қызмет көрсету ауыртпалығын тудырмай, бүгінгі мәселелерді шешетін құралдарды таңдау. Бұл 1000 жолдық құрылымды немесе толық басқарылатын платформаны білдірсе де, мақсат бір: уақытыңызды әрбір бизнеске қажет инфрақұрылымға емес, бизнесіңізді бірегей ететін нәрсеге жұмсаңыз.

Бұл принцип алдыңғы жақтау шеңберлерінен тыс. Кәсіпорындар бірдей серверлік жүйелерді - пайдаланушының аутентификациясы, төлемдерді өңдеу, CRM, шот-фактуралар, жоспарлау - жүйелі түрде қайта жасайды, өйткені олардың таңдаған технологиялық стегі мұны талап етеді. Mewayz сияқты платформалар дәл осы қайталанатын жұмысты жою үшін бар, олар CRM мен жалақыдан бастап брондау жүйелері мен аналитикаға дейін барлығын қамтитын алдын ала жасалған 207 модуль ұсынады. Әзірлеушілерді микро фреймворктарға қарай итермелейтін философия — аз жұмсап көп нәрсені істеу, қажетсіз күрделілікті жою — бизнесті ондаған SaaS жазылымдарын бір жүйемен алмастыратын біріктірілген платформаларға бағыттайды.

Жақтау спектрі: тәтті нүктені табу

Фреймворк таңдауын екілік - мега-жақтау немесе микро-жақтау ретінде қарастырудың орнына, бұл спектр тұрғысынан ойлауға көмектеседі. Бір жағынан сізде абстракциялары жоқ ванильді JavaScript бар. Екінші жағынан, сізде маршруттауды, көрсетуді, деректерді алуды және орналастыруды өңдейтін Next.js немесе Nuxt сияқты толық стек мета-фремворктері бар. Көптеген жобалар ортадағы бір жерге жатады.

Бірнеше интерактивті элементтері бар тұтынушыға бағытталған маркетингтік сайт үшін микро фреймворк немесе тіпті Alpine.js стиліндегі кірістірілген реактивтілік өте қолайлы болуы мүмкін. Нақты уақыттағы деректері, рөлге негізделген рұқсаттары және офлайн қолдауы бар күрделі SaaS бақылау тақтасы үшін бай экожүйесі бар жетілген құрылым қосымша шығындарға тұрарлық. Қате әдепкі бойынша ең ауыр опцияны таңдауда, себебі ол ең танымал немесе әдепкі бойынша ең жеңіл опция, себебі ол ең интеллектуалды қанағаттандырады.

Тәжірибелік сынақ өте қарапайым: келесі 12 айда қолданбаңызға қажет барлық мүмкіндіктерді тізімдеңіз. Егер микро жақтау осы қажеттіліктердің 90%-ын қамтыса және қалған 10%-ын үлкенірек құрылымды конфигурациялауға жұмсаған уақытыңыздан аз уақытта қолмен айналдыра алсаңыз, микро жақтау жеңеді. Мүмкіндіктер тізімінде серверлік рендеринг, күрделі пішінді тексеру, анимацияны ұйымдастыру және терең қол жетімділік қолдауы болса, үлкенірек жақтау өзін өтеуі мүмкін.

Техникалық емес құрылтайшылар мен бизнес-операторларға арналған сабақтар

Егер сіз бизнес жүргізіп жатсаңыз және сіздің техникалық командаңыз шеңберлер туралы пікірталас жүргізіп жатса, міне, маңызды нәрсе. Алдымен, бірінші функцияның уақыты туралы сұраңыз - командадағы жаңа әзірлеуші ​​маңызды өзгерістерді қаншалықты жылдам жеткізе алады? Жауап ортаны орнату және құрылымды үйрену күндерін қамтыса, бұл қай жақтау таңдалғанына қарамастан ескерту белгісі. Екіншіден, жаңарту жолы туралы сұраңыз. 18 ай сайын үзіліссіз өзгерістерді шығаратын құрылымдар бастапқы бағалауда сирек кездесетін жасырын салықты жүктейді.

Үшіншіден, ең бастысы, қарастырылып отырған функция үшін арнайы құрастырылған бағдарламалық құрал қажет пе деген сұрақ туындайды. Көптеген кәсіпорындар жылтыратылған, қызмет көрсетілетін өнімдер ретінде бұрыннан бар ішкі құралдарды - бақылау тақталары, CRM жүйелері, шот-фактуралар ағындары, жоспарлау интерфейстері - әзірлеушілердің бірнеше ай уақытын жұмсайды. Бизнес операцияларының толық спектрін қамтитын модульдері бар 138 000-нан астам пайдаланушыға қызмет көрсететін Mewayz сияқты платформа стандартты бизнес функциялары үшін теңшелетін әзірлеу қажеттілігін толығымен жоя алады. Бұл әзірлеу тобыңызды өніміңіздің шынымен бірегей аспектілеріне — ешбір дайын құрал қамтамасыз ете алмайтын мүмкіндіктерге назар аударудан босатады.

1. Теңшелетін кодты тексеру: Қолданыстағы платформаларда қолжетімді функцияларды қайталайтын ішкі құралдарды анықтаңыз
2. Шынайы құнды есептеңіз: Бастапқы әзірлеуге ғана емес, ағымдағы техникалық қызмет көрсетуге, қауіпсіздік патчтарына және мүмкіндік сұрауларына да әсер етеді
3. Біріктіруді бағалаңыз: Ағымдағы SaaS жазылымдарыңызды санап, құнын біріктірілген платформамен салыстырыңыз
4. Өзіңіздің дифференциаторларыңызды қорғаңыз: Бизнесіңізді шынымен ерекшелендіретін мүмкіндіктер үшін арнаулы әзірлеу ресурстарын сақтаңыз

Болашақ әдейі таңдауларға тиесілі

1000 жолдық SPA шеңберінің айналасындағы толқу шын мәнінде рамканың өзіне қатысты емес. Бұл бағдарламалық жасақтаманы әзірлеудегі мақсаттылыққа қарай өсіп келе жатқан қозғалыс туралы - құралдарды нарықта үстемдік еткендіктен емес, мәселеге сәйкес келетіндіктен таңдау. JavaScript экожүйесі соңғы онжылдықты мүмкіндіктер мен абстракциялардың қарулану жарысында өткізді. Микро фреймворктармен, серверде көрсетілетін HTML және платформалық API интерфейстерімен ұсынылған қарсы қозғалыс прагматизмге бағытталған түзету болып табылады.

Кәсіпорындар үшін бұл ауысым бір мағыналы оң. Бұл көбірек опцияларды, төмен коммутация шығындарын және теориялық толықтықтан гөрі қарапайымдылық пен жылдамдықты көбірек бағалайтын әзірлеуші ​​мәдениетін білдіреді. Сіз WordPress пен арнайы құрастырылған сайт арасында таңдау жасайтын жеке кәсіпкер болсаңыз да немесе келесі ішкі құралыңызды құру немесе сатып алуды бағалайтын CTO болсаңыз да, дәл осындай принцип қолданылады: ең жақсы технология - бұл фондық режимде жоғалып, тұтынушыларға қызмет көрсетуге назар аударуға мүмкіндік беретін технология.

1000 жолдық құрылым қуат күрделілікті қажет етпейтінін еске салады. Ең тиімді бизнес және ең тиімді құралдар — дәл қажет нәрсені жасайтын және басқа ештеңе істемейтін компаниялар.

Жиі қойылатын сұрақтар

Vertex.js сияқты микро фреймворк дегеніміз не?

Шағын фреймворк - бұл үлкенірек шешімдердің көпшілігінсіз негізгі қолданба тапсырмаларын өңдеуге арналған минималистік JavaScript кітапханасы. Vertex.js бұған 1000 код жолында маршруттау және күйді басқару сияқты маңызды SPA функционалдығын қамтамасыз ету арқылы қол жеткізеді. Бұл бағыттау немесе күй үшін бөлек, ауыррақ кітапханаларды қажет ететін, кіші жобалар үшін жалпы күрделілік пен толқуды азайтатын фреймерлермен қайшы келеді.

Неліктен әзірлеушілер қарапайым құралдарға көшуде?

Көптеген әзірлеушілер қазіргі заманғы JavaScript құралдары орташа жоба үшін тым күрделі болды деп санайды. Ауыр құрылымдар баяу құрастыру уақытын, тік оқу қисығын және қажет емес мүмкіндіктерді енгізуі мүмкін. Vertex.js сияқты қарапайым құралдар жобаның нақты талаптарына жақсырақ сәйкестендіріп, құрылым шешуі қажет маңызды мәселелерге назар аудару арқылы жылдамырақ, түсінікті әзірлеу тәжірибесін ұсынады.

Vertex.js үлкен, күрделі қолданба үшін жарамды ма?

Vertex.js негізінен қарапайымдылық пен төмен шығындар маңызды болып табылатын кішігірім жобаларға арналған. Көптеген интерактивті құрамдастары бар өте үлкен, күрделі қолданбалар үшін кең экожүйесі бар мүмкіндіктерге бай құрылым неғұрлым орынды болуы мүмкін. Алдын ала құрастырылған ауқымды модульдерді қажет ететін командалар үшін Mewayz сияқты қызмет (айына $19 құнына 207 модуль ұсынады) қажетті UI және микро жақтауда жетіспейтін функционалдық құрамдастарды қамтамасыз ете алады.

Маған әлі де Vertex.js көмегімен құрастыру құралы қажет пе?

Vertex.js өзі жеңіл болғанымен, кәсіби даму үшін құрастыру құралын әлі де пайдаланасыз. Vite немесе Parcel сияқты құралдар кодты жинақтау, npm тәуелділіктерін өңдеу және заманауи JavaScript мүмкіндіктерін қосу үшін қажет. Дегенмен, жалпы құралдар тізбегі үлкенірек фреймворктар талап ететіннен қарапайым болып қалады, өйткені күрделі күйді басқару және бағыттау кітапханаларынан аулақ боласыз.