Покажете HN: Vertex.js – 1kloc SPA рамка

Възходът на микрорамките: защо разработчиците отхвърлят раздутите инструменти за JavaScript

Разработчик наскоро публикува в Hacker News рамка за приложение от една страница, изградена в приблизително 1000 реда код, и отговорът беше електрически. Проектът — минималистична SPA рамка — възобнови дебат, който тлее в общността за уеб разработка от години: дали нашите инструменти са станали твърде сложни за проблемите, които решават? Когато основната библиотека на React, нейният рутер, нейният слой за управление на състоянието и нейните инструменти за изграждане заедно тежат в стотици хиляди редове код, рамка, която предоставя маршрутизиране, реактивност и изобразяване на компоненти само в 1000 реда, предизвиква неудобен въпрос. За фирмите, които изграждат ориентирани към клиента приложения, отговорът на този въпрос има реални последствия — във времето за зареждане, производителността на разработчиците и дългосрочните разходи за поддръжка.

Какво всъщност доказва една рамка от 1000 реда

Идеята за микрорамка не е нова. Backbone.js беше приблизително 1800 реда анотиран изходен код, когато дебютира през 2010 г. Mithril.js се доставя с под 10 KB gzipped. Това, което прави всеки нов запис в тази категория забележителен, не е самият брой редове, а това, което разкрива за текущото състояние на API на браузъра. Съвременните браузъри се доставят с вградена поддръжка за шаблонни литерали, API за история, базирана на прокси реактивност, персонализирани елементи и зареждане на модули. Преди десетилетие рамките се нуждаеха от хиляди редове само за нормализиране на разликите между Internet Explorer и Chrome. Днес един опитен разработчик може да изгради напълно функционална SPA рамка като тънък слой за оркестрация върху примитивите на платформата.

Това има значение, защото измества разговора от „коя рамка да изберем?“ до "имаме ли изобщо нужда от рамка?" За малки до средни проекти – целева страница с динамични секции, вътрешно табло за управление, портал за клиенти – отговорът все повече е: може би не, или поне не е тежък. Рамката от 1000 реда е доказателство, че платформата е узряла до точката, в която работата на рамката се свива.

Разбира се, рамки като React и Vue все още печелят своята тежест в широкомащабни приложения със сложни дървета на състоянието, нужди от рендиране от страна на сървъра и екипи от 20+ разработчици, които се възползват от строги конвенции. Основното прозрение е, че правилният инструмент зависи изцяло от обхвата на проблема.

Реалната цена на раздуването на JavaScript

Собственото изследване на Google последователно показва, че всеки 100 милисекунди добавено време за зареждане може да намали процента на реализация с до 7%. Средната уеб страница вече доставя над 500 KB 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 и приложни програмни интерфейси на платформата, е корекция към прагматизма.

За бизнеса тази промяна е недвусмислено положителна. Това означава повече опции, по-ниски разходи за превключване и култура на разработчици, която все повече цени простотата и скоростта пред теоретичната пълнота. Независимо дали сте самостоятелен предприемач, който избира между 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. Цялостната верига от инструменти обаче остава по-проста от тази, изисквана от по-големи рамки, тъй като избягвате сложни библиотеки за управление на състоянието и маршрутизиране.