JavaScript: Одностраничное приложение на ванильном JS(SPA)
Все HTML, JS,CSS могут быть извлечены из сервера с первой же загрузки приложения, вместо того чтобы получать все файлы снова и снова при каждой загрузки, как это обычно без SPA.
Другой важный пункт, это то, что главная страница или контент никогда не перезагружается, но при этом, у вас разные URL адреса и история браузера при помощи пользовательского хешированного местоположения или API HTML5 history.
В примерах, мы собираемся использовать и объяснять хэш местоположения, но обе технологии вполне просты и понятны в использовании.
Почему SPA?
Давайте о некоторых преимуществах использования SPA:
• Эффективность. снижает необходимость браузера выполнять постоянные запросы на сервер, которые влияют на скорость вашего приложения и взаимодействие пользователя (UX)
• Улучшенный UX. Посколько скорость приложения улучшена, пользователь взаимодействует с приложением быстрее
Конечно, есть и минусы, давайте и о них:
• Достаточно тяжелая загрузка при первом запуске, поскольку загрузка в первый раз, приложение загружает кучу ресурсов и по этому, может показаться что приложение загружается медленно
• JS должен быть включен. Это может прозвучать нелепо, но обычно у каждого в браузере JavaScript включен, но если у кого-то выключен, то SPA бесполезна
Нет необходимости добавлять, но я все равно собираюсь это сделать. Если реализуете SPA не правильно, то все преимущества будут потеряны.
Ну что, давайте не много повеселимся и рассмотрим примеры….
Создаем простое SPA
Идея реализовать простое одностраничное приложение используя ванильный JavaScript с подходом хеширования местоположения.
- js. тут размещены js файлы
- views. тут находятся html routes
- index.html это главный файл нашего приложения, он загружает все файлы скриптов и устанавливает контейнер для отображения маршрутов html
Index HTML
Как мы уже упоминали ранее, главный html нашего приложения, будет загружать JS, который нам нужен, добавлять ссылки в меню, а также устанавливать контейнер элементов для отображения маршрутов HTML
- Мы создаем два меню с ссылками на #home и #about (хэш необходим, посколько мы будем использовать хешированное местоположение)
• Создаем div с в нем мы будем отображать html, связанный с активным маршрутом
• В конце документа, мы загружаем скрипты которые мы будем использовать
About и Home страницы
На самом деле нас не волнует содержимое этих файлов, таким образом, div содержит текст файла home, а другой div с текстом из файла about.
Идея состоит в том, что бы загрузить один по умолчанию(как маршрут по умолчанию) и другой, если необходимо. Как мы уже упоминали ранее, они находятся в папке views.
Route js
JavaScript обеспечить конструктор для наших маршрутов и парочку функциональных возможностей.
У нас есть три параметра:
• name. Имя нашего маршрута, мы собираемся использовать проверку, если маршрут активен
• htmlName. Является ли имя html, при загрузки с маршрутом
• default. True если путь маршрута по умолчанию в нашем приложении
Так же у нас есть две функции:
- constructor. Это просто функция конструктор
- isActiveRoute. Функция будет проверять по каждому маршруту, активен он или нет и получать актуальное положение окна
Router js
Давайте сначала посмотрим на код, а после я его объясню.
И так, давайте капнем глубже в JavaScript
Получаем только один параметр:
• routes. Это массив из маршрутов нашего приложения
У параметра также есть свойства,
• rootElem. Это root элемент в нашем приложении. Место где отрисовывается другой html
В конце у нас есть пять функций:
• constructor. Это просто функция конструктор. Он выполняется только один раз, при создании Router.(маршрута)
• init. Функция создает слушателя события hashChange окна. Первое, устанавливает callback слушателя на выполнение функции hasChanged и конец функции, выполняется в первый раз(это позволит нам выполнять route по умолчанию). Теперь, каждый раз когда хэш местоположения меняется, слушатель, который мы только что создали, выполняется. Эта функция выполняется только один раз при создании Router.
• hasChanged. Эта функция имеет две основные обязанности, обе связаны с выполнением правильной загрузки маршрута. Если расположение окна изменяется, то загружается активный маршрут и вызывает другую функцию, чтобы загрузить его HTML, если расположение окна пустое, то собирается загрузить маршрут по умолчанию. Функция получает два параметра, один из которых является областью действия экземпляра маршрутизатора(Router),а другой-маршрутами(Routes).
• goToRoute. Эта функция отвечает за получение и загрузку правильного HTML для активного маршрута. Он получает HTML-имя, которое он должен загрузить и, наконец, выполнить запрос.
Это все что нам нужно для простого SPA и его рабочей реализации.
Инициализация маршрутов и маршрутизации
Под конец, давайте посмотрим как мы запускаем маршрутизатор в app.js файле
Этот сценарий выполняет функцию init, которая создает экземпляр Router и предоставляет два маршрута(route), устанавливая home в качестве одного из них по умолчанию
Вывод:
Идея этой статья в том, что бы показать реализацию SPA приложения без участия фреймворков и библиотек, а использовать только чистый ванильный JavaScript
Надеюсь Вам понравилось!
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
Руководство. Подготовка одностраничного приложения Vanilla JavaScript для проверки подлинности в клиенте клиента
В предыдущей статье вы зарегистрировали приложение и настроили потоки пользователей в идентификаторе Microsoft Entra для клиента клиентов. В этой статье показано, как создать одностраничное приложение (SPA) Vanilla JavaScript (JS) и настроить его для входа и выхода пользователей с помощью клиента клиента.
В этом руководстве;
- Создание проекта JavaScript Vanilla в Visual Studio Code
- Установка необходимых пакетов
- Добавление кода в server.js для создания сервера
Предварительные требования
- Выполните предварительные требования и действия, описанные в статье Подготовка клиента клиента к проверке подлинности одностраничного приложения Vanilla JavaScript.
- Хотя можно использовать любую интегрированную среду разработки (IDE), поддерживающую приложения Vanilla JS, в этом руководстве рекомендуется Visual Studio Code. Его можно скачать на странице Загрузки .
- Node.js.
Создание проекта Vanilla JS и установка зависимостей
- Откройте Visual Studio Code, выберите Файл>Открыть папку. . Перейдите к и выберите расположение для создания проекта.
- Откройте новый терминал, выбрав Терминал>Новый терминал.
- Выполните следующую команду, чтобы создать проект Vanilla JS:
npm init -y └── public └── authConfig.js └── authPopup.js └── authRedirect.js └── claimUtils.js └── index.html └── signout.html └── styles.css └── ui.js └── server.js
Установка зависимостей приложения
- В терминале выполните следующую команду, чтобы установить необходимые зависимости для проекта:
npm install express morgan @azure/msal-browser Изменение файлаserver.js
Express — это платформа веб-приложений для Node.js. Он используется для создания сервера, на котором размещается приложение. Morgan — это ПО промежуточного слоя, которое регистрирует 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 $!`); >); В этом коде переменная приложения инициализируется с помощью модуля Expressи используется для обслуживания общедоступных ресурсов. MSAL-browser служит статическим ресурсом и используется для запуска потока проверки подлинности.
Vanilla JS Используется На Большем Количестве Сайтов, Чем jQuery
Если вы ищете новый фреймворк, который поможет вам создать веб-сайт, вам нужно знать о Vanilla JS. Это самый мощный и легкий из всех фреймворков. Он уже используется огромным количеством веб-сайтов и автоматически загружается большинством браузеров.
Как говорит команда Vanilla JS:
Vanilla JS-это быстрый, легкий, кросс-платформенный фреймворк для создания невероятных, мощных приложений JavaScript.
В следующее утверждение вам может быть трудно поверить:
На самом деле, Vanilla JS уже используется на большем количестве веб — сайтов, чем jQuery, Prototype JS, MooTools, YUI и Google Web Toolkit вместе взятые.
Если быть более точным, Vanilla JS используется, по крайней мере частично, большинством веб — сайтов, включая Facebook, Google, YouTube, Yahoo и так далее.
Стандартные функции, поддерживаемые из коробки, а не из коробки, включают замыкания; селекторы/манипуляции DOM; Ajax; сложную систему обработки событий; 2D-графику и 3D в некоторых случаях; полную поддержку регулярных выражений; и так далее. На самом деле, почти все, что вы хотите, включено в Vanilla JS.
Мало того, что это быстро. На главной странице Vanilla JS есть некоторые сравнения скорости, но мы не можем удержаться от цитирования эталона для поиска объектов DOM:
Обратите внимание, что лучшая альтернативная структура менее чем в два раза медленнее, а любимый всеми jQuery в четыре раза медленнее. Только подумайте, от какой скорости вы отказываетесь! Другие тесты показывают еще большее преимущество для Vanilla JS.
И удивительно, но мы обнаружили, что уже загружаем Vanilla JS и даже иногда используем его.