Паказаць HN: Vertex.js – 1kloc SPA Framework

Паўстанне мікрафреймворкаў: чаму распрацоўшчыкі адмаўляюцца ад раздутых інструментаў JavaScript

Распрацоўшчык нядаўна апублікаваў у Hacker News аднастаронкавы фрэймворк прыкладанняў, убудаваны прыкладна ў 1000 радкоў кода, і адказ быў бурным. Праект — мінімалісцкая структура SPA — аднавіў дыскусію, якая кіпела ў супольнасці вэб-распрацоўшчыкаў на працягу многіх гадоў: ці не сталі нашы інструменты занадта складанымі для праблем, якія яны вырашаюць? Калі асноўная бібліятэка React, яе маршрутызатар, узровень кіравання станам і інструменты для зборкі разам важаць сотні тысяч радкоў кода, структура, якая забяспечвае маршрутызацыю, рэактыўнасць і рэндэрынг кампанентаў усяго за 1000 радкоў, выклікае нязручнае пытанне. Для прадпрыемстваў, якія ствараюць прыкладанні для кліентаў, адказ на гэтае пытанне мае рэальныя наступствы — час загрузкі, прадукцыйнасць распрацоўшчыка і доўгатэрміновыя выдаткі на абслугоўванне.

Што насамрэч даказвае фрэймворк з 1000 радкоў

Ідэя мікрафреймворка не новая. Backbone.js уяўляў сабой прыкладна 1800 радкоў анатаванага зыходнага кода, калі ён дэбютаваў у 2010 годзе. Mithril.js пастаўляецца менш чым за 10 КБ у сціснутым выглядзе. Што робіць кожны новы запіс у гэтай катэгорыі вартым увагі, дык гэта не сама колькасць радкоў, а тое, што ён паказвае пра бягучы стан API браўзера. Сучасныя браўзеры пастаўляюцца з убудаванай падтрымкай літаралаў шаблонаў, History API, рэактыўнасці на аснове проксі, карыстацкіх элементаў і загрузкі модуляў. Дзесяць гадоў таму фрэймворкам патрабаваліся тысячы радкоў толькі для нармалізацыі адрозненняў паміж Internet Explorer і Chrome. Сёння кваліфікаваны распрацоўшчык можа пабудаваць цалкам функцыянальную структуру SPA ў выглядзе тонкага ўзроўню аркестрацыі паверх прымітываў платформы.

Гэта мае значэнне, таму што гэта адводзіць размову ад таго, "якую структуру нам выбраць?" да "ці патрэбны нам каркас наогул?" Для малых і сярэдніх праектаў - мэтавая старонка з дынамічнымі раздзеламі, унутраная прыборная панэль, партал для кліентаў - адказ усё часцей гучыць: магчыма, не ці, прынамсі, не цяжкі. Фреймворк з 1000 радкоў з'яўляецца доказам таго, што платформа дасягнула такой ступені, што праца фрэймворка скарачаецца.

Вядома, такія фрэймворкі, як React і Vue, па-ранейшаму зарабляюць сваю вагу ў буйнамаштабных праграмах са складанымі дрэвамі станаў, патрэбамі рэндэрынгу на баку сервера і групамі з больш чым 20 распрацоўшчыкаў, якія карыстаюцца жорсткімі канвенцыямі. Галоўнае разуменне таго, што правільны інструмент цалкам залежыць ад маштабу праблемы.

Рэальны кошт раздуцця JavaScript

Уласныя даследаванні Google паслядоўна паказваюць, што кожныя 100 мілісекунд дадатковага часу загрузкі могуць знізіць каэфіцыент канверсіі да 7%. Сярэдняя вэб-старонка цяпер пастаўляе больш за 500 КБ JavaScript — лічба, якая павялічылася амаль утрая з 2015 года. Для прадпрыемстваў гэта не абстрактны паказчык прадукцыйнасці. Гэта непасрэдна прыводзіць да страты даходу, павышэння паказчыкаў адмоваў і пагаршэння рэйтынгу ў пошукавых сістэмах.

Праблема ўскладняецца ў мабільных сетках. Карыстальнік прылады Android сярэдняга класа, які падключаецца праз сетку 3G, можа пачакаць 5-8 секунд, пакуль старонка, багатая на JavaScript, стане інтэрактыўнай, нават пасля таго, як першапачатковы HTML-код будзе адлюстраваны. Гэта асабліва жорстка для прадпрыемстваў, якія абслугоўваюць кліентаў на рынках, якія развіваюцца, дзе браўзэр з мабільных прылад з'яўляецца нормай, а сеткавая інфраструктура рэзка адрозніваецца.

• Час аналізу: вялікія пакеты JavaScript займаюць больш часу для аналізу і кампіляцыі, нават да выканання аднаго радка кода прыкладання
• Нагрузка на памяць: складаныя ўнутраныя элементы фрэймворка спажываюць памяць, якую можа выкарыстоўваць само прыкладанне
• Стома ад абнаўленняў: Асноўныя мадэрнізацыі фрэймворка (Angular 1 да 2, Vue 2 да 3, кампаненты класа React да хукаў) вымушаюць кожныя 2-3 гады рабіць дарагія намаганні па міграцыі
• Ланцужкі залежнасцей: тыповая папка node_modules праекта React змяшчае 800-1200 пакетаў, кожны з якіх з'яўляецца патэнцыйнай уразлівасцю бяспекі або парушаючым змяненнем
• Складанасць зборкі: Webpack, Babel, PostCSS і іх файлы канфігурацыі часта перавышаюць код прыкладання, які яны абслугоўваюць

Мікрафреймворкі абыходзяць большасць гэтых выдаткаў. З меншай колькасцю абстракцый ёсць менш рэчаў, якія трэба зламаць, менш залежнасцей для аўдыту і менш байтаў для адпраўкі ў браўзер. Для бізнесу, якому патрэбна хуткая і надзейная прысутнасць у Інтэрнэце без спецыяльнай каманды інтэрфейснай інфраструктуры, матэматыка ўсё больш аддае перавагу прастаце.

Чаму супольнасць распрацоўшчыкаў расколатая

Дыскусія ў Hacker News вакол малюсенькіх фрэймворкаў SPA надзейна стварае два супрацьлеглыя лагеры. З аднаго боку распрацоўшчыкі, якія правялі гады ў вялікіх кодавых базах, створаных на React або Angular, і на ўласныя вочы ўбачылі, як з цягам часу ўскладняецца структура. Яны назіралі, як простыя функцыі ператвараюцца ў шматдзённыя задачы, таму што канвенцыі фрэймворка патрабуюць наладжвання канфігурацыі маршрутызатара, шаблону кіравання станам і тэставых джгутоў, якія імітуюць унутраныя элементы фрэймворка. Для гэтых распрацоўшчыкаў фреймворк з 1000 радкоў уяўляе сабой вызваленне — вяртанне да разумення кожнага радка кода, які выконваецца ў іх дадатку.

З іншага боку - прагматыкі, якія адзначаюць, што фрэймворкі існуюць таму, што рэальныя прыкладанні ў канчатковым выніку маюць патрэбу ў тым, што яны забяспечваюць: утылітах даступнасці, інтэрнацыяналізацыі, падзеле кода, візуалізацыі на баку сервера і канвееры найму распрацоўшчыкаў, якія ўжо ведаюць гэты інструмент. Яны сцвярджаюць, што мікрафреймворк можа быць цудоўным для праекта выхаднога дня, але паспрабуйце падключыць каманду з пяці чалавек да створанай на заказ кодавай базы з 1000 радкоў без адказаў на Stack Overflow і без афіцыйнай дакументацыі.

Абодва бакі маюць слушныя пункты, і праўда ў тым, што выбар залежыць ад кантэксту. Індывідуальны заснавальнік, які стварае MVP, мае прынцыпова іншыя патрэбы, чым карпаратыўная каманда, якая падтрымлівае прыкладанне пяцігадовай даўніны. Небяспека заключаецца ў прымяненні карпаратыўных рашэнняў да праблем запуску або інструментаў запуску да задач прадпрыемства.

Што насамрэч патрэбна сучаснаму бізнесу ад іх тэхналагічнага набору

Дыскусія аб рамках у канчатковым рахунку з'яўляецца проксі для больш шырокага пытання: як кампаніі павінны размяркоўваць свае абмежаваныя тэхнічныя рэсурсы? Кожная гадзіна, якую распрацоўшчык марнуе на наладжванне канвеера зборкі або пераход на новую версію платформы, - гэта гадзіна, якую не выдаткоўвае на стварэнне функцый, якія абслугоўваюць кліентаў. Для многіх прадпрыемстваў, асабліва малых і сярэдніх, ідэальная тэхналогія - гэта тая, якая мінімізуе разрыў паміж "у мяне ёсць ідэя" і "кліенты яе выкарыстоўваюць".

Лепшае тэхналагічнае рашэнне, якое можа прыняць бізнес, які расце, - гэта выбраць інструменты, якія вырашаюць сённяшнія праблемы, не ствараючы заўтрашняй нагрузкі на абслугоўванне. Незалежна ад таго, што гэта азначае 1000-радковую структуру або цалкам кіраваную платформу, мэта тая ж: выдаткаваць час на тое, што робіць ваш бізнес унікальным, а не на інфраструктуру, якая патрэбна кожнаму бізнесу.

Гэты прынцып выходзіць за рамкі інтэрфейсу. Прадпрыемствы рэгулярна перабудоўваюць адны і тыя ж бэкэнд-сістэмы — аўтэнтыфікацыю карыстальнікаў, апрацоўку плацяжоў, CRM, выстаўленне рахункаў, планаванне — таму што гэтага патрабуе выбраны імі тэхналагічны стэк. Такія платформы, як Mewayz, існуюць менавіта для таго, каб ліквідаваць гэтую паўтаральную працу, прапаноўваючы 207 гатовых модуляў, якія ахопліваюць усё: ад CRM і разліку заработнай платы да сістэм браніравання і аналітыкі. Тая самая філасофія, якая падштурхоўвае распрацоўшчыкаў да мікрафреймворкаў — рабіце больш з меншымі сродкамі, ухіляйце непатрэбную складанасць — падштурхоўвае прадпрыемствы да кансалідаваных платформаў, якія замяняюць дзясяткі SaaS-падпісак адной сістэмай.

Спектр фрэймворк: знайсці свой густ

Замест таго, каб разглядаць выбар фрэймворка як бінарны — мега- або мікра-фреймворк — гэта дапамагае думаць у тэрмінах спектру. З аднаго боку, у вас ванільны JavaScript без абстракцый. З іншага боку, у вас ёсць поўны стэк метафреймворкаў, такіх як Next.js або Nuxt, якія апрацоўваюць маршрутызацыю, рэндэрынг, выбарку даных і разгортванне. Большасць праектаў знаходзяцца дзесьці пасярэдзіне.

Для арыентаванага на кліента маркетынгавага сайта з некалькімі інтэрактыўнымі элементамі ідэальна падыдзе мікрафреймворк або нават убудаваная рэактыўнасць у стылі Alpine.js. Для складанай прыборнай панэлі SaaS з дадзенымі ў рэжыме рэальнага часу, дазволамі на аснове роляў і падтрымкай у аўтаномным рэжыме спелая структура з багатай экасістэмай вартая выдаткаў. Памылка заключаецца ў выбары па змаўчанні самага цяжкага варыянту, таму што ён самы папулярны, або ў выбары самага лёгкага, таму што ён найбольш інтэлектуальна задавальняе.

Практычны тэст просты: пералічыце ўсе функцыі, якія спатрэбяцца вашаму дадатку ў наступныя 12 месяцаў. Калі мікрафреймворк задаволіць 90% гэтых патрэбаў, а астатнія 10% можна згарнуць уручную за меншы час, чым на канфігурацыю большага фрэймворка, выйграе мікрафреймворк. Калі ваш спіс функцый уключае візуалізацыю на баку сервера, праверку складанай формы, аркестроўку анімацыі і глыбокую падтрымку спецыяльных магчымасцей, вялікая структура, хутчэй за ўсё, акупіцца.

Урокі для нетэхнічных заснавальнікаў і бізнес-аператараў

Калі вы вядзеце бізнес і ваша тэхнічная група абмяркоўвае рамкі, вось што насамрэч важна. Па-першае, спытайцеся пра час да першай функцыі - як хутка новы распрацоўшчык у камандзе можа ўнесці значныя змены? Калі адказ прадугледжвае некалькі дзён наладжвання асяроддзя і вывучэння фрэймворка, гэта трывожны знак, незалежна ад таго, які фрэймворк быў абраны. Па-другое, спытайце пра шлях абнаўлення. Фрэймворкі, якія кожныя 18 месяцаў выпускаюць важныя змены, спаганяюць схаваны падатак, які рэдка з'яўляецца ў першапачатковай ацэнцы.

Па-трэцяе, і самае важнае, пытанне, ці патрэбна вам увогуле створанае на заказ праграмнае забеспячэнне для разгляданай функцыі. Многія прадпрыемствы ўкладваюць месяцы часу распрацоўшчыкаў у стварэнне ўнутраных інструментаў - прыборных панэляў, сістэм CRM, патокаў выстаўлення рахункаў, інтэрфейсаў планавання - якія ўжо існуюць у выглядзе адшліфаваных прадуктаў, якія абслугоўваюцца. Такая платформа, як Mewayz, якая абслугоўвае больш за 138 000 карыстальнікаў з дапамогай модуляў, якія ахопліваюць увесь спектр бізнес-аперацый, можа пазбавіць ад неабходнасці карыстальніцкай распрацоўкі цалкам для стандартных бізнес-функцый. Гэта дазваляе вашай камандзе распрацоўшчыкаў засяродзіцца на сапраўды ўнікальных аспектах вашага прадукту — функцыях, якія не можа забяспечыць ні адзін стандартны інструмент.

1. Праверце свой карыстальніцкі код: вызначце, якія ўнутраныя інструменты дублююць функцыі, даступныя на існуючых платформах
2. Разлічыце сапраўдны кошт: улічвайце не толькі першапачатковую распрацоўку, але і пастаяннае абслугоўванне, патчы бяспекі і запыты функцый
3. Ацаніце кансалідацыю: падлічыце свае бягучыя падпіскі SaaS і параўнайце кошт з інтэграванай платформай
4. Абараніце свае адрозненні: Зарэзервуйце спецыяльныя рэсурсы для распрацоўкі функцый, якія сапраўды вылучаюць ваш бізнес

Будучыня належыць наўмыснаму выбару

Ажыятаж вакол структуры SPA з 1000 радкоў на самай справе не звязаны з самой рамкай. Гаворка ідзе пра расце рух у распрацоўцы праграмнага забеспячэння ў бок наўмыснасці — выбар інструментаў таму, што яны адпавядаюць праблеме, а не таму, што яны дамінуюць на рынку. Апошняе дзесяцігоддзе экасістэма JavaScript правяла ў гонцы ўзбраенняў функцый і абстракцый. Супрацьдзеянне, прадстаўленае мікрафреймворкамі, візуалізаваным на серверах HTML і ўласнымі API-інтэрфейсамі платформы, з'яўляецца папраўкай у бок прагматызму.

Для бізнесу гэты зрух адназначна пазітыўны. Гэта азначае больш магчымасцей, меншыя выдаткі на пераключэнне і культуру распрацоўшчыкаў, якая ўсё больш цэніць прастату і хуткасць, чым тэарэтычную паўнату. Незалежна ад таго, ці з'яўляецеся вы індывідуальным прадпрымальнікам, які выбірае паміж WordPress і спецыяльна створаным сайтам, ці тэхнічным дырэктарам, які ацэньвае, ці варта стварыць ці набыць свой наступны ўнутраны інструмент, дзейнічае той жа прынцып: лепшая тэхналогія - гэта тая, якая сыходзіць на другі план, што дазваляе вам засяродзіцца на абслугоўванні кліентаў.

Фреймворк з 1000 радкоў нагадвае нам, што магутнасць не патрабуе складанасці. Самыя эфектыўныя прадпрыемствы — і найбольш эфектыўныя інструменты — гэта тыя, якія робяць менавіта тое, што трэба, і нічога больш.

Часта задаюць пытанні

Што такое мікрафреймворк, напрыклад Vertex.js?

Мікрафреймворк - гэта мінімалістычная бібліятэка JavaScript, прызначаная для выканання асноўных задач прыкладанняў без масы вялікіх рашэнняў. Vertex.js дасягае гэтага, забяспечваючы неабходныя функцыі SPA, такія як маршрутызацыя і кіраванне станам, прыкладна ў 1000 радках кода. Гэта адрозніваецца ад фрэймворкаў, якія патрабуюць асобных, больш цяжкіх бібліятэк для маршрутызацыі або станаў, памяншаючы агульную складанасць і раздзіманне для меншых праектаў.

Чаму распрацоўшчыкі пераходзяць да больш простых інструментаў?

Многія распрацоўшчыкі лічаць, што сучасныя інструменты JavaScript сталі занадта складанымі для звычайнага праекта. Цяжкія фрэймворкі могуць выклікаць павольны час зборкі, крутую крывую навучання і непатрэбныя функцыі. Больш простыя інструменты, такія як Vertex.js, забяспечваюць больш хуткі і зразумелы вопыт распрацоўкі, засяроджваючыся на асноўных праблемах, якія неабходна вырашыць фрэймворку, лепш адпавядаючы рэальным патрабаванням праекта.

Ці падыходзіць Vertex.js для вялікіх складаных прыкладанняў?

Vertex.js у першую чаргу прызначаны для невялікіх праектаў, дзе прастата і нізкія выдаткі з'яўляюцца ключавымі. Для вельмі вялікіх, складаных прыкладанняў з мноствам інтэрактыўных кампанентаў можа быць больш прыдатным фрэймворк з большай колькасцю функцый і шырокай экасістэмай. Для каманд, якім патрэбны шырокі набор гатовых модуляў, такі сэрвіс, як Mewayz (прапаноўвае 207 модуляў за 19 долараў у месяц), можа забяспечыць неабходны інтэрфейс і функцыянальныя кампаненты, якіх не хапае мікрафреймворку.

Ці патрэбны мне інструмент зборкі з Vertex.js?

Хоць Vertex.js сам па сабе лёгкі, вы, хутчэй за ўсё, усё роўна будзеце выкарыстоўваць інструмент для зборкі для прафесійнага развіцця. Такія інструменты, як Vite або Parcel, неабходныя для звязвання вашага кода, апрацоўкі залежнасцей npm і ўключэння сучасных функцый JavaScript. Аднак агульны ланцужок інструментаў застаецца больш простым, чым той, які патрабуецца для больш буйных фрэймворкаў, паколькі вы пазбягаеце складаных бібліятэк кіравання станам і маршрутызацыі.