Инструменты для фронтенд-разработки

Веб-разработку можно разделить на две части — front-end и back-end. Фронтенд (клиентская часть) должен включать в себя HTML-верстку с CSS-стилями и JavaScript, а бэкенд — серверную часть, которая обычно пишется на Python, PHP, Ruby и так далее.

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

А то, что скрыто от людских глаз под капотом, — это бэкенд.

Как вы могли заметить, если для серверной стороны существует длинный список языков программирования, то для клиентской стороны нет конкуренции с JavaScript.

Фронтенд часто также делится на дизайн и разработку. Фронтенд-дизайнер больше занимается созданием пользовательских интерфейсов и хорошо знает HTML и CSS.

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

По сути, любит реализовывать дизайнерские решения. Front-End разработчики уделяют больше внимания написанию кода на JavaScript. Фреймы, алгоритмы, парадигмы программирования и т.д. не являются для него чем-то непонятным.

Итак, какие инструменты облегчают жизнь фронтенд-разработчику в 2021 году? Давайте обсудим эту актуальную тему.

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

Micro-front-end предоставляет возможность разделить архитектуру front-end на разные части для нескольких команд.

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

У современной экосистемы все еще есть некоторые недостатки. Наиболее распространенные проблемы, возникающие при развертывании отдельных интерфейсов, связывании, различиях в средах и т. д.

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

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

Атомарный дизайн — это скорее философия, чем чистая методология.

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

Атомы составляют молекулы (например, ввод текста + кнопка + атом метки = молекула поиска). Молекулы составляют тело. Организмы живут в шаблоне слоя, который можно преобразовать в страницу, представляемую пользователям.

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

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

На мой взгляд, будущее за ними.

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

Они свободны от JS и поддерживаются современными браузерами. Их размер пакета и потребление оптимальны, а рендеринг DOM потрясающий.

Эти компоненты предоставляют пользовательский элемент, API JavaScript для определения нового типа тегов HTML, шаблоны HTML для определения слоев и теневой DOM, поставляемый с компонентами.

Известные инструменты в этой структуре включают Lit-HTML (и Lit-element), StencilJS, SvelteJS и Bit.

Появление компонентной разработки породило множество инструментов. Одним из самых известных является Bit и его хостинговая платформа Bit.dev.

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

На платформе bit.dev (или на сервере) компоненты могут быть удаленно организованы для нескольких команд, чтобы каждая команда контролировала разработку своих собственных компонентов.

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

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

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

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

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

Попрощаемся ли мы с Redux в 2021 году? Похоже нет?

Однако появление новых функций в фреймворках, обрабатывающих состояние (перехватчики React, Context-API и т. д.), прокладывает путь к будущему без глобального хранилища.

Такие инструменты, как Mobx, с каждым днем ​​становятся все более популярными благодаря своей компонентно-ориентированной и масштабируемой природе.

ES Modules — это стандарт ECMAScript для работы с модулями в браузере. Их можно использовать для простой инкапсуляции функциональности в модули, используемые через CDN и т. д.

С выпуском Firefox 60 все основные браузеры будут поддерживать модули ES, и команда Node уже работает над добавлением их поддержки в Node.js.

Кроме того, в ближайшие несколько лет они будут интегрированы в WebAssembly.

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

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

Звучит сложно и требует тонкой настройки. Это было бы без следующих полезных инструментов:

Оптимизация веб-сайта. Если вы хотите оснастить существующий веб-сайт спрайтами CSS (что я всем рекомендую), вам может помочь инструмент SpriteMe.

Просто зайдите на spriteme.org и перетащите отображаемую там ссылку на панель закладок вашего браузера. Теперь вы можете вызвать инструмент, нажав на ссылку.

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

SpriteMe также генерирует соответствующий код CSS, который вам нужно только включить на свой веб-сайт вместе с графикой.

Графика спрайта из отдельной графики: для автоматического создания графики спрайта + кода CSS из отдельной графики вы просто загружаете свою графику в ZIP-архиве в Генератор CSS-спрайтов. Инструмент сделает все остальное.

Создание CSS из графики Sprite: если вы уже создали графику Sprite самостоятельно и теперь хотите, чтобы соответствующий код CSS обращался к отдельной графике, вы можете использовать Sprite Cow.

Там вы загружаете графику, выбираете отдельные элементы и тут же отображается код CSS.

Свойство CSS border-radius становится все более и более популярным и избавляет многих фронтенд-разработчиков от необходимости использовать пиксели.

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

-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
-border-top-left-radius: 10px;
-border-bottom-right-radius: 10px;

… за два закругленных угла?! Что ж, четыре из шести строк исходят из префиксов, специфичных для браузера (префиксы поставщиков), которые, надеюсь, в какой-то момент больше не будут существовать.

Тем не менее, здесь следует упомянуть небольшой полезный сайт border-radius.com (легко запомнить!)

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

Совет: если вы хотите полностью запретить префиксы поставщиков, вы можете попробовать один из следующих двух инструментов: префикс CSS (консоль, Python), без префиксов (JavaScript).

Кто этого не знает? У вас есть спонтанная идея или фрагменты кода CSS/JS, которые вы хотели бы опробовать.

Просто немного проб и ошибок. Страница jsFiddle предлагает самый простой и быстрый вариант. У вас есть четыре окна на весь экран: «HTML», «CSS», «JavaScript» и «Результат».

Введите код, возможно, выберите фреймворк JavaScript, нажмите «Выполнить», готово!

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

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

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

Если вы придаете большое значение кроссбраузерной совместимости и указываете различные настройки по умолчанию (размер экрана, глубину цвета, JavaScript, Java, Flash).

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

Если вы хотите поближе взглянуть на свой веб-сайт в проблемном дочернем «Internet Explorer», вы можете сделать это с помощью полезной программы IETester.

Вам нужен компьютер с Win XP или более поздней версии, и вы можете протестировать почти все версии IE (предварительная версия IE10, IE9, IE8, IE7, IE 6 и IE5.5) в одной программе и даже параллельно.

Все это довольно практично, особенно потому, что там есть и другие полезные опции, такие как «Перезагрузить с очисткой кеша».

Совет. Если у вас установлен IE8 или выше, вы можете переключиться на движок IE7 с помощью инструментов разработчика (нажмите F12), выбрав его в разделе «Режим документа».

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

Скоро будет сложно представить жизнь без них.

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

Большинство шрифтов можно загрузить в виде набора @font-face, который включает в себя шрифт в различных форматах, соответствующий файл CSS и демоверсию.

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

Приложенные форматы обеспечивают совместимость со следующими браузерами: Firefox 3.5+, Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, Internet Explorer 4+, iPad и iPhone.

Совет: Существует также отличный модуль Drupal, с помощью которого Font Squirrel и другие поставщики веб-шрифтов могут быть очень легко интегрированы в веб-сайт Drupal: модуль @font-your-face.

— Нет, лучше немного полегче. Или лучше вот такой цвет…”

В то время как программист в таких ситуациях преобразует значения RGB в цветовое пространство HSV, увеличивает яркость и вычисляет ее обратно в шестнадцатеричное представление RGB, разработчик интерфейса думает:

«Эй, не волнуйся. Посмотрите расширение для браузера. «Я давно использую расширение ColorZilla для Firefox, которое теперь доступно и для Chrome.

Основная функция расширения — палитра цветов, с помощью которой вы можете найти нужный цвет в любом месте на веб-сайте.

Кстати, это также работает с изображениями, поэтому свойства CSS не просто оцениваются. Затем значение копируется, например, непосредственно в буфер обмена как шестнадцатеричное значение (формат может быть указан).

Чрезвычайно практично! Также есть палитра цветов, как вы знаете из Photoshop and Co, история выбранных цветов и многое другое.

Совет: если вы ищете подходящий дополнительный цвет или другие гармоничные цветовые комбинации для цвета, обязательно посмотрите здесь: colorschemedesigner dot com

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

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

Если нет, то обязательно стоит попробовать. Проверка HTML, живое редактирование CSS + HTML, консоль отладки JavaScript, анализ времени загрузки и т.д.

Просто супер практично и очень хорошо реализовано.

Кроме того, вы можете взглянуть на эти плагины WordPress и расширения Chrome.