Как стать автором
Обновить

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

Время на прочтение3 мин
Количество просмотров13K

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


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


Спасибо.

Теги:
Хабы:
Всего голосов 45: ↑32 и ↓13+19
Комментарии37

Публикации

Истории

Работа

Ближайшие события

Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
AdIndex City Conference 2024
Дата26 июня
Время09:30
Место
Москва
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область