D2
Администратор
- Регистрация
- 19 Фев 2025
- Сообщения
- 4,380
- Реакции
- 0
Источник: XSS.is
Автор BlameUself
У тебя могут быть разные векторы цели, начиная с получения первой работы и заканчивая амбициозными планами о взломе Пентагона или создании своего стартапа/галеры. Все, что прийдет в голову, буквально!
Эта статья может быть полезна новичкам, и, да, здесь будет очень много моего ощущения реальности! Я прошел этот путь в этом году. Поехали. Буду рад фидбеку от олдов.
Тебе не нужны курсы.
Программирование можно представить как написание маршрутов решения проблем. Пойдем дальше и обернем всю реальность в абстракцию.
Входные данные → система → выходные данные. (будут исключения; здравствуй, теория хаоса, но в данном контексте упростим).
Меняя входные данные, ты меняешь выходные. Подумай об этом — банальная мысль переворачивает сознание.
Сделаем паузу и посмотрим рассуждения Джорда Хоца.
Итак, почему же тебе не нужны курсы? Потому что твоей первой проблемой будет построение маршрута обучения. А первым выводом из решения будет осознание того, что, скорее всего, любые проблемы были решены до тебя. Смотри эту статью как исходники.
Смешное видео Если тебе не присуща шизотипичность, то как ты оказался здесь? Ну ладно, ладно, просто нужно предупредить: не стоит строить воздушные замки.
А сколько времени нужно, чтобы освоить фуллстек-разработку? Хех, это убийство дракона, у каждого своя история.
Сперва конкретизируем цель, иначе ответ на вопрос, сколько времени нужно, вероятно, будет больше нашего времени. Целью может быть начать зарабатывать деньги на своих навыках, либо создать продукт, который будет пользоваться спросом.
И никто не знает сколько времени тебе понадобится.
Слонов едет по частям. Упорство всегда побеждает талант.
И всем нужны метрики.
Я уверен что тебе точно хватит трех лет, и в тоже время срока в пол года будет недостаточно.
Просто работай каждый день. От 2-3 часов. Слонов едет по частям. Упорство всегда побеждает талант.
Кстати, а почему именно фуллстек?
Понимание разработки приложений в целом позволяет мне решать те задачи, которые мне действительно интересны.
Субъективно говоря, фронтенд-разработка — это какая-то неполноценная история, так же как и наоборот.
Под фуллстеком я понимаю комплексную разработку приложения.
Я слышал, что в биг техе существует похожее видень.
)
Английский язык?
Yep.
Несколько новых фреймворков с новой философией? Несколько обновлений старых без обратной совместимости? Новый мощный рантайм? С десяток новых свойств CSS? Легко. И все это на одной неделе.
Держи руку на пульсе и не верь обещаниям. Этот путь будет о балансе между градом хайпа новых решений.
IDE - VSCode. Со старта установи плагин Prettier. Изучите шорткаты.
Начнем с базы?
HTML - абсолютно основа. Очень просто. Это язык разметки.
Берем любой курс + курс от фрикодкемп.
Например - + курс тренажер от freecodecamp
Если нужна красота - делаем на секциях * на accessibility. Если нужна скорость делаем как делается.
На этом этапе будет полезно поверхностно ознакомиться с SEO. Также следует познакомиться с Emmet.
CSS.
Насколько простая идея на первый взгляд, настолько же разражающая на дальнейших взаимодействиях.
Не существует фреймворк решения, которое инкапсулирует знания базового CSS. Любой фреймворк требует от вас знания CSS!
В тоже время в CSS достаточно много ‘легаси’ (float, например), будьте осторожны со старой информацией.
Важно понимать несколько ключевых концепций.
Все есть блоки. Блочная модель. Элементы бывают блочные и строчные. Запомните: в CSS всё - блоки! Вот прям установи себе на рабочий стол картинку и увидь все в блоках.
Flexbox. Флексы это центровка по осям X и Y. Отличная игра - https://flexboxfroggy.com/
Grid. Это сетка. Центровка в формате сетки. Игра - https://cssgridgarden.com/
Дополнительно можно узнать о BEM - Документация BEM
На этом этапе, можно потратить пару недель на верстку. Познакомимся с Фигмой. Поискать макеты. А лучшее выбрать сайт который нравится, и повторить верстку.
Также познакомиться с консолью. Вся верстка возвращается к нам в браузер.
(Не самый лучший курс, но лучший из того что нашел)
Дизайн.
Поскольку это не о дизайне статья, дам всего одну рекомендацию - осознанность в тенденциях развития современных приложений. Понимание тенденций и повторения их.
Гитхаб.
Изучи GitHub. Любая проблема уже была решена до тебя, помнишь? Научись искать на GitHub.
Интересная тема - гитхаб дорки. Они помогут тебе в будущее не сливать конфиденциальные данные.
Git - это технлогия для командной разработки. Командной. Она прейдет с практикой работы в команде.
Отличный курс Отличная игра (есть ru версия)
Первый большой выбор - Выбор языка. И ты должен сделать его сам.
Я выбрал JavaScript.
На данный момент это самый популярный язык в мире (учитывая, что TypeScript обычно сепарируют в рейтингах и он занимает 5-7 позицию) PHP теряет позиции, и если посмотреть на рейтинги зарплат, то он будет на самом дне (речь идет о зарубежных топах).
Однако важно понимать, что в мире существует множество проектов на PHP, которые генерируют миллиарды долларов. Да что там, данный форум, насколько я знаю, использует PHP.
Скажу несколько слов о книгах. Внезапно, это просто буквы на бумаге. Они могут устаревать, быть плохо написанными или быть излишне огромными.
Порой курсы бывают лучше книг.
Зачастую документация превосходит курсы.
Всегда важна практика поверх всего.
В конце я оставлю список нескольких отличных книг, а также отмечу некоторые по ходу. Однако стоит помнить, что не существует одной книги, которую можно прочитать, чтобы узнать все.
Несколько моментов, которые хочу уточнить.
ES6 - это всего лишь большое обновление в JS. Они выходят каждый год. Это просто часть языка.
Node JS (или уже Bun?) - это рантайм (локация, среда выполнения), который предоставляет возможность запускать JS вне браузера.
TypeScript - это надмножество JavaScript, то есть он включает в себя все возможности JavaScript, а также добавляет некоторые дополнительные функции.
Это все JavaScript. Не что-то иное.
JavaScript начинаем изучать с курса Удивительным образом этот курс избегает действительно сложных концепций, но за счет этого строит базовое понимание происходящего.
Далее идем на сайт - https://learn.javascript.ru/ и проходим его полностью, прорешивая все задачи, каждую. Второй и третий разделы частично устарели, но все, что касается JS, прекрасно.
После этого изучаем самые ключевые особенности языка. Можно использовать книгу Флэнагана (Javascript: The Definitive Guide). Также можно изучать темы из книги 'Вы не знаете JavaScript' (второе издание, то, что найдете на русском – первое).
Ключевые темы включают в себя: scope, this, замыкания, call/apply, стек, event loop, объекты, new, прототипное наследование, асинхронность (Promise API, Async/await), модули, fetch.
В тот момент, когда утка крякает в ответ на вопрос о том, все ли понятно, делаем перерыв и переходим к следующей теме)
Используем ли мы GPT-модели при обучении?
Да, мы используем GPT-модели.
Однако, что касается ML-типа Copilot, на первых этапах, пожалуй, не стоит.
Фронтенд фреймворк: React.
Сравниваем популярность React и конкурентов на сайте https://www.npmjs.com/ и не спрашиваем себя, какой фреймворк выбрать.
Также, выучив React, можно быстро перейти к мобильной разработке с использованием React Native.
Переход на Vue после React займет 2 недели, на Angular - 3-4 недели.
Ключевым элементом в современных фреймворках является компонентный подход. Все состоит из компонентов. Также важны концепция виртуального DOM и хуки.
Актуальный и лучший курс на данный момент -
Роутинг в React реализован отдельным пакетом, с ним все достаточно просто. Актуальный и лучший курс на данный момент
Если эти курсы уже утратили актуальность, есть одно правило - вам не нужны курсы продолжительностью 30, 40, 80, 120 часов на Udemy. Есть исключения, но в целом выбирайте курсы меньшей продолжительности.
Кстати, npm это просто сайт с библиотеками для JavaScript. (*пакетный менжер)
Менеджер состояний
Redux - одна из концепций, которая сразу выбивала у меня почву из-под ног.
В некоторых приложениях нам понадобится стор, в котором хранятся стейты. Стейт - это просто объект с данными, которые мы таскаем сквозь компоненты и взаимодействуем с ним. Но взаимодействие с ним может показаться перегруженным на первых порах. Все это очень упрощено.
Прочитайте какую-нибудь статью об этом - статья о редаксе
Далее просто практика. Понимание придет в процессе, много читать об этом не стоит.
Redux Toolkit - это современный способ работы с Redux (он вам и нужен), пакет react-redux необходим, если вы работаете с React - просто пакет. RTK Query необходим для асинхронной работы (с API).
Я выбрал Redux из-за его популярности, во-первых, и достаточно высокой сложности, во-вторых, после которой любой другой менеджер состояний будет более простым и понятным.
И да, вы можете не использовать менеджер состояний вообще и ограничиться тем, что есть из коробки. Но понимание этой концепции необходимо.
Из асинхронных стейт-менеджеров часто используется react-query (в настоящее время он называется TanStack Query), и это не то же самое, что redux-query
На этих этапах мы познакомимся с технологиями в мире CSS.
SASS - популярный способ работы с CSS, включающий в себя миксины, наследование и калькуляции. Может понравиться, но мне не зашло.
Tailwind - грубо говоря, это возможность писать CSS в HTML. На персональных проектах это невероятно удобная, модная и классная штука. Действительно способна ускорить разработку. Документация по Tailwind
На самом деле тебе не нужно разрабатывать компоненты с нуля. Библиотеки компонентов спешат тебе на помощь. Осталось только выбрать из них.
От старой доброй Bootstrap до Material UI. Отдельно выделю Shadcn UI.
На этом этапе можно немного узнать про сборщики. Настройка их конфигурации очень сильно зависит от задачи, сама идея крайне проста.
Классический вариант - webpack. Модный - Vite.
Линтеры. Идея также очень проста. Варианты настройки очень гибкие. Популярное решение сейчас - ESLint.
Тестирование. Особо углублятся я бы не рекомендовал, но познакомится с тем как это работает будет плюсом.
Прекрасное видно от Улби
Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot)
Фреймворк Jest - https://jestjs.io/
Отлично, мы закончили фронтенд. Переходим к бекенду.
Начнем с Node.js.
Для ознакомления с нодой и формированием представлений о том, что это такое, можно почитать - https://metanit.com/web/nodejs/. Однако следует отметить, что часть информации там может быть устаревшей.
Повторяем тему модулей. Повторяем Event Loop
И смотрим лучший курс по Node.js
Будет необходимо ознакомиться с основными протоколами, немного узнать, что такое клиент-серверная архитектура, узнать, что такое REST. Все эти темы собраны в этом курсе -
Full HTTP Networking Course – Fetch and REST APIs in JavaScript
🗄 NoSQL
Я же писал, что данный роудмэп построен на моих ощущениях реальности, верно?
NoSQL базы проще. Начать их использовать легче, чем SQL. Поэтому я ставлю их впереди SQL.
Изучаем сперва курс чтобы понять, о чем идет речь.
NoSQL Database Tutorial – Full Course for Beginners
NoSQL - это зоопарк решений. В видео используется Astra DB, но я рекомендую начать с MongoDB.
Лучший курс по MongoDB - это официальный курс - https://learn.mongodb.com/.
Работа с MongoDB в JavaScript осуществляется через библиотеку Mongoose - https://mongoosejs.com/.
Из NoSQL баз я также могу выделить Firebase, но я сам не работал с ней.
SQL
Нужно будет немного изучить теорию баз данных. Неплохой вариант
Database Design Course - Learn how to design and plan a database for beginners
Далее изучаем основы SQL - тренажер sql-academy
В плане СУБД проще всего будет начать с SQLite, но этот выбор зависит от вас.
Прокачать решать SQL задачи можно в рамках - leetcode-top-50-sql
После этого стоит познакомится с ORM - что такое ORM?
Для JavaScript популярными вариантами являются - TypeORM и Sequelize.
У нас уже есть всё, чтобы писать бекенд! Будем использовать самое популярное решение - Express. В целом, это просто фреймворк для написания бекенда, ничего сложного, просто практика.
Если чувствуете, что не хватает понимания, можно пройти курс, хотя мне он кажется избыточным по продолжительности -
Node.js and Express.js - Full Course
На этом этапе мы уже готовы разрабатывать комплексные приложения.
Посмотрите, как реализовывать то, что вам интересно, с помощью MERN Stack. Вы уже готовы, но лучше дойдем путь до конца. MERN Stack не лучшее решение.
Ух, куда в этом роудмапе впихнуть TypeScript — это вопрос. Кто-то скажет, что он должен идти в самом начале, но я оставлю его здесь.
Не существует единого мнения о TypeScript, истина в том, что де-факто это стандарт современной коммерческой разработки. Будут люди, для которых TS — излишний, перегруженный или даже ломающий логику JavaScript. Будут те, для которых жизнь навсегда изменится после добавления TS.
Правда также в том, что после TS остальные языки будут более понятными, поскольку TS делает JS более взрослым.
Использовать ли его в своих проектах на постоянной основе решать вам, главное не бойтесь применения.
Мне кажется хорошим способом познакомиться с TS будет книга “TypeScript быстро. Яков Файн Антон Моисеев.”, а также тренажер https://code-basics.com/ru/languages/typescript
Готовы? - Next.js
Самый простой способ разработки фуллстек приложений.
Теперь у нас встроенный и супер удобный роутинг, работа с SEO, возможность тут же писать бек, все это удобно собрать и даже удобно задеплоить на модный Vercel.
Хотя многое о Next.js - это серверные компоненты, но это большая тема.
То есть мы изначально могли начать с Next.js? Могли, но быть Next.js разработчиком довольно ограниченно, не так ли?
Лучший курс - Next.js 14 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework + документация
Немного возвращаемся к теории. На данном этапе важно изучить "аутентификацию". Выделю отдельно JWT токены:
Курс от Улби
Курс от FreeCodeCamp
Документация - jwt.io
Реализовывать аутентификацию можно разными способами.
Поскольку в рамках данного роудмапа я привел вас к Next, то и библиотека будет NextAuth.
Из плюсов, она поддерживает авторизацию по OAuth.
Из модных, упрощенных решений выделю Clerk. Возможно, у такого подхода будет будущее, хотя отдавать такие штуки на аутсорс решения с очевидными минусами.
Возможно, на этом этапе вы поняли, что хотите больше прокачиваться в бекенде и реализовывать более комплексные проекты.
Фреймворк Nest.js спешит к вам - ссылка на сайт.
Хороший курс на Udemy, который они рекомендуют в своей же документации. На русском языке есть неплохой материал от Anton Larichev, хотя, частично, он устарел в плане технологий, а также уровень скорее для опытных разработчиков чем для новичков, ввиду того что автор не ставит своей целью подробно объяснить все аспекты.
Оба курса есть на рутрекере.
На этом этапе имеет смысл узнать немного больше о объектно-ориентированном программировании (ООП). До этого мы работали с функциональной парадигмой в React.
Есть много книг по ООП для тех, кто хочет глубже понять эту парадигму.
ООП на простых примерах. Объектно-ориентированное программирование
Пройтись по паттернам тоже не будет лишним, хотя, если что-то окажется непонятным, не стоит беспокоиться. С некоторыми из них вы еще не скоро встретитесь, а другие могут быть переосмыслены к тому времени.
За основу возьмите книгу "Head First Design Patterns" (второе или актуальное издание) и самостоятельно проработайте примеры на JavaScript.
Отдельно выделю MVC паттерн - видео MVC, MVVM Архитектура. Наглядная теория и примеры
Как писать код... Ухх, не знаю, есть ли смысл упоминать классическую историю про Чистый Код Мартина или Совершенный код МакКоннелла. Вместо этого предлагаю обратить внимание на:
Далее, в плане бека, обратите внимание на gRPC. Там и до микросервисов будет рукой подать, и в целом выйти уже за пределы этого роудмэпа. Однако, прежде чем погружаться в микросервисы, станьте мастерами в монолитах.
Поскольку мы коснулись архитектуры, относительную популярность во фронте набирает FSD, так что имеет смысл ознакомится - официальный сайт.
Ну что, идем в большой мир? Готовы ли мы? Нет.
Нам нужно научиться работать с Linux, а именно с терминалом.
Берем виртуальную машину и устанавливаем туда любой дистрибутив. Затем используем его несколько недель для решения бытовых задач.
Смотрим курс
Introduction to Linux – Full Course for Beginners
Читаем книгу 'Командная строка Linux. Полное руководство' (2-е или актуальное издание).
Нашему маленькому приложению нужно где-то жить, и раз уж Next - красная нить roadmap'а, я начну с Vercel.
Деплой на Vercel Next-приложения до невозможности прост. Скачиваем CLI и вводим одну команду deploy (примерно так, точно посмотрите в документации). Минусы - мы привязаны к Vercel, и переехать будет сложно.
Деплой на рандомный VPS-сервис. VPS - это буквально ваш Linux на виртуалке, которым вы пользовались несколько недель, только он находится не у вас дома. Процесс деплоя будет сложнее, но это необходимые знания.
А далее мы хотим идти в ногу со временем, поэтому уходим от рандомного VPS-сервиса, например, на Amazon Web Services.
Невероятно продолжительный курс AWS Certified Cloud Practitioner 2023 | Full Training Course
AWS - это буквально десятки сервисов - топ 50+ и они постоянно добавляют новые - новые (видео вышло сегодня).
Где-то здесь мы знакомимся с Docker (это как маленькие линуксы с твоей виртуалки, только их много, и каждый отвечает за свою задачу) - Docker - Полный курс Docker Для Начинающих (этот курс поймет буквально любой)
А также открываем для себя CI/CD - улби
️Ееее, мы ваще ребята.
Только все эти знания не сделали нас разработчиками. Только проекты. Только практика. Практика, и еще немного практики.
В какой-то момент вам может показаться, что все знания в голове абсолютно не пересекаются между собой. В этот момент я рекомендую сделать несколько проектов, просто копируя код с YouTube.
Например, канал Code With Antonio
Программирование - это решение задач. Проекты. Практика.
Темы со *:
Дополнительные рекомендаций:
Также хочу сказать:
Удачи в убийстве дракона!
Автор BlameUself
У тебя могут быть разные векторы цели, начиная с получения первой работы и заканчивая амбициозными планами о взломе Пентагона или создании своего стартапа/галеры. Все, что прийдет в голову, буквально!
Эта статья может быть полезна новичкам, и, да, здесь будет очень много моего ощущения реальности! Я прошел этот путь в этом году. Поехали. Буду рад фидбеку от олдов.
Тебе не нужны курсы.Программирование можно представить как написание маршрутов решения проблем. Пойдем дальше и обернем всю реальность в абстракцию.
Входные данные → система → выходные данные. (будут исключения; здравствуй, теория хаоса, но в данном контексте упростим).
Меняя входные данные, ты меняешь выходные. Подумай об этом — банальная мысль переворачивает сознание.
Сделаем паузу и посмотрим рассуждения Джорда Хоца.
Итак, почему же тебе не нужны курсы? Потому что твоей первой проблемой будет построение маршрута обучения. А первым выводом из решения будет осознание того, что, скорее всего, любые проблемы были решены до тебя. Смотри эту статью как исходники.
Смешное видео Если тебе не присуща шизотипичность, то как ты оказался здесь? Ну ладно, ладно, просто нужно предупредить: не стоит строить воздушные замки.
А сколько времени нужно, чтобы освоить фуллстек-разработку? Хех, это убийство дракона, у каждого своя история.Сперва конкретизируем цель, иначе ответ на вопрос, сколько времени нужно, вероятно, будет больше нашего времени. Целью может быть начать зарабатывать деньги на своих навыках, либо создать продукт, который будет пользоваться спросом.
И никто не знает сколько времени тебе понадобится.
Слонов едет по частям. Упорство всегда побеждает талант.
И всем нужны метрики.
Я уверен что тебе точно хватит трех лет, и в тоже время срока в пол года будет недостаточно.
Просто работай каждый день. От 2-3 часов. Слонов едет по частям. Упорство всегда побеждает талант.
Кстати, а почему именно фуллстек?
Понимание разработки приложений в целом позволяет мне решать те задачи, которые мне действительно интересны.
Субъективно говоря, фронтенд-разработка — это какая-то неполноценная история, так же как и наоборот.
Под фуллстеком я понимаю комплексную разработку приложения.
Я слышал, что в биг техе существует похожее видень.
)Английский язык?
Yep.
Несколько новых фреймворков с новой философией? Несколько обновлений старых без обратной совместимости? Новый мощный рантайм? С десяток новых свойств CSS? Легко. И все это на одной неделе.
Держи руку на пульсе и не верь обещаниям. Этот путь будет о балансе между градом хайпа новых решений.
IDE - VSCode. Со старта установи плагин Prettier. Изучите шорткаты.
Начнем с базы?
HTML - абсолютно основа. Очень просто. Это язык разметки.
Берем любой курс + курс от фрикодкемп.
Например - + курс тренажер от freecodecamp
Если нужна красота - делаем на секциях * на accessibility. Если нужна скорость делаем как делается.
На этом этапе будет полезно поверхностно ознакомиться с SEO. Также следует познакомиться с Emmet.
CSS.Насколько простая идея на первый взгляд, настолько же разражающая на дальнейших взаимодействиях.
Не существует фреймворк решения, которое инкапсулирует знания базового CSS. Любой фреймворк требует от вас знания CSS!
В тоже время в CSS достаточно много ‘легаси’ (float, например), будьте осторожны со старой информацией.
Важно понимать несколько ключевых концепций.
Все есть блоки. Блочная модель. Элементы бывают блочные и строчные. Запомните: в CSS всё - блоки! Вот прям установи себе на рабочий стол картинку и увидь все в блоках.
Flexbox. Флексы это центровка по осям X и Y. Отличная игра - https://flexboxfroggy.com/
Grid. Это сетка. Центровка в формате сетки. Игра - https://cssgridgarden.com/
Дополнительно можно узнать о BEM - Документация BEM
На этом этапе, можно потратить пару недель на верстку. Познакомимся с Фигмой. Поискать макеты. А лучшее выбрать сайт который нравится, и повторить верстку.
Также познакомиться с консолью. Вся верстка возвращается к нам в браузер.
(Не самый лучший курс, но лучший из того что нашел)
Дизайн.Поскольку это не о дизайне статья, дам всего одну рекомендацию - осознанность в тенденциях развития современных приложений. Понимание тенденций и повторения их.
Гитхаб.Изучи GitHub. Любая проблема уже была решена до тебя, помнишь? Научись искать на GitHub.
Интересная тема - гитхаб дорки. Они помогут тебе в будущее не сливать конфиденциальные данные.
Git - это технлогия для командной разработки. Командной. Она прейдет с практикой работы в команде.
Отличный курс Отличная игра (есть ru версия)
Первый большой выбор - Выбор языка. И ты должен сделать его сам.
Я выбрал JavaScript.
На данный момент это самый популярный язык в мире (учитывая, что TypeScript обычно сепарируют в рейтингах и он занимает 5-7 позицию) PHP теряет позиции, и если посмотреть на рейтинги зарплат, то он будет на самом дне (речь идет о зарубежных топах).
Однако важно понимать, что в мире существует множество проектов на PHP, которые генерируют миллиарды долларов. Да что там, данный форум, насколько я знаю, использует PHP.
Скажу несколько слов о книгах. Внезапно, это просто буквы на бумаге. Они могут устаревать, быть плохо написанными или быть излишне огромными.Порой курсы бывают лучше книг.
Зачастую документация превосходит курсы.
Всегда важна практика поверх всего.
В конце я оставлю список нескольких отличных книг, а также отмечу некоторые по ходу. Однако стоит помнить, что не существует одной книги, которую можно прочитать, чтобы узнать все.
Несколько моментов, которые хочу уточнить.ES6 - это всего лишь большое обновление в JS. Они выходят каждый год. Это просто часть языка.
Node JS (или уже Bun?) - это рантайм (локация, среда выполнения), который предоставляет возможность запускать JS вне браузера.
TypeScript - это надмножество JavaScript, то есть он включает в себя все возможности JavaScript, а также добавляет некоторые дополнительные функции.
Это все JavaScript. Не что-то иное.
JavaScript начинаем изучать с курса Удивительным образом этот курс избегает действительно сложных концепций, но за счет этого строит базовое понимание происходящего.
Далее идем на сайт - https://learn.javascript.ru/ и проходим его полностью, прорешивая все задачи, каждую. Второй и третий разделы частично устарели, но все, что касается JS, прекрасно.
После этого изучаем самые ключевые особенности языка. Можно использовать книгу Флэнагана (Javascript: The Definitive Guide). Также можно изучать темы из книги 'Вы не знаете JavaScript' (второе издание, то, что найдете на русском – первое).
Ключевые темы включают в себя: scope, this, замыкания, call/apply, стек, event loop, объекты, new, прототипное наследование, асинхронность (Promise API, Async/await), модули, fetch.
В тот момент, когда утка крякает в ответ на вопрос о том, все ли понятно, делаем перерыв и переходим к следующей теме)
Используем ли мы GPT-модели при обучении?Да, мы используем GPT-модели.
Однако, что касается ML-типа Copilot, на первых этапах, пожалуй, не стоит.
Фронтенд фреймворк: React.
Сравниваем популярность React и конкурентов на сайте https://www.npmjs.com/ и не спрашиваем себя, какой фреймворк выбрать.
Также, выучив React, можно быстро перейти к мобильной разработке с использованием React Native.
Переход на Vue после React займет 2 недели, на Angular - 3-4 недели.
Ключевым элементом в современных фреймворках является компонентный подход. Все состоит из компонентов. Также важны концепция виртуального DOM и хуки.
Актуальный и лучший курс на данный момент -
Роутинг в React реализован отдельным пакетом, с ним все достаточно просто. Актуальный и лучший курс на данный момент
Если эти курсы уже утратили актуальность, есть одно правило - вам не нужны курсы продолжительностью 30, 40, 80, 120 часов на Udemy. Есть исключения, но в целом выбирайте курсы меньшей продолжительности.Кстати, npm это просто сайт с библиотеками для JavaScript. (*пакетный менжер)
Менеджер состояний
Redux - одна из концепций, которая сразу выбивала у меня почву из-под ног.В некоторых приложениях нам понадобится стор, в котором хранятся стейты. Стейт - это просто объект с данными, которые мы таскаем сквозь компоненты и взаимодействуем с ним. Но взаимодействие с ним может показаться перегруженным на первых порах. Все это очень упрощено.
Прочитайте какую-нибудь статью об этом - статья о редаксе
Далее просто практика. Понимание придет в процессе, много читать об этом не стоит.
Redux Toolkit - это современный способ работы с Redux (он вам и нужен), пакет react-redux необходим, если вы работаете с React - просто пакет. RTK Query необходим для асинхронной работы (с API).
Я выбрал Redux из-за его популярности, во-первых, и достаточно высокой сложности, во-вторых, после которой любой другой менеджер состояний будет более простым и понятным.
И да, вы можете не использовать менеджер состояний вообще и ограничиться тем, что есть из коробки. Но понимание этой концепции необходимо.
Из асинхронных стейт-менеджеров часто используется react-query (в настоящее время он называется TanStack Query), и это не то же самое, что redux-query
На этих этапах мы познакомимся с технологиями в мире CSS.SASS - популярный способ работы с CSS, включающий в себя миксины, наследование и калькуляции. Может понравиться, но мне не зашло.
Tailwind - грубо говоря, это возможность писать CSS в HTML. На персональных проектах это невероятно удобная, модная и классная штука. Действительно способна ускорить разработку. Документация по Tailwind
На самом деле тебе не нужно разрабатывать компоненты с нуля. Библиотеки компонентов спешат тебе на помощь. Осталось только выбрать из них.От старой доброй Bootstrap до Material UI. Отдельно выделю Shadcn UI.
На этом этапе можно немного узнать про сборщики. Настройка их конфигурации очень сильно зависит от задачи, сама идея крайне проста.
Классический вариант - webpack. Модный - Vite.
Линтеры. Идея также очень проста. Варианты настройки очень гибкие. Популярное решение сейчас - ESLint.
Тестирование. Особо углублятся я бы не рекомендовал, но познакомится с тем как это работает будет плюсом.Прекрасное видно от Улби
Тестирование JavaScript от А до Я (Jest, React Testing Library, e2e, screenshot)
Фреймворк Jest - https://jestjs.io/
Отлично, мы закончили фронтенд. Переходим к бекенду.Начнем с Node.js.
Для ознакомления с нодой и формированием представлений о том, что это такое, можно почитать - https://metanit.com/web/nodejs/. Однако следует отметить, что часть информации там может быть устаревшей.
Повторяем тему модулей. Повторяем Event Loop
И смотрим лучший курс по Node.js
Будет необходимо ознакомиться с основными протоколами, немного узнать, что такое клиент-серверная архитектура, узнать, что такое REST. Все эти темы собраны в этом курсе -
Full HTTP Networking Course – Fetch and REST APIs in JavaScript
🗄 NoSQL
Я же писал, что данный роудмэп построен на моих ощущениях реальности, верно?
NoSQL базы проще. Начать их использовать легче, чем SQL. Поэтому я ставлю их впереди SQL.
Изучаем сперва курс чтобы понять, о чем идет речь.
NoSQL Database Tutorial – Full Course for Beginners
NoSQL - это зоопарк решений. В видео используется Astra DB, но я рекомендую начать с MongoDB.
Лучший курс по MongoDB - это официальный курс - https://learn.mongodb.com/.
Работа с MongoDB в JavaScript осуществляется через библиотеку Mongoose - https://mongoosejs.com/.
Из NoSQL баз я также могу выделить Firebase, но я сам не работал с ней.
SQLНужно будет немного изучить теорию баз данных. Неплохой вариант
Database Design Course - Learn how to design and plan a database for beginners
Далее изучаем основы SQL - тренажер sql-academy
В плане СУБД проще всего будет начать с SQLite, но этот выбор зависит от вас.
Прокачать решать SQL задачи можно в рамках - leetcode-top-50-sql
После этого стоит познакомится с ORM - что такое ORM?
Для JavaScript популярными вариантами являются - TypeORM и Sequelize.
У нас уже есть всё, чтобы писать бекенд! Будем использовать самое популярное решение - Express. В целом, это просто фреймворк для написания бекенда, ничего сложного, просто практика.
Если чувствуете, что не хватает понимания, можно пройти курс, хотя мне он кажется избыточным по продолжительности -
Node.js and Express.js - Full Course
На этом этапе мы уже готовы разрабатывать комплексные приложения.
Посмотрите, как реализовывать то, что вам интересно, с помощью MERN Stack. Вы уже готовы, но лучше дойдем путь до конца. MERN Stack не лучшее решение.
Ух, куда в этом роудмапе впихнуть TypeScript — это вопрос. Кто-то скажет, что он должен идти в самом начале, но я оставлю его здесь.
Не существует единого мнения о TypeScript, истина в том, что де-факто это стандарт современной коммерческой разработки. Будут люди, для которых TS — излишний, перегруженный или даже ломающий логику JavaScript. Будут те, для которых жизнь навсегда изменится после добавления TS.
Правда также в том, что после TS остальные языки будут более понятными, поскольку TS делает JS более взрослым.
Использовать ли его в своих проектах на постоянной основе решать вам, главное не бойтесь применения.
Мне кажется хорошим способом познакомиться с TS будет книга “TypeScript быстро. Яков Файн Антон Моисеев.”, а также тренажер https://code-basics.com/ru/languages/typescript
Готовы? - Next.jsСамый простой способ разработки фуллстек приложений.
Теперь у нас встроенный и супер удобный роутинг, работа с SEO, возможность тут же писать бек, все это удобно собрать и даже удобно задеплоить на модный Vercel.
Хотя многое о Next.js - это серверные компоненты, но это большая тема.
То есть мы изначально могли начать с Next.js? Могли, но быть Next.js разработчиком довольно ограниченно, не так ли?
Лучший курс - Next.js 14 Full Course 2023 | Build and Deploy a Full Stack App Using the Official React Framework + документация
Немного возвращаемся к теории. На данном этапе важно изучить "аутентификацию". Выделю отдельно JWT токены:
Курс от Улби
Курс от FreeCodeCamp
Документация - jwt.io
Реализовывать аутентификацию можно разными способами.Поскольку в рамках данного роудмапа я привел вас к Next, то и библиотека будет NextAuth.
Из плюсов, она поддерживает авторизацию по OAuth.
Из модных, упрощенных решений выделю Clerk. Возможно, у такого подхода будет будущее, хотя отдавать такие штуки на аутсорс решения с очевидными минусами.
Возможно, на этом этапе вы поняли, что хотите больше прокачиваться в бекенде и реализовывать более комплексные проекты.
Фреймворк Nest.js спешит к вам - ссылка на сайт.
Хороший курс на Udemy, который они рекомендуют в своей же документации. На русском языке есть неплохой материал от Anton Larichev, хотя, частично, он устарел в плане технологий, а также уровень скорее для опытных разработчиков чем для новичков, ввиду того что автор не ставит своей целью подробно объяснить все аспекты.
Оба курса есть на рутрекере.
На этом этапе имеет смысл узнать немного больше о объектно-ориентированном программировании (ООП). До этого мы работали с функциональной парадигмой в React.
Есть много книг по ООП для тех, кто хочет глубже понять эту парадигму.
ООП на простых примерах. Объектно-ориентированное программирование
Пройтись по паттернам тоже не будет лишним, хотя, если что-то окажется непонятным, не стоит беспокоиться. С некоторыми из них вы еще не скоро встретитесь, а другие могут быть переосмыслены к тому времени.
За основу возьмите книгу "Head First Design Patterns" (второе или актуальное издание) и самостоятельно проработайте примеры на JavaScript.
Отдельно выделю MVC паттерн - видео MVC, MVVM Архитектура. Наглядная теория и примеры
Как писать код... Ухх, не знаю, есть ли смысл упоминать классическую историю про Чистый Код Мартина или Совершенный код МакКоннелла. Вместо этого предлагаю обратить внимание на:
- СтайлГайд Airbnb - https://github.com/airbnb/javascript https://github.com/airbnb/javascript
- clean-code-javascript - https://github.com/ryanmcdermott/clean-code-javascript
Далее, в плане бека, обратите внимание на gRPC. Там и до микросервисов будет рукой подать, и в целом выйти уже за пределы этого роудмэпа. Однако, прежде чем погружаться в микросервисы, станьте мастерами в монолитах.
Поскольку мы коснулись архитектуры, относительную популярность во фронте набирает FSD, так что имеет смысл ознакомится - официальный сайт.
Ну что, идем в большой мир? Готовы ли мы? Нет. Нам нужно научиться работать с Linux, а именно с терминалом.Берем виртуальную машину и устанавливаем туда любой дистрибутив. Затем используем его несколько недель для решения бытовых задач.
Смотрим курс
Introduction to Linux – Full Course for Beginners
Читаем книгу 'Командная строка Linux. Полное руководство' (2-е или актуальное издание).
Нашему маленькому приложению нужно где-то жить, и раз уж Next - красная нить roadmap'а, я начну с Vercel.
Деплой на Vercel Next-приложения до невозможности прост. Скачиваем CLI и вводим одну команду deploy (примерно так, точно посмотрите в документации). Минусы - мы привязаны к Vercel, и переехать будет сложно.
Деплой на рандомный VPS-сервис. VPS - это буквально ваш Linux на виртуалке, которым вы пользовались несколько недель, только он находится не у вас дома. Процесс деплоя будет сложнее, но это необходимые знания.
А далее мы хотим идти в ногу со временем, поэтому уходим от рандомного VPS-сервиса, например, на Amazon Web Services.
Невероятно продолжительный курс AWS Certified Cloud Practitioner 2023 | Full Training Course
AWS - это буквально десятки сервисов - топ 50+ и они постоянно добавляют новые - новые (видео вышло сегодня).
Где-то здесь мы знакомимся с Docker (это как маленькие линуксы с твоей виртуалки, только их много, и каждый отвечает за свою задачу) - Docker - Полный курс Docker Для Начинающих (этот курс поймет буквально любой)А также открываем для себя CI/CD - улби
️Ееее, мы ваще ребята.Только все эти знания не сделали нас разработчиками. Только проекты. Только практика. Практика, и еще немного практики.
В какой-то момент вам может показаться, что все знания в голове абсолютно не пересекаются между собой. В этот момент я рекомендую сделать несколько проектов, просто копируя код с YouTube.
Например, канал Code With Antonio
Программирование - это решение задач. Проекты. Практика.
Темы со *:
- Вы, вероятно, удивитесь, но на текущем этапе вы можете заняться десктоп-разработкой. Несмотря на то, что мой опыт разработки на ElectronJS скорее негативный, это не помешало создателям приложения Discord. Фреймворк - electronjs.org.
- Если вас интересует web3, то на форуме я видел roadmap, но начать можно с этого курса Learn Blockchain, Solidity, and Full Stack Web3 Development with JavaScript Сейчас хайп спал, но будет новая волна.
- Безопасность? В контексте веба начать изучение безопасности можно с портала - portswigger. Интересует больше? TryHackMe невероятно дружелюбен к новичкам. Пройдите сперва пару сотен бесплатных комнат - ‣ https://github.com/winterrdog/tryhackme-free-rooms.
- Алгоритмы. Ухх, нужны ли? Ты мне скажи. Однозначно прочти 'Грокаем алгоритмы' Адитья Бхаргава, если интересна тема исскуственного интелекта, то и 'Грокаем алгоритмы искусственного интеллекта' Ришала Харбанса. Немного за скоупом, прекрасная книга о рекурсий - The recursive book of recursion. Хочешь дальше? leetcode , только не стоит решать по порядку, а то будет каша в голове. Найди роудмпе по leetcode, например - roadmap от neetcode или возьми книгу Алгоритмы Кормена и читай главу и прорешевай задачи по ней.
- Регулярные выражения? Да. После прочтения книги 'Изучаем регулярные выражения. Форт Б.' все станет понятно. Они проще, чем тебе кажется.
- Криптография? Интересная тема. Начни с книги 'Сингх Саймон - Книга шифров. Тайная история шифров и их расшифровки'.
- Ну и раз уж мы гуляем, то я также порекомендую тебе книги Столярова.
Дополнительные рекомендаций:
- По поводу английского. Если все плохо. Начните с небольшого. Переведите все устройства. Начните смотреть контент с русскими субтитрами, а потом перейдите на английские, гуглите и общайтесь с GPT на английском.
- На каждый случай в жизни на GitHub существует awesome репозиторий, в котором есть буквально все о той технологии, которой он посвящен.
- Также, в целом, сейчас множество университетов выкладывают свои курсы в свободный доступ. Помните об этом. Курс Harvard CS50 2024 - база.
- По ходу статьи я часто вставлял видео с канала Улби. Помимо всего прочего, у него есть прекрасный курс. Я не буду делать рекламу, но найти его можно на зеленом YouTube. Хотя денег он стоит.
- Используй X(экс твиттер). Алгоритмы быстро окутят в бесконечность тематического контента и края современных технологий. Попробуй - #100DaysOfCode
- Используй https://chromewebstore.google.com/d...be-rec/khncfooichmfjbepaaaebmommgaepoid?pli=1 или аналогичное расширение, когда смотришь YouTube.
- Избегай Ада Туториалов. Будет достаточно тех курсов, которые указаны в данной статье. Подробнее о Tutorial Hell
- Больше роудмепов? roadmap.sh
Также хочу сказать:
- Get comfortable being uncomfortable
- Impostor syndrome абсолютная норма!
Удачи в убийстве дракона!