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

Самое необходимое

Каким бы проектом вы не занимались, вам не обойтись без:

VSCode

Visual Studio Code — это, возможно, лучший редактор кода для фронтендера. Работать в нем очень просто, а вся функциональность интуитивно понятно. Практически все, что необходимо, предоставляется из коробки, а все остальное можно добавить с помощью плагинов. Отличная работа, Microsoft!

Prettier

Да, Prettier вам так же необходим, как и VSCode, ведь без него вы будете делать очень много ненужной и раздражающей работы. Автоматическое форматирование кода экономит массу времени и нервов.

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

Совет

Чтобы код форматировался при сохранении, просто добавьте в корневой каталог в файл .vscode/settings.json следующие инструкции:

{
   "editor.formatOnSave": true,
   "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode",    
   },
   "prettier.requireConfig": true
}

Еще лучше

Next.js

Вряд ли нужно вам рассказывать о Next.js. С самого начала он продвигал концепцию «изоморфного JavaScript», и до сих пор продолжает поражать бесконечными инновациями.

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

Совет

Запустите команду npx next lint и используйте правила ESLint для Next.js. В сочетании с Prettier это обеспечит максимальное качество вашего кода.

Tailwind CSS

Если вы все еще думаете, что вам не нужен никакой инструмент для вашего UI, подумайте еще раз! Tailwind — это не обычная библиотека компонентов, это полноценный CSS-фреймворк, который может кардинально изменить вашу жизнь.

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

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

Vercel

Если вы перепробовали всех провайдеров облачных сервисов и множество инструментов CI, но так и смогли найти идеальное решение, попробуйте Vercel!

Просто укажите ему Git-репозиторий и — вуаля! — сборочный конвейер готов! И не абы какой — Verctl использует самые лучшие практики и обеспечивает максимальную производительность прямо из коробки, ведь его делают те же самые люди, которые делают Next.js.

А если вы вдобавок используете Next, то произойдет настоящее волшебство — он сам поймет, какая инфраструктура вам нужна, основываясь на коде самого приложения!

Дополнительно

Мы почти закончили 🙂

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

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

• NextAuth.js — Если вы любите Next.js, NextAuth — очевидный выбор для реализации аутентификации. С ее помощью вы легко можете добавить SSO со всеми популярными провайдерами (Google, Facebook, Github).
• Prisma— Это ORM следующего поколения. Prisma позволяет декларативно определять модели данных в коде приложения и предоставляет прекрасный интерфейс для их использования.
• PlanetScale— Нужна база данных для завершения бессерверного стека? У PlanetScale есть невероятная платформа, которая позволяет «разветвлять» базу и создавать PR на развертывание.

У вас есть компьютер, подключение к интернету и набор полезных инструментов. Теперь идите и сделайте что-нибудь крутое!