Поделиться через

Распространенные клиентские веб-технологии

Подсказка

Это фрагмент из книги, архитектор современных веб-приложений с ASP.NET Core и Azure, доступный в .NET Docs или в виде бесплатного скачиваемого PDF-файла, который можно прочитать в автономном режиме.

Скачать в формате PDF

Спроектируйте современные веб-приложения с помощью ASP.NET Core и Azure. Обложка миниатюры электронной книги.

"Веб-сайты должны выглядеть хорошо изнутри и вне". - Пол Куксон

ASP.NET Основные приложения — это веб-приложения, и они обычно используют клиентские веб-технологии, такие как HTML, CSS и JavaScript. Разделив содержимое страницы (HTML) от макета и стиля (CSS) и его поведения (через JavaScript), сложные веб-приложения могут использовать принцип разделения проблем. Будущие изменения структуры, проектирования или поведения приложения можно сделать проще, когда эти проблемы не переплетаются.

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

Замечание

Blazor предоставляет альтернативу платформам JavaScript для создания расширенных интерактивных пользовательских интерфейсов клиента.

HTML

HTML — это стандартный язык разметки, используемый для создания веб-страниц и веб-приложений. Его элементы образуют стандартные блоки страниц, представляющие форматированный текст, изображения, входные данные формы и другие структуры. Когда браузер отправляет запрос к URL-адресу, независимо от того, извлекается ли страница или приложение, первое, что возвращается, является HTML-документом. Этот HTML-документ может содержать ссылки или включать дополнительные сведения о его виде и макете с помощью CSS, или о работе с помощью JavaScript.

CSS

CSS (каскадные таблицы стилей) используется для управления внешним видом и макетом ЭЛЕМЕНТОВ HTML. Стили CSS можно применять непосредственно к элементу HTML, определенному отдельно на одной странице или определенному в отдельном файле и на который ссылается страница. Каскадирование стилей происходит в зависимости от того, как они используются для выбора определенного HTML-элемента. Например, стиль может применяться ко всему документу, но переопределяется стилем, примененным к конкретному элементу. Аналогичным образом, стиль конкретного элемента переопределяется стилем, примененным к классу CSS, примененным к элементу, который, в свою очередь, переопределяется стилем, предназначенным для конкретного экземпляра этого элемента (через его идентификатор). Рис. 6-1

Правила конкретности CSS

Рис. 6-1. Правила специфичности CSS в порядке.

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

Препроцессоры CSS

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

Наиболее популярными препроцессорами CSS являются Sass и LESS. Оба расширяют CSS и совместимы с ним, что означает, что обычный CSS-файл является допустимым файлом Sass или LESS. Sass основан на Ruby, и LESS основан на JavaScript, и обычно выполняется как часть локального процесса разработки. Оба имеют доступные средства командной строки, а также встроенную поддержку в Visual Studio для их выполнения с помощью задач Gulp или Grunt.

JavaScript

JavaScript — это динамический интерпретируемый язык программирования, стандартизированный в спецификации языка ECMAScript. Это язык программирования в Интернете. Как и CSS, JavaScript можно определить как атрибуты в элементах HTML, как блоки скриптов на странице или в отдельных файлах. Как и CSS, рекомендуется упорядочить JavaScript в отдельные файлы, сохраняя его разделенным как можно больше от HTML на отдельных веб-страницах или представлениях приложений.

При работе с JavaScript в веб-приложении вам обычно потребуется выполнить несколько задач:

  • Выбор HTML-элемента и получение и (или) обновление его значения.

  • Запрос веб-API для данных.

  • Отправка команды в веб-API (и реагирование на обратный вызов с его результатом).

  • Выполнение проверки.

Вы можете выполнять все эти задачи только с помощью JavaScript, но многие библиотеки существуют, чтобы упростить эти задачи. Одним из первых и наиболее успешных этих библиотек является jQuery, который по-прежнему является популярным выбором для упрощения этих задач на веб-страницах. Для одностраничных приложений (SPAs) jQuery не предоставляет множество необходимых функций, которые предлагают Angular и React.

Устаревшие веб-приложения с помощью jQuery

Хотя jQuery устарел по сравнению с современными фреймворками JavaScript, он по-прежнему является часто используемой библиотекой для работы с HTML/CSS и создания приложений, которые выполняют AJAX-запросы к веб-API. Однако jQuery работает на уровне объектной модели документа браузера (DOM), а по умолчанию предлагает только императивную модель, а не декларативную модель.

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

jQuery и SPA Framework

Фактор jQuery Угловой
Абстрагирует DOM Да Да
Поддержка AJAX Да Да
Декларативная привязка данных Нет Да
Маршрутизация в стиле MVC Нет Да
Шаблонирование Нет Да
Deep-Link Маршрутизация Нет Да

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

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

Angular SPAs

Angular остается одним из самых популярных платформ JavaScript в мире. С момента Angular 2 команда перестроила платформу с нуля (с помощью TypeScript) и перебралась из исходного имени AngularJS в Angular. Теперь несколько лет назад переработанный Angular продолжает быть надежной платформой для создания одностраничных приложений.

Приложения Angular создаются из компонентов. Компоненты объединяют шаблоны HTML со специальными объектами и управляют частью страницы. Здесь показан простой компонент из документации Angular:

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<h1>Hello {{name}}</h1>`
})

export class AppComponent { name = 'Angular'; }

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

Работая с компонентами и шаблонами, вместо элементов DOM приложения Angular могут работать на более высоком уровне абстракции и с меньшим общим кодом, чем приложения, написанные с помощью JavaScript (также называемого "vanilla JS") или jQuery. Angular также накладывает некоторый порядок в том, как упорядочивать файлы скриптов на стороне клиента. По соглашению приложения Angular используют общую структуру папок с файлами скриптов модуля и компонента, расположенными в папке приложения. Скрипты Angular, связанные с созданием, развертыванием и тестированием приложения, обычно находятся в папке более высокого уровня.

Вы можете разрабатывать приложения Angular с помощью интерфейса командной строки. Начало локальной разработки с использованием Angular (при условии, что git и npm у вас уже установлены) включает такие шаги, как клонирование репозитория из GitHub и запуск npm install и npm start. Помимо этого, Angular предлагает собственный интерфейс командной строки (CLI), который может создавать проекты, добавлять файлы и оказывать помощь в тестировании, объединении и развертывании. Это удобство интерфейса командной строки делает Angular особенно совместимым с ASP.NET Core, что также обеспечивает отличную поддержку ИНТЕРФЕЙСА командной строки.

Корпорация Майкрософт разработала эталонное приложение eShopOnContainers, которое включает реализацию Angular SPA. Это приложение включает модули Angular для управления корзиной покупок интернет-магазина, загрузкой и отображением элементов из каталога и обработкой создания заказов. Вы можете просмотреть и скачать пример приложения из GitHub.

Реагировать

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

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

React также является необычным в том, как он работает с HTML. Вместо того чтобы иметь строгое разделение между кодом и разметкой (со ссылками на JavaScript, отображаемыми в атрибутах HTML), React добавляет HTML непосредственно в код JavaScript в виде JSX. JSX — это синтаксис, похожий на HTML, который может компилироваться до чистого JavaScript. Рассмотрим пример.

<ul>
{ authors.map(author =>
    <li key={author.id}>{author.name}</li>
)}
</ul>

Если вы уже знаете JavaScript, обучение React должно быть простым. Существует не так много кривой обучения или специального синтаксиса, как с Angular или другими популярными библиотеками.

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

Вид

В руководстве по началу работы "Vue — это прогрессивная платформа для создания пользовательских интерфейсов. В отличие от других монолитных платформ, Vue разработан с нуля, чтобы быть постепенно принятым. Библиотека ядра сосредоточена только на уровне представления, её легко освоить и интегрировать с другими библиотеками или существующими проектами. С другой стороны, Vue прекрасно способен использовать сложные Single-Page приложения при использовании в сочетании с современными инструментами и вспомогательными библиотеками».

Для начала работы с Vue просто требуется включить его скрипт в HTML-файл:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

После добавления платформы можно декларативно отображать данные в DOM с помощью простого синтаксиса шаблонов Vue:

<div id="app">
  {{ message }}
</div>

а затем добавьте следующий скрипт:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Это достаточно для визуализации "Hello Vue!" на странице. Обратите внимание, что Vue не просто выводит сообщение в div один раз. Он поддерживает привязку данных и динамические обновления, так что если значение message изменяется, значение в <div> немедленно обновляется, чтобы отразить изменения.

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

Blazor WebAssembly

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

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

Код WebAssembly может получить доступ ко всем функциям браузера через JavaScript, что называется взаимодействием с JavaScript, часто сокращаемым до интеропа с JavaScript или JS интеропа. Код .NET, который обрабатывается через WebAssembly в браузере, выполняется в песочнице для JavaScript этого браузера, которая включает средства защиты от вредоносных действий на клиентском компьютере.

Дополнительные сведения см. в разделе "Общие сведения о ASP.NET Core Blazor".

Выбор платформы SPA

При рассмотрении того, какой вариант лучше всего подходит для поддержки SPA, помните о следующих соображениях:

  • Знакомы ли ваша команда с платформой и ее зависимостями (включая TypeScript в некоторых случаях)?

  • Насколько выраженным является мнение фреймворка, и вы согласны с его стандартным способом выполнения задач?

  • Включает ли он (или компаньонную библиотеку) все функции, необходимые вашему приложению?

  • Хорошо ли это документировано?

  • Насколько активно его сообщество? Строятся ли с ним новые проекты?

  • Насколько активна основная команда? Исправляются ли проблемы и регулярно отправляются новые версии?

Платформы продолжают развиваться с разрывной скоростью. Используйте приведенные выше рекомендации, чтобы снизить риск выбора платформы, от которой вы позже будете сожалеть. Если вы особенно рискуете, рассмотрите платформу, которая предлагает коммерческую поддержку и /или разрабатывается крупным предприятием.

Ссылки — веб-технологии клиента

НазадДалее