Alpine.js — лёгкая альтернатива jQuery
Я давно уже присматриваюсь к Alpine.js, поскольку этот js-фреймворк разительно выделяется из ряда других. По своей сути он очень близок к Vue.js, но при этом может работать как привычный jQuery.
Основной массе разработчиков просто не нужны все те «фишки», что предлагают React или Vue. Вообще работа с JavaScript всегда происходит по одному алгоритму — вначале получили элемент/элементы на странице, после делаем с ними какие-то манипуляции.
Точно также работает и система событий — прописали либо onclick к нужному html-элементу, либо навесили событие через «слушатель» addEventListener и дальше через js-функцию делаем что нужно. Поскольку JavaScript очень уж многословен, а во многих случаях и неочевиден, то и возникли библиотеки функций — jQuery как раз одна из них. С их помощью работать с js намного приятней.
Но современные js-фреймворки помимо своих функций, предлагают немного другой подход, основанный на синтаксическом «сахаре» — который не имеет никакого смысла вне используемого фреймворка.
За это приходится расплачиваться. Основное ограничение — такие фреймворки требуют для своей работы Node.js, поскольку исходный код нужно скомпилировать в полноценный JavaScript, который уже будет понимать браузер. Да, формально можно использовать готовые сборки того же React или Vue, но размер их js-файлов достаточно большой: 120 и 93Кб. Даже jQuery 3.5 весит меньше — 89Кб. Если мы хотим сэкономить на загрузке (а js-код критично важен для браузера), то нет смысла использовать тот же Vue. И это при том, что в таком варианте мы лишаемся всех «плюшек» синтаксического «сахара».
Использование Node.js тоже не имеет смысла, если нам нужно сделать какие-то простые вещи, вроде сменить css-класс или отследить click на кнопке. Ставить ради этого гигантский Node.js неразумно.
Alpine.js выделяется тем, что имеет очень небольшие размеры (всего 25Кб), не требует компиляции, но при этом поддерживает синтаксический «сахар» как и «большие» фреймворки.
Важно то, что Alpine.js можно загружать в конце BODY, что даёт прирост скорости страницы. Если jQuery (и аналоги) мы вынуждены загружать в секцию HEAD (поскольку в теле страницы произвольно могут встретиться её функции), то с Alpine.js мы вообще не задумываемся об этом. Достаточно прописать загрузку как обычный js-файл:
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js"></script>
После этого на странице можно использовать возможности Alpine.
Здесь я хочу обратить внимание на то, что есть существенное отличие от того, как мы привыкли работать с jQuery или даже нативным JS.
Например нам нужно отследить обычный click на каком-то элементе. Обычно мы прописываем css-класс или уникальный id и потом цепляемся к нему с помощью события onclick, в котором прописываем функцию-обработчик.
В Alpine схема заимствованна из «больших» фреймворков (в основном — из Vue), где применяется компонентный подход. В нём мы объявляем, что какой-то элемент, например DIV будет являться компонентом, или в современных терминах — ему добавляется «реактивность».
Такой компонент будет представлять собой единую сущность: со своими данным и поведением.
<div x-data> содержимое </div>
Директива x-data — это та самая инструкция, которая указывает Alpine добавить реактивности в данный блок. Всё, что окажется внутри — и будет представлять собой единый компонент.
В Alpine всего 14 директив и все они начинаются с префикса x-. Основная x-data не только указывает на сам компонент, но и позволяет сразу инициализировать данные.
<div x-data="{t: false}">
содержимое
</div>
В данном примере будет создана переменная t со значением false. Поскольку это обычный js-объект, то в нём можно определить любые данные (или функцию, которая их вернёт).
Теперь сделаем простой пример, в котором будет отслеживать событие onclick при котором менять css-класс (аля-toggle).
<div x-data="{t: false}">
<div x-on:click="t = !t" x-bind:class="{ 't-red': t }">Toggle class click</div>
</div>
Toggle class click
В x-data мы создаём переменную, которая будет хранить текущее состояние элемента.
Директива x-on:click отслеживает событие onclick, где в кавычках указывается js-код — как будто-бы это обычная js-функция. В данном случае мы инвертируем значение t.
Дальше мы используем директиву x-bind, которая связывает атрибут тэга (здесь это class) с логическими выражениями. Конкретно в этом примере css-класс t-red
t будет истинно (true).Мы кликаем на элементе, меняется переменная t, которая влияет на bind-связку и css-класс автоматом добавляется. Второй клик инвертирует t и класс удаляется.
Этот же самый пример можно оформить ещё проще:
<div x-data="{t: false}">
<div @click="t = !t" :class="{ 't-red': t }">Toogle class click</div>
</div>
То есть @ заменяется на x-on:, а : на x-bind:.
Можно не создавать оборачивающий блок, если это одиночный элемент:
<div x-data="{t: false}" @click="t = !t" :class="{'t-red': t}">Toogle class click</div>
Похожий пример, только отслеживаем событие аля-hover:
<div x-data="{t: false}">
<div @mouseover="t = true" @mouseout="t = false" :class="{'t-red': t}">Toogle class hover</div>
</div>
Toogle class hover
Эти примеры очень похожи на то с чем мы постоянно сталкиваемся в jQuery: поменять css-класс при каком-то событии.
Рассмотрим ещё пару примеров. Этот мне особенно нравится:
<div x-data="{ open: false }">
<button @click="open = true">Open</button>
<div x-show="open" @click.away="open = false" x-cloak>
Content
</div>
</div>
Content
Это обычный dropdown, который раскрывает блок контента по клику. Я использую классы Berry CSS, которые семантически понятны.
Здесь мы определяем переменную open, которая хранит состояние блока контента (скрыт/открыт). У блока контента используется директива x-show, которая содержит js-выражение. Если это false, то x-show скроет блок через display: none. Таким образом, кликнув на кнопку мы открываем блок контента через переменную open.
У контента есть ещё одна директива @click.away
open становится false и блок скрывается.
Директива x-cloak, а точнее это атрибут тэга, особенная. Её назначение в том, чтобы исчезнуть как только Alpine будет проинициализирован. Смысл в том, что js-файл Alpine может загружаться дольше, чем браузер начнёт отображать страницу, а значит блоки, который по умолчанию должны быть скрыты — будут изначально показаны. И как только сработает Alpine они уже отобразятся как задумано. Вот эта задержка может приводить к неприятному «мельканию». Поэтому для таких блоков достаточно указать
<style>
[x-cloak] {display: none;}
</style>
Пока Alpine не загружена, блок будет скрыт. При этом нам не нужно что-либо ещё отслеживать.
Пример с dropdown может использовать и для меню, и для модальных окон. Мы по сути не написали ни строчки js-кода, а получили потрясающую функциональность. Это не сравнится ни с jQuery, ни с нативным JS.
Ну и последний пример — табы.
<div x-data="{ tab: 'foo' }">
<button :class="{ 'bg-blue': tab === 'foo' }" @click="tab = 'foo'">Foo</button>
<button :class="{ 'bg-blue': tab === 'bar' }" @click="tab = 'bar'">Bar</button>
<div>
<div x-show="tab === 'foo'">Вкладка Foo</div>
<div x-show="tab === 'bar'" x-cloak>Вкладка Bar</div>
</div>
</div>
Вкладка Foo
Вкладка Bar
Если вы когда-нибудь делали свои табы, то поймёте насколько компактным и универсальным получился этот код.
Мне кажется, что более простой реализации и не существует…
Что в итоге? Для меня Alpine.js — настоящая находка, которая доказывает, что использовать js-интерактивность в html-коде можно просто и удобно. При этом возможности Alpine намного больше — многие из них рассчитаны на опытных js-разработчиков. Но и для обычных вебмастеров, которым нужно решать простые задачи, Alpine.js может пригодится как лёгкая замена jQuery.
Работа с Ajax в Alpine.js
Админ-панель для Albireo
Что такое JavaScript? (Определение, использование и Python)
JavaScript является важным инструментом в веб-разработке. В то время как CSS и HTML обеспечивают веб-страницы статическим содержимым, включая стиль и структуру, отображаемые на странице, JavaScript позволяет динамически изменять это содержимое и обогащает пользовательский опыт расширенными интерактивными функциями.
Почему используется JavaScript?
JavaScript позволяет разработчикам создавать уникальные сценарии на стороне клиента, которые обеспечивают динамизм и интерактивность веб-элементов.
Разработчики также могут писать серверный код на JavaScript с помощью кроссплатформенных движков, таких как Node.js. Некоторые основные примеры работы JavaScript включают воспроизведение и приостановку видео, встроенного в страницу, и активацию раскрывающихся меню навигации.
Разработчики часто используют интерфейсные фреймворки, такие как React, Angular и Vue, при создании веб-приложений и мобильных приложений, чтобы сократить время программирования и количество возможных ошибок за счет импорта предварительно написанного кода, который выполняет общие функции и компоненты. Эти платформы содержат коллекции библиотек кода, которые разработчики могут использовать для оптимизации своего рабочего процесса путем повторного использования кода, уже созданного другими. Фреймворки позволяют приложениям оставаться управляемыми при масштабировании, расширяя сотрудничество между разработчиками.
Связанные материалы из встроенной программы ExpertsNode.js Безопасность приложений: никто не должен проходить через (цифровые) ворота
Является ли JavaScript интерфейсом или серверной частью?
JavaScript используется во всем стеке веб-разработки, а это означает, что он имеет как интерфейсные, так и серверные приложения.
JavaScript, пожалуй, наиболее широко известен как интерфейсный язык программирования, предназначенный для добавления интерактивности веб-приложениям и мобильным приложениям, но он также имеет широкий спектр внутренних приложений для разработки.
Одной из самых популярных сред выполнения JavaScript является Node.js, которую можно использовать для создания веб-серверов и разработки внутренней инфраструктуры. Используя Node.js, разработчики серверной части могут создавать поддержку обновлений данных из внешнего интерфейса, читать данные внешнего интерфейса, удалять данные внешнего интерфейса и создавать масштабируемые сетевые приложения.
Аналогично, для серверной части могут быть полезны такие фреймворки, как Express, основанный на Node.js. Разработчики также могут использовать такие фреймворки, как Next.js, Gatsby, Meteor, для серверной разработки, в зависимости от вариантов использования. Express полезен для создания веб-серверов; Gatsby — это интерфейсная среда, используемая для создания статических веб-страниц; Next и Meteor — это фреймворки с полным стеком, которые могут выполнять переднюю и внутреннюю разработку одной и той же техники посредством рендеринга на стороне сервера, что сокращает время отклика.
Произошла ошибка.
Невозможно выполнить JavaScript. Попробуйте посмотреть это видео на сайте www.youtube.com или включите JavaScript, если он отключен в вашем браузере.
Изучение JavaScript — полный курс для начинающих. | Видео: freeCodeCamp.org
Чем Python лучше Javascript?
JavaScript остается более популярным языком программирования со многими преимуществами, но у Python есть и другие преимущества, которых нет у JavaScript. В конце концов, какой язык лучше, зависит от конкретных потребностей веб-сайта.
Python обычно требует меньше времени для обучения, чем JavaScript, для тех, кто только начинает свою карьеру программиста. Однако в чем Python не дотягивает, так это в его масштабируемости. Python не поддерживает асинхронное программирование, но Node.js поддерживает. Это означает, что JavaScript может обрабатывать большое количество пользователей, а также большие объемы данных при минимальном использовании сервера. Python может выполнять совместную многозадачность только с помощью сопрограмм.
В конечном счете, выбор Python или JavaScript для разработки зависит от функциональности и цели вашего проекта, а также от ваших собственных навыков. Например, фронтенд-разработчик может без ограничений использовать JavaScript и на бэкэнде, но если приложение или веб-сайт требуют функций машинного обучения, Python предпочтительнее из-за множества доступных библиотек, которые сокращают рабочие процессы программирования и обеспечивают функциональность.
Jquery против React: разница между jQuery и React [2023]
jQuery и React — очень популярные библиотеки JavaScript, которые дают очень похожие результаты, хотя и используют очень разные методы. В то время как jQuery — это служебная библиотека, которая позволяет разработчикам легко создавать веб-приложения с помощью JavaScript, React — это библиотека, которая позволяет встраивать HTML в JavaScript.
Однако обычно возникает много путаницы и возникает ряд вопросов, связанных с обеими этими библиотеками — какой проект можно построить с каждой из них, можно ли их использовать для одного и того же проекта, а если и использовать, то каким-либо образом , лучше подходит для вас, чем другой.
Ознакомьтесь с нашими популярными курсами по разработке программного обеспечения
Ознакомьтесь с нашими бесплатными курсами, чтобы получить преимущество над конкурентами.
Научитесь создавать такие приложения, как Swiggy, Quora, IMDB и другиеНа эти вопросы не может быть прямого ответа. Но более пристальное внимание к различиям между jQuery и React может приблизить нас к ответу. Итак, давайте сделаем это!
Что такое jQuery?jQuery — это, по сути, «облегченная» библиотека JavaScript. Когда он появился в 2006 году, JavaScript не был так широко распространен или даже прост в использовании. Но jQuery в некотором смысле произвел революцию в отрасли, превратив множество строк кода JavaScript в методы, которые можно вызывать с помощью одной строки кода. Фраза «пиши меньше, делай больше» может использоваться исключительно для определения jQuery.
Ознакомьтесь с расширенной сертификацией upGrad в DevOps
Это также упрощает некоторые сложные вызовы из JavaScript, а именно манипулирование AJAX и DOM.
Таким образом, переход от создания традиционных веб-сайтов к разработке действительно динамичных веб-приложений стал безболезненным.
jQuery на сегодняшний день является самой популярной и самой расширяемой библиотекой JavaScript. Многие крупные компании, такие как Google, Microsoft и IBM, используют jQuery в Интернете.
Ознакомьтесь с нашими бесплатными курсами по разработке программного обеспечения
Возможности jQuery
- jQuery поддерживает работу с HTML/DOM
- Он также оборачивает методы событий HTML
- Обеспечивает работу с CSS
- С jQuery проще использовать эффекты и анимацию
- Вызовы AJAX упрощены на jQuery
- Это библиотека, полная различных утилит, включая плагины практически для любых задач
- jQuery одинаково работает почти во всех основных браузерах
Наши учащиеся также читают: Онлайн-курс React js!
Ознакомьтесь с расширенной сертификацией upGrad по блокчейну
Что такое React? React — это декларативная, эффективная и чрезвычайно гибкая библиотека JavaScript с открытым исходным кодом, созданная Facebook в 2011 году в основном для создания интерактивных элементов пользовательского интерфейса.
До React разработчики создавали пользовательские интерфейсы вручную, используя необработанный JavaScript или используя предшественников React, таких как jQuery, что означало больше времени и меньшую точность. С React все изменилось.
React предоставляет повторно используемый библиотечный код, который сокращает общее время разработки, а также сокращает количество ошибок. С помощью React разработчики могут создавать крупномасштабные динамичные одностраничные приложения, сложные, но удобные в использовании.
В дополнение к этому, у React есть две ключевые особенности, которые отличают его от других библиотек — JSX и Virtual DOM.
Востребованные навыки разработки программного обеспечения
Такие компании, как Airbnb, TripAdvisor и, очевидно, Facebook и Instagram, используют React.
Функции React
- Использование React дает разработчику доступ к фрагментам кода и компонентам React, поэтому они могут создавать определенные части пользовательского интерфейса
- Используя JSX, вы можете напрямую управлять DOM .
