Лучшие бесплатные инструменты для фронтенд-разработчиков

от автора

в

Фронтенд-проект редко проваливается из-за фреймворка. Он проваливается потому, что сборка медленная, тесты никто не запускает, а бандл незаметно растёт, пока сайт не начинает грузиться четыре секунды.

Эти восемь инструментов бесплатны, хорошо работают вместе и ставятся у меня первыми в новом проекте.

Сборка

Vite

Мгновенный дев-сервер и быстрые продакшн-сборки: выбор по умолчанию почти для любого современного фронтенда.

vite.dev

Фреймворк

Astro

По умолчанию отдаёт ноль JavaScript, поэтому сделать на нём медленный контентный сайт трудно.

astro.build

Стили

Tailwind CSS

Утилитарные классы, которые не дают CSS бесконечно разрастаться с возрастом проекта.

tailwindcss.com

Линтер и формат

Biome

Линтер и форматтер в одном бинарнике: заменяет гору конфигов одним быстрым инструментом.

biomejs.dev

Юнит-тесты

Vitest

Тесты за миллисекунды, поэтому их действительно запускают перед пушем.

vitest.dev

E2E-тесты

Playwright

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

playwright.dev

Мастерская компонентов

Storybook

Разработка и ревью компонентов в изоляции: незаменимо, как только интерфейс трогают несколько человек.

storybook.js.org

Размер бандла

Bundlephobia

Смотрите, во сколько килобайт обойдётся зависимость, до установки, а не после.

bundlephobia.com

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

Нужно не выбрать, а построить?

Веб-приложения, API, инфраструктура и интерфейсы. Фриланс из Барселоны, клиенты по всему миру.

Связаться


Комментарии

Leave a Reply

Your email address will not be published. Required fields are marked *