Wex - это реактивный CDN фронтенд фреймворк. Он использует API jQuery, на основании самого jQuery.
Другими словами, используя реактивность Wex, Вы так же поулчаете огромный арсенал jQuery из коробки.
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/wemmbley/wex-js@master/dist/wex.min.js"></script>Философия нашего движка простая: ясность и минимализм. Функционал должен быть чёткий, ясный, понятный.
Функционала должно быть немного: только самое необходимое. Он полный аналог Vue/React/Svelte но в CDN.
Другими словами, Вам не понадобиться огромный npm-сборщик, папка npm_modules, и новые концепции.
Так же Вам не понадобятся фреймворки, по типу Next/Nuxt, когда захотите сделать SEO на сайте.
Бонусом же Вы получаете всю экосистему jQuery с миллионами плагинами сразу из коробки.
И это всё делается в одну строчку кода. Буквально. Выглядит она следующим образом:
<script src="https://cdn.jsdelivr.net/gh/wemmbley/wex-js@master/dist/wex.min.js"></script>- реактивное состояние приложения как во всех фреймворках.
- шаблонизатор, прямой конкурент Vue:
w-for,w-ifи другие. - двусторонний биндинг как во всех фреймворках.
- императивный подход jQuery в chain-цепочках, вместо декларативного black-box-magic современных фреймворках.
- встроенные хуки как в React:
$mount,$updateи другие. - свой собственный Ajax пишуший прямо в стейт, такого нигде не было.
- свой собственный аналог Pinia/Redux - запись стейта прямо в
localStorage. - компонентная система как React/Vue.
- открытый исходный код, который стремится к минимализму, а не к экспансии.
- и многое-многое другое. Ознакомиться можете в документации.
<template id="wire-test">
<button class="my-btn">Загрузить посты</button>
<div w-for="post in posts" w-transition>
<a href="#">{{ post.title }}</a>
</div>
</template>$('#wire-test')
.state({ posts: {} })
.on('click', '.my-btn', state => {
$wire
.get('https://jsonplaceholder.typicode.com/posts/')
.to(state.posts)
})
.mount()Сохраняет все данные положенные в state.sotorage между обновлениями страницы блягодаря технологии cookies.
<template id="score">
<p>Score: {{ storage.score }}</p>
<button class="increase-btn">Increase</button>
</template>$('#score')
.state({
storage: {
score: 0,
test: 1,
}
})
.on('click', '.increase-btn', state => {
state.storage.score = ++state.storage.score;
})
.mount()<template id="app">
<nav>
<a href="#/" w-navigate="push">Главная</a>
<a href="#/catalog" w-navigate="push">Каталог</a>
<a href="#/about" w-navigate="push">О нас</a>
</nav>
<div w-route="'/'">
<h1>Добро пожаловать!</h1>
<p>Это главная страница.</p>
</div>
<div w-route="'/catalog'">
<h1>Каталог товаров</h1>
</div>
<div w-route="'/about'">
<h1>О нас</h1>
</div>
</template>
<script>
$('#app').state().mount()
</script>Не забудьте подключить сам Bootstrap 5 перед использованием.
<template id="app">
<button class="btn btn-primary" w-modal="myModal">Toggle myModal</button>
</template>
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Моя модалка</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">Просто контент</div>
</div>
</div>
</div>$('#app')
.state({
modal: {
myModal: false
}
})
.mount()За бОльшим количеством примеров обращайтесь в официальную книгу сообщества в папке book.
Со всеми дополнительными данными Вы можете ознакомиться в папке docs или book текущего репозитория.
Первая папка docs хранит упорядоченный API, который больше подойдёт как справочник.
Вторая папка book хранит электронную книгу, которую удобно читать при освоении фреймворка.
Стоит так же учесть, что книга написано универсальным языком. Понятия, которые там излагаются,
применимы и на другие реактивные фронент-фреймворки.
Если Вы используете ИИ в своём обучении/разработке, то настоятельно Вам рекомендуем взять файл ai.txt
Который находится по следующиму пути: book/ai.txt. В нём собрана вся книга в одном файле понятном ИИ.
На 2026 год фреймворк активно поддерживается и разрабатывается.
О любых багах Вы можете сообщить в реактивном порядке прямо в чат: https://t.me/webconstructor
Либо открыть issue прямо в репозитории по следующей ссылке: https://github.com/wemmbley/wex/issues
Если Вы заинтересованы в поддержке фреймворка то можете открыть PR: https://github.com/wemmbley/wex/pulls
Поблагодарить автора в денежном или словестном эквиваленте можно тут: https://t.me/RustamVital