Web Development 2024 Roadmap & Trends | Что учить в 2024?

#YauhenK #webDev #frontend2024 #web2024
Всем привет!
2023 год подходит к завершению.
Кризис в IT, который начался в 2022 продолжил набирать свои обороты и в текущем году.
Ещё больше компаний начали оптимизировать свои ресурсы.
В результате чего рынок оказался перенасыщен IT специалистами разных уровней.
Получить конкурентное преимущество стало заметно сложнее, так как технологический стек требований так же продолжил расти.
Тем не менее войти в IT и найти толковую вакансию вполне реальная задача.
Особенно если вы прислушаетесь к рекомендациям и технологиям из сегодняшнего выпуска.
Видео разбито на две основные части.
Первая - дорожная карта для начинающего веб-разработчика.
Вторая - подробнейший Roadmap для дальнейшего развития вебе с разделением на 13 основных ветвей.
✒ Полезные ссылки:
✔ Junior Web Developer Roadmap 2024: drive.google.com/file/d/1D6rf...
✔ Web Development Trends 2024: drive.google.com/file/d/1SWdS...
✔ Полезные материлы (курсы, статьи, аналитики, ресурсы используемые в видео): github.com/YauhenKavalchuk/us...
✒ Timeline:
✔ 0:00 - Введение
✔ 1:22 - Дорожная карта для начинающего веб-разработчика
✔ 13:20 - Как правильно организовать процесс обучения
✔ 14:33 - Как работать с дорожной картой трендов
✔ 15:39 - Условные обозначения (флаги)
✔ 16:07 - SPA
✔ 17:32 - PWA
✔ 19:23 - SSR и SSG
✔ 21:58 - Micro Frontends
✔ 24:17 - JAMstack
✔ 25:31 - Web Components
✔ 27:13 - Mobile
✔ 28:30 - Desktop
✔ 29:32 - Server
✔ 32:07 - Cloud
✔ 32:57 - Machine Learning
✔ 35:14 - AR & VR
✔ 36:43 - Web3
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ KZbin: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

[@unknown.6914]

Огромное спасибо за Вашу проделанную работу. Этот roadmap великолепен!

[@YauhenKavalchuk]

Всегда пожалуйста

[@Zalupa501]

Очень понравилось, спасибо за труд и полезные советы

[@YauhenKavalchuk]

Пожалуйста

[@user-ci9io8vw3p]

спасибо за видео как раз сам хотел создать для себя , а тут видео попалось, очень удобно все подгружу себе в todo list😍

[@YauhenKavalchuk]

Пожалуйста

[@endyboybs]

Как и всегда, отличный контент, спасибо.

[@YauhenKavalchuk]

Спасибо за отзыв

[@dasnebelland]

спасибо, отличное видео, всё чётко, по делу, с приоритетами, расставила себе всё по полочкам 🤍

[@YauhenKavalchuk]

Пожалуйста

[@user-bz7je9bf8v]

Спасибо за контент!

[@YauhenKavalchuk]

Всегда пожалуйста

[@user-wu4cr2rz1g]

Большое спасибо! НУ вы блин даете угля!

[@YauhenKavalchuk]

Пожалуйста

[@user-wu4cr2rz1g]

@@YauhenKavalchuk очень информативный и полезный ролик

[@zm1468]

спасибо большое за такую roadmap, буду учиться по этому видео!

[@YauhenKavalchuk]

Всегда пожалуйста

[@mex5341]

через пару лет напиши , как закончишь

[@user-ny6pf3vr1g]

Не дождемся… пока выучит это, нужно будет учить вторую такую роадмапу

[@BLRplex]

Спасибо за контент. Чем больше такого контента - тем меньше конкурентов.

[@YauhenKavalchuk]

Пожалуйста

[@it_infomer]

Что то я не понял логики в твоих словах

[@sphardegod5451]

возможно, он лично вычисляет всех зрителей подобных видео и устраняет конкурентов@@it_infomer

[@kulikoffAS]

каким образом их станет меньше, если все посмотрят это видео и будут иметь такие же конкурентные преимущества?

[@whatifiwant]

@@kulikoffAS Это был сарказм. Технологий такой вал, что теперь в 2023/2024 недостаточно знать просто ванильный JS, как, например, в 2020. Шутка в том, что если так пугать будущих джунов, то до трудоустройства дойдет не так много людей

[@nolightnohope3302]

спасибо за видео. только начал изучать web.

[@YauhenKavalchuk]

Всегда пожалуйста

[@Andrei-Shinkarev]

Спасибо!

[@YauhenKavalchuk]

Пожалуйста

[@user-vg6eb6xu9w]

Спасибо ❤

[@YauhenKavalchuk]

Пожалуйста

[@Virisound]

Братья и сестры, давайте комментить любую рандомную фигню, чтобы отблагодарить автора за такой труд и ценную инфу.

[@YauhenKavalchuk]

Спасибо большое за поддержку

[@sergejsergeevic9885]

Спасибо за видео. Два вопроса: Vite это такой же сборщик как и gulp? Что хорошо бы знать тому, кто условно в возрасте, и не планирует (не светит) корпоративная карьера фронтендера. А занимается любимым делом - корпоративные сайты, интернет магазины итд. Т.е по сути фрилансер. И можете скинуть ссылки на те сайты, где можно отпабатывать задания по верстке и js?

[@kulikoffAS]

да vite это тоже самое что и gulp, его сделали просто чтобы поменять 4 буквы в названии сборщика

[@whatifiwant]

При этом gulp уже умер, тем более после появления vite)

[@user-vn3vo3zf2m]

В чем проблема открыть доку и уделить 1 вечер ее прочтению? Учись читать и понимать доку и гуглить. На ютубе в комментариях ты ничего не найдешь.

[@alekseyyesin8565]

Спасибо, очень годный контент. Один вопрос остался. Почему тестирование никуда не вошло?

[@YauhenKavalchuk]

Спасибо за отзыв. Тестирование не вошло т.к. не считаю это отдельным направлением, а скорее дополнением к любому из описанных направлений

[@sergeisamus8244]

хотел уточнить, ви обновляете и актуализируете свои курси на етом канале или они уже устаревшие, привет вам от нинешних студентов rss)

[@YauhenKavalchuk]

Большинство курсов рассказывают основы, поэтому они всегда будут актуальны

[@Virisound]

Простите: Ёп4ть - капать! Как остросюжетный фильмец посмотрел от начал до конца, на одном дыхании. Вот же людитшки, прикольные технологии понапридумывали. И второе: автор, ну ты моодееец, как же наврное устал гуглить всё это, не труд, а трудище! Ставлю 1-е место в моём плейлисте "Web-2023"! Молодееец, Жень!!!! Спасибо, огромное, всё вместе собрал. Ты как Чат ЖПТ погулил за нас и => готовую инфу, только ты еще "прожевал")

[@YauhenKavalchuk]

Спасибо за отзыв

[@Zalupa501]

Я бы для бекенда посоветовал ознакомиться с Linux. Ну и virtual box можно упомянуть, в нем удобно поднимать сервера во время обучения

[@YauhenKavalchuk]

👍

[@YauhenKavalchuk]

👍

[@alexanderataman7836]

Конец 90х-начало 2000х достаточно всего было знать во фронтенде html,css,js или php, немного sql и ты уже Бог. Потрясающе подробное видео! Невероятный фантастический обьём знаний и опыта сейчас требуют. Это же каким гением и молодым надо быть чтобы во всём этом разбираться и постоянно быстро учиться? Уж точно не иметь семью тогда и не готовить кушать самому. Автор прав что сейчас в основном только full-stack вакансии будут, я как java indie developer игр для андроида не могу найти работу больше года, кто этот live coding придумал на свою голову... На одну вакансию по 300 кандидатов в среднем в Европе, видел и 900-1000 кандидатов. Не знаю как у вас в Беларуси с айти, наверное большинство выехали в Польшу и в Прибалтику. Я бы добавил навык владения AI IDE tools для продуктивности, точно будет навыком must have.

[@VladislausMusic]

Тут небольшая поправочка, с 2000-х немного чего изменилось, только по мимо PHP нужно знать хотя бы фреймворки, например Laravel, плюс GIT и ты считай уже Junior Backend-разработчик а если знаешь React или Vue то уже Fullstack. Всё что описал автор видео относится исключительно к JS разработке. Не знаю как в Беларусии а в РФ не особо в моде это всё, чтобы найти работу на ноду нужно уже быть Middle+ а джуны ни кому не нужны.

[@YauhenKavalchuk]

Спасибо что поделились

[@alexanderataman7836]

@@VladislausMusic джуны сейчас нигде не нужны в мире, особенно иностранцев не возьмут джунами и мидлами потому что и своих студентов безработных хватает, а в компаниях уже никто возиться с relocation package и оформлением рабочей визы не хотят. Чувствую у меня программирование теперь стало как хобби а не работой как раньше.

[@VladislausMusic]

@@alexanderataman7836 Ну видимо всё зависит от сферы, те же пхпшники джуны по крайней мере в РФ востребованы, вакансий полно, Битрикс любят брать даже без опыта, но с условием что изучишь это днище)

[@ka-md8ue]

​@@YauhenKavalchukподтверждаю его слова, в Америке так же каки в Европе и у вас, Джуны не нужны

[@FailValiev]

Babylon подходит для любой браузерной графики на основе canvas и webgl шейдеров. Еще я бы добавил изучить canvas, webgl, BabylonJs, Threejs, webgpu, формат glsl для шейдеров.

[@YauhenKavalchuk]

👍

[@Virisound]

На canvas аналоговые часы сделал - очень увлекательная фигня. А Threejs - моя мечта, чтобы она и 3D в web - были трендом.

[@dalnoboyhik1218]

Здравствуйте, я как обучающийся по фротенд направлению занимаясь Dart+Flutter, увидел у вас в ролике. Особо курсов хороших среди СНГ нету, либо устарели и хотелось бы курс от вас по этому фреймворку и языку , мне нравится очень узнавать с вашего канала. Будет ли в будущем плейлист по этому?

[@YauhenKavalchuk]

Если честно, то пока нет в планах курса по данным технологиям

[@user-ko6cq5oz1u]

Здравствуйте. Можно будет сделать полный курс по js такой же как по html и CSS?

[@YauhenKavalchuk]

Думаю над этим. Возможно, в ближайшем будущем появится

[@VacabI89]

Вставлю пять копеек, если прям жестко следовать что говорится в видео то голова треснет. Самое главное для джуна это HTML CSS JS {react, vue) TS, Git и при этом знать нужно это хотя бы на 70% и жестко проходить собесы и точно найдете работу

[@YauhenKavalchuk]

👍

[@PostoiParovoz]

знать и "знать" - это сильно разное.

[@Happy-Gappy]

Сейчас главная задача не проходить собесы,а на них попасть, если на одну вакансию бывает от 800 откликов то вероятность того что твое резюме вообще кто то увидит очень невелика

[@user-ur9fs8cx4f]

Почему для бэкенда вы не упомянули python и net core c#? Много разработчиков использует.

[@YauhenKavalchuk]

Python и c# отдельные языки, я старался отталкиваться от JavaScript

[@zower432]

Я во время изучения js забыл css 👍 Не знаю как столько информации уместить в голове.

[@YauhenKavalchuk]

Тренировать долгосрочную память

[@user-ki9sz5jp9s]

Дальше будет еще больше и больше и больше инфы....

[@shtein4476]

Потому что надо именно на практике закреплять, а не просто видосики штудировать.

[@mex5341]

учить ничего не нужно , нужно помнить куда обратиться , если что .

[@evdokia2342]

Потом во время изучения SCSS забудешь JS?

[@romanm2192]

Какие адекватные сайты для поиска работы для фрилансера-новичка (веб) в будущем можете подсказать? Какие надежны, а какие скотились?

[@YauhenKavalchuk]

Возможно, сниму отдельное видео по этой теме, ибо инфы много

[@valeriyk7565]

Это видео превратится в контент для спонсоров или будет всегда доступно?

[@YauhenKavalchuk]

Будет всегда доступно

[@valeriyk7565]

@@YauhenKavalchuk спасибо за труд, очень полезно!

[@xGL00M]

К своему ужасу увидел, что всё в разделе Good to know для Junior Web, кроме Docker, уже всё знаю/знаком, но этого работодателю недостаточно)) А так видос хороший, полезный. К собесам готовился по вашим видео)

[@YauhenKavalchuk]

Грустно что требования к junior такие высокие

[@xGL00M]

@@YauhenKavalchuk мне кажется сейчас требования к Junior, как раньше к начинающему мидлу.

[@andreigovorukhin]

@@xGL00M так и есть, год перерыва в it, возвращаюсь во фронт а требования как раньше к мидл+

[@xGL00M]

​@@andreigovorukhin это кошмар. Я для себя не понимаю, что учить дальше. Уже уровень такой, что и сделать не мало могу, но и не понимаю куда дальше. Обычно на таком этапе уже бы над проектом реальным работать. Какая-то каша выходит крч. Нужен Junior Fullstack React Angular Vue с опытом бекенд от двух лет)

[@andreigovorukhin]

@@xGL00M только вот прикол в том что обычно на собесах спрашивают оверзнания для проекта, к собесам долго готовишься, все повторяешь, задачки по алгоритмам решаешь, а по факту работы только процентов 20 будешь применять

[@SashaKuzikov]

*Я бы еще добавил, что необходимо быть не старше 25 лет и иметь минимум 15 лет опыта работы.*

[@YauhenKavalchuk]

🤣

[@PostoiParovoz]

Это как в меме известном, где разработчик фреймворка не прошёл по требованиям в вакансии, потому что у него опыт работы с его фреймворком меньше лет, чем требовалось?

[@ecoaurum]

Нужно ли знать Webpack для Бэкенд разработчика

[@YauhenKavalchuk]

Не обязательно

[@user-samdi]

а на бекэнд можно такой же map сделать?

[@YauhenKavalchuk]

К сожалению, по бэку не владею информацией по трендам(

[@ulugbekrashidov265]

Как посмотреть frontend вопросы по собеседованию ? Это платно ?

[@YauhenKavalchuk]

В репозитории видеокаста вся необходимая информация

[@DreamingDolphing]

Пунктов очень много, не всё из показанного используется каждый день в работе, но хотя бы быть знакомым с этим надо.

[@YauhenKavalchuk]

Однозначно

[@user-ev1bz2sn8i]

с какого вашего первого видео начать изучать фронт энд

[@YauhenKavalchuk]

В разделе плейлисты в самом низу есть плейлист «полные курсы» там всё отсортировано в порядке изучения. А так, как и в виде говорил - html, css, flexbox, css grid, JS, react и т.д.

[@user-ev1bz2sn8i]

@@YauhenKavalchuk спасибо)

[@user-ev1bz2sn8i]

@@YauhenKavalchuk я так понял что с самого низа до самого верха все видео

[@ttnaaaable]

Нано фронтенд - на каждый символ своя команда, сборка, фреймворк. Самая конченая идея. Да, хочу страничку получить, а у меня компоненты писали на всех фреймворках мира => браузер грузит бандлы => время загрузки увеличивается, ждем

[@YauhenKavalchuk]

😁

[@abbze8272]

Молодая дисциплина, когда-нибудь она догонит современные практики и придет к единому виду.

[@PostoiParovoz]

А что сейчас не так работает? Простые LP в 3 экрана сейчас верстают на бутстрапе с кучей библиотек и всё это обязательно собирается на стороне сервера на каком нибудь реакте с кучей библиотек. В итоге страница весом в 100 кб с картинками превращается в 3-8 мб.

[@ttnaaaable]

@@PostoiParovoz і де тут мікрофронтенд?

[@ttnaaaable]

це цілком нормальна практика, коли є реакт аппка і всьо всередині круть верть робить) В ролику сказано про мікрофронтенди де кожна +- значимий кусок це окремий фе проект, і наскільки я розумію він конпонується за допомоги порталів або щось накшталт, не бачу в тому особливо сенсу, бо якщо ви хочете гарний проект з мінімальною кількістю ліб і фреймвортів то обирайте моноліт, все ж краще ніж якщо при npm install під проекта deprecated а інша відйобує наглухо)) Висновки мінус мікрофронтентів: команда має розуміти тех стек кожного мікропроекту, складності підтримки, і головне питання навіщо? (якщо проект масштабний, прям дуже великий, з слабозв'язаними елементами, тоді доцільно, а так ніт)

[@swami6078]

Войти в айти)

[@YauhenKavalchuk]

😁

[@luckystrike91]

да уж.. если бы веб компоненты как-то резвее развивались, то может быть не так печально бы сейчас выглядела картина. каждый во что горазд, плевать на стандарты, на костыли и подпорки, на обратную совместимость, на 100500 зависимостей ну и конечно же на безопасность - вот он, мир фронтенда. почему тот же Lit не пользуется популярностью для меня загадка. можешь запилить видос с его обзором, +/-. хочу по фану небольшой дашборд на нем написать. (я не веб разработчик, но слежу за тем, что у вас происходит)

[@kriskras8939]

Смотрю на ваши ответы к комментариям и они все довольно односложные, грустите из-за чего то? :(

[@YauhenKavalchuk]

Есть немного…

[@kriskras8939]

@@YauhenKavalchuk я для вас конечно всего лишь обычный подписчик, которого вы даже не знаете, но всё равно, если это не сильно личное, то поделитесь, может легче станет

[@kriskras8939]

Эх, ладно, в любом случае, надеюсь у вас всё наладиться!

[@mvttofficial]

Про тесты забыли)

[@YauhenKavalchuk]

Не, просто решил не включать, это всё-таки не отдельное веб-направление

[@zmicierjarasevic6562]

SASS в 2024? Переменные давно и вложенность недавно уже в стандартном CSS есть; зато лишний шаг препроцессинга

[@YauhenKavalchuk]

Посмотри различные аналитики проектов и увидите, как его часто используют

[@geldelian]

вложенность в css и sass различается, а также sass даёт множество других возможностей: импорт, миксины и т.д.

[@krukalexander]

Фронтенд сильно скукожился, говорю как мидл+ фронт. Сча больше шансов зайти либо как бэк либо как фуллстек.

[@YauhenKavalchuk]

Да, есть определённые трудности

[@HEX_CAT]

Полностью согласен. Приходится, будучи фронтендом сильно подучивать, бекенд...

[@exp0nat]

​@@HEX_CATя вот никак иза этого не могу вкатиться на работу!( Поэтому буду учить параллельно бек, можешь посоветовать ресурсы для его изучения

[@MaximLisyanskiy]

Что значит скукожился? Работы как было полно так и осталось

[@dimast2271]

​@@MaximLisyanskiyтоже не понял

[@fedordostoevskiy4209]

Все можно осилить, но не ML, очень специфично, далеко не все вьедут. Интересно, что нового ничего почти нет. Кто давно кодит, скучно, наверное.

[@YauhenKavalchuk]

🤷‍♂️

[@xxcrypt234]

bun забыл

[@YauhenKavalchuk]

🤔 возможно…

[@user-th4qi8iv3q]

Стейт менеджер не нужен? (

[@BLRplex]

Тебя только это смутило в этом видео?

[@YauhenKavalchuk]

Стейт менеджмент - это часть направления spa, не стал выносить его отдельно, точно так же как и роутинг, или сайдэффекты

[@user-th4qi8iv3q]

@@BLRplex тебя что еще смутило?

[@user-ny6pf3vr1g]

Проще в 1с вкатиться

[@YauhenKavalchuk]

Возможно…

[@samson7984]

Ни один человек даже половины не сделал из этого))

[@YauhenKavalchuk]

🤷‍♂️

[@shna90]

вместо nodejs использовать deno

[@YauhenKavalchuk]

?

[@shna90]

хороший обзор спасибо @@YauhenKavalchuk

[@VladislausMusic]

А зачем использовать Deno??? Тогда уж использовать Bun если любитель жс..

[@user-ml3zo9sd6b]

судя по комментам, многие путают уровни трейни и джуна и почему то реально думают, что джун это человек почти без знаний, а зачем такой человек компании то?) сами себе ответьте на этот вопрос и не пишите бред. нормальный джун это человек с плотной базой, нужной для работы, + небольшим опытом в проде или хотя бы в пет проектах, вот тогда вы можете себя называть джуном и иметь шансы залететь на работу. да и в принципе база для джуна фронта не большая же, верстка+джс+какой нибудь фреймворк и его экосистема, если вы даже этого не знаете, вам рано работу искать

[@iosswiftuipractice3793]

Для Джуна сейчас много требований, я бы сказал как для мидла. Никто тащит Джуна щас не хочет, если только большие компаний. На 1 место 10000 джунов, после говно курсов. Чтобы нормально программировать и понимать, нужно нигде не работать и не учится и с утра до вечера программировать год. Ставя с нуля до конца все сложнее и сложнее задачи. Например если фулстал срм самому написать, именно самому а не гуглить и искать видосы. Максимум документацию смотреть, то после того как вы ее напишете ваш уровень взлетит очень быстро и быстрее чем в говно курсах со стажировками

[@YauhenKavalchuk]

👍

[@mex5341]

оченнннь разжевано ,

[@YauhenKavalchuk]

Спасибо

[@alexbjornson3199]

Кори Пайн - "Живи, вкалывай, сдохни. Репортаж с тёмной стороны Кремниевой долины". Прежде чем войти в ИТ, где бы то ни было, прочитайте вот эту книгу. Всего 250 страниц. А потом входите. Да и в общем и целом не спешите на галеру. Много разных организаций хотят ФуллСтакера по цене Джуна..... Это просто предостережение, не с целью отбить желание стать крутым прогером и хакать пентагон через scss (я ж надеюсь все поняли что это шутка).

[@erkanat_iman]

Спасибо за контент.

[@YauhenKavalchuk]

Пожалуйста