W3View — библиотека на Javascript, для которой был создан HTML

Да, ещё одна новая библиотека на 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, наверняка что-то можно оптимизировать. Я обязательно, чуть позже, займусь этим, или кто-нибудь мне поможет (импорто-замещение всётаки).

Если вам понравилось или не понравилось то, что я уже сделал — не стесняйтесь,
пишите комментарии, любые подойдут.

Спасибо.

FavoriteLoadingДобавить в избранное

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *