Показати HN: Vertex.js – 1kloc SPA Framework

Ось стаття:

Розвиток мікрофреймворків: чому розробники відмовляються від роздутих інструментів JavaScript

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

Що насправді доводить фреймворк із 1000 рядків

Ідея мікрофреймворку не нова. Backbone.js складався з приблизно 1800 рядків анотованого вихідного коду, коли він дебютував у 2010 році. Mithril.js доставляється менше 10 КБ у стиснутому файлі gzip. Кожен новий запис у цій категорії привертає увагу не сама кількість рядків, а те, що вона розкриває про поточний стан API браузера. Сучасні браузери постачаються з вбудованою підтримкою літералів шаблонів, 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 та їхні конфігураційні файли часто перевищують код програми, який вони обслуговують

Мікрофреймворки обходять більшість цих витрат. З меншою кількістю абстракцій є менше речей, які потрібно зламати, менше залежностей для аудиту та менше б

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

• Show HN: Я створив базу знань маркетингу електронною поштою з 55 тисяч слів і навичок Клода Коду
• Привілей - це погана граматика
• Ми навчаємо студентів писати гірше, щоб довести, що вони не роботи
• Банальність стеження