Поддержка  •  Дневник  •  Без рекламы  •  О сайте  •  Реклама  •  Поставить баннер  •  Fleshlight  •  Прислать  •  Хроника  •  Translate Гости: 7    Участники: 0 Авторизация Авторизация   Регистрация 
Метод Научного Тыка
Поиск  
Blackball iMag | интернет-журнал
Размещение рекламы
Разделы


Реклама
Начало » Разработка ПО » Что должен уметь Frontend разработчик в 2023 году (+Roadmap)

Что должен уметь Frontend разработчик в 2023 году (+Roadmap)


Что должен уметь Frontend разработчик в 2023 году (+Roadmap)
Добавлено: Пн 13.03.2023 (Sergeant)
Автор: Данила Маврин
Источник: источник
Просмотров: 317
Комментарии: 0


Ситуация на рынке IT

С каждым годом войти в IT становится всё труднее. За счёт высоких зарплат, комфортного образа жизни, амбиций, потребности в специалистах, сейчас чуть ли не каждый второй хочет стать программистом. За счёт этих факторов, рынок труда в IT перенасыщается, из-за чего потребности в навыках специалистов тоже выросли. Теперь от разработчиков даже требуют уметь программировать, я знаю, это ужасно...

Это не говорит о том, что сейчас в IT идти смысла нету, этот факт лишь говорит о том, что повысилась конкуренция. Я лично считаю, что такая ситуация наоборот благосклонно влияет на весь мир в целом, так как конкуренция порождает прогресс. А для вас это дополнительный стимул стать еще более востребованным специалистом и сильной личностью.

Как развиваться (Roadmap)

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

В связи с быстрыми темпами развития IT-технологий, каждый год появляется что-то новое, а что-то наоборот укрепляет свои позиции. В этой статье я подготовил для вас дорожную карту для развития себя, как разработчика интерфейсов. Сведения я собрал со многих источников, курсов и моих личных убеждений и опыта, как трудоустроенного Frontend разработчика.

Beginner (Новичок)

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

Здесь важно выделить, что эти знания - максимальная база. Вы навряд-ли сможете трудоустроиться с этими знаниями, но это даст толчок в развитии.

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

  1. Что такое TCP/IP, из каких уровней состоят и какие протоколы содержит. (В частности Ethernet, IP, UDP, TCP, HTTP1/2/3)
  2. Что такое HTML. Базовые элементы разметки. Семантика SEO-оптимизация и доступность.
  3. Что такое CSS. Базовые свойства стилизации. Позиционирование элементов макета. Flexbox. Grid. Адаптивность посредством составления @media запросов. Анимации и трансформации. Псевдоэлементы и псевдоклассы. Методология БЭМ.
  4. Основы языка программирования JavaScript. Типы данных. Циклы, Условия, Работа с объектами. Функции. Прототипы и наследование. Работа с объектами. Методы массивов.
  5. Выбрать редактор кода. Я лично из своего опыта рекомендую Visual Studio Code или WebStorm (платный).

Trainee (Стажёр)

Если вы знакомы с понятиями описанными выше, вы можете переходить к следующему этапу - Trainee.

Изучив технологии, описанные в данном разделе, вы уже имеете какой-никакой вес в IT мире и даже сможете устроиться на стажировку в IT-компанию.

Стажёр должен быть знаком со следующим перечнем технологий:

  1. Уметь работать с браузерным окружением и DOM (Document Object Model). Браузерные события. Обработка ошибок (Try/Catch). Пользовательские ошибки. ООП. Модульная система. Экспорт и импорт. Динамические импорты. Web API.
  2. Что делает JavaScript асинхронным. Что такое Event Loop. Микро и макро задачи. Промисы. Fetch API. Синтаксический сахар - Async и Await.
  3. Что такое DNS-зоны и домены. Cross-Origin Resource Sharing (CORS). Preflight Requests. No-CORS mode. Request & Response Headers.
  4. Что такое линтеры. Настройка ESLint и подключение плагинов. Настройка Prettier и Stylelint. Pre-commit Check.
  5. Как работает система управления версиями (Git). Регистрация на GitHub. Коммиты. Репозитории. Форки. Merge Requests. Checkout. Ветки.
  6. Что такое Node.js. Как работает менеджер пакетов Npm. package.json и package-lock.json. npm install, npm uninstall. Dependencies & Development Dependenices. Создание своего пакета.
  7. Что такое препроцессор. SASS и SCSS. Переменные. Импорты. Вложенность. Модули. Миксины.

Junior (Младший разработчик)

Изучив следующий перечень технологий, по моему опыту, вы уже можете стать младшим разработчиком в IT-компании:

  1. Что такое сборщик модулей. Babel. Настройка Webpack. Правила. Модули. Плагины. DevServer. Переход к Vite.
  2. Что такое React и какие проблемы он решает. Жизненный цикл компонентов. Особенности виртуального DOM-дерева. React компоненты. Базовые хуки и разработка собственных. React Portals. React Refs. JSX синтаксис. Props & State.
  3. Особенности FLUX архитектуры. Reducers. Actions. Хук useContext. Redux и Redux Toolkit. Redux Thunk. RTK Query. (По желанию можно изучить MobX и/или Zustand)
  4. Что такое роут. Из чего состоит объект Location. Как манипулировать историей сессии через History. Библиотека React Router.
  5. Как повысить эффективность стилизации. Что такое PostCSS. Плагин CSS Modules. Библиотека TailwindCSS. Что такое UI библиотека. MUI. Ant Design.
  6. Что такое VPS/VDS. Базовые команды терминала Linux систем. Права доступа. Ununtu. Nginx. Базовая настрока веб-сервера. SSH. Ассиметричное шифрование.
  7. Что такое CI/CD. Интеграция. Доставка. Развертывание. Структура и настройка. Пайплайны. Артефакты. Этапы. Переменные.

Middle (Средний специалист)

Если вы изучили все предыдущие темы, по моему мнению, вы уже можете называть себя Junior Front-end Developer. Но на этом останавливаться рано.

Чтобы вырасти до Middle Front-end разработчика, вам необходимо изучить следующий перечень технологий:

  1. Что такое TypeScript и какие проблемы он решает. Интерфейсы. Типы. Дженерики. Enum. Интеграция с технологиями. Типизация React-приложения.
  2. Что такое авторизация? Идентификация. Аутентификация. Методы аутентификации. Bearer Token. JWT. Защита роутов. Протокол OAuth. Интеграция с сервисами.
  3. Что такое оффлайн. Как работают Web & Service Workers. Регистрация сервисов. Жизненный цикл Service Worker'ов. Cache API. Методы Cache API. Как кэшировать выборку запросов.
  4. Что такое PWA (Progressive Web Application). Надежность. Быстрота. Привлекательность. Favicon. Настройка Manifest'а.
  5. Как настроить доступность приложения. Что такое Screen Readers и Voice Over. Доступность с клавиатуры. Библиотека Focus Trap. Семантика. Анализ доступности через Lighthouse.
  6. Как локализировать приложение. Объект navigator. Intl. Плюрализация и Интернационализация. Библиотека l18next. Localazy.
  7. Что такое Next.js и какие проблемы он решает. Что такое SSG, SSR, ISR и в чем между ними разница. Роутинг Next.js приложения. Оптимизация. SEO.
  8. Почему тормозят сайты. Основные метрики Web Vitals. Анализ производительности. Методы оптимизации. Tree Shaking. React.lazy и React.Suspense. Как браузер рисует страницы. Layout. Paint. Compose. Rendering Pipeline. Парсинг HTML и CSS. Объединение DOM и CSSOM. Render-дерево. Мемоизация. useMemo и useCallback. Оптимизация изображений. Houdini Paint API.
  9. Из чего состоит тестирование приложений. Мониторинг ошибок. Sentry Service. Что такое E2E, Unit и интеграционное тестирование. Пирамида тестирования. Библиотека Jest. Таймеры Jest. Мок-функции. TDD. Тестирование React-приложения через React Testing Library. Методы поиска элементов на странице. Тестирование событий. E2E тестирование с помощью Cypress.

Senior (Старший разработчик)

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

GraphQL, Apollo, PostgreSQL, Fastify, Vue, Angular, Svelte, Remix, Astro, React Native, Relay Modern, Redux Saga, Web 3.0

Это лишь часть того, что вы можете изучить и это лишь то, что относится к Front-end разработке. После изучения всех вышеописанных технологий, вы можете идти в Full-stack разработку или же в другую специализацию в целом. Главное, чтобы вам нравилось то, чем вы занимаетесь.

Заключение

Как вы поняли по этой статье, путь в IT совсем не легкий и требует много времени. Этот путь отнюдь не простой и быстрый. Скорость развития зависит напрямую от вас и вашего стремления. В моём окружении есть мидлы, которым по 18-19 лет. Вы должны посвятить этому свою жизнь. Сделать работу частью себя. Вы должны получать кайф от своей работы. В любом случае, попробовать стоит, возможно в этом вы найдёте себя.



Мне нравится 0    Мне не нравится 0


Комментарии

Чтобы добавить видео с YouTube, нужно написать [@youtube=xxxxx] , где xxxxx – ID видео.


Комментарии: 0
Нет ни одного комментария.
RSS-лента
Поделиться ссылкой:
Реклама

Новое
Асинхронный JavaScript: изучаем Async/Await, Callbacks и Promises Пн 15.05.2023
Асинхронный JavaScript: изучаем Async/Await, Callbacks и Promises
Свинина, запеченная в духовке: 20 быстрых и вкусных рецептов Сб 13.05.2023
Свинина, запеченная в духовке: 20 быстрых и вкусных рецептов
Коктейли с абсентом Пт 12.05.2023
Коктейли с абсентом
Усилитель для наушников — зачем он нужен и как выбрать? Ср 10.05.2023
Усилитель для наушников — зачем он нужен и как выбрать?
101 вопрос, на которые должен ответить Python-разработчик Пн 08.05.2023
101 вопрос, на которые должен ответить Python-разработчик
10 рецептов вкусных свиных ребрышек в духовке Сб 06.05.2023
10 рецептов вкусных свиных ребрышек в духовке
Обзор тёмного рома Пт 05.05.2023
Обзор тёмного рома
Что такое омега-3 ПНЖК и для чего они полезны? Ср 03.05.2023
Что такое омега-3 ПНЖК и для чего они полезны?
Остановись, мгновенье. Медленное программирование — тренд для уставших разработчиков Пн 01.05.2023
Остановись, мгновенье. Медленное программирование — тренд для уставших разработчиков
10 острых соусов на любой вкус Сб 29.04.2023
10 острых соусов на любой вкус
Книги
Как пасти котов Вт 02.05.2023
Как пасти котов
Год: 2016
Кодеры за работой Чт 27.04.2023
Кодеры за работой
Год: 2011
Приемы объектно-ориентированного проектирования. Паттерны проектирования Вт 25.04.2023
Приемы объектно-ориентированного проектирования. Паттерны проектирования
Learning React Чт 20.04.2023
Learning React
Год: 2020
JavaScript Everywhere Вт 18.04.2023
JavaScript Everywhere
Год: 2020

Реклама
Разработано на основе BlackNight CMS
Release v.2023-05-13
© 2000–2023 Blackball
Дизайн & программирование:
Sergeant Центр Связи с Админом Skeleton
О сайтеРеклама
Web-site performed by Sergey Drozdov
BlackballРекламаСтатистика | МузыкаПлейлистыКиноВидеоИгрыАудиоПрограммыСтатьиКартинкиЮморФорумДневник сайтаПрислать контент