Современный Веб всё больше стремится к динамичным, похожим на приложения, сайтам. Оперативно строить быстрый и динамичный интерфейс на проекте N1.RU нам помогает Vue.js. Однако, как и многие современные библиотеки и фреймворки, Vue.js не умеет рендериться на сервере. При этом иметь такую возможность бывает полезно по нескольким причинам: начиная от вопросов SEO и заканчивая красотой загрузки страницы. Чтобы реализовать такую возможность для Vue.js мы создали его дополнение — Vue-server.js. Я расскажу о том, что умеет Vue.js, что у нашего дополнения "под капотом", почему мы выбрали такой путь и как, вообще, всё это работает. А ещё попробую дать критическую оценку проделанной работе.

1. Vue.js
и его брат-близнец
VueServer.js
Андрей Солодовников
1.4

2. Vue [Вю] (франц.) — Вид

3. Vue [Вю] (франц.) — Вид
Vue → View [Вью]

4. 5 лет
Frontend/JavaScript
developer
7 лет
Велосипедист

7. Недвижимость
Вся
Россия

8. Недвижимость
Вся
Россия
2 года
в разработке

9. НГС.НЕДВИЖИМОСТЬ
realty.ngs.ru

10. НГС.НЕДВИЖИМОСТЬ
realty.ngs.ru

13. Сложный Frontend:
что выбрать?

15. WEB COMPONENTS

16. React (v15.1.0)Vue.js (v1.0.24)

17. React (v15.1.0)
43k
Vue.js (v1.0.24)
20kЗвездочек на GitHub

18. React (v15.1.0)
43k
IE9+
147 (43) kb
Vue.js (v1.0.24)
20k
IE9+
76 (26) kb
Звездочек на GitHub
Поддержка
Размер

19. React (v15.1.0)
43k
IE9+
147 (43) kb
550ms
Vue.js (v1.0.24)
20k
IE9+
76 (26) kb
450ms
Звездочек на GitHub
Поддержка
Размер
Стартует за*
* В моём личном тесте

20. Application
List
Item x250

22. Evan You

23. Data

24. Data
+ watchers

25. Data
+ watchers
DOM
Data

26. Data
+ watchers
DOM
Data
+ watchers
Reactive
Bindings

27. Директивы

28. v-if
v-for
v-show
v-text
v-html
v-bind
v-on

29. v-if
v-for
v-show
v-text
v-html
v-bind
v-on
ng-if
ng-repeat
ng-show
ng-bind
ng-bind-html
ng-style, ng-class...
ng-click, ng-change...

30. <div v-if="false">Не отрисуется</div>
<div v-else>Отрисуется</div>

31. <div v-if="false">Не отрисуется</div>
<div v-else>Отрисуется</div>
<div>Отрисуется</div>

32. <div v-bind:class=" 'foo' "></div>

33. <div v-bind:class=" 'foo' "></div>
<div :class=" 'foo' "></div>

34. <div v-bind:class=" 'foo' "></div>
<div :class=" 'foo' "></div>
<div :class=" ['foo', {bar: true}] "></div>

35. <div class="foo"></div>
<div class="foo"></div>
<div class="foo bar"></div>

36. Усатые выражения

37. <div>{{ someText }}</div>

38. <div>{{ someText }}</div>
<div>{{* someText }}</div>

39. <div>{{ someText }}</div>
<div>{{* someText }}</div>
<div>{{{ someHtml }}}</div>

40. <div>{{ someText }}</div>
<div>{{* someText }}</div>
<div>{{{ someHtml }}}</div>
<div title="Было {{pubDate}}">

41. <div>{{ someText }}</div>
<div>{{* someText }}</div>
<div>{{{ someHtml }}}</div>
<div title="Было {{pubDate}}">
<div title="Было {{pubDate | dateFull}}">

42. Lifecycle + Hooks

43. Data Scope
Template + Children
Destroy
Attach
created
compiled
ready
destroyed

44. Data Scope
Template + Children
Destroy
Attach
created
compiled
ready
destroyed
beforeDestroy
beforeCompiled

45. Data Scope
Template + Children
Destroy
Attach
created
compiled
ready
destroyed
beforeDestroy
beforeCompiled
activate

46. Создание компонентов

47. export default {
// ...
}
Создание компонентов

48. template: '<h1>Hello world</h1>',

49. template: '<h1>Hello world</h1>',
data () {
return { cats: 1, dogs: 2 };
}

50. template: '<h1>Hello world</h1>',
data () {
return { cats: 1, dogs: 2 };
},
methods: { … }

51. template: '<h1>Hello world</h1>',
data () {
return { cats: 1, dogs: 2 };
},
methods: { … },
computed: {
summ () { return this.cats + this.dogs; } // 3
}

52. created () { … }
beforeCompiled () { … }
compiled () { … }
activate () { … }
ready () { … }
beforeDestroy () { … }
destroyed () { … }

53. Vue.component('MyBlock', { … });

54. Vue.component('MyBlock', { … });
export default {
// ...
components: {
MyBlock: { … }
}
}

55. <my-block></my-block>

56. <my-block></my-block>
<component is="MyBlock"></component>

57. <my-block></my-block>
<component is="MyBlock"></component>
<tbody
is="MyBlock"
v-for="block in blocks"
></tbody>

58. const Root = {
el: 'body',
template: '<div>...</div>'
};
new Vue(Root);

59. Динамические компоненты

60. template: '<component :is=" name + 'Page' "></component>',
data: {
name: 'Main'
}

61. template: '<component :is=" name + 'Page' "></component>',
data: {
name: 'Main'
},
components: {
MainPage: {...},
ArticlesPage: {...}
}
Главная

62. template: '<component :is=" name + 'Page' "></component>',
data: {
name: 'Articles'
},
components: {
MainPage: {...},
ArticlesPage: {...}
}
Статьи

63. Обработка событий

64. <button v-on:click="onButtonClick($event)"></button>
<button v-on:click="isVisible = !isVisible"></button>
Обработка событий

65. <button v-on:click="onButtonClick($event)"></button>
<button v-on:click="isVisible = !isVisible"></button>
<button @click="isVisible = !isVisible"></button>
Обработка событий

66. <button @click="isVisible = !isVisible">
{{ isVisible ? 'Скрыть' : 'Показать' }}
</button>
<div v-show="isVisible">Содержимое</div>

67. Показать

68. Содержимое
Скрыть

69. Данные между компонентами

70. { message: 'Привет!' }
<child></child>parent
child { }
<div></div>

71. { message: 'Привет!' }
<child></child>parent
child { }
<div></div>
Как передать?

72. { message: 'Привет!' }
<child></child>parent
child
props: { ... }
{ }
<div></div>
Как передать?

73. props: {
value: null
}

74. props: {
value: {
required: true,
default: 'foo',
type: String,
validate () {…}
}
}

75. { message: 'Привет!' }
<child></child>parent
child
props: { value: null }
{ }
<div></div>

76. { message: 'Привет!' }
<child :value="message"></child>parent
child
props: { value: null }
{ }
<div></div>

77. { message: 'Привет!' }
<child :value="message"></child>parent
child
props: { value: null }
{ value: 'Привет!' }
<div>Привет!</div>

78. <child :value="message"></child>
<child :value.once="message"></child>
<child :value.sync="message"></child>
parent (*)→ child
parent (1)→ child
parent ←→ child

79. ●
vue-router, vuex…
●
Slot API
●
DevTools (Hot Reload + TimeTravel)
●
Шикарные доки
А ещё...

80. Попробуйте Vue.js 1 день
(серьёзно)

81. Что делать с SEO?

82. Что делать с SEO?
Хочу видеть контент сразу!

83. Умеет?

84. Время
250ms
210ms
430ms
Версия
15.0.2
0.14.8
0.13.3
* В моём личном тесте, NODE_ENV=production
React: SSR

85. Другие решения

86. Другие решения
●
Эмуляция (jsdom, PhantomJS)

87. Другие решения
●
Эмуляция (jsdom, PhantomJS)
●
Snapshots / Prerender.io

88. Другие решения
●
Эмуляция (jsdom, PhantomJS)
●
Snapshots / Prerender.io [SEO]

89. VueServer.js

90. Почему это не сложно?

91. Почему это не сложно?
●
Vue.js — простой

92. Почему это не сложно?
●
Vue.js — простой
●
Реактивность — не нужна

93. Почему это не сложно?
●
Vue.js — простой
●
Реактивность — не нужна
●
Кроссбраузерность — забудьте

94. Почему это не сложно?
●
Vue.js — простой
●
Реактивность — не нужна
●
Кроссбраузерность — забудьте
●
Не всё писать с нуля

95. Рендерим.
Как поступить с данными?

96. Request → State

97. Request → State
getData()

98. Request → State
getData()
App
Content

99. Request → App
Content

100. Request → App
Content
COMPILED

101. Request → App
Content
getData()

102. Request → App
Content

103. import {renderer} from 'vue-server';
const Vue = new renderer();
new Vue({
template: '<div>Hello world!</div>'
})

104. import {renderer} from 'vue-server';
const Vue = new renderer();
new Vue({
template: '<div>Hello world!</div>'
})
.$on('vueServer.htmlReady', (html) => {
res.send(html); // '<div>Hello world!</div>'
});

105. import {compiler} from 'vue-server';
export default {
template: compiler('<div>.../div>')
}
Пре-компиляция шаблонов

106. npm install gulp-vue-compile
Пре-компиляция шаблонов

107. Время
430ms
250ms
React@0.13.3
React@15.0.2
* В моём личном тесте
React vs VueServer

108. Время
430ms
250ms
150ms
React@0.13.3
React@15.0.2
VueServer@0.4.8
* В моём личном тесте
React vs VueServer

109. Время
30ms
50ms
100ms
Объявление
Главная
Поиск
Рендеринг страниц N1.RU

110. Серверный → Клиентский HTML

111. Подходы
●
Подхват (сохранение разметки)
●
Замена (re-rendering)

112. Пере-рендериваем

113. Server HTML

114. head
body

115. head
body
{{ body }}

116. head
{{ body }}
body

117. head
body
body

118. head
body
body

119. head
body
body

120. head
body
body

123. import {renderer} from 'vue-server';
const Vue = new renderer();
Vue.prototype.$isServer = true;

124. <span v-if="$isServer">Загрузка...</span>
<select v-else>
...
</select>

125. VueServer: недостатки

126. VueServer: недостатки
●
Версия 1.0.0-migration

127. VueServer: недостатки
●
Версия 1.0.0-migration
●
Свои директивы — нельзя

128. VueServer: недостатки
●
Версия 1.0.0-migration
●
Свои директивы — нельзя
●
vue-router и другое — не поддерживается

129. Vue 2.0

130. Vue 2.0
●
SSR «из коробки»

131. Vue 2.0
●
SSR «из коробки»
●
API ещё проще (на ~90% совместимо с 1.x)

132. Vue 2.0
●
SSR «из коробки»
●
API ещё проще (на ~90% совместимо с 1.x)
●
render ()

133. Спасибо за внимание!
http://n1.ru/
http://vuejs.org/guide/
https://www.npmjs.com/package/vue-server/
https://www.npmjs.com/package/gulp-vue-compile/
Андрей Солодовников
JS-разработчик «НГС Технологии»
a.solodovnikov@office.ngs.ru