Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Vue' thread 1 (https://javascript.ru/forum/offtopic/58273-vue%27-thread-1-a.html)

nerv_ 13.09.2015 11:34

Vue' thread 1
 
Есть такая тема Make binding syntax more consistent, в которой Owner предлагает ввести несколько видов синтаксиса (см. по ссылке).

Я говорю (на ломаном англисйком), что это будет перебор
https://github.com/yyx990803/vue/iss...ment-139822665

Кто что думает на этот счет?
:)

kobezzza 13.09.2015 13:44

Цитата:

Кто что думает на этот счет?
Мне пофиг, т.к. я юзаю шаблоны SS, которые генерят шаблоны под Vue. Меня больше беспокоит ломание совместимости.

nerv_ 28.09.2015 11:04

Русскоязычное соощество

Документация на русском

nerv_ 05.11.2015 14:00

Добавили в доку страницу Getting Started, на которой на пальцах показано и рассказано как начать.
Там же ссылка на песочницу.

nerv_ 11.12.2015 22:24

Сейчас любопытства ради смотрю на второй ангуляр, пишут, что:

- там нет контроллеров
- убрали $scope
- концепция применения

:)

nerv_ 18.06.2016 22:31

Готовится к выходу Vue.js 2.0.

Среди существенных нововведений, например, серверный рендеринг.

cyber 19.06.2016 01:22

nerv_, а как вообще на ноде разделяется что часть страницы рендерится на клиенте, а часть на сервере, потому что я бэкэнд в основном на java пишу, и у нас только просто значения в jsp вставляются, а остальное на клиенте. Как это делается на ноде вообще и какие преймущества?

kobezzza 20.06.2016 23:02

Планирую начать миграцию на 2.0. Лично я очень рад тому, что шаблоны стали компилиться, т.к. сейчас это на больших шаблонах вызывает фризы, что не круто. В общем отпишусь как с мигрируюсь :)

cyber 20.06.2016 23:41

kobezzza, можешт рассказать в чем профит серверного рендеринга?)

kobezzza 20.06.2016 23:46

Цитата:

Сообщение от cyber (Сообщение 420048)
kobezzza, можешт рассказать в чем профит серверного рендеринга?)

Отсутствие фризов :D

ORMjs 21.06.2016 05:04

Цитата:

Сообщение от cyber
можешт рассказать в чем профит серверного рендеринга?)

улучшенное сео

kobezzza 05.07.2016 15:55

Цитата:

Сообщение от kobezzza (Сообщение 420046)
Планирую начать миграцию на 2.0. Лично я очень рад тому, что шаблоны стали компилиться, т.к. сейчас это на больших шаблонах вызывает фризы, что не круто. В общем отпишусь как с мигрируюсь :)

Переехал на Vue2, доволен как слон :)

nerv_ 05.07.2016 21:53

Цитата:

Сообщение от kobezzza
доволен как слон

а вот отсюда поподробнее :)

p.s.: не преждевременно ли? Она в альфе еще

kobezzza 06.07.2016 22:58

Цитата:

а вот отсюда поподробнее
В проекте, над котором я сейчас работаю, Vue сильно фризил UI (SPA) на больший шаблонах, а после обновления всё просто летает.

Цитата:

p.s.: не преждевременно ли? Она в альфе еще
Уже оч даже стабильно, во всяком случае я пока не наткнулся ни на одну ошибку. Просто много ломающих изменений и я подумал, что сейчас перейти будет проще, чем потом. На переход с изучением новых подходов и фич ушло дня 4.

nerv_ 07.07.2016 09:51

Цитата:

Сообщение от kobezzza
а после обновления всё просто летает

приятно слышать :)

Цитата:

Сообщение от kobezzza
Уже оч даже стабильно, во всяком случае я пока не наткнулся ни на одну ошибку

тут не столько ошибки, сколько вам придется еще раз обновляться до стабильной версии, т.к. доки по альфе скорее всего не будет. А изменения между альфой и стабильной версией очень вероятны. Чем больше будет этих изменений, тем больше боли)

Цитата:

Сообщение от kobezzza
На переход с изучением новых подходов и фич ушло дня 4

если не затруднит, перечисли значемые нововведения на твой взгляд.
Меня, например, интересует, стал ли он более ООП-friendly. Хочется, что-то вроде реaктовского

kobezzza 07.07.2016 10:20

Цитата:

тут не столько ошибки, сколько вам придется еще раз обновляться до стабильной версии, т.к. доки по альфе скорее всего не будет. А изменения между альфой и стабильной версией очень вероятны. Чем больше будет этих изменений, тем больше боли)
Автор всегда пишет подробный ченджлог, поэтому тут проблем у меня не возникало никогда.

Цитата:

если не затруднит, перечисли значемые нововведения на твой взгляд
1) Компилируемые шаблоны и прогрессивный серверный рендеринг
2) Функциональные шаблоны
3) Иммутабельные входные параметры компонентов (теперь компонент может менять только данные обьявленые в data)
4) Отказ от DOM событий
5) Убрали двунаправленный биндинг

Вообще наблюдается уклон в сторону React. По мелочи много изменений, например, убрали методы $set и $get, и v-on на компоненте больше не слушает дом события, а только собственные события компонента. Больше нет $dispatch и $broadcast.

Часть функционала, нужного мне, я просто вернул используя гибкую плагинную архитектуру Vue, например, создал директиву v-e или аналог dispatch.

Вообще я использую Vue вместе со своей обёрткой, чтобы использовать классы и аннотации типов от Flow.

import iData from '../i-data/i-data';
import { PARENT_MODS } from '../i-block/i-block';
import * as tpls from './b-button.ss';
import { model } from '../../core/block';

@model(tpls)
export default class bButton extends iData {
	/**
	 * Button type
	 */
	type: string = 'button';

	/**
	 * Connected form id
	 */
	form: ?string;

	/**
	 * Icon before text
	 */
	preIcon: ?string;

	/**
	 * Icon after text
	 */
	icon: ?string;

	/**
	 * Tooltip text
	 */
	title: ?string;

	/** @override */
	static mods = {
		theme: [
			PARENT_MODS,
			'dark',
			'dark-form',
			'dark-link',
			'dark-pseudo-link',
			'link',
			'pseudo-link'
		]
	};
}


Тут декоратор класcа model анализирует содержимое класса и создаёт компонент для Vue: геттеры и сеттеры становятся компьютедами, свойсва класса - пропсами, причём с учётом типа, методы и т.д. Работает super и шикарный автокомплит :) Ну а шаблоны по прежнему генерит Snakeskin :)

- namespace [%fileName%]

- include '../i-data/' as placeholder
: rootTag = 'span'

- template index(params) extends ['i-data'].index
	- block body
		- super

		: attrs = {}
		- block attrs() =>

		- block button
			< button.&__button ref = button | :type = type | :form = form | :data-title = title | ${attrs}
				< span.&__wrapper
					< span.&__cell.&__pre-icon v-if = preIcon
						< b-icon :value = preIcon | :init-mods = baseMods

					< span.&__cell.&__value
						< slot

					< span.&__cell.&__icon v-if = icon
						< b-icon :value = icon | :init-mods = baseMods

					< span.&__cell.&__icon.&__progress
						< b-progress-icon :init-mods = baseMods

kobezzza 07.07.2016 14:03

Цитата:

Меня, например, интересует, стал ли он более ООП-friendly
Он всегда таким был, а обёртка на классах - строк 100 кода (см пример выше).

nerv_ 08.07.2016 14:30

Цитата:

Сообщение от kobezzza
и v-on на компоненте больше не слушает дом события, а только собственные события компонента

А как теперь на DOM события подписываться?

kobezzza 08.07.2016 14:34

Цитата:

Сообщение от nerv_ (Сообщение 421599)
А как теперь на DOM события подписываться?

v-on по прежнему может слушать DOM события, если он навешен не на компонент, но меня он всё равно не устраивал своим синтаксисом, поэтому я добавил новую директиву v-e (добавить директиву очень просто).

< my-component v-e:mousedown,touchstart = myHandler

nerv_ 12.08.2016 19:27

Цитата:

Сообщение от kobezzza
Vue2 дошёл до RC !
Появилась дока

Спасибо! Очень хорошие новости :)

Хотел поинтересоваться твоим личным мнением: что ты вообще думаешь об этой библиотеке? Для меня, например, было открытием, насколько с ней приятно работать, после ангуляра 1.х.

Недавно я выступал с докладом о Vue на местном собрании девелоперов.
Ссылка на презентацию https://drive.google.com/open?id=1Vm...bzugym5gdC eI :)

kobezzza 12.08.2016 20:40

Цитата:

Хотел поинтересоваться твоим личным мнением: что ты вообще думаешь об этой библиотеке?
Мне очень нравится Vue, а Vue2 - просто чудесен! Angular 2 я не юзал, а вот Angular 1 вызывает у меня только рвотные рефлексы. Идеологически Vue близок с React и подходы исповедует схожие, но в Vue гораздо более удобные шаблоны, да и сам API куда более приятен. Еще нравиться, что Vue действительно просто расширять - очень удобная плагинная шина: это касается как глобальных плагинов аля Vuex или добавление своих директив - всё очень просто. Плюс отличная дока. Или вот скажем, я хотел использовать классы как в React с Vue - обёртка пишется за пару часов и никаких проблем.

В общем на мой взгляд, Vue - это самое удобное и продуманное решение на данный момент. Может быть новые решения типа Angular2 или Aurelia и могут составить конкуренцию, но я не вижу ни одной причины, почему я должен хотеть перейти с Vue.

nerv_ 12.08.2016 21:13

Цитата:

Сообщение от kobezzza
Angular 2 я не юзал

Мне приходилось иметь с ним дело. Не скажу, что много, но приходилось. В новой доке по Vue2, ребята из сообщества хорошо написали про сравнение с Angular2 http://rc.vuejs.org/guide/comparison.html#Angular-2

Цитата:

Сообщение от kobezzza
Может быть новые решения типа Angular2 или Aurelia и могут составить конкуренцию, но я не вижу ни одной причины, почему я должен хотеть перейти с Vue.

По мне так конкурентов нет. По крайней мере на данный момент :)

Также в новой доке отметили хороший перфоманс версии 2, о чем ты уже говорил на форуме :)

Помимо всего остального в новой версии лично мне приятно видеть функциональные компоненты)

kobezzza 12.08.2016 21:26

Цитата:

Помимо всего остального в новой версии лично мне приятно видеть функциональные компоненты)
Да, partial-ы из первой версии были какие то не доделаные, а вот функциональные компоненты прямо dones right :)

Также отмечу, что значительно улучшено API для transitional-ов, прям красота!

PS: Также для тех кто мигрируется с React есть трансформер JSX в vDom формат Vue2.

https://www.npmjs.com/package/babel-...nsform-vue-jsx

yazonnile 12.08.2016 21:40

Не пробовал Vue вообще
И тоже не люблю Angular до рвоты :)

Может кто-то кратенько, если не сложно сделать (или ткнуть носом в статейку) сравнение с React?

Сейчас пишу на связке React/Redux
Vue заменяет эту связку? Или только React? Или как?

kobezzza 12.08.2016 21:43

Цитата:

Сейчас пишу на связке React/Redux
Просто заменяешь на Vue/Vuex :)

Вообще Vue2 очень похож на React, т.е. паттерны написания кода схожи, но Vue банально удобнее во всём и значительно быстрее :)

Erolast 13.08.2016 08:36

Ммм, а как у него с масштабируемостью? Для сложных систем подходит?
Скажем, есть реалтайм приложение, где юзеры делают изменения и расшаривают их между собой по вебсокету, причем, не все и не сразу, а только при потверждении. Реакт, вроде, хвастается, что для сложных программ заточен, а Vue как?

nerv_ 13.08.2016 08:39

Цитата:

Сообщение от yazonnile
Может кто-то кратенько, если не сложно сделать (или ткнуть носом в статейку) сравнение с React?

Есть новая дока для версии 2, где об этом написано http://rc.vuejs.org/guide/comparison.html#React
Также есть дока для версии 1 http://vuejs.org/guide/comparison.html#React

Только прими во внимание, что версия 2 пока еще в статусе RC! Но мне кажется, что это не надолго.

Цитата:

Сообщение от Erolast
Реакт, вроде, хвастается, что для сложных программ заточен, а Vue как?

Цитирую сам себя :)
6. React. Активный пиар пародил моду на реакт, поэтому я решил взглянуть на него тоже. Справедливости ради стоит заметить: жизнь учит тому, что рекламе нельзя доверять. По крайней мере в случаях с Ангуляр и Реакт =) Когда тебе сверху, снизу, слева, справа, изподвыподверта твердят, что реакт/ангуляр -- это круто, а ты с ними еще не знаком, в мозг просачивается мысль “Эй, парень, а почему бы тебе не узнать эту технологию получше?”.

https://docs.google.com/presentation...58910a38e_0_13

nerv_ 13.08.2016 08:48

Вложений: 1
Цитата:

Сообщение от kobezzza
PS: Также для тех кто мигрируется с React есть трансформер JSX в vDom формат Vue2.

Я прям только вчера об этом писал :) Только на другом ресурсе

p.s.: сори за ущербный скриншот :D

nerv_ 13.08.2016 09:15

Announcing Vue.js 2.0

Отмечу интересные (для меня) моменты:
1.
Цитата:

Vue.js is a library for building web interfaces. Together with some other tools you can also call it a “framework”, although it’s more like a set of optional tools that work together really well.
2. Теперь Vue работает с VDOM + сделаны специальные оптимизации, которые еще больше ускоряют ваше прлиожение

3.
Цитата:

Streaming Server-side Rendering
With the migration to virtual-DOM, Vue 2.0 naturally supports server-side rendering with client-side hydration. One pain point of current mainstream server rendering implementations, such as React’s, is that the rendering is synchronous so it can block the server’s event loop if the app is complex. Synchronous server-side rendering may even adversely affect time-to-content on the client. Vue 2.0 provides built-in streaming server-side rendering, so that you can render your component, get a readable stream back and directly pipe it to the HTTP response. This ensures your server is responsive, and gets the rendered content to your users faster.
4.
Цитата:

Unlocking More Possibilities
With the new architecture, there are even more possibilities to explore — for example, rendering to native interfaces on mobile. Currently, we are exploring a port of Vue 2.0 that uses weex as a native rendering backend, a project maintained by engineers at Alibaba Group, one of the biggest tech enterprises in China. It is also technically feasible to adapt Vue 2.0’s virtual-DOM to run inside ReactNative. We are excited to see how it goes!

kobezzza 13.08.2016 09:27

Цитата:

Ммм, а как у него с масштабируемостью? Для сложных систем подходит?
На личном опыте разработки огромного апа - всё просто отлично. Но стоит понимать, что Vue - это лишь библиотека, которая организует компонентый подход и data-binding и практически не навязывает никакой конкретной архитектуры (хотя есть сторонние либы от автора, например, Vuex, которые следуют определённым паттернам), поэтому её очень просто расширять и использовать с любым стеком.

Цитата:

6. React. Активный пиар пародил моду на реакт, поэтому я решил взглянуть на него тоже. Справедливости ради стоит заметить: жизнь учит тому, что рекламе нельзя доверять. По крайней мере в случаях с Ангуляр и Реакт =) Когда тебе сверху, снизу, слева, справа, изподвыподверта твердят, что реакт/ангуляр -- это круто, а ты с ними еще не знаком, в мозг просачивается мысль “Эй, парень, а почему бы тебе не узнать эту технологию получше?”.
Лучше и не скажешь. Почему то люди не верят, что если продукт не пиарится на каждом шагу и про него не говорят на всех конференциях, то он может быть лучше.

Erolast 13.08.2016 12:13

Цитата:

На личном опыте разработки огромного апа - всё просто отлично.
Окей, буду пробовать :) Выглядит интересно.
И намного проще реакта.

nerv_ 24.08.2016 22:42

Цитата:

Сообщение от Erolast
буду пробовать

Попробовал? Отпишись! :)

Erolast 25.08.2016 19:28

Цитата:

Сообщение от nerv_ (Сообщение 426558)
Попробовал? Отпишись! :)

Не, я пока просто доки посмотрел. Временно на Раст переключался, вебом не занимался :)
Сейчас должен заказ на сайт поступить, попробую сразу на практике - обещаю отписаться.

cyber 02.09.2016 13:43

у когото есть какие то проекты open source на vue.js.
хочу посмотреть как выглядит архитектура проекта

nerv_ 02.09.2016 13:50

Цитата:

Сообщение от cyber
у когото есть какие то проекты open source на vue.js.
хочу посмотреть как выглядит архитектура проекта

Архитектура будет такой, какой ты ее построишь. Vue.js не навязывает тебе архитектуру в от личии от (например) Ангуляра.
На Vue.js nы можешь писать как отдельные компоненты и использовать их где угодно на странице, так и целые приложения, воспользовавшись решениями из еко-системы Vue.js

cyber 02.09.2016 16:14

nerv_, а для тех кто не строил архитектуру с 0, что посоветуешь по читать?

destus 02.09.2016 18:09

cyber,
А зачем вообще что-то изобретать, когда есть БЭМ?

cyber 02.09.2016 19:24

destus, ну тут не много религия не позволяет)
Я работаю в Европе, и если я предложу методологию, которую разработала русская компанию, то меня даже слушать не станут:D

cyber 03.09.2016 05:58

читаю туториал по архитектуре на vue.js и тут в одному фале js и шаблоны http://vuex.vuejs.org/en/tutorial.html . Это норма? просто он нативно вставлен в файл компонента, и хранить его рядом в файле и делать импорт не получится вроде.
Просто для меня это выглядит дико

<template>
  <div>
    <button @click='increment'>Increment +1</button>
  </div>
</template>

<script>
import { incrementCounter } from '../vuex/actions'
export default {
  vuex: {
    actions: {
      increment: incrementCounter
    }
  }
}
</script>

cyber 03.09.2016 06:25

получится на vuе сделать что то такое через декоратор?
@Component({
  selector: 'app',
  templateUrl: './components/app/app.html',
  styleUrls: ['./components/app/app.css']
})


Часовой пояс GMT +3, время: 19:37.