Рубрики
Без рубрики

Kentico xperience xplorations: Почему мы должны использовать Alpinejs

Узнайте, почему Alpinejs может быть идеальной библиотекой JavaScript для сайтов, получавших сервер, такие как Kentico Xperience. Tagged с Xperience, Vue, JavaScript, Alpinejs.

В этом посте мы рассмотрим, почему Alpinejs является идеальной библиотекой JavaScript для интеграции рендеринга HTML на стороне сервера и интерактивности JavaScript на стороне клиента.

🧭 Начало нашего путешествия: выбор наших инструментов

Для многих разработчиков ASP.NET JavaScript в Интернете является синонимом jQuery и хотя jQuery, безусловно, вездесущий , это не единственный вариант.

Основными преимуществами jQuery в 2021 году являются его простота использования (просто добавьте Элемент на страницу!) И его Огромная плагина экосистема Анкет Тем не менее, есть также некоторые недостатки, которые идут с этой библиотекой 😮.

🍝 JQUERY SPAGHETTI

JQuery в значительной степени связан с предоставлением постоянного (и гибкого) API для манипулирования DOM и использования функций браузера через JavaScript. Это требует императив и Процедурный Подход к этим проблемам, потому что jQuery является библиотекой низкого уровня.

Преимущества последовательного DOM API в браузерах больше не относятся к нам в эпоху современных вечнозеленых браузеров 🙏🏻.

Аналогичным образом, браузеры приняли синтаксис селектора JQUERY DOM ( Sizzle ) в document.queryselector () и document.queryselectorall () функции 😎.

С этими бездышными блюдами, что мы обычно получаем при использовании jQuery в 2021 году?

К сожалению, иногда это не красиво 🙄.

Образец построения чего -либо с jQuery обычно включает в себя эти шаги:

  1. Найдите некоторые элементы DOM (часто по id или class )
  2. Зарегистрируйте несколько обработчиков событий с этими элементами DOM, чтобы мы могли реагировать на взаимодействие с пользователями на странице
  3. Записать логику в JavaScript, которая специфична для нашего приложения
  4. Повторить

Шаги 1 и 2 – это те, которые становятся более проблематичными по мере роста сложности нашего JavaScript.

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

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

Термин «jquery spaghetti» предназначен для описания того кода, который мы заставляем писать, когда пытаются создать сложные интерфейсы с помощью JQUERY, потому что код бизнес -логики и код сантехники смешиваются вместе и часто тесно связаны.

Вот пример JQUERY SPAGHETTI (возможно, не полная тарелка 🍝):


  
  


$(function () {
    // Find our form
    const formEl = $('#myForm');

    if (!formEl) {
      console.error('Could not find form');
      return;
    }

    // Register an event listener
    $('#myForm').on('click', function (e) {
      e.preventDefault();

      // Find our form field
      const emailEl = $('form [name="email"]');

      if (!emailEl) {
        console.error('Could not email form field');
        return;
      }

      // Get the email value
      const email = emailEl.val();

      // find the error element
      const errorEl = $('form .error');

      if (!errorEl) {
        console.error('Could not find error message element');
        return;
      }

      if (!email) {
        // set the error message
        errorEl.text('An email address is required');
        errorEl.show();
      } else {
        errorEl.hide();
      }
    });
});

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

Если мы изменим местоположение нашего элемента ошибки и выдвигаем его из формы, наш код перестает работать. Если мы изменим класс ( ошибка ) на нашем элементе ошибки, наш код перестает работать.

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

Это не приводит к тому, что разработчики идут рядом с Яма успеха Анкет

Так каковы наши альтернативы 🤔?

💻 Современная компонентная структура

Современные фреймворки JavaScript, такие как СВЕЛТА Реагировать , Vue и Угловой были разработаны, чтобы помочь нам решить проблему спагетти jQuery.

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

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

Та же функциональность, которую мы написали в jQuery, выглядели бы в Vuejs (включая шаблон HTML для рендеринга):

Обратите внимание, как здесь нет сантехники 🧐! Связь между HTML и нашим JavaScript – это декларатив Анкет Мы указываем, что хотим onsubmit Функция для обработки подчинения формы путем добавления @отправить = "onsubmit" Атрибут ( Директива ) к

элемент.

Мы также получаем доступ к значению ввода электронной почты и сообщению об ошибке, используя v-model = "электронная почта" Синтаксис связывания и {{error}} Синтаксис интерполяции соответственно.

Это оставляет нас с некоторым HTML, улучшенным специальным синтаксисом, который, к счастью, не полагается на HTML id или класс Атрибуты и некоторая бизнес -логика (содержимое нашей функции onsubmit ).

Мы можем свободно перестраивать наш HTML, изменять стили и изменить нашу бизнес -логику – все независимо 👍🏽.

Я большой поклонник браузера на стороне HTML-карт на стороне HTML, подобных этим, но, к сожалению, они могут представлять другую проблему 🤔!

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

Если вы хотите узнать больше, прочитайте мой пост Kentico 12: Паттерны дизайна, часть 16 – Интеграция VUE.JS с MVC

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

В то время как jQuery можно использовать для создания новых элементов DOM, он чаще всего используется для изменения состояния элементов, уже на странице.

Современные фреймворки JavaScript, такие как Vue, с другой стороны, должны представлять весь свой DOM с нуля, когда они загружаются на странице 🤨.

Если бы мы посмотрели на отправку HTML с сервера для традиционного приложения для одной страницы (SPA), мы бы увидели что -то вроде этого:

Весь пользовательский интерфейс страницы создается рамками как детей

Элемент, и это то, что подразумевается под фразой «рендеринг на стороне клиента».

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

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

В идеале мы хотели бы библиотеку, которая существует где -то посередине между сантехникой, свободным от кодирования современных фреймворков JavaScript, и способность JQuery манипулировать и создавать DOM, не владея им … 😉

🏆 Alpinejs входит в чат

Alpinejs соответствует нашим требованиям исключительно и описывается как предлагая нам

Реактивная и декларативная природа больших рамок, таких как Vue или реагирование по гораздо более низкой цене.

и

Вы можете сохранить свой DOM и посыпать поведение, как вы считаете нужным.

Ну, это звучит великолепно 👏🏾. Итак, как мы его используем?

🗺 Наш пункт назначения: Использование AlpineJs

Давайте снова посмотрим на наш пример формы HTML, но на этот раз с Alpinejs!

Сначала нам нужно добавить <Скрипт> Элемент в документе :

Затем мы определяем CreateFormComponent () функция, где инициализируются состояние и методы нашего компонента:

Наконец, мы аннотируем наш HTML нашего сервера с некоторым альпийским специфическим синтаксисом:

Давайте посмотрим на каждую часть в деталях!

Сценарий AlpineJS работает как большинство библиотек JavaScript, которые мы загружаем в браузер без процесса сборки – как только скрипт выполняется, он ищет «альпийский» материал и инициализирует все, что он может найти на странице.

Это означает, что мы можем иметь страницу, полную существующего HTML, отображаемой на сервере, и альпийский может зацепить ее и включить все его мощные функции 😄!

Alpine будет искать код инициализации (определяемый x-data окно объект.

Говоря о функциях инициализации, давайте посмотрим на наши следующие:

Этот блок определяет Iife 🤓 (немедленно вызванное выражение функции), которая присваивает функцию ( createFormComponent ) для окно объект так, чтобы он был доступен для альпийских (функции и переменные, определенные в iife, не доступны вне него).

Функция, которую мы определили, CreateFormComponent , возвращает объект, который включает в себя «состояние» ( электронная почта и ошибка ) нашего компонента. Это значения, которые Alpine гарантирует, остаются в обновлении на основе взаимодействия с пользователями, а также обеспечивают привод к обновлению HTML при их изменении. Это та сантехника, которую мы хотим избежать, и, к счастью, Альпийс позаботится об этом для нас ».

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

Обратите внимание, как это устанавливает значение this.error , который является Ошибка: '' значение в нашем состоянии компонента.

Он также имеет доступ к this.email что Электронная почта: '' значение в нашем состоянии компонента.

Теперь мы можем посмотреть на нашу улучшенную HTML -форму:

Alpine соединяет данные и интерактивность к нашему HTML с Директивы , Итак, давайте пройдемся через каждую директиву, которую мы используем, шаг за шагом Анкет

x-data = "createFormComponent ()" сообщает Alpine инициализировать это

Элемент и все его детские элементы в компонент и установите состояние и методы, которые они могут получить к тому, что было возвращено CreateFormComponent () (В нашем случае это по электронной почте , Ошибка и onsubmit )

@Recoid.prevent = "onsubmit" Подключает наш компонент onsubmit () функционировать на отправить Событие формы (а также обеспечивает $ event.preventdefault () называется автоматически с помощью модификатора события

Убедитесь, что значение Всегда оставайся в курсе с нашими компонентами Электронная почта: '' значение с помощью X-Model = "Электронная почта" Синтаксис связывания. Если наш JavaScript изменится Эл. адрес , Элемент немедленно отразит это изменение – если пользователь вписывает новое значение в Наш JavaScript будет иметь доступ к этому новому значению.

Мы делаем что -то подобное с условно показывая это с x-show = "ошибка" который покажет элемент, когда наш компонент Ошибка: '' Ценность – это правда и скрыть ее, когда она фальсификация.

X-Text Директива устанавливает внутренний текст нашего каковому значению Ошибка является.

Обратите внимание, как ни один из наших HTML не связан с нашим JavaScript через HTML id или класс Значения атрибута, что означает, что это не хрупкое обновление дизайна или стилей 🧠.

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

Вот живая демонстрация нашего решения Alpinejs:

Интеграция с Xperience

Если бы мы хотели заполнить сообщение об ошибке для нашей формы из Xperience, мы могли бы использовать Razor, чтобы установить значение, так как все на странице отображается на сервере:

const errorMessage = '@Model.FormErrorMessage';

window.createFormComponent = function () {
  return {
    email: '',
    error: '',

    onSubmit($event) {
      this.error = !this.email 
        ? errorMessage 
        : '';
    },
  };
};

Мы также можем сделать запросы в наш API ASP.NET CORE API, использовать ответ, чтобы установить наше сообщение об ошибке, и наша форма будет асинхронно подтверждена:

window.createFormComponent = function () {
  return {
    email: '',
    error: '',

    async onSubmit($event) {
      const result = await fetch(
        '/api/form', 
        { 
          method: 'POST', 
          body: JSON.stringify({ email: this.email }) 
        })
        .then(resp => resp.json());

      this.error = result.errorMessage;
    },
  };
};

Или представьте себе сценарий, в котором у нас есть <Таблица> данных и мы хотим отфильтровать результаты на основе того, что пользователь вводит в :


  
  

  
    @foreach (var row in Model.Rows)
    {
      
    }
  

        @row.Title

В примере выше, все строки таблиц изначально отображаются (отлично подходит для SEO!) И отфильтрованы только тогда, когда пользователь начинает печатать в 🎉!

✈ направляюсь домой: Какой вариант лучший выбор?

Теперь, когда мы видели несколько различных вариантов улучшения нашего HTML с помощью JavaScript, какой из них имеет смысл для нашего варианта использования?

jQuery

  • Если нам нужно только несколько строк кода
  • Существующие плагины jQuery обрабатывают большую часть сложности
  • Нет государственного управления в наших «компонентах»

Vue / Реагировать / СВЕЛТА / Угловой

  • Сложное государственное управление
  • Многие компоненты взаимодействуют вместе
  • Рендеринг на стороне клиента в порядке (SEO не важно)

Alpinejs

  • Более чем несколько строк кода, бизнес -логика
  • SEO важен
  • Пользовательский UX (не из плагина jQuery)

В WiredViews , мы использовали Alpinejs в нашем Кентико Xperience Проекты, наряду с Vuejs и jQuery.

Я рекомендую использовать правильный инструмент 👩🏼‍🔧 для правильной работы, и, к счастью, Alpinejs отлично подходит для современного веб -разработки и Kentico Xperience.

Как всегда, спасибо за чтение 🙏!

Рекомендации

Мы собрали список на Учетная запись Kentico Github ресурсов разработчика. Иди проверь!

Если вы ищете дополнительный контент Kentico, проверьте теги Kentico или Xperience здесь, на разработке.

#Kentico

#xperience

Или моя серия блогов Kentico Xperience, например:

  • Kentico Xperience Patterns Design
  • Эксперименты по виджетам Kentico Xperience MVC
  • Кусочки Xperience

Оригинал: “https://dev.to/seangwright/kentico-xperience-xplorations-why-we-should-be-using-alpinejs-3fka”

Читайте ещё по теме: