Вышла (https://gist.github.com/yyx990803/faebe22e8763f5b17572b35ed9...) новая версия Vue.js (https://vuejs.org/), JavaScript-фреймворка для построения пользовательских интерфейсов. Vue.js использует декларативное описание интерфейса и MVC-подобный паттерн, аналогично фреймворкам React и Angular. Фреймворк примечателен низким порогом вхождения (достаточно знать HTML, CSS и JavaScript), компактным ядром (17 Кб+Runtime), расширяемостью для проектов любого масштаба, обеспечением высокой производительности без необходимости внесения в приложения дополнительных оптимизаций, гибкой системой применения эффектов. Код проекта распространяется (https://github.com/vuejs/vue) под лицензией MIT.Основные новшества (https://gist.github.com/yyx990803/faebe22e8763f5b17572b35ed9...):
- Scoped Slots: До версии 2.1 родительский шаблон мог внедрять свой HTML-контент во встраиваемый компонент (посредством тега "slot"
в шаблоне встраиваемого компонента), но при этом у родителя не было доступа к текущим данным встраиваемого компонента для непосредственной подстановки их во внедряемый контент. Таким образом, внедряемый контент мог динамически отрисовываться, опираясь лишь на данные родителя. Теперь же дочерний/встраиваемый компонент может напрямую передавать свои данные/состояние родителю при внедрении контента последним, чтобы родитель мог их декларативно подставить во внедряемый им динамический шаблон;- Добавлена директива v-else-if (в дополнение к имеющимся v-if и v-else);
- Фильтры теперь могут использоваться также и внутри выражений в директиве v-bind (помимо использования их при стандартной подстановке текста в шаблон). Например, ‹img v-bind:src="imgSrc | formatURL">URL: https://gist.github.com/yyx990803/faebe22e8763f5b17572b35ed9...
Новость: http://www.opennet.me/opennews/art.shtml?num=45546
За Vue будущее. Скриньте.
Почему? Чем он лучше react?
> Почему? Чем он лучше react?Будущее в JavaScript не за тем, что лучше, а за тем, что новее. Вспомним jQuery, ExtJS, Angular, потом ваш React, теперь вот Vue. Через год ещё что-нибудь появится, что отправит Vue в историю.
будущее в перемешке верстки и логики? Очередной г-нолисипед. Скринь :)
А в HTML по другому вообще особо не получается. Как в этом крапе сделать реюзабельный "виджет"? Чтобы и логика и верстка и все вместе - реюзабельный компонент, который подключить вот тут, а вон там - три инстанса с разными параметрами?
всё получается, просто поработать надо. Зато потом поддерживается на раз-два. А с этим мусором потом трястись, как с девушкой:)
> Фреймворк примечателен низким порогом вхожденияЭто из-за этого? В смысле, Вы только его и осилили или что все-все-все подрастающие веб-девелоперы обязательно начнут с него и потом не слезут?
> Это из-за этого? В смысле, Вы только его и осилили или что
> все-все-все подрастающие веб-девелоперы обязательно начнут с него и потом не слезут?Можно было просто написать: "специально для вебмакак".
>Фреймворк примечателен низким порогом вхождения (достаточно знать HTML, CSS и JavaScript)
>достаточно знать HTML, CSS и JavaScriptТ.е. для React и Angular знания HTML, CSS и JavaScript недостаточны?
Для Angular надо ещё знать технику Dependency Injection
Сложная вещь, да, два года изучать минимум!
Для Vue достаточно, скажем так, базовых знаний web-стека, а у Ангуляра/Реакта требования покруче будут, например большинство примеров по Реакту используют JS-2015.
Да, естественно, для того чтобы писать на ангуляре придется изучить птичий язык ангуляра и научиться угадывать места ошибок по внешним проявлениям, для реакта - хорошо изучить логику его работы чтобы не втыкаться в постоянные тормоза.
А есть туториалы, как разрабатывать GUI на подобных js-фреймворках и встраивать их в код на C/C++/Go для привыкших писать на C/GTK, C++/Qt, Go/-?
Есть же QML/Qt-Quick, зачем вам с собой целый браузер встраивать?
Браузер встраиваться не будет, а будет коннектиться или с localhost, или удалённо к консольному приложению, которое отдаёт этот html/css/js по HTTP, если я правильно понимаю. Учитывая, что OpenGL в браузере летает, думаю, обычный GUI тоже мог бы не тормозить, если с умом спроектирован. Вот только есть ли такие? (Из коммерческих недавно мне sciter попался на глаза, якобы с умом, но не пробовал.)
Так тогда это обычное web-приложение будет (SPA - single page application). Не вижу никаких проблем - берете любой знакомый язык (всякие изначально web-ориентированые, типа Go/NodeJS будут предпочтительнее) и фигачите на нём RESTful API через которое будет происходить общение с Javascript web-мордой.
Тем, кто занимается web'ом, всё ясно. Вопрос как раз в том, есть ли туториалы про SPA не для новичков в программировании, а для тех, кому привычна не web-разработка. С RESTful API первый же вопрос: пока структуры простые (текст), всё ясно, в JSON замечательно читаются. А как только там появляются указатели, что тогда? А с js web-морда как в отличие от дизайна в Glade или QtDesigner/QtCreator, или создание виджетов вручную: новое окно, новая панель, упаковать панель в окно, новый горизонтальный бокс, упаковать бокс в панель, новый лэйбл, упаковать лэйбл в бокс и т.д., потом колбэки? А как с TreeView? С 1000 записями он даже в Gtk подтормаживает.
В любом случае, обязательно потребуются базовые знания JavaScript/HTML/CSS (без этого, ну никак), а дальше уже JavaScript MVC-фреймворк какой-нибудь(для удобства разработки SPA). Приложение, по сути, будет толстым web-клиентом, т.е. весь код отображения и взаимодействия с пользователем будет на JavaScript/HTML/CSS, а к серверной части будут лишь обращения, навроде: "запиши эту строку в БД", "отыщи значение в БД по такому ключу", "передай мне jpg/pdf/etc файл такой-то". Никаких указателей в JavaScript нет, а если бы и были, то как ссылаться на область памяти на сервере?! Если это что-то на WebGL, то все текстуры нужно будет сперва подгружать в браузер с сервера как внешние ресурсы. Непосредственно видимый интерфейс конструируется на HTML/CSS вручную (WYSIWYG инструментов навроде Glade или QtDesigner/QtCreator по факту нет, если не считать таковыми продукты от Adobe сомнительной полезности). Окошки и виджеты создаём/компонуем или вручную на HTML/CSS или есть куча библиотек и CSS-фреймворков с готовыми виджетами (навроде Bootstrap). Упаковка всего этого добра идет как правило декларативно на HTML. 1000 записей в браузер засунуть можно, но надо ли? Для таких случаев ленивую подгрузку используют, по мере обращения пользователя.
Кроме того на GTK/QT вроде как были проекты по созданию html-backend'ов т.е. обычное приложение, написанное полностью на С++/GTK/QT транслируется специальным бекендом-сервером в веб как просто слоёный набор картинок (некое подобие RDP/VNC протокола, только для браузера) - тогда JavaScript/HTML/CSS вообще знать не обязательно, но по моему все эти проекты так и загнулись.
> к серверной части будут лишь обращения, навроде ... Никаких указателей в JavaScript нет, а если бы и были, то как ссылаться на область памяти на сервере?!Меня интересует hello world на примере простого векторного редактора. Т.е. есть примитивы: точка, линия, прямоугольник, эллипс, кривые Безье. Их рисуешь, группируешь. А вот тут и появляются указатели и вопрос, как принято такое разруливать. По идее через RESTful можно гонять указатели, с которыми в js обращаться как с opaque.
> Окошки и виджеты создаём/компонуем или вручную на HTML/CSS или есть куча библиотек
Так хотелось бы, чтобы виджеты выглядели более менее десктопно. Пока не наткнулся ни на что подобное. Кстати, там в Vue.js есть как раз пример TreeView. М-да... Gtk2 выглядит, как известно просто, но в этом и прелесть. А вот в Vue оно выглядит ну так просто, что совсем неюзабельно. Т.е. нет колонок, нет разных типов виджетов, которые можно туда поместить. И нет контекстного меню, без которого совсем никуда. Интересно, есть ли более реальные примеры TreeView.
> 1000 записей в браузер засунуть можно, но надо ли? Для таких случаев ленивую подгрузку используют, по мере обращения пользователя.
Так это же не много. Их можно в миг проскроллить. Ленивая загрузка - это тоже вариант. В почтовом клиенте Trojita на Qt так сделана загрузка заголовков email'ов. Пока пользователь их не видит, нечего и времени тратить на их загрузку. Клиент сразу готов к выполнению нужных действий.
> Кроме того на GTK/QT вроде как были проекты по созданию html-backend'ов
Да, сам собирал Qt под Emscripten. В браузере отъедало кучу памяти и было в каком-то мини-оконном режиме. Загнулось, хотя Emscripten, asm.js, web assembly живут и здравствуют. Про другие backend'ы в самом Qt не слышал. А в Gtk3 есть broadway. Классная вещь! Но как вы верно подметили, там быстро гоняются картинки. Создать такой себе Xserver но для браузера не вышло. И развитие, когда я последний раз смотрел, прекратилось. Очень жаль. Надеюсь, хотя бы не выкинут, ведь им реально можно пользоваться!
Ты уверен что тебе веб-интерфейс нужен? Делай нормальный и не мучайся.
Нормальные я делаю. Вот думал, что раз для Go так ничего традиционного и не выходит, то можно было бы попробовать что-то на web. Но только если это не раздутый фреймворк.
Так этому Go без году неделя. Подожди ещё выйдет (если конечно язык стоящий). А без раздутых Js фреймворков на web ничего толкового всё равно не сделать. С фреймворками сделать в принципе можно, но нормальный GUI порвёт эту web-морду как Тузик.
Народ, подскажите.
Мне нужно забрать AJAX-ом JSON с нужными данными и запихнуть их в HTML/DOM в указанные места. Никакой обработки, просто взять и подставить по шаблону. Как это проще всего сделать? Желательно без погружения в глубины JavaScript-а и сложных фреймворков для него. В идеале хочется просто указать - брать по такому-то URL, из такого поля и подставить вот сюда.
jquery
В первую очередь как раз про него вспомнил. Может есть что-нибудь более современное, более декоративное?
Вам нужна простенькая обвязка над xmlHttpRequest и нативные методы js для вставки контента в DOM. Тащить для этого Jquery с кучей лишнего не нужно. Если нужно "совеременное и декоративное", то просто пишите в ES-6 стиле (https://learn.javascript.ru/es-modern).
> Если нужно "совеременное и декоративное", то просто пишите в ES-6
> стиле (https://learn.javascript.ru/es-modern).А потом зайдите на caniuse.com и узнайте что каждый десятый юзер будет за это грызть мозг.
Можно и с помощью Vue - там удобство по сравнению с JQuery в том, что HTML-шаблон будет красивый, в простейшем случае: <td> {{my_variable}} </td>
ванильный js будет в самый раз, библиотеки для этого не нужны
простой пример с jQuery без обработки ошибок:$.getJSON( "http://api.site.com/example.json", function(data) {
$(".container").text(data.key); /* <div class="container">Value</data> */
});---------------
example.json:{
"key":"Value"
}
> шаблону. Как это проще всего сделать? Желательно без погружения в глубины
> JavaScript-а и сложных фреймворков для него.Тогда просто пометить нужные куски HTML-я при помощи id="something" и далее делаешь XMLHttpRequest, парсишь как тебе там надо, получаешь интересовавший кусок чем-то типа document.getElementById("something") и на этом например .innerHTML="что ты там хотел". В элемент с id="label" запишется "что ты там хотел" как содержимое элемента.
Если хочется чтобы симпатично выглядело - глянь на bootstrap. Чтобы самому не бодаться с всяким там выравниванием и адаптивом и прочим изобретением всяких там прогрессбаров и т.п. самому. Этого вообще осваивать не требуется почти. Как написал какой-то китаец, "теперь кто угодно может делать вабстранички".
riot.js можете ещё глянуть.
JSON забрать - ручками на XMLHttpRequest не проблема. Можно взять fetch-полифилл https://github.github.io/fetch/Засунуть - можно ручками повертеть DOM, можно взять какой-нибудь handlebarsjs в качестве шаблонизатора.
Советую также посмотреть на mithril.js
Чего-то не смог найти mithril на https://stats.js.org/, очень странно, вроде проект относительно известный, не верю что он хотя бы в JS-top500 на гитхабе не вхож.
Где можно посмотреть примеры?
Вот здесь примеры простых приложений:
https://vuejs.org/v2/examples/А здесь туториал:
https://vuejs.org/v2/guide/На русский вроде тоже активно переводят вторую версию туториала, но перевод, честно говоря, так себе.
Из малоизвезстных, но прикольных проектов есть ещё Cash.js, Riot.js, Zepto.js
Также можно отметить что Gitlab выбрал Vuejs https://about.gitlab.com/2016/10/20/why-we-chose-vue/И несколько проектов для построения UI на Vuejs:
— Bootstrap + Vuejs http://yuche.github.io/vue-strap/
— Element http://element.eleme.io/#/en-US
— Weex (от Alibaba) https://alibaba.github.io/weex/
Это ни чего не означает. Я вот вижу что Vue.js использует в синтаксисе шаблонов очередной мета-язык, как и в Angular или Ember. А вот React ни чего такого изобретать не стал и пишешь на чистом JS ну с примесью JSX, хотя это только ширма, под ней скрывается тоже чистый JS. И это я считаю преимущество перед ними всеми, не надо учить очередной синтаксис очередного проходного фреймворка.
JSX, как будто, не очередной синтаксис.Если уж быть таким пуристом, то надо писать без JSX, ручками - React.createElement('div', {}, и так далее).
Посмотрю, надолго ли вас хватит :)
Ну JSX сродни HTML и особых усилий прилагать в изучении его не надо. А вот синтаксис управляющих инструкций в шаблонах каждого нового фреймворка учить, да нах... это надо. К тому же используя нативный JS можно использоваться различные подходы к написанию кода шаблона, либо в классическом стиле, либо в стиле FP, либо как ещё душе угодно. А в других фреймворках, которые вводят свой определённый синтаксис управляющих инструкций, ты уж извини ты только ограничен фантазией разработчиков фреймворка.
> Ну JSX сродни HTML и особых усилий прилагать в изучении его не
> надо. А вот синтаксис управляющих инструкций в шаблонах каждого нового фреймворка
> учить, да нах... это надо. К тому же используя нативный JS
> можно использоваться различные подходы к написанию кода шаблона, либо в классическом
> стиле, либо в стиле FP, либо как ещё душе угодно. А
> в других фреймворках, которые вводят свой определённый синтаксис управляющих инструкций,
> ты уж извини ты только ограничен фантазией разработчиков фреймворка.К тому же щас новая версия движка Virtual DOM создаётся, не имеющая аналогов в других подобных фреймворках. Преимущество в том что ты можешь планировать обновления DOM-а, например чтобы в момент работы анимаций и предстоящего обновления DOM-а, оно не помешало работе анимации и соответственно видимых фризов. Если есть желание можно почитать здесь:
https://github.com/timarney/react-faq#react-fiber
> Также можно отметить что Gitlab выбрал VuejsНе в обиду, но гитлаб всегда отличался юзабилити своего гуя на уровне плинтуса, поэтому считать это рекламой либы - ну не знаю. Скорее антирекламой.
> гитлаб всегда отличался юзабилити своего гуя на уровне плинтусаМожет сейчас за голову возьмутся? :-)
Можете привести более конкретные примеры проблем с UX гитлаба?
Сам им пользуюсь. Может быть не обращал внимания на такие проблемы.
Самая крутая вещь - это famo.us
> Самая крутая вещь - это famo.usНеведома е...на х...я - это как раз про вот такие сайты. Прямо со стартовой поток маркетингового булшита в три реки.