Pokaż HN: Vertex.js – Framework SPA 1kloc

Oto artykuł:

Powstanie mikroramek: dlaczego programiści odrzucają przesadzone narzędzia JavaScript

Niedawno programista opublikował w serwisie Hacker News jednostronicowy framework aplikacji składający się z około 1000 linii kodu i reakcja była elektryzująca. Projekt — minimalistyczny framework SPA — ponownie wywołał debatę, która toczyła się w społeczności twórców stron internetowych od lat: czy nasze narzędzia stały się zbyt skomplikowane w stosunku do problemów, które rozwiązują? Kiedy podstawowa biblioteka React, jej router, warstwa zarządzania stanem i narzędzia do kompilacji łącznie ważą setki tysięcy linii kodu, framework zapewniający routing, reaktywność i renderowanie komponentów w zaledwie 1000 liniach zmusza do niewygodnego pytania. Dla firm tworzących aplikacje skierowane do klientów odpowiedź na to pytanie ma realne konsekwencje — w postaci czasu ładowania, produktywności programistów i długoterminowych kosztów utrzymania.

Czego właściwie dowodzi struktura zawierająca 1000 linii

Pomysł mikroframeworka nie jest nowy. W momencie debiutu w 2010 r. Backbone.js zawierał około 1800 linii kodu źródłowego z adnotacjami. Mithril.js jest dostarczany w rozmiarze poniżej 10 KB, spakowanym gzipem. Tym, co sprawia, że ​​każdy nowy wpis w tej kategorii jest godny uwagi, nie jest sama liczba wierszy, ale to, co ujawnia na temat bieżącego stanu interfejsów API przeglądarki. Nowoczesne przeglądarki są dostarczane z natywną obsługą literałów szablonów, interfejsu API historii, reaktywności opartej na proxy, elementów niestandardowych i ładowania modułów. Dziesięć lat temu frameworki potrzebowały tysięcy linii, aby znormalizować różnice między Internet Explorerem i Chrome. Dzisiaj wykwalifikowany programista może zbudować w pełni funkcjonalną platformę SPA jako cienką warstwę orkiestracyjną na elementach podstawowych platformy.

Ma to znaczenie, ponieważ odwraca dyskusję od tego, „jakie ramy powinniśmy wybrać?” na „czy w ogóle potrzebujemy ram?” W przypadku małych i średnich projektów – strony docelowej z dynamicznymi sekcjami, wewnętrznego dashboardu, portalu klienta – odpowiedź coraz częściej brzmi: może nie, a przynajmniej nie ciężka. Framework składający się z 1000 linii jest dowodem na to, że platforma dojrzała do punktu, w którym zadanie frameworka się kurczy.

Oczywiście frameworki takie jak React i Vue nadal zyskują na znaczeniu w aplikacjach na dużą skalę ze złożonymi drzewami stanów, potrzebami renderowania po stronie serwera i zespołami złożonymi z ponad 20 programistów, którzy korzystają ze sztywnych konwencji. Kluczową spostrzeżeniem jest to, że wybór odpowiedniego narzędzia zależy całkowicie od zakresu problemu.

Prawdziwy koszt wzdęcia JavaScript

Własne badania Google konsekwentnie pokazują, że każde 100 milisekund dodatkowego czasu ładowania może zmniejszyć współczynnik konwersji nawet o 7%. Średnia strona internetowa zawiera obecnie ponad 500 KB kodu JavaScript — liczba ta wzrosła prawie trzykrotnie od 2015 r. Dla firm nie jest to abstrakcyjny wskaźnik wydajności. Przekłada się to bezpośrednio na utratę przychodów, wyższy współczynnik odrzuceń i gorsze rankingi w wyszukiwarkach.

Problem nasila się w sieciach komórkowych. Użytkownik urządzenia z systemem Android średniej klasy łączącego się za pośrednictwem sieci 3G może poczekać 5–8 sekund, aż strona zawierająca dużo kodu JavaScript stanie się interaktywna, nawet po wyrenderowaniu początkowego kodu HTML. Jest to szczególnie dotkliwe dla firm obsługujących klientów na rynkach wschodzących, gdzie przeglądanie w pierwszej kolejności na urządzeniach mobilnych jest normą, a infrastruktura sieciowa jest bardzo zróżnicowana.

Czas analizy: analiza i kompilacja dużych pakietów JavaScript trwa dłużej, nawet przed wykonaniem pojedynczego wiersza kodu aplikacji

Presja pamięci: złożone elementy wewnętrzne struktury zużywają pamięć, która może być wykorzystywana przez samą aplikację

Zmęczenie aktualizacjami: duże aktualizacje frameworka (Angular 1 do 2, Vue 2 do 3, komponenty klasy React na haki) wymuszają kosztowne wysiłki związane z migracją co 2-3 lata

Łańcuchy zależności: typowy folder node_modules projektu React zawiera 800–1200 pakietów, każdy z potencjalną luką w zabezpieczeniach lub istotną zmianą

Złożoność kompilacji: Webpack, Babel, PostCSS i ich pliki konfiguracyjne często przekraczają obsługiwany kod aplikacji

Mikroframeworki pozwalają uniknąć większości tych kosztów. Przy mniejszej liczbie abstrakcji jest mniej rzeczy do złamania, mniej zależności do sprawdzenia i mniej b

Frequently Asked Questions

What is a micro-framework like Vertex.js?

A micro-framework is a minimalist JavaScript library designed to handle core application tasks without the bulk of larger solutions. Vertex.js achieves this by providing essential SPA functionality—like routing and state management—in about 1,000 lines of code. This contrasts with frameworks that require separate, heavier libraries for routing or state, reducing overall complexity and bloat for smaller projects.

Why are developers moving towards simpler tools?

Many developers feel that modern JavaScript tooling has become overly complex for the average project. Heavy frameworks can introduce slow build times, a steep learning curve, and unnecessary features. Simpler tools like Vertex.js offer a faster, more understandable development experience by focusing on the essential problems a framework needs to solve, aligning better with the project's actual requirements.

Is Vertex.js suitable for a large, complex application?

Vertex.js is primarily designed for smaller projects where simplicity and low overhead are key. For very large, complex applications with many interactive components, a more feature-rich framework with a vast ecosystem might be more appropriate. For teams needing extensive pre-built modules, a service like Mewayz (offering 207 modules for $19/mo) could provide the necessary UI and functional components that a micro-framework lacks.

Do I still need a build tool with Vertex.js?

While Vertex.js itself is lightweight, you will likely still use a build tool for professional development. Tools like Vite or Parcel are necessary to bundle your code, handle npm dependencies, and enable modern JavaScript features. However, the overall toolchain remains simpler than those required by larger frameworks, as you avoid complex state-management and routing libraries.

Related Posts

• Archeolodzy odnajdują możliwy pierwszy bezpośredni dowód na słonie bojowe Hannibala
• KFC, Nando's i inne rezygnują z zobowiązań dotyczących dobrostanu kurczaków
• Brak umiejętności. Brak smaku
• IRS straciło 40% personelu IT, 80% liderów technologicznych w wyniku reorganizacji pod hasłem 'efektywności'