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 служит статическим ресурсом и используется для запуска потока проверки подлинности.

Vanilla JavaScript [2021] — создаем клон Paint в браузере

Vanilla JavaScript [2021] — создаем клон Paint в браузере. В этом курсе мы продолжим изучение основ JavaScript и создадим на практике клон Paint в окне браузера.

О курсе

Vanilla JavaScript [2021] — создаем клон Paint в браузере. В этом курсе мы продолжим изучение основ JavaScript и создадим на практике клон Paint в окне браузера. Если вы начинающий веб-разработчик, то вы находитесь в нужном месте! JavaScript — это основной язык, который используется для веб-разработки. Но применение JavaScript не ограничивается только фронтендом, на нем также можно создавать бэкенд сайтов (Node.JS), мобильные приложения (React Native), даже десктопные приложения, и все это с использованием одного лишь JavaScript! Что такое Vanilla JS? Это термин для обозначения «чистого» JavaScript без использования каких-либо библиотек и фреймворков. К сожалению, сейчас на рынке очень много узких специалистов — по React, по Angular, по Vue.js и т.д., но очень мало специалистов по чистому JavaScript. Правда в том, что один раз выучив Vanilla JS вы потом сможете легко применять полученные знания при работе в любом другом фреймворке, который основан на javascript. Таким образом, вы получите конкурентное преимущество при трудоустройстве, ведь вы будете знать язык, а не какой-то отдельный фреймворк или библиотеку!

Количество занятий: 14

Длительность занятий в минутах: 98

Сертификат об окончании:

Автор курса: Антон Голошниченко

Да, вы должны изучить Vanilla JavaScript, прежде чем фантазировать о JS Framework-ах

1 [История JavaScript]
2 Что такое ванильный JavaScript?
3 Фреймворки JavaScript: плюсы и минусы 4 Зачем изучать простой JS перед фреймворками
5 Список открытых источников ванильных JS-ресурсов
6 TL;DR (too long; didn’t read (многа букаф, ниасилил)) aka Подведем итоги Перемотка до 2013 года. ⏪ Наша небольшая команда разработчиков собирается выпустить один из самых впечатляющих проектов клиентов на сегодняшний день. Я за своим рабочим столом, просматривая утренние электронные письма. Мой партнер врывается через дверь офиса: «Что-то не так с нашим Angular-приложением, чувак. У меня есть digest is already in progress ошибка, везде появляется ошибка — не могу понять, что происходит», — говорит он, явно нервничая. Но я не нервничаю и не нервничаю. Я точно знаю, с чего начать, потому что я знаю свой JavaScript. И все это я знаю благодаря автоботу. Перемотка на 2011 год. ⏪ В то время я все еще был студентом-программистом с мечтательными глазами, и меня не трогали бизнес-требования реального программирования . Я был увлечен серверной разработкой и не имел никакого желания изучать ванильный JavaScript или что-либо подобное. Но мне и моим друзьям пришлось создать софт, ориентированного на задачи автобота в реальном времени для одного из наших классов. Мы наткнулись на эту новую классную вещь под названием Node.js ( ее документы тогда ). Никаких причудливых зависимостей, легких порожденных дочерних процессов, асинхронных и управляемых событиями … и многие в онлайне говорили, что это было г**но. Мы не имели ни малейшего представления о том, что такое JavaScript или V8, но это все равно казалось хорошим вызовом для нашего проекта. Пирс сказал мне, чтобы я нашел приличную библиотеку для моих сценариев использования и сделал несколько копий / вставок для выполнения работы с сокетами. Я мог бы сделать это. Но я не сделал. Хотя я не знал этого в то время, это было одно из лучших ранних решений в моей карьере. Вместо этого я начал жадно читать. Об асинхронном программировании, истории JavaScript, его плюсах и минусах, обо всем. Потому что я хотел овладеть основополагающими принципами языка, на котором основан мой проект. И это заняло довольно много времени, кофе, пиво и фиктивный код. В промежутке между управлением нетерпением моих товарищей по команде и созданием не очень чистой, функциональной кодовой базы роботов я узнал очень много *. Так какой смысл здесь? Я потратил достаточно времени, чтобы понять основные принципы JavaScript, прежде чем использовать ярлыки, предоставляемые фреймворками и библиотеками JS . Почему это важно? Ну, это то, о чем этот пост: не просто притворяться.

2 Что такое “Ванильный JavaScript”?

Позвольте мне процитировать ответ от koenpeters на Stackoverflow :

Использование «VanillaJS» означает использование простого JavaScript без каких-либо дополнительных библиотек, таких как jQuery.
Люди используют это как шутку, чтобы напомнить другим разработчикам, что в наше время можно многое сделать без необходимости в дополнительных библиотеках JavaScript.
Вот забавный сайт, который в шутку говорит об этом: http://vanilla-js.com/

Или, в нашем случае, без новых модных Фреймворков. Для общего обзора JS для начинающих, проверьте этот пост. Шутка про “фреймворк” Ванильный JS. Онлайн форумы заполнены такими вопросами, как:

В чем смысл Vanilla JavaScript? Когда был придуман термин?

История сайта Vanilla JS , который позиционируется как сайт “JS framework”, коротка, но забавна. Эрик Вастл создал его в 2012 году, использовав немного троллинга и путаницы, чтобы понять суть: часто вы можете использовать простой JavaScript вместо дополнительных фреймворков или библиотек JS. Хотя Эрик не придумал этот термин сам по себе, его сайт определенно способствовал его популяризации .

Становление современного, простого JavaScript

Исторически говоря, разработчикам нужно было обходить простой JavaScript для МНОГИХ задач, будь то для того, чтобы заставить их код работать согласованно в разных браузерах, или просто выйти за рамки того, что предлагал Javascript в то время. Мы говорим IE 6-7 дней. При этом разработчики часто по умолчанию использовали jQuery. Но этот длительный рефлекс использования внешних библиотек теперь не имеет значения, благодаря развитию спецификации ECMAScript и современным браузерам, которые более тесно следят за ней. Сегодня выбор ванильного JS перед jQuery чаще всего является самым умным выбором, поэтому ваша кодовая база не будет в конечном итоге излишне раздутой зависимостями. Очевидный пример из превосходного сайта jQuery, который вам не нужен : JQuery

$('.my #awesome selector'); 

против ванили JS:

document.querySelectorAll('.my #awesome selector'); 

Этот сайт полон полезных примеров JS Vanilla — посмотрите! О, и в случае, если вам нужно больше социальных доказательств: гитхаб провел рефакторинг своего кода и перешел с jquery на JS

Слово о JS фреймворках: плюсы и минусы

Во-первых, что я подразумеваю здесь под «JS»? Я поместил все Angular , Vue , React , Backbone, Ember, Knockout, Ext, jQuery, Meteor, Express, Koa, Total, Socket.io и т. Д. В один ящик. Да, я знаю, что некоторые — совсем другое. Да, я знаю, что некоторые из них «на самом деле не фреймворк, а скорее библиотека. Но, пожалуйста, ради этой статьи, давайте объявим их эквивалентными по своему основному назначению.

Плюсы: почему я считаю, что JavaScript-фреймворки потрясающие

→ Они помогают вам, абстрагируя сложный и сложный код. → Они помогают быстрее доставлять код и увеличивают скорость разработки. → Они заставляют вас сосредоточиться на ценности вашего приложения, а не на его реализации. Эти причины быстро всплывают, когда мы обсуждаем популярность JS-фреймворков. Но для меня они больше маркетинговые причины. Я не призываю против фреймворков здесь — на самом деле я использовал довольно много из них за всю свою карьеру. Я считаю, что величайшая ценность, которую можно найти в JS, — это сотрудничество . Их согласованный интерфейс и методы позволяют разработчикам, скажем, из Канады, США и Бразилии понимать друг друга и работать вместе. Если вы создаете приложение с помощью [вставьте свой любимый фреймворк], когда придет время, вы сможете найти опытного разработчика, который с уверенностью сможет внедрить кодовую базу проекта. Этот человек сможет приступить к рассмотрению функций без необходимости объяснения каждой части вашей архитектуры программного обеспечения. Другой ключевой причиной использования фреймворков является практика . Они заставляют вас практиковаться снова и снова. И это хорошо! Практика всегда ведет к мастерству, чего бы вы ни пытались достичь.

Минусы: почему я считаю, что JS-фреймворки это НЕ ТАК потрясающе

Люди, которые работают над внедрением фреймворков, все талантливы — по крайней мере, большинство из них. Они делают огромную работу по упрощению сложных начинаний. Но все эти уровни абстракции могут быстро стать злом . В каждой разработке приложений наступает день, когда что-то работает не так, как ожидалось, и вы не знаете почему. Вот когда вы должны начать копать. Когда вы начнете поиск по плохо документированному, сложному, универсальному, чистому коду JavaScript, вам понадобится глубокое понимание JS, чтобы добиться своего. В противном случае, я могу гарантировать, что вы потеряете все драгоценное время, которое вы сэкономили, используя свои модные фреймворки. Возможно, вам просто придется купить новую кофемашину, чтобы уложиться в сроки.

Как я когда-то читал где-то: «Вы не React и не разработчик Vue. Вы разработчик».

Конечно, фреймворки полезны для небольших команд, работающих над одним приложением. Да, они сэкономят вам немного времени (если вы не любитель рефакторинга(усовершенствования кода)). Но что, если у вас есть несколько команд, работающих над несколькими приложениями? Как вы думаете, все руководители команд согласятся с единой структурой для всего набора приложений? А что, если в 2019 году появится новый «крутой парень» фреймворк? Проблема в том, что как только вы выбираете структуру, вы влияете на каждое предстоящее инженерное решение. Кроме того, вы связываете свою команду с технологией, которая, вероятно, скоро станет устаревшей. Этот материал поражает меня.

Почему вы должны изучать ванильный JavaScript перед фреймворками?

Если вы овладеете основами JavaScript, ваша единственная задача при изучении новых JS-фреймворков будет заключаться в их конкретном синтаксисе. JavaScript сейчас является языком программирования для Интернета . Понимание его основных инженерных принципов имеет первостепенное значение, если вы хотите построить себе достойную веб-карьеру. Особенно, если вы стремитесь к передней части пакета. За последние 5 лет, более 10 frontend JS фреймворков делали новости. Угадайте, сколько будет делать то же самое в ближайшие 5-10 лет? Если вы просто притворяетесь, что знаете JavaScript, двигатель, который приводит в движение эту веб-революцию, как вы будете идти в ногу? Подумайте о том, что сегодня делают «разработчики jQuery»: пытаясь догнать Angular. Завтра они будут пытаться догнать React / Vue. И грустная, удручающая петля продолжается. Знание ванильного JavaScript поможет вам на самом деле понять — или даже внести свой вклад — в JS-фреймворки и поможет выбрать правильный, когда вам это нужно. Для меня это принесло много положительного:

• Это помогло мне создать потрясающий набор клиентских функций за очень короткий промежуток времени для приложения Ember, не зная ничего о Ember.
• Он получил предложение о работе от одного из технических гигантов из-за очень простой библиотеки, которую я написал в свободное время.
• Это заставило меня выявить ошибки в реализации libs и быстро предложить простые решения.

Где и как можно выучить ванильный JavaScript?

Я надеюсь, что убедил вас испачкать руки простым простым JavaScript. Если вы хотите надрать всем задницу в веб-разработке, вот совет с моего высокого уровня:

Всегда будьте любопытны, всегда читайте исходные материалы и всегда пробуйте сами.

И еще несколько конкретных советов:

• Всякий раз, когда в Echo JS, Hacker News или GitHub появляются новые библиотеки или фреймворки JS, продолжайте читать источники.
• Каждый раз, когда вы пишете кусок кода, старайтесь придумать простое решение JS, которое может соответствовать вашим потребностям, вместо того, чтобы сразу же искать библиотеку для интеграции.
• Перейдите на Stack Overflow и бросьте себе вызов, чтобы самостоятельно ответить на ванильные вопросы JS.

Для начинающих: я считаю, что учебный процесс, изложенный в этом посте про JS, является хорошей отправной точкой:

Теперь об учебных ресурсах:

Learn Vanilla JS — список ресурсов с открытым исходным кодом на GitHub ��

Я работал со своим другом Фрэнком из Snipcart, чтобы составить тщательно отобранный список учебных пособий, книг, курсов, документации, источников новостей и блогов по vanilla JS .

Мы хотим сделать его максимально открытым и совместным. Так что не стесняйтесь добавлять ценные вещи с помощью вилки + PR! ��

Некоторые заметные одноразовые статьи, не добавленные в список выше:

• Современный JavaScript объяснил для динозавров(https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70)
• ES6 для начинающих с примером(https://dev.to/srebalaji/es6-for-beginners-with-example-c7)
• Современный JavaScript для древних веб-разработчиков(https://trackchanges.postlight.com/modern-javascript-for-ancient-web-developers-58e7cae050f9)
• Основы манипуляции с DOM в ванильном JavaScript (без jQuery)(https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery)
• Глоссарий современных концепций JavaScript: часть 1(https://auth0.com/blog/glossary-of-modern-javascript-concepts/)

Я надеюсь, что вы найдете ценность в этой маленькой ванильной JavaScript-вики!

Заключение

Так вот мой TL; DR для вас, ребята:

• Если вы не знаете основополагающих принципов Интернета, вы в конечном итоге попадете в стену благодаря эволюции самого языка и постоянному появлению новых фреймворков.
• Знание чистого JS сделает вас ключевым инженером, который может решать сложные проблемы (причина перед безумным гугл поиском).
• Это сделает вас универсальным и продуктивным как на переднем, так и на заднем плане.
• Это даст вам набор инструментов для инноваций, а не просто для выполнения.
• Это поможет вам понимать, когда использовать фреймворк а когда нет .
• Это даст вам лучшее общее представление о том, как работают браузеры и компьютеры.

Использование JS-фреймворка наверняка поможет вам быстро достичь чего нибудь. Но это не приведет вас далеко, если вы не поймете основные концепции этого. Подобно тому, как научиться играть на гитаре Wonderwall не научит вас сочинять музыку, но у вас будет повод для практики.

Я твердо верю, что этот принцип «сначала изучи основы / корни» применим практически ко всему в жизни. От изучения нового языка программирования до начала нового вида спорта. Это требует много практики, но как только вы овладеете этим, остается только проявить творческий подход. И вот тут начинается настоящее веселье.

Что выбрать: 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 благодаря их возможностям и более чистой архитектуре. Таким образом, необходимо определить, какие потребности вам нужно удовлетворить, чтобы выбрать наиболее подходящий фреймворк для вашего проекта.