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

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

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

Получите хорошее представление об основных технологиях и концепциях Интернета.

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

Фундаментальные технологии

Под этим я имею в виду технологии, вокруг которых будет развиваться ваша повседневная работа. Для фронтенд-разработчика этими технологиями в первую очередь будут HTML, CSS и JavaScript. Чем больше вы будете знать об этих трех, тем лучше.

Даже такая технология, как CSS, которая технически не является языком программирования, по-прежнему очень полезно знать, особенно когда речь идет о более сложных концепциях, таких как Flexbox, Grid и более новых функциях.

Основные концепции

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

Освойте JavaScript и изучите его передовые концепции

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

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

Изучите современный фреймворк JavaScript

Здесь я должен подчеркнуть, что чем больше вы знакомы с JavaScript, тем легче будет подобрать современный фреймворк / библиотеку. Так что не спешите изучать React или Angular, пока вы не разберетесь в самом JavaScript.

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

Вы обязательно захотите подобрать хотя бы один фреймворк / библиотеку. Я бы выбрал React, так как он сегодня самый популярный и достаточно зрелый. Однако Vue.js - неплохая альтернатива.

Узнайте, как работает Интернет

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

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

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

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

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

Если вы уже изучаете JavaScript, попробуйте изучить NodeJS и Express, чтобы хотя бы почувствовать бэкэнд и его суть.

Изучите основы UI / UX

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

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

Знание того, что такое хороший пользовательский опыт, может быть очень полезным. В конце концов, разработчик во многих случаях будет иметь большое влияние на то, как должны быть реализованы определенные функции. Следовательно, чем больше разработчик знает о принципах UI и UX, тем полезнее станет программное обеспечение.

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

В этой теме я бы порекомендовал книгу «Не заставляйте меня думать», в которой подробно рассказывается о юзабилити и доступности Интернета.

Контроль версий (Git)

Каждый профессиональный программный проект использует систему контроля версий. Часто это будет Git, и вам нужно хотя бы понять основы. Узнайте, что такое репозиторий, как использовать такую ​​платформу, как GitHub или GitLab, как создавать, проверять и публиковать ветки, а также размещать, фиксировать и отправлять код и т. Д.

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

Модульное тестирование

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

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

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

Структуры данных и алгоритмы

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

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

Заключительные слова

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

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

Больше контента на plainenglish.io