Vanilla js что это

Руководство. Подготовка одностраничного приложения Vanilla JavaScript для проверки подлинности в клиенте клиента

В предыдущей статье вы зарегистрировали приложение и настроили потоки пользователей в идентификаторе Microsoft Entra для клиентов. В этой статье показано, как создать одностраничное приложение Vanilla JavaScript (JS) и настроить его для входа и выхода пользователей с клиентом клиента.

В этом руководстве;

• Создание проекта Vanilla JavaScript в Visual Studio Code
• Установка необходимых пакетов
• Добавление кода в server.js для создания сервера

Необходимые компоненты

• Завершение предварительных требований и шагов, описанных в статье «Подготовка клиента клиента к проверке подлинности одностраничного приложения Vanilla JavaScript».
• Хотя можно использовать любую интегрированную среду разработки (IDE), поддерживающую приложения Vanilla JS, в этом руководстве рекомендуется использовать Visual Studio Code . Его можно скачать на странице «Загрузки «.
• Node.js.

Создание проекта Vanilla JS и установка зависимостей

1. Откройте Visual Studio Code, выберите «Открыть папку» >. Перейдите к папке и выберите расположение, в котором нужно создать проект.
2. Откройте новый терминал, выбрав терминал >»Новый терминал».
3. Выполните следующую команду, чтобы создать проект Vanilla JS:

npm init -y 

 └── public └── authConfig.js └── authPopup.js └── authRedirect.js └── claimUtils.js └── index.html └── signout.html └── styles.css └── ui.js └── server.js 

Установка зависимостей приложения

1. В терминале выполните следующую команду, чтобы установить необходимые зависимости для проекта:

npm install express morgan @azure/msal-browser 

Изменение файла server.js

Express — это платформа веб-приложения для Node.js. Он используется для создания сервера, на котором размещается приложение. Морган — это ПО промежуточного слоя, которое регистрирует HTTP-запросы в консоль. Файл сервера используется для размещения этих зависимостей и содержит маршруты для приложения. Проверка подлинности и авторизация обрабатываются библиотекой проверки подлинности Майкрософт для JavaScript (MSAL.js).

Добавьте следующий фрагмент кода в файл server.js :

const express = require('express'); const morgan = require('morgan'); const path = require('path'); const DEFAULT_PORT = process.env.PORT || 3000; // initialize express. const app = express(); // Configure morgan module to log all requests. app.use(morgan('dev')); // serve public assets. app.use(express.static('public')); // serve msal-browser module app.use(express.static(path.join(__dirname, "node_modules/@azure/msal-browser/lib"))); // set up a route for signout.html app.get('/signout', (req, res) => < res.sendFile(path.join(__dirname + '/public/signout.html')); >); // set up a route for redirect.html app.get('/redirect', (req, res) => < res.sendFile(path.join(__dirname + '/public/redirect.html')); >); // set up a route for index.html app.get('/', (req, res) => < res.sendFile(path.join(__dirname + '/index.html')); >); app.listen(DEFAULT_PORT, () => < console.log(`Sample app listening on port $!`); >); 

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

Что выбрать: jQuery, Vue.js, Vanilla js

Что выбрать, плюсы и минусы: jQuery, Vue.js, Vanilla js

jQuery
jQuery является одним из самых распространенных JavaScript-фреймворков. Он облегчает работу с DOM, добавляет анимации и улучшает интерактивность сайта. Его простота в использовании, кросс-браузерная поддержка и бо́льшое количество плагинов и расширений делают его неотъемлемой частью веб-разработки.
Плюсы:
jQuery имеет простой и понятный синтаксис, что делает его легким в использовании.
Он имеет обширную базу учебных ресурсов, благодаря чему новички в веб-разработке могут быстро начать использовать его.
jQuery обеспечивает кросс-браузерную совместимость, что делает его ценным инструментом для разработки веб-сайтов.
Минусы:
jQuery загружает дополнительные скрипты, что может снижать производительность, особенно на мобильных устройствах.
jQuery может быть сложным в поддержке и развитии. Vue.js
Vue.js является относительно новым фреймворком, который быстро набирает популярность благодаря своей простоте, масштабируемости и эффективности. Он быстро развивается и предлагает много новых функций, которые делают его все более популярным в веб-разработке.
Плюсы:
Vue.js обеспечивает двустороннее связывание данных, что делает его особенно полезным при создании интерактивных приложений.
Он предоставляет чистую архитектуру, что делает его легким для поддержки и развития.
Vue.js имеет всю мощь фреймворков, таких как Angular и React, но он более прост в использовании.
Минусы:
Vue.js является более новым фреймворком, что может быть недостатком для разработчиков, которые привыкли к более традиционным фреймворкам.
Его меньшее количество пользовательских плагинов и расширений может означать, что потенциально полезные функции могут отсутствовать или быть более сложными для создания.

Vanilla js
Это основной язык JavaScript, без каких-либо библиотек или фреймворков. Разработчики часто выбирают Vanilla.js, когда им нужен более производительный и масштабируемый JavaScript.
Плюсы:
Vanilla.js обычно является самым производительным и быстрым в использовании, так как он не требует загрузки никаких дополнительных библиотек или фреймворков.
Его использование может сократить временные затраты на разработку, а также позволить создавать более кастомизируемые приложения.
Vanilla.js может обучить основам языка программирования JavaScript.
Минусы:
Vanilla.js может быть труднее для начинающих в программировании, так как он не обладает готовыми синтаксическими сокращениями или абстракциями для упрощения основных задач.
Работа с Vanilla.js может быть более трудоемкой при создании более сложных приложений.
Итак, какой фреймворк лучше: jQuery, Vue.js или Vanilla.js? Выбор определяется многими факторами, такими как тип проекта, опыт разработчиков и требования к производительности. Для начинающего в веб-разработке человека jQuery может быть хорошим выбором благодаря его простому синтаксису и доступности учебных ресурсов. В то же время для более сложных приложений лучшим выбором может быть Vue.js или Vanilla.js благодаря их возможностям и более чистой архитектуре. Таким образом, необходимо определить, какие потребности вам нужно удовлетворить, чтобы выбрать наиболее подходящий фреймворк для вашего проекта.

Ванильный JavaScript и HTML. Никаких фреймворков. Никаких библиотек. Никаких проблем

Используете для создания приложений Vue, React, Angular или Svelte? Я использую, и если вы тоже, и уверен, что вам уже давно не приходилось писать приложение, которое выводит информацию без этих прекрасных инструментов.

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

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

Кроме того, это забавно, полезно и помогает понять ценность современных библиотек и фреймворков, которые делают за нас так много работы.

Давайте рассмотрим разные способы вывода информации. И держите под рукой эту документацию!

Образец приложения

Вот приложение, которое я продемонстрировал в своей статье. Оно извлекает список персонажей и выводит их при нажатии на кнопку. Также приложение отображает индикатор выполнения при извлечении списка.

Инструменты

Важно выбрать правильные инструменты. В этом упражнении нам нужно отобразить в браузере информацию с помощью конкретных инструментов, доступных всем нам. Никаких фреймворков. Никаких библиотек. Никаких проблем.

Мы будем использовать только HTML, TypeScript/JavaScript, CSS и браузерную DOM (объектную модель документа). Давайте посмотрим, как можно отобразить HTML.

Здесь вы можете почитать о том, как писать на TypeScript с помощью VS Code.

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

Подход

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

Отображение индикатора выполнения

Индикатор должен отображаться, пока приложение решает, какие персонажи должны попасть в список. То есть сначала индикатор невидим, затем пользователь нажимает кнопку обновления, индикатор появляется, и снова исчезает после отображения списка.

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

Отображение индикатора с помощью внутреннего HTML

Создать HTML и поместить его внутрь другого элемента — это самое старое решение, но оно работает! Выбираете элемент, в котором появится индикатор, а затем задаёте для новых данных свойство innerHtml . Обратите внимание, что мы также пытаемся сделать код удобочитаемым с помощью шаблонных строк, позволяющих охватывать несколько строк.

const heroPlaceholder = document.querySelector('.hero-list'); heroPlaceholder.innerHTML = ` `; 

Просто. Легко. Почему так нельзя сказать про любой код? Ну посмотрите, как быстро этот фрагмент решает проблему!

Вероятно, вы уже заметили, насколько уязвим этот код. Одна ошибка в HTML — и всё! У нас проблема. И действительно ли он удобочитаем? Да, это так, но что будет, когда HTML станет слишком сложным? Когда у вас 20 строк кода с классами, атрибутами и значениями… ну, вы поняли. Да, решение не идеальное. Но при небольшом количестве HTML вполне работает, и я рекомендую присмотреться к нему любителям всё писать в одну строку.

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

И последнее: innerHTML может влиять на скорость отображения. Я не увлекаюсь избыточной оптимизацией, но лучше проверяйте производительность, потому что innerHTML может быть причиной возникновения циклов отрисовки и вывода макетов в браузере. Имейте в виду.

Индикатор выполнения с помощью DOM API

Уменьшить громоздкость длинных строк можно с помощью DOM API. Создаём элемент, добавляем необходимые классы и атрибуты, задаём значения, а потом добавляем его в DOM.

const heroPlaceholder = document.querySelector('.hero-list'); const progressEl = document.createElement('progress'); progressEl.classList.add('hero-list', 'progress', 'is-medium', 'is-info'); const maxAttr = document.createAttribute('max'); maxAttr.value = '100'; progressEl.setAttributeNode(maxAttr); heroPlaceholder.replaceWith(progressEl); 

Преимущество в том, что нужно писать больше кода и полагаться на API. То есть по сравнению с innerHTML при опечатках повышается вероятность, что система сообщит об ошибке, которая поможет найти причину проблемы и придумать решение.

А недостаток в том, что требуется шесть строк кода для вывода информации, которая выводится одной строкой с помощью innerHTML .

Код DOM API для отображения индикатора более читабелен, чем код с innerHTML ? Я бы поспорил. А не в том ли причина, что HTML-код индикатора очень короткий и простой? Возможно. Если бы было 20 строк, то innerHTML стал бы гораздо сложнее в чтении… впрочем, и код DOM API тоже.

Отрисовка индикатора с помощью шаблонов

Ещё один способ заключается в создании тега и использовании его для упрощения вывода информации.

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

Затем код может взять шаблон с помощью метода document.importNode() из DOM API. По мере необходимости код может манипулировать содержимым шаблона. Теперь добавьте это содержимое в DOM, чтобы отобразить индикатор.

const heroPlaceholder = document.querySelector('.hero-list'); const template = document.getElementById('progress-template') as HTMLTemplateElement; const fetchingNode = document.importNode(template.content, true); heroPlaceholder.replaceWith(fetchingNode); 

Шаблоны — хороший способ сборки HTML; мне он нравится, потому что позволяет писать HTML там, где это имеет смысл, и можно меньше делать с помощью кода на TypeScript/JavaScript.

Можно ли импортировать шаблоны из других файлов? Да, но с помощью других библиотек. Однако сейчас мы от них сознательно отказались. Импорт HTML обсуждается годами, но, как видно из материалов сайта «Can I Use», даже не все современные браузеры поддерживают эту возможность.

Отображение списка персонажей

Теперь поговорим о том, как можно отображать список персонажей с помощью тех же трёх методик. Отличие от отрисовки одиночного HTML-элемента и списка персонажей заключается в том, что теперь мы:

• отображаем несколько HTML-элементов;
• добавляем несколько классов;
• добавляем определённую последовательность из дочерних элементов;
• отображаем для каждого персонажа много одинаковой информации;
• динамически отображаем текст внутри элементов.

Отображение персонажей с помощью внутреннего HTML

При использовании innerHTML целесообразно начать с массива персонажей и итерировать его. Таким образом можно создавать по строке за раз. Строки будут отличаться только именами персонажей и описанием, которые можно вставлять с помощью шаблонных строк. Каждый персонаж в массиве создаёт тег li , который связывается со строчным массивом. Наконец, строчный массив преобразуется в чистый HTML, обёрнутый в ul и назначенный для innerHTML .

Это работает. И возможно, это более удобочитаемо. Что насчёт производительности? Трудно ли выявить (или вообще возможно?) опечатки при наборе кода? Судить вам. Но давайте не будем делать выводов, пока не разберёмся с другими методиками.

Отображение персонажей с помощью DOM API

function createListWithDOMAPI(heroes: Hero[]) < const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); heroes.forEach(hero =>< const li = document.createElement('li'); const card = document.createElement('div'); card.classList.add('card'); li.appendChild(card); const cardContent = document.createElement('div'); cardContent.classList.add('card-content'); card.appendChild(cardContent); const content = document.createElement('div'); content.classList.add('content'); cardContent.appendChild(content); const name = document.createElement('div'); name.classList.add('name'); name.textContent = hero.name; cardContent.appendChild(name); const description = document.createElement('div'); description.classList.add('description'); description.textContent = hero.description; cardContent.appendChild(description); ul.appendChild(li); >); heroPlaceholder.replaceWith(ul); > 

Отображение персонажей с помощью шаблонов

Список персонажей можно отобразить с помощью шаблонов. Для этого применяется та же методика, что и для отображения элемента . Сначала на HTML-странице создаём шаблон. Этот HTML-код будет чуть сложнее, чем в случае с . Но это не проблема. Это просто HTML внутри HTML-страницы, так что мы можем легко исправлять ошибки и форматирование с помощью прекрасного редактора VS Code.

Теперь можете написать код для создания списка персонажей. Сначала создаём ul для обёртывания строк с персонажами li . Теперь можно проходить по массиву и с помощью того же метода document.importNode() применять один и тот же шаблон для каждого персонажа. Обратите внимание, что шаблон можно многократно использовать для создания каждой строки. Он превращается в чертёж-исходник, по которому создаётся необходимое количество строк.

Список персонажей должен содержать имена и описания. То есть нужно будет заменять конкретные значения внутри шаблона. Для этого целесообразно каким-то образом определять и ссылаться на места, куда вы будете вставлять эти значения. В нашем примере для получения ссылки на каждого персонажа используется метод querySelector(‘your-selector’) , после чего задаётся имя и описание.

function createListWithTemplate(heroes: Hero[]) < const ul = document.createElement('ul'); ul.classList.add('list', 'hero-list'); const template = document.getElementById('hero-template') as HTMLTemplateElement; heroes.forEach((hero: Hero) =>< const heroCard = document.importNode(template.content, true); heroCard.querySelector('.description').textContent = hero.description; heroCard.querySelector('.name').textContent = hero.name; ul.appendChild(heroCard); >); heroPlaceholder.replaceWith(ul); > 

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

Итоги

Я не упомянул о том, как отображают информацию популярные фреймворки и библиотеки. Vue, React, Angular и Svelte существенно облегчают задачу и требуют писать меньше кода. Также у них есть и другие преимущества. В этой статье мы рассмотрели лишь относительно простые методики вывода информации с помощью DOM и чистого HTML, а также TypeScript/JavaScript.

К чему мы пришли?

Надеюсь, вы теперь представляете, как выводить информацию без использования библиотек. Есть ли другие способы? Конечно. Можно написать функции, которые упростят код и позволят использовать его многократно? Конечно. Но однажды вам захочется поэкспериментировать с одним из таких прекрасных инструментов, как Vue, React, Angular или Svelte.

Эти фреймворки делают за нас много работы. Вы можете помнить, как выводить информацию с помощью чистого DOM-кода с JavaScript или jQuery. Или как делать это с помощью инструментов вроде handlebars или mustache. А может быть, вы никогда не выводили информацию в DOM без помощи фреймворка. Можете сами представить, какие процессы протекают под капотом современных библиотек и фреймворков, когда они выводят для вас информацию на экран.

Полезно знать, что можно сделать с помощью чистого HTML, TypeScript/JavaScript и CSS, даже если вы используете фреймворк, который избавляет вас от всего этого.

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

Vanilla JS — очень мощный javascript-фреймворк

Как ни странно, на Хабре упоминание этого мощнейшего фреймворка нашлось лишь в одном комментарии от апреля 2012 года.

Вступление

Для меня эта тема особенно актуальна, ведь последнее время на Хабре упоминается огромное количество js-фреймворков. Какие-то из них авторы различных проектов находят в Сети, какие-то — пишут сами, не очень понимая зачем. Кто-то просто пишет свои велосипеды.

Моё же мнение — надо стремиться к отсутствию избыточного кода, к максимальному минимализму, простите за тавтологию.
Если на весь сайт вам нужно только выбирать html-элементы по их id — глупо подключать jQuery.

Если вам на Node.js проекте надо собрать пачку js-файлов и сжать их — глупо писать или подключать тяжёлые фреймворки с кучей настроек, параметров, дополнений и методов, ведь простейший скрипт, склеивающий файлы и прогоняющий их через Кроукфордский jsmin будет намного быстрее, надёжнее и проще.

Чем больше кода — тем больше ошибок. Чем больше стороннего кода — тем сложнее поддерживать проект. Ведь когда вы берёте чужой код, вы берёте на себя и ответственность за его поддержку. Нельзя будет сказать «этот баг не мой, а вон из той библиотеки».

Vanilla JS

Итак, начнём обзор этого мощнейшего и самого популярного в мире JS-фреймворка.

(далее — перевод с официального сайта фреймворка)

Команда Vanilla JS поддерживает каждый байт кода фреймворка и каждый день много трудится, чтобы сделать его маленьким и интуитивным.
Кто использует Vanilla JS? Хорошо, что вы спросили, вот несколько примеров: Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow.

Вообще-то, Vanilla JS уже используется на большем количестве сайтов, чем jQuery, Prototype JS, MooTools, YUI и Google Web Toolkit вместе взятые!

• DOM (Манипуляции / Селекторы)
• Прототипная система объектов
• AJAX
• Анимации
• Система событий
• Регулярные выражения
• Функции как объекты
• Замыкания
• Библиотеку математических методов
• Библиотеку для работы с массивами
• Библиотеку для работы со строками

• Сжать исходники
• В кодировке UTF8
• Использовать «CRLF» переносы строк (Windows)

Деплоймент

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

Чтобы подключить Vanilla JS, просто добавьте следующую строку в ваш HTML:

Когда будете готовы выложить свой проект на продакшн, смените подключение на намного более быстрый метод:

Всё верно, совсем без кода. Vanilla JS настолько популярна, что браузеры автоматически загружают фреймворк уже лет десять.

Сравнение скорости работы с другими фреймворками

Поиск DOM-элемента по ID

document.getElementById('test-table');

dojo.byId('test-table');

$('test-table')

delete Ext.elCache['test-table']; Ext.get('test-table');

$jq('#test-table');

YAHOO.util.Dom.get('test-table');

document.id('test-table');

Поиск элементов по названию тэга

document.getElementsByTagName("span");

Prototype.Selector.select('span', document);

YAHOO.util.Dom.getElementsBy(function(),'span');

Ext.query('span');

$jq('span');

dojo.query('span');

Slick.search(document, 'span', new Elements);

Примеры кода

Плавно скрыть элемент

var s = document.getElementById('thing').style; s.opacity = 1; (function())();

AJAX-вызов

var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () < if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); >; r.send("banana=yellow");

Заключение

Больше информации о Vanilla JS вы можете найти по ссылкам:

• Документация по Vanilla JS
• Различные книги по Vanilla JS
• или попробуйте что-нибудь из плагинов для Vanilla JS

Когда вы фигачите ваш проект на Vanilla JS, можете использовать эту удобную кнопку:

от автора поста

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

• Ненормальное программирование
• Веб-разработка
• JavaScript