Що має знати веброзробник у 2023–2024 році

Усі статті, обговорення, новини про Front-end — в одному місці. Підписуйтеся на телеграм-канал!

Усім привіт, мене звати Олексій, я Fullstack Web Developer. Останні чотири роки працюю в Ciklum у веброзробці.

Сьогодні ми не можемо уявити ні дня без браузера в наших гаджетах і різних сервісів, побудованих на вебтехнологіях. І, думаю, всі ми памʼятаємо вибуховий період, коли зʼявлялися нові й нові технології та дозволяли побудувати круті, ще швидші застосунки зі зручними інструментами для написання коду для них. Скільки різноманітних JavaScript бібліотек та фреймворків виходили в досить невеликі проміжки часу та скільки нових мов зʼявилось у цей час!

Так склалося, що зовсім недавно я проводив вебінар для однієї освітньої платформи на тему «Що має знати веброзробник у 2023–2024 році?», і мені довелось замислитись над тим, а що ж ми маємо наразі для створення сучасного вебу? Адже цей «кембрійський вибух» бібліотек та фреймворків заспокоївся, і вже можна зробити певний зріз того, який стек технологій є відносно сталим на сьогодні.

Я гадаю, логічно та доречно розбити матеріал на дві частини, окремо для фронтенда та бекенда. Ця стаття є певним аналізом і роздумами над тим, куди технологічно рухається (або ні) світ веброзробки, і що ми маємо нині. Тож, починаємо розбиратися.

Фронтенд у 2023–2024 році

Звичайно, веброзробник не може не знати основних мов для створення вебу, і ми нікуди не дінемось від «золотого тріо» з HTML, CSS, JavaScript. Це альфа та омега будь-якого вебзастосунку в цілому. Але і тут є про що поговорити та подумати над тим, як ці технології можуть розвиватися у 2024 році.

HTML

Тут насправді мало про що можна сказати, та й загадувати наперед важко. Фінальний стандарт HTML5 зафіксувався у 2014 році, й з того часу мало що змінюється. Ймовірно, шляхом розвитку можливостей JavaScript ми маємо сталу технологію. Тому знати HTML веброзробник має за замовчуванням як у 2023, так і у 2024 році.

CSS

Каскадні таблиці стилів за останні роки «ввібрали» дуже багато можливостей у себе. Чого варті лише верстка грідами, флексами, через gap та створення крутих анімацій тільки за допомогою CSS. Останні специфікації CSS можуть запросто конкурувати з CSS-препроцесорами на кшталт SASS. CSS nesting — як один з прикладів. Тож навіть на Vanilla CSS можна зручно і швидко писати круті стилі для вебінтерфейсів. Але все ж таки можливості препроцесорів типу SASS (SCSS), LESS, Stylus та інших ми будемо використовувати й надалі у 2024 році. Вони також входять в основний набір знань для веброзробника.

CSS-фреймворки

Колишній Twitter (а точніше одна з його команд) подарував нам можливість швидко створювати інтерфейси за допомогою готових компонентів з Bootstrap. Це дозволило економити багато часу для накидування структури вебсторінок і потім кастомізувати стандартні стилі компонентів так, як то потрібно нам за дизайном. Нині переважна кількість вебсайтів, на які ви можете натрапити, використовують саме Bootstrap у своїй основі.

У 2017 році вийшов Tailwind, що вивів використання CSS-фреймворків на новий рівень і дозволив створювати справді кастомні інтерфейси, використовуючи лише штатні компоненти та стилі цього фреймворку. Для новачка він може здатись складним і перевантаженим. Та слід тільки розібратись і навчитись його «готувати»... тут у вас можливості будуть надпотужні.

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

JavaScript

Ось тут є про що поговорити — найбільше з основного набору інструментів.

Згідно з опитуванням Stackoverflow, JS залишається найпопулярнішою мовою програмування. До речі, одинадцятий рік поспіль.

Без чого ми точно не зможемо обійтись у 2023–2024 році? Без NodeJS та пакетних менеджерів і прогресивних тулзів типу npm, yarn, vite. Але нам ще потрібно робити білди наших застосунків, і тут ніяк без Webpack, який поки все одно є золотим стандартом в JS. Свого часу був варіант спробувати Deno замість нього, та щось пішло не так у його розвитку, і він «здувся» і цікавість до нього поступово зменшується.

Але нещодавно ми побачили реліз Bun 1.0, що вийшов з бети. Він нам обіцяє вбити NodeJS, неймовірну продуктивність і цілу купу інструментів для побудови навіть серверної частини. Поки що це виглядає круто, але тільки на папері, й усе потрібно перевіряти та пробувати. Використовувати для продакшену я б у 2023 році ще не став. Проте наступний рік покаже, чи не повторить Bun долю вищезазначеного Deno.

JS-фреймворки

У 2023 році список основних гравців в рейтингу JS-фреймворків змін не зазнав.

React. Думаю, не стане новиною, що за популярністю в цьому сегменті знань веброзробника у 2023 році є React. Ця бібліотека (але всунемо її в розділ фреймворків 😋) є найпопулярнішою завдяки декільком причинам. По-перше, комʼюніті, яке за обсягами є, мабуть, найбільшим, якщо вірити всім метрикам та опитуванням за останні роки. Також його справді використовують багато проєктів та успішних бізнесів.

Тож знати та вміти використовувати React та весь його «багаж» з різних додаткових бібліотек для нього (що вже фактично є стандартом для React) необхідно буде й у 2024 році.

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

Angular. На мою скромну думку, це прямий конкурент React, з іншою філософією та архітектурою. Проте він має з коробки практично все, що необхідно для побудови сучасних вебзастосунків різної складності. Angular використовує TypeScript, і про нього ми поговоримо трохи згодом. Цей фреймворк має своїх прихильників — і їх багато. Тенденція, думаю, мало зміниться у 2024 році, і він буде займати своє стабільне місце в пантеоні фронтенда.

На Udemy є класний курс, який свого часу мені допоміг зрозуміти як працювати з Angular. Завдяки йому я полюбив працювати з цим фреймворком, тож рекомендую.

VueJS. Або просто Vue. Це щось середнє між React та Angular, і його сфера застосування лежить від найменших компонентів вебсторінок до середніх за масштабом проєктів для SPA. Де-факто він залишається стандартним для ознайомлення та вивчення у 2023–2024.

Next.js. Це фреймворк для розробки вебзастосунків на основі React. Він спроєктований для створення сучасних та високопродуктивних вебзастосунків і вебсайтів з урахуванням важливих аспектів, як-от можливість серверного рендерингу (SSR), генерація статичних сторінок та підтримка рендерингу на клієнті (CSR).

Цей фреймворк є популярним вибором для розробників, які хочуть створювати високопродуктивний та SEO-оптимізований продукт. Він дозволяє розробникам зосередитися на створенні функціональності застосунку, не вдаючись до деталей налаштування серверного рендерингу та оптимізації продуктивності.

Думаю, що у 2024 році він стане ще популярнішим, і ми будемо більше використовувати саме його.

htmx. Так, саме маленькі літери в назві. Хочете можливості JS, одразу вбудовані в HTML? Ну то тримайте нову бібліотеку, що зараз дуже піариться в комʼюніті фронтенд-розробників і підняла певний хайп. Як на мене, виглядає досить неоднозначно, та я не знаю, чи став би використовувати htmx у своїх проєктах поки що.

<input type="text" name="q"
    hx-get=" /trigger_delay" 
    hx-trigger="keyup delay:500ms changed" 
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

Та, можливо, я помиляюсь, і ця бібліотека стане реально популярною та юзабельною у 2024 році. У будь-якому випадку спробувати варто.

TypeScript

TypeScript — це мова програмування, яка є розширенням JavaScript і додає до неї статичну типізацію та інші функції для покращення розробки програм на великому масштабі. TypeScript дозволяє визначати типи даних для змінних, параметрів функцій і об’єктів, що допомагає виявляти помилки під час компіляції, а не під час виконання.

Маю думку, що створювати справді масштабовані та підтримувані вебзастосунки без TypeScript сьогодні та найближчими роками буде важко і нерозумно для бізнесу. Оскільки саме він дозволяє уникати багатьох проблем, коли код розростається до дуже великих розмірів. І, якщо ми звернемося до опитування на Stackoverflow, то TypeScript є технологією, що використовують понад 43% відсотків опитаних. А це свідчить про багато чого.

REST API, GraphQL API

Що повʼязує між собою фронтенд та його інтерфейс з бекендом? Звичайно, отримання даних з сервера.

API — це набір правил та інструкцій, які дозволяють різним програмам і сервісам взаємодіяти одне з одним. Інакше кажучи, API дозволяє різним програмам «розмовляти» між собою та обмінюватися інформацією. Але різницю між REST та GraphQL веброзробники мають знати та вміти використовувати й у 2024 році. Тут без змін.

Якщо ви часом не працювали з цими речами, то дуже рекомендую подивитись тут і тут.

Бекенд у 2023–2024 році

Після розгляду фронтенда, перейдімо до бекенд-розробки, яка є важливою частиною будь-якого вебзастосунку. Бекенд відповідає за обробку запитів від клієнтів, взаємодію з базою даних і надання результатів клієнту. Ось деякі ключові аспекти, які повинен знати бекенд-розробник у 2023–2024 роках.

Для створення бекендової частини вебзастосунків у нас є досить багатий вибір з технологій та мов програмування. Розгляньмо основні та найпопулярніші у 2023 році. Думаю, що на 2024 рік тенденція не зовсім зміниться.

Node.js

Node.js залишається популярним серед веброзробників, особливо для створення серверів. Використовуючи JavaScript на обох боках (фронтенд і бекенд), ви можете забезпечити зручну роботу між ними, послуговуючись JSON для обміну даними.

Python

Python також використовується для створення бекенду, особливо завдяки фреймворкам, як-от Django та Flask. Він славиться зрозумілим синтаксисом і великою спільнотою.

PHP

Мабуть, поки що невмируща класика у веброзробці. Ця мова програмування справді має стабільний та дуже хороший розвиток за декілька останніх років. Лідерами у фреймворках у 2023 році досі залишаються Symfony та Laravel. Особливо останній з них все більше додає крутих і зручних можливостей для створення і різних API, і класичного MVC проєктування. Та навіть я, розробник, основним стеком якого є саме PHP та все навколо нього, паралельно у 2024 році пробував би все більше чогось нового, на кшталт Go. Зрештою, повернутися завжди можна, а знання зайвими не бувають.

Але якщо вам цікаво чому слід (або ні) вивчати PHP у 2023–2024 роках, то можете подивитись запис вебінару вашого покірного слуги з відповіддю на це питання.

Java

Наступний класичний гравець у створенні бекенду не тільки для вебу, але й усього, що ми можемо уявити. Й у 2023, і за тенденціями у 2024 році основним фреймворком для вебзастосунків для Java залишатиметься Spring Framework. Мені здається, тут буде без змін.

Ruby

Ця мова разом з фреймворком Ruby on Rails ще декілька років назад створювали досить хороші вакансії для розробників, що перейшли з PHP на Ruby (а так дуже часто траплялось). Але у 2023 році Ruby досить сильно почав втрачати свою популярність, і нові проєкти цією мовою програмування дуже рідко можна побачити. Хіба що проєкти на підтримку чи невеликий апгрейд можуть створювати вакансії у 2024 році. Але це суто моє бачення та прогнозування. Камінням не кидайте!

Go (або Golang)

Ця мова програмування, розроблена в Google, стала популярною у бекенд-розробці завдяки своїм особливостям та перевагам високої продуктивності, простоті та чистоті синтаксису та іншому. Go має у своєму наборі дуже широкий спектр бібліотек, що дозволяють створювати бекенд частину для вебзастосунків швидко та дуже зручно. Я б дуже рекомендував хоча б придивитись та спробувати цю мову для свого бекенду у вебі у 2024 році.

Бази даних

Якщо ви взялись за бекенд, то від зберігання даних вашого вебзастосунку нікуди не дітись (тільки якщо це не застосунок типу no-state application). А значить, ми матимемо справу з базами даних. І в цьому плані у 2023-2024 роках усе стабільно та змін, по суті, жодних.

Реляційні бази даних. Залежно від проєкту та його потреб ми обираємо щось з SQL-подібних СУБД з уже класичного списку: MySQL, PostgreSQL, MariaDB, SQLite. І, власне, синтаксис та всі інструменти самого SQL знати необхідно й у 2024 році.

NoSQL бази даних. Тут також без сюрпризів. Знаємо, вивчаємо та застосовуємо MongoDB, Redis, Cassandra, DynamoDB.

ChatGPT та AI. Ну й куди ж без штучного інтелекту у 2024 році? А нікуди. Щобільше, ця сфера технологій від нас нікуди не пропаде, й ми будемо взаємодіяти з різними сервісами, побудованими на AI інтенсивніше з року в рік. Тому вміння будувати релевантні запити та промти для того ж ChatGPT — це те, що буде вимагатися все частіше для збільшення продуктивності розробника з будь-якої технологічної сфери. На жаль, на момент написання статті я не знайшов більш-менш зрозумілої статистики щодо використання цього інструменту саме для розробки, але певен, що кількість запитів зростає за експонентою.

Висновки

Які висновки можна зробити з цього експрес-огляду технологій для веброзробки у 2023–2024 році? «Вибухова хвиля» від виходу величезної кількості фреймворків та бібліотек для створення вебзастосунків минула. А основні гравці в цій ніші розробки зайняли свої позиції та стабільно розвиваються й пропонують усе більше зручних і крутих інструментів для розробників. Але, поруч з тим, ми маємо новий технологічний вибух у сфері штучного інтелекту та нові й нові сервіси. Вони дають у руки розробників дуже потужні інструменти й водночас стають певною загрозою, що може залишити девелоперів без роботи (поки що точно ні 😉).

Подивимось, що нам запропонує нового та цікавого 2024 рік. Можливо, нам доведеться кардинально переглянути весь цей список інструментів і зробити новий огляд на технології для вебу в 2025 році, хто зна.

Ваші ідеї щодо усього написаного пишіть у коментарях. Цікаво буде обмінятись думками!

👍ПодобаєтьсяСподобалось5
До обраногоВ обраному6
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Мабуть ще я не розкрив тему Vite і його використання... Виправлюсь :)

Хотілось би почути про Svelte ще, у розділі про фронт-енд

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

Таке враження, що стаття написана не розробником. Просто гляньте на реальну карту і зрозумієте наскільки низької якості написали статтю.
roadmap.sh/frontend

Як можна було не вказати, що розробник повинен розуміти базові поняття? Це реальна проблема, якщо на курсах швидко навчили виконувати задачі по прикладу і не було достатньо часу. Пізніше потрібно повертатись і вивчати, те що було опущено.

github.com/...​ahmedse/developer-roadmap

Дякую за статтю.
Єдине хотів уточнити, чи ви просто вказали топ 3 front-end фреймворки, серед яких треба обрати один, чи мається на увазі, що front-end розробник має знати всі 3? Я зустрічав вакансії, де вказані всі 3, але мій досвід говорить про те, що ти можеш знати добре лише один, а інші на рівні умовного low junior. Можливо мій досвід не релевантний, тому уточнюю.
На жаль, згоден із коментарями щодо клаудів. Вже дійсно вимагається, щоб front-end розробник міг свою фічу довести до релізу сам, а для цього треба знати базові devops штуки.
Аналогічно із тестами. За 5 років роботи перші 3 я їх не писав (окрім як для саморозвитку). А коли почав, то було боляче, хоча й користь від того шалена.

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

Що до клаудів, то так. Бізнес зараз хоче, щоб розробник заміняв собою 2-3 позиції одразу: і розробника, і тестувальника, і DevOps інженера. Ці знання мають бути в розробника. Проте, чи будуть вони на стільки ґрунтовними як у того ж інженера, що саме з клаудами, умовно, тільки і працює? Чи буде реалізовано такий сами рівень продуктивності від клауд сервера і чи буде забезпечена безпека даних на тому ж рівні, якщо це буде робити умовний дав, що ще й код пише, як основну свою діяльність?..

З якої сторони тримати автомат.

Нажаль, не можу не погодитись :(

VueJS. ...його сфера застосування лежить від найменших компонентів вебсторінок до середніх за масштабом проєктів для SPA.

М’яко кажучи — «брєд». Із розряду «Angular підходить для сайтів-візиток», а «React має легкий learning curve».

А сама головна проблема цієї статі це невідповідність заголовку до самої статі.

Що має знати веброзробник

, і ні слова про тести й метрики фронтенду і бекенду. Щоб і далі бідні QA замість справжнього quality assurance сиділи по 8 годин вечорами й тикали всі нові кнопки й модалки, бо девелопери «кодять код» і ні краплі більше. А клієнти і далі платили за бекенд з завантаженням CPU під 100% від 5 запитів до API, й фронтенди з білим екраном по 30 секунд на черговому Lenovo під чергові слова «нічого не знаю, на моєму Macbook Pro M100500 Max з 4000 ядрами GPU все працює нормально».

А хіба тести не є по замовченню навіть в документації до тих самих фоеймворків? Чи це просто крик болю від QA?🫣

Серйозно не розумію, це ви прикола тягнете, чи вважаєте що дока реакту/whatever якось відноситься до тестування веб-застосунку?

Пане, ви щось занадто серйозні. Чи ви очікували статтю з детальним описом усіх існуючих технологій з прикладами найкращих рішень коду і архітектури для кожної з них? Сприймайте статтю як простий певний зріз того, що треба взяти до уваги тим, хто ще не розуміє що вивчати, якщо хочуть займатись вебом і що хоче від розробників ринок.
А ви щось очікуєте мега нереальну детальну аналітику на 80 друкованих сторінок А4, певне...

Ті, хто вже давно працює з вебом й так в курсі, що треба брати та як використовувати, правда?

Та ні, я буквально вказав на дві обов’язкові речі, котрі має знати навіть джун, котрих тут немає. Зате тут є htmlx, Java, Go, і css grids. Я не вказував про базове розуміння UX, в accessibility, в security, CI/CD, в SSR (знання Next це не знання SSR), HTTP (зате тут є API, лол), і я можу ще норм список накидати, з яким норм розробник має бути справді знайомим.

Я просто не розумію value цієї статті. Його не має не те що для junior/middle/senior розробників, а навіть інтернів. «Що має знати веброзробник у 2023-2024» — тобто htmx та Go знати має, а все інше знати не має? Може все ж тоді назва має бути більш реальною, а не клікбейтною, накшталт «50% знань які має мати фуллстек у 2023, без яких не можна прожити, але знаючи тільки їх далі джуна не поїдеш»? Просто трохи дратує що ось такий «формат» статтей стає переважним, і потім ще й в розсилку потрапляє. Нагадує який Viber з його спамом. А без критики, автори будуть думати що «мало коментів бо не зашло у тренди». Та ні, просто value нульове, а у когось ще й дупа підгоріла від витрачених юзлес 8 хвилин.

Дякую за розгорнутий коментар. Наступні статті будуть з вашими побажаннями. Обговоримо це з редакторами DOU.

Без проблем. Я завжди відкритий до конструктивного діалогу і критики. Тим паче вона має ґрунт і зміст в даному випадку ;)

Доречі, а чого б вам, пане Дмитре, не написати своє бачення на цю тему і не розкрити тему більше? 😉

Я не вважаю що маю той рівень експертизи, щоб писати статті, які б я хотів комусь показати. Але іноді мати бложик для невеликих цікавих нотаток все ж хочеться :) Ніяк руки не дійдуть

А от тут вважаю ви даремно себе недооцінюєте. Починати завжди можна і з кожним разом буде все краще виходити. Це певний левел ап для реалізації своїх знань і досвіду, доречі.

А ось і доповнення до цього матеріалу.
dou.ua/forums/topic/46158

WebAssembly где? Слона в комнате и не заметили

Можливо можна додати. Але стаття більше як зріз поточних стеків саме для веб після аналізу вакансій і того що хоче бізнес на цей період. Ну і, звісно, як спроба прогнозу стеку для веберів на 2024 рік.

а клаудів чому немає?

Чогось більше це в сторону DevOps відношу. Знати і вміти самостійно користуватись всім від розробки до деплою і налаштування безпеки даних можна і треба. Але тут розмова і роздуми суто про те, що в більшості використовує бізнес та за яким стеком зараз більшість вакансій.

За моїми спостереженнями все більше приділяють увагу клаудам, здебільшого AWS (і ще щоб сертифікат був, але не так часто). Я був трохи здивований, але знання клаудів також з’являється на front end позиціях.

Цікаво. Але це більше бізнес себе оптимізує. Фулстекери замість окремих розробників на бек і фронт. А тут ще й девопсом будь на проді. Норм так можна на зарплаті зекономити 😃

Можливо, мова не про прод, а про вміння підняти умовний інстанс на AWS самостійно при необхідності

Ну й куди ж без штучного інтелекту у 2024 році? А нікуди.

Авжеж 😉

Додам, ще вміння домовлятись та налагоджувати корисні зв’язки

Важливий аспект. Але він стосується усього в принципі. Не лише вебу )))

Підписатись на коментарі