Как сделать карьеру инженера в следующем году

Этот пост был первоначально опубликован на The Smart Coder.

Вступление

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

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

Последние пару лет принесли нам потрясающие новые библиотеки и фреймворки, такие как ReactJS, VueJS и Svelte, использующие JavaScript для поддержки основных веб-приложений.

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

1. Рамки

В 2020 году мы, вероятно, увидим дуэль между ReactJS Facebook и управляемым сообществом VueJS. В настоящее время React имеет 140 000 звезд на GitHub, а Vue отмечен еще больше - 153 000 звезд. У Angular, например, всего 53000 звезд.

Объем поиска в 2019 году для React (синяя линия), Vue (красная линия), Angular (желтая линия) и Svelte (зеленая линия) подтверждает это предположение - при этом Vue немного выше React. Angular не может угнаться за объемом поиска, и Svelte не играет в этом сравнении абсолютно никакой роли.

Таким образом, в 2020 году фронтенд-разработчики, работающие или желающие работать с фреймворками JavaScript, должны сосредоточиться на React и Vue в качестве основного выбора. Angular - подходящий вариант, если вы работаете над крупными корпоративными проектами.

Если вы хотите узнать больше об этих фреймворках, ознакомьтесь с этими замечательными ресурсами:

2. Генераторы статических сайтов

Генераторы статических сайтов сочетают в себе возможности рендеринга на стороне сервера (что очень важно для SEO, но также и время начальной загрузки) и одностраничных приложений.

Многие проекты в наши дни выбирают SSG, даже если им не нужен рендеринг на стороне сервера, потому что такие решения, как Next или Nuxt, поставляются с удобными функциями, такими как поддержка уценки, сборщики модулей, интегрированные средства запуска тестов и т. Д.

Если вы серьезно относитесь к фронтенд-разработке, вам следует внимательно изучить следующие проекты и попытаться получить от них практический опыт:

  • Далее (на основе React)
  • Nuxt (на основе Vue)
  • Гэтсби (на основе React)
  • Gridsome (на основе Vue)

Вероятно, они будут самыми популярными в 2020 году, хотя их гораздо больше. Ознакомьтесь с этими ресурсами, если хотите узнать о них больше:

3. JAMstack

Термин JAMstack означает JavaScript (выполняется на клиенте, например, React, Vue или VanillaJS), API (серверные процессы абстрагируются и доступны через HTTPS через JavaScript) и разметка (шаблонная разметка, которая предварительно создается во время развертывания).

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

Хотя эти термины сами по себе не новы, все они имеют одно общее - они не зависят от веб-сервера. Таким образом, монолитное приложение, использующее серверную часть Ruby или Node.js или сайт, построенный с помощью серверной CMS, такой как Drupal или WordPress, не создается с помощью JAMstack.

Если вы хотите работать с JAMstack, есть несколько рекомендаций:

Весь проект обслуживается в сети CDN

Поскольку сервер не требуется, весь проект может обслуживаться через CDN, обеспечивая непревзойденную скорость и производительность.

Все живет в Git

Каждый должен иметь возможность клонировать весь проект из репозитория Git без необходимости в базе данных или сложной настройке.

Автоматические сборки

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

Атомное развертывание

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

Мгновенное отключение кеша

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

Хорошо известные хостеры, такие как Netlify или Zeit, поддерживают приложения JAMstack, и крупные корпорации используют их, чтобы предоставить своим пользователям отличный опыт.

Это определенно то, о чем вы, как интерфейсный разработчик, захотите познакомиться в 2020 году. Если вы хотите узнать больше о JAMstacks, вот несколько отличных ресурсов:

4. PWA

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

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

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

Причины создания прогрессивного веб-приложения, например:

  • Может быть добавлен на главный экран пользователя из браузера
  • Работайте, даже если нет подключения к Интернету
  • Поддержка push-уведомлений через Интернет для повышения вовлеченности пользователей
  • Воспользуйтесь функциями Google Lighthouse

Если вы хотите узнать больше о PWA, ознакомьтесь с этими дополнительными ресурсами:

5. GraphQL

GraphQL - одна из самых горячих тем на данный момент, и вам, безусловно, стоит изучить или улучшить ее в 2020 году.

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

GraphQL был разработан Facebook для решения конкретных проблем, с которыми сталкиваются разработчики при работе с Restful API.

С помощью REST API разработчики будут собирать данные, извлекая их из нескольких конечных точек, которые были созданы с определенной целью, например, конечной точки /users/<id> или конечной точки /tours/<id>/location.

Используя GraphQL, это будет работать по-другому. Разработчики отправили бы запрос на сервер GraphQL со своими требованиями к данным. Затем сервер вернет объект JSON со всеми соответствующими данными.

Еще одно преимущество использования GraphQL - это сильная система типов. Все на сервере GraphQL определяется через схему с использованием языка определения схем GraphQL (SDL). После создания схемы как интерфейсные, так и внутренние разработчики могут работать совершенно независимо друг от друга, поскольку они знают об определенной структуре данных.

Если вы хотите узнать больше о GraphQL, ознакомьтесь с этими замечательными ресурсами:

GraphQL

Как работать с GraphQL

« Начало работы с GraphQL Content API »

« GraphQL: язык запросов данных »

6. Редакторы кода / IDE

Как и в 2019 году, VS Code от Microsoft станет редактором номер один для большинства интерфейсных инженеров в 2020 году.

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

Торговая площадка, в частности, делает VS Code таким замечательным. Вот несколько отличных расширений для вас как для интерфейсного разработчика:

  • Фрагменты кода JavaScript (ES6)
  • npm
  • Красивее
  • CSS Peek
  • Ветур
  • ESLint
  • Живой компилятор Sass
  • Отладчик для Chrome
  • Живой сервер
  • Украсить

Вот несколько довольно интересных примеров. В VS Code есть еще много чего нового, поэтому я рекомендую вам попробовать, если вы еще не используете его.

7. Тестирование

Никакой непроверенный код не должен попадать в рабочую среду.

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

Можно различать такие тестовые случаи, как:

Модульные тесты

Изолированное тестирование отдельного компонента или функции.

Интеграционные тесты

Тестирование взаимодействия между компонентами.

Сквозное тестирование

Тестирование полноценных пользовательских потоков в браузере.

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

8. Чистый код

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

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

Вот некоторые вещи, которые должен сделать разработчик чистого кода:

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

Если вы хотите узнать больше о проверке чистого кода, прочтите книги и сообщения Роберта К. Мартина.

9. Git

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

Вот несколько популярных команд Git, которые вам следует знать:

  • git config
  • git init
  • git clone
  • git status
  • git add
  • git commit
  • git push
  • git pull
  • git branch

Хотя всегда полезно знать эти команды для повышения производительности, интерфейсные инженеры также должны изучить фундаментальные концепции, лежащие в основе Git. Вот несколько ресурсов для вас:

10. Мягкие навыки

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

Хотя это помогает понять техническую сторону вещей, не менее важно знать, как общаться в команде. Если вы серьезно относитесь к карьере в сфере технологий и / или планируете перейти на руководящую должность, вам следует поработать над следующими мягкими навыками:

  • Сочувствие
  • Коммуникация
  • Командная работа
  • Доступность и готовность помочь
  • Терпение
  • Непредубежденность
  • Решение проблем
  • Подотчетность
  • Креативность
  • Тайм-менеджмент

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

Заключение

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

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