ФронтендОпс Jun 12, 2020

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

Евгения Вишнёва

CEO

Автор

Content

  1. Что такое front-end операции и как они используются?
  2. Что такое front-end база данных?
  3. Как оптимизировать код с помощью front-end ops?
  4. Полезные инструменты для front-end ops специалистов
  5. Front-end vs back-end операции - не соперники, а взаимные дополнения?
Content

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

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

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

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

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

как выглядят фронтенд разработчики глазами других разработчиков
Источник изображения: Ballmemes

Что такое front-end операции и как они используются?

Сразу же начнем с определения front-end операций.

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

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

Повышение производительности с помощью front-end ops

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

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

Что такое front-end база данных?

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

Основная цель front-end базы данных - предоставить интерфейс для извлечения, хранения и отображения информации, хранящейся в базе данных. Front-end база данных обычно работает независимо от ее внутренней части. Front-end и back-end базы данных обычно взаимодействуют друг с другом через API или настроены для прямого доступа. Эти два приложения могут принадлежать разным производителям или программным платформам. Например, Microsoft Access может быть интерфейсом, подключенным к серверной части, созданной в Microsoft SQL Server или аналогичном программном обеспечении. Это позволяет владельцу базы данных изменять интерфейс без необходимости изменять серверную часть или ее содержимое.

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

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

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

Как оптимизировать код с помощью front-end ops?

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

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

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

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

Мы также настоятельно рекомендуем вам освоить принципы веб-разработки, такие как 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, который используется большинством экспертов:

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

Пример наших результатов front-end ops

Результат проверки безопасности веб-сайта нашим собственным инженером Frontend 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 специалистов

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

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

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

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

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 security headers

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

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

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

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

Front-end vs back-end операции - не соперники, а взаимные дополнения?

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

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

Доверьте поиск решения профессионалам

Наши сертифицированные специалисты знают, как воплотить вашу идею в реальность.

Введите имя
Введите E-mail
Пожалуйста, введите корректный телефон
Сообщение слишком короткое

Ваше сообщение было успешно отправлено. Мы скоро свяжемся! Success icon