Пам’ятаєте, яким був інтернет у 2015 році? Тоді ми тільки починали звикати до адаптивних сайтів, які нормально відображалися на смартфонах. Сьогодні ж веб-додатки можуть конкурувати зі справжніми програмами на комп’ютері. Давайте розберемося, що сталося за ці десять років і як технології повністю змінили те, як створюються сучасні сайти та веб-додатки.
Від простих сторінок до складних додатків
Десять років тому більшість сайтів були досить простими. Відкриваєш сторінку – вона завантажується повністю. Хочеш перейти на іншу сторінку – знову повне перезавантаження. Це було повільно і не дуже зручно, особливо на слабкому інтернеті.
Сьогодні багато сайтів працюють як повноцінні додатки. Відкрийте Gmail, Twitter або Facebook – ви помітите, що сторінка не перезавантажується повністю при кожній дії. Контент оновлюється миттєво, все працює плавно і швидко. Це стало можливим завдяки концепції Single Page Applications або SPA – односторінкових додатків.
Замість того, щоб щоразу запитувати нову HTML-сторінку з сервера, сучасні веб-додатки завантажують її один раз, а потім просто оновлюють потрібні частини інтерфейсу. Це як різниця між перемиканням телеканалів (різкий перехід) і прокручуванням стрічки в Instagram (плавне оновлення контенту).
JavaScript захопив світ
Якщо раніше JavaScript був мовою для простих анімацій і перевірки форм, то сьогодні це справжній гігант веб-розробки. За останні десять років він перетворився з «іграшкової» мови на потужний інструмент, на якому пишуть все – від невеликих сайтів до величезних корпоративних систем.
Головна зміна відбулася в 2015 році, коли вийшов стандарт ES6 (ECMAScript 2015). Це була революція. Мова отримала безліч можливостей, яких їй бракувало: нормальну роботу з класами, стрілочні функції, промиси для роботи з асинхронним кодом, деструктуризацію об’єктів і масивів. Код став чистішим, зрозумілішим і зручнішим у написанні.
Наприклад, раніше, щоб написати просту функцію, потрібно було писати так:
var multiply = function(a, b) { return a * b;
}
А теперь можно так:
const multiply = (a, b) => a * b;
Коротше, зрозуміліше, елегантніше. І таких поліпшень було сотні.
Фреймворки: React, Vue та Angular змінюють правила гри
Одна з найзначніших змін останніх років – поява і розвиток JavaScript-фреймворків. Три головні гравці на цьому полі – React, Vue і Angular – змінили те, як ми створюємо інтерфейси.
React з’явився ще в 2013 році, але по-справжньому популярним став саме в останні десять років. Його створили в Facebook (тепер Meta), і головна ідея була простою: розбивати інтерфейс на незалежні компоненти, як конструктор Lego. Кожен компонент – це цеглинка, яку можна використовувати повторно. Кнопка, форма пошуку, картка товару – все це компоненти, які легко комбінувати і повторно використовувати.
Vue.js став народним улюбленцем завдяки своїй простоті. Його створив один розробник – Еван Ю, і це чудовий приклад того, як open-source проект може конкурувати з розробками великих корпорацій. Vue взяв найкраще від Angular і React, але зробив все простіше і зрозуміліше для новачків.
Angular від Google – це більш суворий і структурований фреймворк. Він ідеально підходить для великих корпоративних проектів, де потрібна жорстка архітектура і чіткі правила. У 2016 році вийшов Angular 2, який повністю переписали з нуля, і це було як перехід від звичайного телефону до смартфона.
Ці фреймворки навчили нас думати про веб-розробку по-новому. Тепер ми не просто пишемо код, який щось робить – ми створюємо компоненти, що можуть бути використані повторно, думаємо про стан додатка, про потоки даних.
TypeScript: JavaScript на стероїдах
Ще одна важлива зміна – масове поширення TypeScript. Це надбудова над JavaScript, яка додає типізацію. Звучить нудно, але на практиці це економить величезну кількість часу і нервів.
Уявіть: ви пишете функцію, яка повинна приймати число. У звичайному JavaScript ви можете випадково передати туди рядок, і помилка вийде тільки під час роботи програми, можливо, вже у користувача. TypeScript же перевірить типи ще на етапі написання коду і скаже: «Стій, ти передаєш не те!»
За останні роки TypeScript став стандартом де-факто для серйозних проектів. Навіть ті, хто раніше скептично до нього ставився, почали розуміти його цінність, коли проекти розросталися.
Node.js і JavaScript на сервері
Раніше було чітке розділення: JavaScript – для браузера, PHP, Ruby, Python або Java – для сервера. Node.js стер цю межу. Тепер один розробник може писати і клієнтську, і серверну частину на одній мові.
Node.js з’явився в 2009 році, але розквіт припав саме на останнє десятиліття. Сьогодні на ньому працюють Netflix, LinkedIn, Uber і тисячі інших сервісів. Його головна перевага – асинхронність і висока продуктивність при роботі з безліччю одночасних підключень.
Це породило цілу екосистему інструментів: Express.js для створення API, Socket.io для роботи з веб-сокетів в реальному часі, Nest.js для побудови масштабованих серверних додатків. JavaScript перестав бути тільки браузерною мовою – він став повноцінним інструментом для створення будь-яких додатків.
CSS теж виріс
Поки всі захоплювалися JavaScript, CSS теж не стояв на місці. Flexbox і Grid Layout змінили те, як ми створюємо макети сторінок. Раніше, щоб зробити елементи в ряд з однаковою висотою, доводилося викручуватися з float-ами і clearfix-ами. Тепер достатньо написати display: flex і кілька простих властивостей.
CSS Grid пішов ще далі, дозволивши створювати складні двовимірні сітки без єдиного рядка JavaScript. Те, що раніше вимагало використання Bootstrap або Foundation, тепер робиться декількома рядками чистого CSS.
З’явилися CSS-змінні (кастомні властивості), які дозволяють створювати теми оформлення і перемикати кольори однією командою. Додалися нові одиниці виміру на зразок vw і vh, які допомагають робити по-справжньому адаптивні інтерфейси.
А препроцесори на зразок SASS і LESS зробили написання CSS більш структурованим і зручним. Можна використовувати змінні, вкладеність, міксини – все те, чого не вистачало в звичайному CSS.
Поява CSS-in-JS
Цікавий тренд останніх років – CSS-in-JS, коли стилі пишуться прямо в JavaScript-коді. Бібліотеки на кшталт styled-components та Emotion дозволяють створювати стилізовані компоненти, де логіка та оформлення знаходяться в одному місці.
Це може здатися дивним, але на практиці дуже зручно: всі стилі компонента знаходяться поруч з його логікою, немає проблем з конфліктами імен класів, можна динамічно змінювати стилі на основі props. Правда, не всім це подобається – є прихильники більш традиційного підходу.
Webpack, збирачі та інструментарій
Сучасна веб-розробка немислима без збирачів. Webpack став стандартом індустрії, хоча у нього з’явилися конкуренти на кшталт Parcel, Rollup, а нещодавно – Vite і esbuild, які працюють на порядок швидше.
Збирачі вирішують безліч завдань: об’єднують безліч файлів в один, мініфікують код, транспілюють сучасний JavaScript в старий для підтримки старих браузерів, оптимізують зображення, дозволяють використовувати модулі. Раніше все це робилося вручну або взагалі ніяк, зараз – автоматично.
З’явилися інструменти для контролю якості коду: ESLint перевіряє код на помилки та відповідність стандартам, Prettier автоматично форматує код, роблячи його однорідним. Це особливо важливо в командах, де працюють десятки розробників.
Git і спільна розробка
GitHub, GitLab і Bitbucket перетворили спільну розробку на задоволення. Pull request-и, code review, continuous integration – все це стало нормою. Раніше код завантажували на сервер через FTP і сподівалися, що нічого не зламається. Тепер кожна зміна проходить перевірку, тестується автоматично і вливається в основну гілку тільки після схвалення.
З’явилися практики на кшталт trunk-based development, де всі працюють в одній гілці, роблячи невеликі часті коміти. Або Git Flow з чіткою структурою гілок для розробки, тестування та релізів.
API та мікросервіси
Підхід до архітектури додатків також змінився. Раніше був моноліт – один великий додаток, який робить все. Зараз у моді мікросервіси – маленькі незалежні сервіси, кожен з яких займається своїм завданням.
REST API став стандартом для взаємодії фронтенду з бекендом. А останні кілька років набирає популярність GraphQL – мова запитів для API, розроблена в Facebook. Його головна перевага – клієнт сам вказує, які дані йому потрібні, без зайвих полів і запитів.
З’явилися такі концепції, як serverless і функції як сервіс (AWS Lambda, Google Cloud Functions). Тепер не потрібно піднімати цілий сервер – можна написати функцію, яка запускається тільки коли потрібно і бере плату тільки за час виконання.
Progressive Web Apps: сайти як додатки
PWA або Progressive Web Apps – це технологія, яка перетворює звичайні сайти на подобу нативних додатків. Вони можуть працювати офлайн, надсилати push-повідомлення, встановлюватися на робочий стіл або домашній екран телефону.
Twitter, Uber, Pinterest – багато компаній створили PWA-версії своїх сервісів. Це дешевше, ніж розробка окремих додатків для iOS і Android, і доступно відразу всім користувачам через браузер.
Service Workers – ключова технологія PWA – дозволяє кешувати ресурси та працювати з ними в офлайн-режимі. Заліз у метро без інтернету? Не проблема – PWA-додаток продовжить працювати, показуючи закешований контент.
WebAssembly: продуктивність на новому рівні
WebAssembly або WASM – це справжній прорив. Це бінарний формат, який працює в браузері майже з нативною швидкістю. Тепер у браузері можна запускати ігри, відеоредактори, 3D-додатки – те, що раніше було неможливо через обмеження JavaScript.
Figma, популярний інструмент для дизайну, працює в браузері завдяки WebAssembly. AutoCAD запустили веб-версію. Навіть Adobe Photoshop з’явився в браузері. Це було немислимо десять років тому.
WASM дозволяє використовувати код, написаний на C++, Rust або інших мовах, безпосередньо в браузері. Це відкриває абсолютно нові можливості для веб-додатків.
Мобільна розробка на веб-технологіях
React Native і Flutter змінили підхід до мобільної розробки. Тепер не обов’язково вивчати Swift і Kotlin – можна писати додатки на JavaScript або Dart і отримувати нативні додатки для iOS і Android.
React Native використовує ті ж концепції, що і React для вебу, але замість HTML створює нативні компоненти. Instagram, Facebook, Discord – багато популярних додатків написані на React Native.
Ionic і Capacitor пішли іншим шляхом – вони дозволяють упакувати веб-додаток в оболонку нативного додатка. Це простіше, але трохи повільніше React Native.
Jamstack і статичні генератори
Jamstack-архітектура змінила підхід до створення сайтів. Ідея проста:
генерувати статичний HTML на етапі збірки, а не при кожному запиті. Це швидше, безпечніше і дешевше в хостингу.
Next.js для React, Nuxt.js для Vue, Gatsby — ці фреймворки дозволяють створювати статичні сайти з динамічними можливостями. Можна генерувати сторінки заздалегідь, а дані завантажувати динамічно.
Netlify, Vercel, GitHub Pages роблять розгортання таких сайтів максимально простим. Закоммітив код в Git – сайт автоматично перекомпілювався і розгорнувся. Ніяких серверів і складних налаштувань.
Тестування стало обов’язковим
Раніше тестування було розкішшю. Зараз – необхідністю. Jest, Mocha, Cypress, Playwright – інструментів для тестування стало безліч, і вони стали набагато простішими у використанні.
Test-Driven Development (TDD) перестав бути екзотикою. Багато команд спочатку пишуть тести, а потім код. Це допомагає уникнути багів і робить код більш надійним.
Continuous Integration автоматично запускає тести при кожному коміті. Якщо щось зламалося – відразу отримуєш повідомлення. Не потрібно вручну перевіряти кожну зміну.
Доступність та інклюзивність
Accessibility або a11y стала важливою темою. Розробники почали думати про те, як їхні сайти використовують люди з обмеженими можливостями: незрячі з програмами читання з екрану, люди з проблемами моторики, дальтоніки.
З’явилися стандарти WCAG, бібліотеки для перевірки доступності, інструменти на зразок Lighthouse, які оцінюють доступність сайту. Багато компаній тепер не запускають сайт у продакшн, якщо він не відповідає стандартам доступності.
Темна тема і кастомізація
Темні теми стали трендом останніх років. Майже кожен сайт і додаток тепер пропонує темний режим. CSS отримав медіа-запит prefers-color-scheme, який визначає переваги користувача автоматично.
Це не просто мода – темні теми реально знижують навантаження на очі, економлять батарею на OLED-екранах і просто подобаються багатьом користувачам.
Контейнеризація та Docker
Docker змінив те, як ми розгортаємо додатки. Замість встановлення всіх залежностей на сервер, все упаковується в контейнер – ізольоване середовище з усім необхідним. «Працює на моїй машині» перестало бути проблемою.
Kubernetes для оркестрування контейнерів став стандартом для великих проектів. Можна автоматично масштабувати додаток залежно від навантаження, відновлювати контейнери, що вишли з ладу, робити плавне оновлення без простою.
Продуктивність понад усе
Google почав враховувати швидкість завантаження сайту в ранжуванні. З’явилися CoreWeb
Vitals – метрики, які вимірюють реальний користувацький досвід. LCP (Largest Contentful Paint), FID (First Input Delay), CLS (Cumulative Layout Shift) – ці абревіатури стали частиною лексикону кожного веб-розробника.
Lazy loading, code splitting, image optimization, critical CSS – техніки оптимізації стали стандартною практикою. Користувачі не готові чекати – якщо сайт завантажується довше трьох секунд, вони йдуть.
Майбутнє вже тут
Останні десять років у веб-розробці були неймовірно насиченими. Те, що здавалося фантастикою в 2015 році, сьогодні – буденність. І це тільки початок.
WebGPU для роботи з графікою, Web Bluetooth і Web USB для взаємодії з пристроями, WebXR для віртуальної та доповненої реальності – браузери отримують все більше можливостей.
Штучний інтелект починає проникати у веб-розробку. GitHub Copilot пише код разом з вами, GPT-моделі генерують контент, машинне навчання працює прямо в браузері завдяки TensorFlow.js.
Веб-розробка перетворилася з створення простих сайтів на справжню інженерну дисципліну. Сучасний веб-розробник повинен знати безліч технологій, розуміти архітектуру, вміти працювати в команді, тестувати код, думати про продуктивність і доступність.
Але незважаючи на всю складність, поріг входу в професію став нижчим. Величезна кількість навчальних матеріалів, open-source проектів, фреймворків з хорошою документацією роблять веб-розробку доступною кожному, хто готовий вчитися.
І найцікавіше – це не кінець, а скоріше середина шляху. Наступні десять років обіцяють бути ще більш захоплюючими!