- PVSM.RU - https://www.pvsm.ru -
«Хочешь жить — умей вертеться». Это — про работу фронтенд-программиста. Для того чтобы успешно справляться со своими обязанностями, такому специалисту приходится решать массу задач и необходимо обладать множеством способностей. Очень важно, кроме того, не забывать о главной цели, ради которой разрабатывают сайты. А именно, о том, что сайты должны помогать людям упрощать решение их повседневных задач.
В этом материале я собираюсь рассказать о различных аспектах веб-разработки, о которых стоит знать любому программисту соответствующего профиля. Я, если это возможно, буду приводить ссылки на материалы, демонстрирующие примеры применения соответствующих возможностей и рекомендации по их правильному использованию. Здесь я буду ориентироваться на реализацию тех или иных механизмов в Angular, React и Vue.
Создание веб-приложения начинается с проектирования привлекательного и аккуратного макета, который понравится пользователям и будет способствовать тому, что они проведут на соответствующем сайте достаточно много времени.
Существует множество CSS-фреймворков. Возможно, среди них вы обнаружите именно тот, который вам идеально подойдёт. Самый знаменитый из них — это Bootstrap [1] и, благодаря новым возможностям CSS-препроцессоров, вы можете подвергнуть стили этого фреймворка глубокой настройке. В нём вы можете найти различные компоненты и элементы управления, последовательное использование которых позволит создавать единообразно оформленные сайты.
В настоящий момент вышел альфа-релиз 5 версии [2] Bootstrap.
Если вы предпочитаете создавать наборы стилей для своих проектов самостоятельно (компоненты, отступы, контейнеры и так далее), можете обратить внимание на CSS Flexbox [3], сделав этот способ гибкого размещения элементов веб-страниц основой вашего собственного CSS-фреймворка.
CSS Grid [4] использует другой подход к организации материалов веб-страниц, размещая их в сетке.
Отзывчивостью называют возможность сайта адаптировать своё содержимое к устройству, на котором его просматривают. Например, на смартфоне и на ноутбуке эта статья будет выглядеть по-разному.
Отзывчивость веб-приложения помогает ему правильно отображаться на разных экранах, улучшает читабельность контента и пользовательский опыт.
На MDN [5] можно узнать о том, что медиазапросы используются в тех случаях, когда нужно применить разные CSS-стили для разных устройств (например, для принтера или монитора), а также с учётом конкретных характеристик и параметров устройства (например, для разного разрешения экрана или для разной ширины области просмотра браузера).
CSS-медиазапросы — это мощное средство поддержки отзывчивого дизайна.
Их можно использовать вместе с уже упомянутыми CSS Flexbox или CSS Grid. Если вы предпочитаете пользоваться CSS-фреймворками, то эти фреймворки обычно уже реализуют соответствующие возможности. При таком подходе для создания отзывчивых страниц достаточно добавить к элементам соответствующие классы.
Если говорить о концепции отзывчивости в применении к изображениям [6], то тут можно вспомнить об атрибуте srcset
. Использование этого атрибута позволяет выводить изображения разного размера в зависимости от характеристик экрана устройства, что способствует уменьшению объёмов данных, передаваемых от сервера браузеру.
Пользователю приятно будет работать с сайтом, компоненты и элементы управления которого оформлены однородно, в едином стиле. Такой подход к оформлению упрощает для пользователя освоение новых возможностей сайта и служит чем-то вроде визитной карточки компании.
Если вы хотите использовать для разработки своих проектов существующие фреймворки и библиотеки, Angular, React или Vue, то вот несколько примеров библиотек стилей, реализующих принципы Material Design, рассчитанных на эти инструменты:
Проверка данных — это важнейшая задача тех проектов, которые принимают что-то от пользователя. Кроме того, ничто не должно помешать приложению получить от пользователя корректные данные: ни сетевые проблемы, ни ошибки на сервере, ни ошибки, допущенные самим пользователем. Вот какие решения для проверки пользовательского ввода созданы для различных фреймворков:
Загрузка данных в приложение или сохранение данных могут занимать миллисекунды, секунды или даже минуты. Именно поэтому важно сообщать пользователю о подобных операциях с помощью соответствующих индикаторов и не блокировать при этом работу пользователя с проектом.
В решении этих задач нам помогут JavaScript-механизмы, вроде промисов, и браузерные API наподобие Fetch [13].
Мир фронтенд-разработки развивается очень быстро. То же самое можно сказать и о браузерах. Но разные люди пользуются различными браузерами и разными их версиями. Поэтому, чтобы обеспечить правильную работу своего кода на всех применяемых платформах, разработчику нужно заботиться о совместимости. Например, старая версия IE не поддерживает те же возможности JS и CSS, которые поддерживает последняя версия Google Chrome.
Для обеспечения правильной работы проекта в старых браузерах применяются полифиллы [14]. Они достаточно хорошо описаны в этом [15] материале: «Полифилл (polyfill, polyfiller) — это фрагмент кода (или подключаемый модуль), который предоставляет реализацию технологии, которую вы, разработчик, ожидаете найти в числе стандартных возможностей браузера».
Для того чтобы узнать, поддерживается ли некое CSS-правило, или некая JS-функция в конкретной версии браузера, загляните на сайт Can I Use [16].
Если говорить о решении вопросов браузерной поддержки в Angular, React и Vue, то дело обстоит так:
У вашего сайта могут быть пользователи со всего мира. Учёт этого факта при создании проекта повысит удобство работы с сайтом для всех, кто решит на него заглянуть.
Локализация (l10n, localization) — это, по определению [21] W3C, адаптация содержания продукта, программы или документа к языковым соответствиям, культурным и другим требованиям определённого целевого рынка.
Интернационализация (i18n, internationalization) — это, если опираться на материалы [22] W3C, создание и развитие содержания продукта, программы или документации, позволяющее производить лёгкую локализацию для целевых рынков, различающихся по культуре, региону или языку.
Обе эти концепции взаимосвязаны, они могут быть реализованы разными способами. Сюда относятся, например, следующие технические приёмы:
example.com?lang=en
, или так: example.com/en
, или даже так: en.example.com
.Теперь — об этих концепциях в Angular, React и Vue.
Доступность (a11y, accessibility), это возможность сайта адаптироваться к нуждам пользователей с ограниченными возможностями.
О доступности веб-сайтов часто забывают. Для того чтобы сделать проект доступным для пользователей с ограниченными возможностями, может понадобиться пересмотреть используемый на нём подход к формированию пользовательского опыта, что иногда может потребовать глубокой переработки проекта. В любом случае, важно учитывать нужды всех пользователей, особенно принимая во внимание то, что даже небольшие изменения кода проекта способны значительно повысить удобство работы с сайтом для тех, кому тяжело пользоваться обычными сайтами.
В деле обеспечения доступности веб-проектов применимы различные технические приёмы. В их число входит следующее:
alt
.TAB
и клавиш-стрелок.В рамках проекта a11yproject.com [28] проводится в жизнь идея стандартизации этих концепций. Эта инициатива достойна уважения! Основные JS-фреймворки и библиотеки тоже прилагают усилия к поддержке разработки доступных сайтов:
Для того чтобы держать связь с посетителями вашего сайта, можно использовать браузерное API Notifications [36]. С его помощью можно сообщать пользователям о том, что на сайте появилось что-то новое.
Средства для управления состоянием приложения, которые обрели популярность в 2015 году, в наши дни являются обязательным компонентом практически любого веб-проекта. Хотя в сфере управления состоянием приложений не всё однозначно, использование специализированных решений обычно является простым и эффективным методом централизованной обработки данных приложения. Все средства для управления состоянием основаны на паттерне Flux.
NgRx-реализация паттерна Flux (источник — ngrx.io [37])
В этих средствах используются разные названия для одних и тех же сущностей. Например, то, что в NgRx называется selectors, в Vuex называется getters. То, что в Angular получило имя reducers, в Vue называется mutations.
Вот средства для управления состоянием приложений, используемые в Angular, React и Vue:
Существуют разные способы загрузки данных в приложения. Самый распространённый из них заключается в использовании HTTP-запросов, направленных к веб-API. В браузере имеется API Fetch [13], предназначенный для организации загрузки данных, но для основных фреймворков и библиотек разработаны собственные решения:
В разговоре о механизмах загрузки данных в веб-приложения стоит упомянуть о GraphQL [44]. Эта технология изменила подход, используемый при загрузке данных во фронтенд-приложениях. При её применении «Клиент определяет то, что ему нужно, используя язык запросов». Используя GraphQL мы можем получать из удалённых источников данных в точности то, что нам нужно, и ничего лишнего.
Вот реализации GraphQL для интересующих нас фронтенд-инструментов:
Локальное хранение данных — это хранение данных на компьютере пользователя. Данные можно хранить с использованием куки-файлов [48], а так же с применением механизмов localStorage [49] и sessionStorage
.
Веб-воркеры [50] — это технология, представленная новым браузерным API. Она даёт возможность фонового выполнения JavaScript-кода, снимая нагрузку с главного потока и не влияя на производительность кода веб-страницы.
Веб-воркеры применимы в Angular, React и Vue:
Рост рынка смартфонов стал причиной революции в мире веб-разработки. Теперь при создании веб-сайтов нам нужно, в первую очередь, учитывать нужды мобильных пользователей. Чем меньший объём данных придётся загружать мобильным устройствам при работе с веб-проектами — тем лучше. В соответствии с графиком, показанным ниже, мобильное использование интернета обогнало настольное ещё в 2016 году.
Использование интернета в мире (источник — broadbandsearch.net [54])
Это недвусмысленно говорит нам о том, как важны в наше время размеры бандлов веб-проектов. Размер загружаемых файлов должен быть, ради экономии ресурсов мобильных пользователей, как можно меньше. К нашему счастью, разработчики основных фронтенд-инструментов и дополнений к ним учитывают это, занимаясь развитием своих проектов. Уменьшение размеров бандлов приложений, кроме того, означает их более высокую производительность.
stats-json
, которая позволяет сформировать отчёт после сборки бандла.report
, которая позволяет формировать отчёты [57] по бандлам.Сервис-воркер — это скрипт, который работает в веб-браузере и управляет кэшированием данных приложения. Это — один из механизмов, используемых при превращении обычного веб-сайта в прогрессивное веб-приложение (PWA, Progressive Web Application). С PWA можно работать как с обычным сайтом, пользуясь HTTPS, но прогрессивные веб-приложения обладают некоторыми особыми возможностями. Среди таких возможностей, например, установка таких приложений на мобильные устройства без необходимости публикации их в специализированных магазинах приложений и поддержка работы приложений без доступа к интернету.
Пользоваться сервис-воркерами можно в Angular, React и Vue:
Серверный рендеринг (SSR, Server-Side Rendering) — это набор технологий, который кардинальным образом меняет ситуацию в сфере разработки приложений, основанных на Angular, React и Vue. При использовании SSR HTML-код формируется на сервере и отправляется в браузер. После этого осуществляется приведение статической HTML-разметки в рабочее состояние и на клиенте оказывается полностью готовое к использованию веб-приложение. При применении серверного рендеринга преследуют несколько целей:
Вот SSR-решения для исследуемых нами фронтенд-инструментов:
С ростом масштабов использования Jamstack [65] генераторы статических сайтов (SSG, Static Site Generator) стали крайне востребованной технологией. Jamstack-приложение — это разновидность веб-приложения, материалы которого готовы к визуализации средствами браузера и, по сути, не нуждаются в веб-сервере (эти материалы можно отдавать клиентам прямо с CDN). Подробности о таких сайтах можно найти, пройдя по вышеприведённой ссылке. Перечислим здесь лишь основные сильные стороны SSG:
Существуют SSG-решения для Angular, React и Vue:
Среди других SSG-проектов можно отметить следующие: 11ty [70], Hugo [71], Jekyll [72].
Организация наблюдения за поведением пользователей на сайте — это необязательно, но владение подобными данными вносит значительный вклад в совершенствование веб-проектов. Существует особый класс инструментов, направленных на сбор сведений о работе пользователей с сайтом. Эти инструменты позволяют разработчикам сайтов лучше учитывать нужды пользователей и, благодаря A/B-тестированию, помогают выбирать самые адекватные альтернативы. Речь идёт о возможностях сайтов, о поддерживаемых ими шаблонах поведения пользователей, о дизайне.
Вот некоторые решения, позволяющие организовать наблюдение за поведением пользователей и A/B-тестирование:
Сложно за один заход разработать высокопроизводительное веб-приложение. Но, например, приложение, которое оптимизировали с целью ускорения его загрузки, вызовет у пользователя больше положительных эмоций, чем его более медленная версия. Существуют различные проекты, анализирующие сайты и выдающие рекомендации по их совершенствованию. Например — PageSpeed Insights [77] от Google.
Среди инструментов разработчика Google Chrome можно найти весьма ценное средство для анализа производительности сайтов — Lighthouse [78]. Оно оценивает сайты по пяти критериям (производительность, доступность, использование «лучших практик», SEO, PWA) используя 100-балльную шкалу. После анализа формируется отчёт с рекомендациями по улучшениям сайта.
Анализ сайта с помощью Lighthouse
Ещё одно средство анализа производительности, которое можно найти среди инструментов разработчика Chrome, это панель Coverage [79], позволяющая искать неиспользуемый JS и CSS-код. Исключив такой код из проекта, можно уменьшить размер его бандла. А это ускорит загрузку сайта, что будет особенно заметным на мобильных устройствах.
SEO, поисковая оптимизация, это то, чем надо заниматься ради повышения рейтинга сайта в поисковых системах, в таких, как Google, Bing, DuckDuckGo, да и во многих других. Хорошо оптимизированный сайт становится более «заметным». На самом деле, это так важно, что в мире веб-разработки есть даже особая должность: «SEO-специалист».
Если говорить о SEO в Angular, React и Vue, то получится следующее:
Я согласен с тем, что фронтенд-разработка — это обширная и постоянно меняющаяся сфера знаний. На самом деле, если кто-то попытается стать универсальным разработчиком, всё знающим и умеющим, ему будет крайне сложно этого достичь, и на это ему потребуется очень много времени. При этом у каждого веб-проекта имеются собственные нужды и приоритеты. Именно поэтому необходимо определиться с самым важным в начале работы над проектом. Это позволит не распыляться, отобрав и изучив лишь самое нужное, и спланировать архитектуру проекта так, чтобы она соответствовала бы его целям.
Какие свежие технологии фронтенд-разработки кажутся вам самыми перспективными?
Автор: ru_vds
Источник [84]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/355727
Ссылки в тексте:
[1] Bootstrap: https://getbootstrap.com/
[2] 5 версии: https://blog.getbootstrap.com/2020/06/16/bootstrap-5-alpha/
[3] Flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
[4] CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[5] MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
[6] изображениям: https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
[7] Angular Material: https://material.angular.io/
[8] Material UI: https://material-ui.com/
[9] Vuetify: https://vuetifyjs.com/en/
[10] API: https://angular.io/guide/form-validation
[11] React Hook Form: https://react-hook-form.com/
[12] vuelidate: https://vuelidate.js.org/
[13] Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
[14] полифиллы: https://en.wikipedia.org/wiki/Polyfill_(programming)
[15] этом: https://remysharp.com/2010/10/08/what-is-a-polyfill
[16] Can I Use: https://caniuse.com/
[17] раздел: https://angular.io/guide/browser-support
[18] поддерживают: https://create-react-app.dev/docs/supported-browsers-features/
[19] ReactDOM: https://reactjs.org/docs/react-dom.html
[20] документации: https://cli.vuejs.org/guide/browser-compatibility.html#browserslist
[21] определению: https://www.w3.org/International/questions/qa-i18n.ru.html#l10n
[22] материалы: https://www.w3.org/International/questions/qa-i18n.ru.html#i18n
[23] Geolocation: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API
[24] готовое решение: https://angular.io/guide/i18n
[25] react-i18next: https://react.i18next.com/
[26] vue-i18n: https://kazupon.github.io/vue-i18n/
[27] ARIA-атрибутов: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
[28] a11yproject.com: https://www.a11yproject.com
[29] раздел: https://angular.io/guide/accessibility
[30] Angular CDK: https://material.angular.io/cdk/a11y/overview
[31] документации: https://reactjs.org/docs/accessibility.html
[32] react-a11y: https://github.com/reactjs/react-a11y
[33] react-axe: https://github.com/dequelabs/react-axe
[34] vue-a11y: https://vue-a11y.com/
[35] vuetify: https://vuetifyjs.com/en/customization/accessibility/
[36] Notifications: https://developer.mozilla.org/en-US/docs/Web/API/notification
[37] ngrx.io: https://ngrx.io/guide/store
[38] NgRx: https://ngrx.io/
[39] Redux: https://redux.js.org/
[40] Vuex: https://vuex.vuejs.org/
[41] rxjs: https://rxjs-dev.firebaseapp.com/
[42] Документация: https://reactjs.org/docs/faq-ajax.html
[43] Axios: https://vuejs.org/v2/cookbook/using-axios-to-consume-apis.html
[44] GraphQL: https://graphql.org/
[45] apollo-angular: https://www.apollographql.com/docs/angular/
[46] react-apollo: https://www.apollographql.com/docs/react/api/react-apollo/
[47] vue-apollo: https://apollo.vuejs.org/
[48] куки-файлов: https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies
[49] localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
[50] Веб-воркеры: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers
[51] документации: https://angular.io/guide/web-worker
[52] здесь: https://github.com/dai-shi/react-hooks-worker
[53] vue-worker: https://github.com/israelss/vue-worker
[54] broadbandsearch.net: https://www.broadbandsearch.net/blog/mobile-desktop-internet-usage-statistics
[55] webpack-bundle-analyzer: https://github.com/webpack-contrib/webpack-bundle-analyzer
[56] страница: https://create-react-app.dev/docs/analyzing-the-bundle-size/
[57] отчёты: https://techformist.com/bundle-size-vue-cli/
[58] механизмы: https://angular.io/guide/service-worker-intro
[59] Вот: https://create-react-app.dev/docs/making-a-progressive-web-app/
[60] поддерживается: https://cli.vuejs.org/core-plugins/pwa.html
[61] Angular Universal: https://angular.io/guide/universal
[62] Next.js: https://nextjs.org/
[63] Серверный рендеринг: https://vuejs.org/v2/guide/ssr.html
[64] NuxtJS: https://nuxtjs.org
[65] Jamstack: https://jamstack.org/
[66] Scully: https://scully.io/
[67] Gatsby: https://www.gatsbyjs.org/
[68] Gridsome: https://gridsome.org/
[69] Nuxt: https://nuxtjs.org/
[70] 11ty: https://www.11ty.dev/
[71] Hugo: https://gohugo.io/
[72] Jekyll: https://jekyllrb.com/
[73] Angular: https://scotch.io/tutorials/integrating-google-analytics-with-angular-2
[74] React: https://levelup.gitconnected.com/using-google-analytics-with-react-3d98d709399b
[75] Vue: https://webdeasy.de/en/how-to-integrate-google-analytics-on-your-vue-js-page/
[76] Kameleoon: https://www.kameleoon.com/en
[77] PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights/
[78] Lighthouse: https://developers.google.com/web/tools/lighthouse
[79] Coverage: https://developers.google.com/web/tools/chrome-devtools/coverage
[80] Вот: https://www.ganatan.com/tutorials/search-engine-optimization-with-angular
[81] Вот: https://rubygarage.org/blog/seo-for-react-websites
[82] Вот: https://medium.com/@prestonwallace/3-ways-improve-react-seo-without-isomorphic-app-a6354595e400
[83] Вот: https://www.smashingmagazine.com/2019/05/vue-js-seo-reactive-websites-search-engines-bots/
[84] Источник: https://habr.com/ru/post/513770/?utm_source=habrahabr&utm_medium=rss&utm_campaign=513770
Нажмите здесь для печати.