Что должен знать фронтенд разработчик джуниор, чтобы претендовать на хорошее местечко в какой-нибудь IT компании? С чего надо начинать учиться, чтобы хотя бы стать джуном?
В интернете можно встретить так называемые roadmap- интеллектуальные карты с перечислением всех необходимых знаний, в нужной профессии, и последовательностью изучения. Очень удобная схематическая подсказка, но слишком подробная, и это легко может запутать начинающего в IT.
Многие элементы этих карт становятся актуальными только в процессе профессиональной деятельности, а на начальном этапе только отвлекают от главного. Поэтому важно выделить основу, фундамент, на котором строится вся база Frontend разработки. Тот багаж знаний, который априори должен быть у фронтенд разработчика джуниора.
Про Soft и Hard скилы
Есть такое разделение профессиональных навыков в IT на Soft и Hard skills.
Hard(жёсткий)-навыки, которые требуются непосредственно для выполнения задачи. В случае фронтенда — это HTML, CSS, язык программирования JavaSript (а там и TypeScript, и CoffeeScript как его расширения), библиотеки и фреймворки для него, брузер и сеть, Git и Github. Наверное, сюда же следует отнести английский язык, потому что хороший разработчик — это разработчик со знанием английского, а кандидат в джуниоры со знанием английского – это на 60% джуниор.
Soft(мягкий)- дополнительные, можно сказать бонусные, типа коммуникабельности и тому подобного. Здесь рассматриваться не будут, потому как по-настоящему никого не интересуют, а если и заинтересуют, то они будут не приоритетными характеристиками специалиста.
Что должен знать фронтенд разработчик джуниор?
Браузер и сеть.
Нужно иметь четкое представление как работает интернет и как происходит взаимодействие между клиентом и сервером. Что такое IP, DNS (доменная сеть имён), протокол общения HTTP и его разновидности (HTTP2.0 и HTTPS), его структура и так далее.
Другими словами, надо понимать, как всё работает под капотом, когда после ввода доменного имени в адресной строке, в браузере отображается страница искомого сайта, что это не какая-нибудь магия, а чётко организованный и хорошо продуманный процесс. Чем глубже знания в этой области, тем проще понимать остальные аспекты профессии веб разработки.
Основы вёрстки: HTML и CSS
Вёрстка — это база Фронтенда. Разработчик должен знать как его приложение будет визуально отображаться на разных браузерах и устройствах, уметь управлять элементами контента и их расположением на странице.
Элементы HTML разметки формируют основные элементы веб-страницы: заголовок, меню (поисковый блок), основная информация (например статья с картинками) и так называемый подвал (нижний колонтитул). CSS (каскадная таблица стилей) позволяет стилизовать страницу, нарядить каркас, построенный HTML.
Для того чтобы правильно стилизовать элементы HTML разметки с помощью CSS, нужно хорошо понимать:
- что такое селекторы CSS
- относительные единицы измерения em и rem, какие из них и в каком случае лучше применить
- макеты CSS flex и grid и разница между ними
- медиа запросы CSS (управление стилями в зависимости от технических параметров устройства)
- responsive(отзывчивый) дизайн
- Препроцессоры CSS (Sass и Stylus)
Хороший специалист должен уметь делать так, чтобы страница была не просто привлекательной для посетителей веб- ресурса, но и могла сохранять свою привлекательность на разных устройствах.
JavaScript
Язык программирования JavaScript — это основа фронтенд разработки. HTML и CSS без JS – это просто вёрстка. Чтобы создавать функциональные, интерактивные веб приложения этот язык необходим.
JS очень функциональный язык и применяется не только во фронтенде, постичь все его нюансы можно только с опытом, но есть необходимый минимум, самое важное для фронтендера:
- Знание основ языка- синтаксис, типы данных, функции, объекты, массивы и т.д.
- Работа с DOM (Document Object Model)-умение манипулировать элементами на странице, добавлять и удалять их, изменять свойства и атрибуты
- Асинхронное программирование- своего рода многозадачность в программировании, когда задачи выполняются независимо друг от друга и не блокируют основной поток выполнения. Асинхронный код не дожидается окончания выполнения какой-то одной задачи, чтобы запустить следующую, он выполняет их одновременно, чем значительно увеличивает производительность и отзывчивость программ. Работа асинхронных функций, промисов и колбэков.
- Работа с событиями (действия, которые происходят в браузере или на веб- странице, например, щелчок мыши, нажатие клавиши на клавиатуре и т.п.), умение эти события корректно обрабатывать.
- Работа с AJAX-умение отправлять запросы на сервер и обрабатывать полученные данные
- Оптимизация производительности-понимание работы браузера, оптимизация загрузки страницы, уменьшение количества
запросов к серверу и т.д.
Пару слов о CoffeeScript и TypeScript
CoffeeScript и TypeScript-это языки программирования, которые преобразуются в JavaScript. CoffeeScript создан в 2009 году и отличается более простым и кратким синтаксисом для написания кода на JS. TypeScript- это расширение JS, которое добавляет статическую типизацию в JS, что значительно облегчает написание кода, при работе с большими проектами. TypeScript создан в 2012 году. Оба эти языка, по сути, упрощают работу и позволяют писать более понятный и более читаемый код, который в дальнейшем компилируется в стандартный JavaScript.
Библиотеки и фреймворки
Весь код веб-разработчика, в частности фронтендера, строится на использовании библиотек и фреймворков.
Библиотеки- наборы готового кода, которые содержат функции и классы, необходимые для решения тех, или иных задач. Используются как готовые решения, которые интегрируются в основной код, и этим обеспечивают во-первых: огромную экономию времени (особенно при выполнении крупных проектов), во-вторых: помогают избежать типичных ошибок при написании кода.
Например, популярная библиотека jQuery. Позволяет легко находить и изменять элементы на странице, обрабатывает события и отправляет запросы на сервер, создаёт анимации. Значительно упрощают работу с DOM и AJAX.
Фреймворки- каркас веб-приложения, набор инструментов, стандартов и библиотек, которые формируют общую архитектуру. Если библиотека интегрируется в основной код программиста, то в случае с фреймворком происходит что-то вроде обратного процесса- необходимый код встраивается в основной каркас приложения-фреймворк.
Самый популярный фреймворк в JS — это React. По каким-то причинам, официально он считается библиотекой, но имеет весь функционал и свойства полноценного фреймворка. React создаёт пользовательский интерфейс, создаёт масштабируемые приложения. Может работать совместно с другими библиотеками и фреймворками.
Для джуниора надо понимать в React как создавать компоненты, передавать запросы и использовать состояние, как работает жизненный цикл компонента и как обрабатывать события, полезным будет знать библиотеку Redux, которая управляет состоянием приложения в React.
Есть другие библиотеки и фреймворки, которые имеют свои преимущества и недостатки, в зависимости от поставленных задач. Наиболее распространёнными и стандартными для фронтендера джуниора, пока остаются React, jQuery, Redux.
Git и Github
В любом случае пригодится знать и уметь работать с Git и Github.
Git- система контроля версий, которая отслеживает изменения кода и управляет ими. Работает локально на компьютере разработчика, позволяет создавать локальные репозитории.
GitHub- онлайн хостинг для репозиториев Git, для общедоступного хранения проектов, с инструментарием для совместной работы, например, такого как запросы на слияние проектов (pull requests) и отслеживание задач (issues)
Фронтендер должен уметь:
- Работать в команде с другими разработчиками, уметь объединять текущие изменения, выявлять ошибки, откатывать изменённый код к предыдущим версиям.
- Управлять исходным кодом, делать бэкапы, хранить данные в удалённых репозиториях.
- Принимать активное участие в open source проектах, где Git является необходимым инструментом.
Таким образом, есть 5 необходимых технологий, на которых необходимо акцентировать внимание в первую очередь, если целью является трудоустройство в сфере фронтенд -разработки.
P.S.
IT – самое прогрессивное направление научного прогресса. Перспективы развития просто фантастичны. Классик сказал: «кто владеет информацией – владеет миром!». Тогда он просто ещё не знал, как далеко вперёд сможет шагнуть человечество и каких высот достигнут технологии работы с информацией.
Знать и уметь эффективно использовать информационные технологии – вот проездной билет в светлое будущее. Начни изучение уже сейчас, не теряй времени. Бесплатная библиотека «Слюнявый джун» — идеальное место для старта в профессию будущего. Здесь вы сможете познакомиться с структурированными, четко и доступно изложенными книгами по основам программирования.
Или посетите наш телеграмм-канал. В нём обучающие видеокурсы, лекции и статьи. Информация может быть не всегда самой актуальной, но всегда бесплатная.
Рады видеть Вас на своих ресурсах!
