HTML5 & CSS3
HTML5 и CSS3 – это фундаментальные технологии, без знания которых не обойтись ни одному веб-разработчику. С помощью языка гипертекстовой разметки HTML создается разметка (каркас) каждой интернет-страницы. Затем язык стилей CSS преображает сайт и придает ему привлекательный и эффектный внешний вид. Помимо этого, необходимо владеть:
- кроссбраузерной адаптивной версткой, чтобы уметь создавать сайты под мобильные устройства, планшеты и широкоформатные экраны и для различных браузеров;
- семантической версткой для повышения качества разметки и улучшения поисковой индексации сайта;
- валидной версткой, которая предполагает полное соответствие кода разработчика всем стандартам W3C – организации, которая создает и внедряет технологические стандарты для World Wide Web.
Flex и Grid CSS
Технологии вёрстки надежных адаптивных веб-страниц, которые позволяют легче создавать динамические сайты и удобнее структурировать их содержимое.
CSS-препроцессоры
CSS-препроцессор — это программа, которая имеет свой собственный синтаксис, но может сгенерировать из него CSS-код. Чаще всего в вакансиях встречаются SASS, SCSS, Stylus, LESS. Препроцессоры предназначены для:
- ускорения процесса написания кода;
- упрощения чтения кода и дальнейшей его поддержки;
- минимизации рутинной работы при написании кода.
Для повышения эффективности написания CSS-кода вполне достаточным будет изучение лишь одного препроцессора, но в вакансиях часто встречаются сразу несколько.
Git & GitHub
Git — наиболее популярная система контроля версий, которая позволяет вести историю разработки проекта с возможностью доступа к каждой сохраненной версии.
Помимо этого, стоит уметь работать с сервисом онлайн-хостинга проектов, использующих систему контроля версий. В данном случае это GitHub. В тандеме с Git он позволяет разработчикам сохранять свой код онлайн, а затем взаимодействовать с другими разработчиками в разных проектах.
Данные системы позволяют команде программистов работать над одним проектом одновременно, сохраняя внесенные изменения, а также отслеживать выполнение задач каждым членом группы.
Знания о веб-технологиях и сети интернет
Чтобы качественно выполнять свою работу, фронтенд разработчик должен разбираться в вебе и понимать принципы его функционирования. Таким образом, необходимо знать:
- как работает интернет;
- протоколы HTTP/HTTPS, веб-сокеты;
- как работают браузеры;
- что такое DNS и как он работает;
- что такое доменное имя;
- что такое хостинг.
JavaScript
Язык программирования, который используется как при разработке клиентской стороны веб-приложения, так и серверной. При помощи JavaScript (сокращенно — JS) можно писать даже настольные и мобильные приложения, используя определенные программные платформы и библиотеки. Этот язык позволяет:
- динамически изменять разметку;
- осуществлять интерактивное взаимодействие с пользователем;
- анимировать изображения;
- совершать валидацию форм;
- управлять мультимедиа и т. д.
Другими словами, JavaScript “оживляет” страницу и добавляет ей функциональности. Хорошее владение данным языком программирования является обязательным для каждого FrontEnd разработчика.
JavaScript использует официальный стандарт ECMAScript (сокращенно - ES), который подразумевает определенное формальное описание синтаксиса, базовых объектов и алгоритмов. На данный момент существует множество различных версий ES. Работодатели чаще всего требуют знание ES6+.
JavaScript Core (DOM, AJAX, JSON)
DOM (Document Object Model) - объектное представление исходного HTML-документа. Ключевым является понятие DOM-дерева, которое описывает структуру страницы. С помощью объектной модели JavaScript получает полную власть над HTML-документом: возможность редактировать, удалять и добавлять элементы и атрибуты HTML, менять CSS код и т. д.
AJAX (Asynchronous JavaScript And XML) - это синтез технологий JavaScript и XML, который фактически представляет собой комбинацию:
- встроенного в браузер XMLHttpRequest-объекта (чтоб запрашивать данные с веб-сервера);
- JavaScript и HTML DOM (чтобы отображать или использовать данные).
AJAX позволяет веб-страницам совершать асинхронное обновление, обмениваясь данными с веб-сервером. Благодаря этой технологии страница не нуждается в перезагрузке - обновляется лишь конкретная ее часть (вспомните ленту новостей в социальных сетях).
JSON (JavaScript Object Notation) - это общий формат обмена данными. Позволяет совершать обмен информацией между программными продуктами, написанными на разных языках. Таким образом, клиент, использующий JavaScript, может легко передавать данные на сервер, который реализован с помощью Ruby/Java/PHP.
REST API
API – Application Programming Interface – это набор правил, при соблюдении которых программы могут взаимодействовать между собой. Разработчик создает API на сервере и позволяет клиентам обращаться к нему.
Красноречивым примером будет API от Google Maps, позволяющий веб-разработчику указать на гугл карте расположение определенного здания (точку выдачи интернет-заказов, офис компании и т. д.) на своем сайте. Таким образом, программист лишает себя необходимости самому разрабатывать собственную карту и пользуется уже готовым решением от Google, используя набор правил от API.
REST – Representational State Transfer – это архитектурный подход, регламентирующий, как именно API должны выглядеть. Этому набору правил должен следовать девелопер при создании собственного приложения. Простыми словами, REST – это обычный запрос вида «клиент-сервер» с использованием HTTP-протокола.
Фронтенд разработчику необходимо разбираться в REST API, поскольку эта технология используется везде, где необходимо работать с данными от сервера.
Алгоритмы и структуры данных
Понимание алгоритмов и структур данных (ADS, от Algorithms and Data Structures) — обязанность любого грамотного программиста.
К структурам данных относятся: стеки, очереди, связанные списки, графы и т. д. Изучив их, вы сможете управлять сложностью своих программ, делая их более доступными для понимания, а также разрабатывать высокопроизводительные программы, которые будут эффективно работать с памятью.
Знание алгоритмов позволит вам создавать сложные конструкции для эффективного решения широкого спектра задач. Когда говорят об алгоритмах, обычно имеют ввиду алгоритмы сортировки и поиска: сортировки прямым включением, прямым выбором, слиянием, пирамидальная, прямой поиск, бинарный, индексно-последовательный и другие.
Важно разбираться и в нотации Big O, которая описывает сложность каждого алгоритма. Данный механизм помогает определить, при каких условиях выгоднее использовать тот или иной алгоритм.
Отметим, что как новичку вам не нужно нырять вглубь этих тем. Будет достаточно:
- теоретического владения ADS;
- понимание, где какую структуру данных следует использовать;
- умение оценить сложность алгоритма (Time Complexity и Space Complexity);
- умение написать несколько алгоритмов (самые популярные алгоритмы сортировки и поиска).
Владение ADS поможет вам создавать более качественный и оптимизированный код. Кроме того, это усилит ваши позиции среди других кандидатов.
Webpack
Мощный сборщик модулей (bundler), позволяющий скомпилировать в один файл несколько различных компонентов: от .js и .css файлов до картинок, шрифтов и т. д. Используется для работы над объемными проектами и часто встречается в вакансиях. Оно и не удивительно – это самый популярный сборщик, как-никак.
npm
Node Package Manager – пакетный менеджер, который является крупнейшим в мире реестром программного обеспечения (согласно выдержке из официального сайта). Использует платформу Node.js и позволяет разработчикам со всего мира использовать уже готовые программные решения и распространять собственные на основе Node.js.
npm используют для управления зависимостями, то есть для установки, обновления и удаления тех пакетов (библиотек и инструментов), которые используются в вашем проекте. Незаменимая вещь для FrontEnd разработчиков, которой вы будете обязательно пользоваться.
Основы Figma
Figma является популярным дизайнерским инструментом для создания интерактивных прототипов приложений или веб-сайтов. С его помощью дизайнер создает дизайн, который фронтенд разработчик затем верстает с помощью HTML/CSS и добавляет интерактивность при участии JavaScript.
Знание основ фигмы позволяет девелоперу удобно взаимодействовать с дизайнерским прототипом: быстро узнавать необходимые размеры тех или иных элементов, производить экспорт картинок и иконок и т. д. Дополнительный плюс – возможность использования браузерной версии Figma.
Фреймворки и вспомогательные инструменты
Основные фреймворки JavaScript
Это инструменты, с помощью которых создаются динамические веб/мобильные/десктопные приложения на языке JavaScript. Они ускоряют разработку веб-приложений и предусматривают четко структурированную организацию кода, повышая его качество и чистоту.
Самыми популярными high-level инструментами для фронтенд разработки можно назвать фреймворки Vue.js, Angular и библиотеку React. Каждый из них предназначен для решения своего спектра задач и имеет различную степень сложности: Vue.js – самый легкий (но и с наименьшим сообществом), React – средней сложности, Angular – высокой сложности. Стоит сконцентрироваться на глубоком изучении одного фреймворка, но в то же время очень рекомендуется знать особенности и сферу применения всех вышеперечисленных технологий.
Какой фреймворк всё же выбрать? Мнения на этот счет расходятся. Инструментарий выбирается индивидуально под проект и трудно предугадать, какие задачи вам нужно будет решать. На данный момент наибольшей популярностью пользуется React, поскольку он сбалансирован как с точки зрения сложности, так и с точки зрения богатства функционала. К тому же, наибольшее количество вакансий припадает именно на эту библиотеку, а значит, что она интересна не только разработчикам, но и бизнесу.
TypeScript
Кроссплатформенный строго типизированный язык, который является расширением JavaScript. Строгая типизация позволяет уменьшить количество потенциальных ошибок в исходном коде, написанном на TypeScript. Также, этот язык реализует концепции, которые близки объектно-ориентированным языкам, таким как C#, Java и подобным. TypeScript повышает скорость и удобство написания сложных комплексных программ, вследствии чего их становится легче поддерживать, масштабировать и тестировать.
Инструменты управления состоянием программы (State Management)
Большие веб-приложения постоянно растут в сложности, а потому хранить данные, которые могут использоваться в разных местах становится все сложнее. Для решения этой проблемы были придуманы отдельные библиотеки, идущие параллельно с фреймворками — они служат для управления глобальным хранилищем данных всего веб-приложения и называются менеджерами состояний. Их применение уже стало стандартом во FrontEnd разработке. Для девелоперов, которые используют Vue.js, это VueX, для React-разработчиков — Redux и MobX, для Angular-девов — RxJS, NgRx.
Линтеры
Инструменты, позволяющие анализировать качество JavaScript-кода в соответствии со стандартом ES. Они встраиваются в среду разработки и указывают на наличие несоответствий стандарту кода, если таковые имеются. Данный механизм полезен как для единоличной разработки (для самоконтроля), так и для командной, когда каждый разработчик должен следовать тем же языковым конструкциям, чтобы на выходе получить единый, целостный проект. Один из самых известных линтеров – ESLint.
Это необязательный инструмент для работодателя, но он очень полезен для веб-разработчиков из-за его возможностей по контролю качества кода.
Тестирование
Jest и Cypress – главные инструменты модульного тестирования, которое возлагается на плечи разработчика. Но что это такое?
Unit тестирование (оно же — модульное тестирование) — процесс, который заключается в создании тестов для проверки работоспособности отдельных участков написанного программистом кода. Выполняется непосредственно автором кода.
Какую пользу приносит Unit тестирование:
- существенное сокращение багов в коде;
- упрощение рефакторинга кода;
- обеспечение качественного отделения интерфейса от реализации;
- лучшее понимание написанного кода;
- возможность протестировать мельчайшие участки кода.
Все инструменты учить не надо — достаточно научиться управляться лишь с одним из них.
SOLID
SOLID – это принципы, являющиеся своеобразным ремнем безопасности для тех, кто работает в соответствии с парадигмами объектно-ориентированного программирования. Они были созданы с целью обезопасить ООП-ориентированного разработчика от непонятного, запутанного спагетти-кода, который также очень трудно поддерживать.
SOLID – это акроним, состоящий из пяти букв, которые кодируют пять основных принципов:
- S – Single Responsibility Principle (принцип единой ответственности)
- O – Open-Closed Principle (принцип открытости-закрытости)
- L – Liskov Substitution Principle (принцип подстановки Барбары Лисков)
- I – Interface Segregation Principle (принцип разделения интерфейса)
- D – Dependency Inversion Principle (принцип инверсии зависимостей)
Владение этими принципами позволяет грамотно проектировать и разрабатывать такие программные системы, которые с большой вероятностью смогут длительное время развиваться, расширяться и поддерживаться.
Хотя SOLID принципы написаны преимущественно для ООП, их идеи вполне применимы и к современной JavaScript-разработке, что поможет фронтенд разработчикам создавать более чистый и лаконичный код.
