Pull to refresh

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

JavaScript *HTML *
Sandbox

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


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


Спасибо.

Tags:
Hubs:
Total votes 45: ↑32 and ↓13 +19
Views 13K
Comments Comments 37