Прикажи HN: Vertex.js – 1kloc SPA рамка

Подемот на микро-рамките: зошто програмерите ја отфрлаат надуената алатка за JavaScript

Еден развивач неодамна објави рамка за апликација на една страница, вградена во приближно 1.000 линии код за Hacker News, а одговорот беше електричен. Проектот - минималистичка SPA рамка - повторно ја разгоре дебатата која со години врие во заедницата за веб развој: дали нашите алатки станаа премногу сложени за проблемите што ги решаваат? Кога основната библиотека на React, нејзиниот рутер, слојот за управување со државата и неговите алатки за градење колективно тежат стотици илјади линии код, рамката што обезбедува рутирање, реактивност и прикажување на компоненти во само 1.000 линии предизвикува непријатно прашање. За бизнисите кои градат апликации со кои се соочуваат клиентите, одговорот на тоа прашање има реални последици - во времето на оптоварување, продуктивноста на програмерите и долгорочните трошоци за одржување.

Што всушност докажува рамката од 1.000 линии

Идејата за микро-рамка не е нова. Backbone.js имаше приближно 1.800 линии на прибележен изворен код кога дебитираше во 2010 година. Она што секој нов запис во оваа категорија го прави вреден за внимание не е самото броење на линиите, туку она што го открива за моменталната состојба на API-те на прелистувачите. Современите прелистувачи се испорачуваат со домашна поддршка за буквални шаблони, API за историја, реактивност базирана на прокси, сопствени елементи и вчитување на модулите. Пред една деценија, на рамки им беа потребни илјадници линии само за нормализирање на разликите помеѓу Internet Explorer и Chrome. Денес, вешт развивач може да изгради целосно функционална SPA рамка како тенок оркестарски слој на врвот на примитивите на платформата.

Ова е важно затоа што го поместува разговорот од „која рамка да избереме? да „дали ни треба воопшто рамка? За мали до средни проекти - целна страница со динамични делови, внатрешна контролна табла, портал за клиенти - одговорот е сè повеќе: можеби не, или барем не тежок. Рамката од 1.000 линии е доказ дека платформата созреала до точка каде што работата на рамката се намалува.

Се разбира, рамки како React и Vue сè уште ја добиваат својата тежина во апликациите од големи размери со сложени стебла на состојби, потреби за рендерирање од страна на серверот и тимови од над 20 програмери кои имаат корист од ригидните конвенции. Клучниот увид е дека вистинската алатка целосно зависи од опсегот на проблемот.

Вистинската цена на JavaScript Bloat

Сопственото истражување на 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-1.200 пакети, секој од нив е потенцијална безбедносна ранливост или неуспешна промена
• Комплексност на градење: Webpack, Babel, PostCSS и нивните конфигурациски датотеки честопати го надминуваат кодот на апликацијата што ја опслужуваат

Микрорамките ги избегнуваат повеќето од овие трошоци. Со помалку апстракции, има помалку работи за прекинување, помалку зависности за ревизија и помалку бајти за испраќање до прелистувачот. За бизнис на кој му треба брзо, доверливо присуство на веб без посветен инфраструктурен тим на предниот дел, математиката сè повеќе ја фаворизира едноставноста.

Зошто е поделена заедницата на програмери

Дискусијата Hacker News околу малите SPA рамки сигурно генерира два спротивставени табора. На едната страна се програмерите кои поминале години во големи бази на кодови изградени на React или Angular и од прва рака виделе како сложеноста на рамката се соединува со текот на времето. Гледаа едноставни функции како балон во повеќедневни задачи бидејќи конвенциите на рамката бараат допирна конфигурација на рутерот, табла за управување со состојбата и тест приклучоци што ги исмејуваат внатрешните рамки. За овие програмери, рамката од 1.000 линии претставува ослободување - враќање на разбирањето на секоја линија код што се извршува во нивната апликација.

Од другата страна се прагматичарите кои истакнуваат дека рамки постојат бидејќи на апликациите од реалниот свет на крајот им треба она што го обезбедуваат: комунални услуги за пристапност, интернационализација, разделување код, прикажување од страна на серверот и ангажирање на програмери кои веќе ја знаат алатката. Микро-рамката може да биде пријатна за проект за викенд, тврдат тие, но обидете се да вклучите тим од пет до нарачана база на кодови од 1.000 линии без одговори на Stack Overflow и без официјална документација.

Двете страни имаат валидни точки, а вистината е дека изборот е контекстуален. Соло основач кој гради MVP има фундаментално различни потреби од тим на претпријатие кој одржува апликација стара пет години. Опасноста лежи во примената на решенија на претпријатието за проблеми со стартување или алатки за стартување за предизвиците на претпријатието.

Што всушност им треба на модерните бизниси од нивниот технолошки куп

Рамковната дебата на крајот е прокси за поголемото прашање: како бизнисите треба да ги распределат своите ограничени технички ресурси? Секој час што програмерот го поминува за конфигурирање на цевковод за изградба или мигрирање на нова верзија на рамка е час што не е потрошен за градење функции што им служат на клиентите. За многу бизниси - особено мали и средни операции - идеалниот избор на технологија е оној што го минимизира јазот помеѓу „Имам идеја“ и „клиентите ја користат“.

Најдобрата технолошка одлука што може да ја донесе еден растечки бизнис е да избере алатки кои ги решаваат денешните проблеми без да создаваат товар за одржување утре. Без разлика дали тоа значи рамка од 1.000 линии или целосно управувана платформа, целта е иста: трошете го вашето време на она што го прави вашиот бизнис уникатен, а не на инфраструктурата што му е потребна на секој бизнис.

Овој принцип се протега надвор од рамки на предниот дел. Бизнисите рутински ги обновуваат истите задни системи - автентикација на корисници, обработка на плаќања, 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 од 1.000 линии всушност не се однесува на самата рамка. Станува збор за растечко движење во развојот на софтвер кон намерност - избирање алатки затоа што одговараат на проблемот, а не затоа што доминираат на пазарот. Екосистемот JavaScript ја помина последната деценија во трка во вооружување на карактеристики и апстракции. Контра-движењето, претставено со микро-рамки, HTML рендерирани од сервери и API-и на база на платформа, е корекција на прагматизмот.

За бизнисите, оваа промена е недвосмислено позитивна. Тоа значи повеќе опции, помали трошоци за префрлување и култура на развивачи која сè повеќе ја цени едноставноста и брзината над теоретската комплетност. Без разлика дали сте самостоен претприемач кој избира помеѓу WordPress и сопствена веб-локација, или CTO кој проценува дали да ја изградите или купите следната внатрешна алатка, важи истиот принцип: најдобрата технологија е онаа што исчезнува во позадина, овозможувајќи ви да се фокусирате на услугата на вашите клиенти.

Рамката од 1.000 линии не потсетува дека моќта не бара сложеност. Најефективните бизниси - и најефикасните алатки - се оние што го прават токму она што е потребно и ништо повеќе.