Да, ещё одна новая библиотека на JS, хочу поделиться. Фидбека жажду, любого, лучше конечно позитивного конструктивного.
Программирую я с тех незапамятных времён, когда мониторы были глубокие и пузатые, а сервера могли потягаться с нынешними телефонами. Приходилось писать на разных языках и фронт и бэк от GUI до SQL и обратно.
Javascript очаровал меня ещё тогда, когда его применяли только для подсвечивания кнопок (CSS был не всегда). DOM API обещал сделать процесс программирования пользовательского интерфейса легким и непринуждённым делом, почти развлечением. Я прямо видел светлое, красивое будущее. Ну вот оно и наступило.
DOM API — самый правильный UI framework для браузера
Можете не соглашаться, но это так, и лечить я никого не собираюсь. Да, я прекрасно знаю о его недостатках, но достоинства перевешивают. Он самый быстрый, — мантры против этого бессильны.
Всё, чего не хватает (мне) для комфортной разработки — это возможности создания
переиспользуемых модулей с библиотеками составных компонентов. Все наши попытки создать такую возможность порождают радиоактивных монстров и велосипеды с Угловатыми колёсами.
Мы хотим малого и много делаем для этого, а получаем неудобства и тормоза.
Вы скажете — есть ведь Web Components...
Ну да, есть, только они к сожалению не модульные, эти технологии хорошие, но сделаны для других целей. Для доставки — да, не для компоновки.
В процессе разработки нового YouTube, ребятам пришлось создать over чем 400 специальных Custom Elements. В принципе — не так много для YouTube, только все они попали в глобальную область видимости. Согласитесь — отсутствие модульности это проблема.
W3View позволяет создавать переиспользуемые, модульные библиотеки компонентов
И даёт вам полный контроль над происходящим, реальный, без танцев с бубнами. У вас остаётся в руках вся мощь DOM API и над вами не нависают сомнительные концепции. Вам не нужно терпеть уродливый синтаксис темплетного языка, извращённый JSX или заклинательный data binding, у вас просто HTML, как он есть, такой, каким его задумал создатель.
// библиотека компонентов началась!
// описание компонента "hello-world"
<div as="hello-world">
<h1 ref="content"></h1>
<input ref="input" placeholder="type your name here">
<h1>Hello <span ref="name">Anonimous</span>!</h1>
<script type="javascript">
this.ref.input.onkeydown =
this.ref.input.onkeyup = function(e){
me.setData(me.ref.input.value);
};
this.onSetData = function(data){
me.ref.name.innerText = data || 'Anonimous';
};
</script>
</div>
// описание компонента "сдвоенный hello-world" - это будет рут
<div as="double-hello-world">
<hello-world>Hello first</hello-world>
<hr>
<hello-world>Hello second</hello-world>
</div>
Когда вы подключите "double-hello-world" на страницу, вы увидите hello-world в действии.
Вот ещё пример, чуть посложнее. Ну и куда-же без TodoMVC? (все делают, и я сделал).
В приведённых примерах библиотеки компонентов очень маленькие и встроены прямо в тело страницы, но вы можете загружать их как модули с разрешением зависимостей на лету, или подключать предварительно сформированный JS бандл.
Бандл загружается чуть быстрее и его можно минифицировать.
W3View не навязывает вам ничего, просто расширяет ваши возможности
Вы можете применить любую структуру приложения, — MVC, MVP, MVVM или Flux. Можете использовать всяческие обсерверы и диспетчеры, — всё что вашей душе угодно. Вы можете проектировать бизнес-модель совершенно не зависящую от навязываемых фреймворками правил. Вам не нужно будет размазывать логику обновления UI по шаблону и выражать её невыразимыми способами, бродить обходными путями, заниматься тонкой настройкой, искать ответы на странные вопросы (should этот компонент update или не should?) и ночевать на
форумах с огромными комьюнити, чтобы ни дай бог не пропустить вечно ускользающую и единственную ИСТИНУ. Без этого всего можно жить, — правда, можно.
Размер имеет значение, (что — бы ни говорила бабушка)
- Основная библиотека занимает целых 378 строк нормально структурированного кода.
- Сама (без moduleLoader) весит около 10.5 kB в исходниках и всего 2.1 kB minify + gz.
- Исходники moduleLoader + httpreader добавят вместе ещё ~2.8 kB.
В заключение
Если вас заинтересовала эта штуковина — вы можете зайти на GitHub или установить её через npm
npm install -s w3view(и то и другое бесплатно)
Наверное ещё есть что доработать в W3View: подключение JS модулей например, loader для webpack, наверняка что-то можно оптимизировать. Я обязательно, чуть позже, займусь этим, или кто-нибудь мне поможет (импорто-замещение всётаки).
Если вам понравилось или не понравилось то, что я уже сделал — не стесняйтесь,
пишите комментарии, любые подойдут.
Спасибо.
