10 трендов для Frontend-разработчика в 2020 году

65 просмотров

Вступление

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

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

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

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

1. Дуэл фрэймворков React и Vue

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

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

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

На нашем ресурсе вы сможете бесплатно познакомится с этими потрясающими фрэймворками:

ReactJS
Vue.js

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

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

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

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

Next (на основе React)
Nuxt (на основе Vue)
Gatsby (React-based)
Gridsome (на основе Vue)


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

Next.js

Nuxt.js

Gatsby

Gridsome

3. JAMstack

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

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

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

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

Весь проект на CDN

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

Всё живёт на Git

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

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

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

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

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

Мгновенное аннулирование кэша

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

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

JAMstack

4. PWA

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

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

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

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

5. GraphQL

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

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

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

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

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

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

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

GraphQL

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

Как и в 2019 году, VS Code от Microsoft станет редактором номер один для большинства web-разработчиков в 2020 году.

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

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

  • npm 
  • jаvascript (ES6) code snippets
  • Prettier
  • CSS Peek 
  • ESLint
  • Vetur
  • Live Sass Compiler
  • Debugger for Chrome
  • Live Server
  • Beautify

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

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

Код без тестов – это плохо.

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

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

  1. Модульные тесты
  2. Тестирование отдельного компонента или функции в отдельности.
  3. Интеграционные тесты
  4. Тестирование взаимодействия между компонентами.
  5. Сквозное испытание
  6. Тестирование полноценных пользовательских потоков в браузере.

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

8. Чистый код

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

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

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

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

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

9. Git

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

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

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

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

Основы GIT и GitHub

10. Гибкие навыки

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

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

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

Вывод

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

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

Переведено с сайта medium.com

0 комментариев

Информация

Посетители, находящиеся в группе Незарегистрированные, не могут оставлять отзывы к данному курсу.