РИТ++ 2017, Frontend Сonf Зал Мумбаи, 6 июня, 14:00 Тезисы: http://frontendconf.ru/2017/abstracts/2471.html Знаете ли вы, что такое прогрессивный рендеринг? Почему вам стоит его использовать? Какие есть варианты сегодня?

1. Прогрессивный
рендеринг, Catberry.js
Реенко Михаил
Javascript Developer at Flamp (2GIS)
Catberry Core Team Member

4. Flamp
• 6 лет развития
• 25 000 000 просмотров в месяц
• 280 000 000 запросов к API в месяц

5. Сайт должен быть
1. Удобным
2. Быстрым

6. Сайт должен быть
1. Удобным ➜ к дизайнерам
2. Быстрым ➜ к разработчикам

7. Что такое быстрый сайт?

8. Что такое скорость загрузки страницы?

9. Скорость страницы – это показатель того,
насколько быстро загружается контент

11. Скорость страницы – это восприятие, это то,
что испытывает пользователь

14. «Классическая» загрузка страницы

21. (req, res, next) => {
const urlParts = url.parse(req.url, true);
getData(urlParts.query.id)
.then(data => template.render(data))
.then(html => res.end(html));
}

22. Сделаем «ждунов» счастливее?

23. В 1997 году в RFC 2068 HTTP/1.1
был представлен chunked encoding

24. «Прогрессивная» загрузка страницы

31. (req, res, next) => {
const urlParts = url.parse(req.url, true);
getHeaderData(urlParts.query.id)
.then(headerData => {
res.write(template.render('header', headerData));
return getFastData(/* params */);
})
.then(fastData => {
res.write(template.render('fast', fastData));
return getMainBlockData(/* params */);
})
.then(mainBlockData => /* etc */)
.then(html => res.end());

32. Node.js stream API

33. (req, res, next) => {
const urlParts = url.parse(req.url, true);
const pageStream = new MyReadable(urlParts);
pageStream.pipe(res);
}

34. const Readable = require('stream').Readable;
class MyReadable extends Readable {
_read(size) {
this.push('chunk of HTML');
this.push(null);
}
}

37. Не всё идеально
• Установка HTTP кодов и заголовков НЕ возможна после получения
первого байта
• Ожидание инициализации JS

38. Нормально делай – нормально будет
• Дробить на компоненты и запросы

39. Нормально делай – нормально будет
• Дробить на компоненты и запросы
• Следить за зависимостями компонентов от данных

40. Нормально делай – нормально будет
• Дробить на компоненты и запросы
• Следить за зависимостями компонентов от данных
• Использовать плейсхолдеры, чтобы не «прыгал» контент

41. Нормально делай – нормально будет
• Дробить на компоненты и запросы
• Следить за зависимостями компонентов от данных
• Использовать плейсхолдеры, чтобы не «прыгал» контент
• Контролировать редиректы до 1-го байта

42. Всё клёво,
прогрессивный рендеринг – нужен!

43. Какие есть варианты сегодня?

44. Какие есть варианты сегодня?
• github.com/aickin/react-dom-stream ★ 1,776
• markojs.com ★ 2,795
• catberry.org ★ 722
• dustjs.com ★ 2,565

45. Что мы хотим от «решения»?
• Критично SEO
• Скорость работы сайта
• Скорость разработки

46. Что мы хотим от «решения»?
• Критично SEO ➜ серверный рендеринг
• Скорость работы сайта
• Скорость разработки ➜ изоморфность, компонентность

47. Catberry.js

48. Catberry.js
• Изоморфный
• Компонентный
• Прогрессивный рендеринг
• Flux архитектура
• SEO
• Разделенный bundle.js

49. Экосистема Catberry.js
• Плагин для IDEA, Atom
• Catberry Debugger (Chrome Developer Tools)
• l10n, oauth2-client, logger, uhr…
• CLI Utility, Yeoman generator
• Gitter Chat

50. Cat-components
• Серверный рендеринг
• Любой* шаблонизатор
• Нет Shadow DOM
• Можно ставить через NPM
* Pug, Handlebars, Dust…

51. React vs Catberry

52. React vs Catberry
• Виртуальный DOM • Реальный DOM + morphdom

53. React vs Catberry
• Виртуальный DOM
• JSX
• Реальный DOM + morphdom
• Любой* шаблонизатор
(Pug, Handlebars, Dust…)

54. React vs Catberry
• Виртуальный DOM
• JSX
• Смешивание верстки и кода
• Реальный DOM + morphdom
• Любой* шаблонизатор
(Pug, Handlebars, Dust…)
• Стили и логика разделены

55. React vs Catberry
• Виртуальный DOM
• JSX
• Смешивание верстки и кода
• bundle.js
• Реальный DOM + morphdom
• Любой* шаблонизатор
(Pug, Handlebars, Dust…)
• Стили и логика разделены
• app.js + externals.js

56. React vs Catberry
4xRAM 1xRAM
–15% производительность
На примере 1000 ToDo MVC

57. React vs Catberry
~40 Кб ~28 Кб
На примере Hello World

58. React vs Catberry
~40 Кб
~350 Кб
~28 Кб
~ 35 Кб
На примере Hello World
На примере ToDo MVC

59. React vs Catberry
~40 Кб
~350 Кб
~28 Кб
~ 35 Кб
На примере Hello World
На примере ToDo MVC

60. Приложения на Catberry

61. Опыт в команде Flamp
• C 2014 года разработка фронтенда на Catberry
• 4 проекта
• Всего 3 фронтенд разработчика

62. Опыт в команде Flamp
• C 2014 года разработка фронтенда на Catberry
• 4 проекта
• Всего 3 фронтенд разработчика
• Год назад всё переписали с нуля

63. Опыт в команде Flamp
• C 2014 года разработка фронтенда на Catberry
• 4 проекта
• Всего 3 фронтенд разработчика
• Год назад всё переписали с нуля
• 300+ компонентов в текущей версии flamp.ru

64. Опыт в команде Flamp
• C 2014 года разработка фронтенда на Catberry
• 4 проекта
• Всего 3 фронтенд разработчика
• Год назад всё переписали с нуля
• 300+ компонентов в текущей версии flamp.ru
• И мы не сошли с ума

65. Last chunk
• Прогрессивный рендеринг – проверенная временем (с 1997г)
технология и отлично поддерживается
• Если у вас много долгих запросов, то это для вас
• Есть отличные реализации
• Можно реализовать самому в любом проекте (legacy code ♥)

66. Прогрессивный
рендеринг, Catberry.js
Михаил Реенко
m.reenko@flamp.ru