Front End Operations: обзор концепции и инструментов

eCommerce Feb 10, 2020

Front End Operations: обзор концепции и инструментов

Главная / Блог / Front End Operations: обзор концепции и инструментов

FrontendOps часто называют одной из ведущих тенденций в разработке программного обеспечения и перспективным подходом. Концепция Front End Operations была впервые представлена Алексом Секстоном, одним из ведущих инженеров-стартапов Stripe и экспертом в области разработки интерфейсов.

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

how view frontend developers some other developers
Источник изображения: Ballmemes

Что такое Front End Operations и чем они полезны?

Сразу же начнем с определения Front End Operations.

Есть идеи по поводу вашего проекта?

Свяжитесь с нами!

Сделать запрос

Что конкретно означают Front End Operations?
Front End Ops (как мы их называем в отрасли) подразумевают набор методов для оптимизации программного кода на стороне клиента. Основная цель такой оптимизации - повысить производительность веб-сайта или веб-приложения, а также улучшить основной процесс разработки и дальнейшей модернизации проектов веб-программного обеспечения.

Концепция, как следует из названия, в основном сосредоточена на работе с внешним интерфейсом, а не на стороне сервера.

Повышение производительности с Front End Ops

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

Если говорить о глобальных подходах, то во Front End Ops все должно быть направлено на уменьшение общего количества HTTP-запросов (которое реализуется, например, посредством кэширования на стороне клиента) и размеров файлов.

Как оптимизировать код с помощью Front End Ops?

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

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

«Neat» или «Аккуратные» принципы программирования

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

Мы также настоятельно рекомендуем вам освоить принципы веб-разработки, такие как DRY (Don't Repeat Yourself), также известный как DIE (Duplication Is Evil), KISS (Keep It Simple, Stupid - практика избегания сложных многоэтапных конструкций кода и архитектуры. попытки переосмысления велосипеда), SOLID (подразумевает использование нескольких принципов программирования, что значительно облегчает разработку программного обеспечения и дальнейшую поддержку), и YAGNI (You Ain't Gonna Need It, который рекомендует избегать избыточной функциональности).

Кроме того, обязательно использовать модель RAIL, которая классифицирует взаимодействия пользователя с веб-страницей и гарантирует, что каждый аспект страницы является достаточно быстрым (время отклика менее 100 мс, скорость анимации - 60 кадров в секунду или один кадр каждые 16 мс, операция ожидания делится на блоки по 50 мс, и первая процедура рендеринга происходит менее чем через одну секунду после того, как пользователь запросит страницу).

Если углубиться в тему разработки, среди наиболее распространенных практик Front End Ops - шаблон PRPL-30 и шаблон PRPL-170 - узнайте больше о них.

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

А теперь несколько слов о тестировании. Существует неявный список атрибутов качества для разработки программного обеспечения Front End Ops, который используется большинством экспертов:

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

Пример результатов нашего Frontend Ops

Результат проверки безопасности веб-сайта нашим собственным инженером Front End Operations выглядит следующим образом:

Пример результатов нашего Frontend Ops

Что касается тестирования производительности, вот три теста, которые обязательно нужно провести:

Chrome - Emulated Motorola G (gen 4) - 3GSlow - Mobile

Здесь мы проверили скорость соединения с мобильной версией сайта dinarys.com при низком пороге скорости беспроводного 3G-интернета.

Chrome - Emulated Motorola G (gen 4) - 3GSlow - Mobile

Chrome - Emulated Motorola G (gen 4) - 3GFast - Mobile

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

Chrome - Emulated Motorola G (gen 4) - 3GFast - Mobile

Chrome - Emulated Motorola G (gen 4) - Cable - Mobile

И последнее, но не менее важное: этот конкретный тест отображает скорость проводного соединения с мобильной версией сайта dinarys.com.

Chrome - Emulated Motorola G (gen 4) - Cable - Mobile

Полезные инструменты для Front End Ops специалистов

И вот краткие обзоры некоторых из самых популярных инструментов, которые помогают разработчикам внедрять и обрабатывать бизнес-операции Front End плана.

Webpack

Приложения на основе JS становятся все более и более сложными, поэтому пакет Webpack с открытым исходным кодом можно использовать для упаковки, компиляции и организации ресурсов. Кстати, он считается лучшим инструментом для создания приложений на React и Redux. С его помощью вы можете использовать пользовательские файлы поверх сторонних библиотек. Модульная система, построенная с использованием Webpack, позволяет лучше организовать проект и упростить процедуры его модернизации, тестирования и исправления ошибок.

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

NGINX

NGINX- это популярное программное обеспечение веб-сервера с открытым исходным кодом. Первоначально разработанная для веб-служб HTTP, сегодня NGINX также служит обратным прокси-сервером, балансировщиком нагрузки HTTP и почтовым прокси для IMAP, POP3 и SMTP. Отличительной особенностью NGINX является то, что его можно использовать для работы с асинхронными архитектурами, управляемыми событиями.

Таким образом, благодаря отличной способности обрабатывать большое количество соединений и скорость, многие сайты с высоким трафиком используют именно NGINX (среди самых известных примеров - Google, Netflix, Adobe, Cloudflare, WordPress и т. д.). Наряду с Apache, NGINX является лучшим решением для веб-серверов на рынке.

Lighthouse CI

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

Webpagetest

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

Mozilla observatory & Securityheaders

Mozilla Observatory это набор инструментов, с помощью которого вы можете проверить уровень безопасности вашего веб-сайта. Он состоит из трех основных компонентов: http-observatory (для сканирования), http-observatory-cli (интерфейс) и http-observatory-website (веб-интерфейс).

Securityheaders имеют почти те же функции, которые вы можете использовать для проверки политик безопасности контента. Они являются гораздо более удобной альтернативой для CLI и Chrome Developer Tools.

Проверка доступности

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

Front End против Back End Operations - не соперники, а взаимные дополнения?

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

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

Хотите узнать больше

Получите свежие статьи, новости и тематические исследования в первую очередь на вашу электронную почту

Теперь вы подписаны!