Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)

316 views

Published on

РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 6 июня, 14:00

Тезисы:
http://frontendconf.ru/2017/abstracts/2471.html

Знаете ли вы, что такое прогрессивный рендеринг?
Почему вам стоит его использовать?
Какие есть варианты сегодня?

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

Прогрессивный рендеринг и Catberry.js / Михаил Реенко (2GIS / Flamp)

  1. 1. Прогрессивный рендеринг, Catberry.js Реенко Михаил Javascript Developer at Flamp (2GIS) Catberry Core Team Member
  2. 2. Flamp • 6 лет развития • 25 000 000 просмотров в месяц • 280 000 000 запросов к API в месяц
  3. 3. Сайт должен быть 1. Удобным 2. Быстрым
  4. 4. Сайт должен быть 1. Удобным ➜ к дизайнерам 2. Быстрым ➜ к разработчикам
  5. 5. Что такое быстрый сайт?
  6. 6. Что такое скорость загрузки страницы?
  7. 7. Скорость страницы – это показатель того, насколько быстро загружается контент
  8. 8. Скорость страницы – это восприятие, это то, что испытывает пользователь
  9. 9. «Классическая» загрузка страницы
  10. 10. (req, res, next) => { const urlParts = url.parse(req.url, true); getData(urlParts.query.id) .then(data => template.render(data)) .then(html => res.end(html)); }
  11. 11. Сделаем «ждунов» счастливее?
  12. 12. В 1997 году в RFC 2068 HTTP/1.1 был представлен chunked encoding
  13. 13. «Прогрессивная» загрузка страницы
  14. 14. (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());
  15. 15. Node.js stream API
  16. 16. (req, res, next) => { const urlParts = url.parse(req.url, true); const pageStream = new MyReadable(urlParts); pageStream.pipe(res); }
  17. 17. const Readable = require('stream').Readable; class MyReadable extends Readable { _read(size) { this.push('chunk of HTML'); this.push(null); } }
  18. 18. Не всё идеально • Установка HTTP кодов и заголовков НЕ возможна после получения первого байта • Ожидание инициализации JS
  19. 19. Нормально делай – нормально будет • Дробить на компоненты и запросы
  20. 20. Нормально делай – нормально будет • Дробить на компоненты и запросы • Следить за зависимостями компонентов от данных
  21. 21. Нормально делай – нормально будет • Дробить на компоненты и запросы • Следить за зависимостями компонентов от данных • Использовать плейсхолдеры, чтобы не «прыгал» контент
  22. 22. Нормально делай – нормально будет • Дробить на компоненты и запросы • Следить за зависимостями компонентов от данных • Использовать плейсхолдеры, чтобы не «прыгал» контент • Контролировать редиректы до 1-го байта
  23. 23. Всё клёво, прогрессивный рендеринг – нужен!
  24. 24. Какие есть варианты сегодня?
  25. 25. Какие есть варианты сегодня? • github.com/aickin/react-dom-stream ★ 1,776 • markojs.com ★ 2,795 • catberry.org ★ 722 • dustjs.com ★ 2,565
  26. 26. Что мы хотим от «решения»? • Критично SEO • Скорость работы сайта • Скорость разработки
  27. 27. Что мы хотим от «решения»? • Критично SEO ➜ серверный рендеринг • Скорость работы сайта • Скорость разработки ➜ изоморфность, компонентность
  28. 28. Catberry.js
  29. 29. Catberry.js • Изоморфный • Компонентный • Прогрессивный рендеринг • Flux архитектура • SEO • Разделенный bundle.js
  30. 30. Экосистема Catberry.js • Плагин для IDEA, Atom • Catberry Debugger (Chrome Developer Tools) • l10n, oauth2-client, logger, uhr… • CLI Utility, Yeoman generator • Gitter Chat
  31. 31. Cat-components • Серверный рендеринг • Любой* шаблонизатор • Нет Shadow DOM • Можно ставить через NPM * Pug, Handlebars, Dust…
  32. 32. React vs Catberry
  33. 33. React vs Catberry • Виртуальный DOM • Реальный DOM + morphdom
  34. 34. React vs Catberry • Виртуальный DOM • JSX • Реальный DOM + morphdom • Любой* шаблонизатор (Pug, Handlebars, Dust…)
  35. 35. React vs Catberry • Виртуальный DOM • JSX • Смешивание верстки и кода • Реальный DOM + morphdom • Любой* шаблонизатор (Pug, Handlebars, Dust…) • Стили и логика разделены
  36. 36. React vs Catberry • Виртуальный DOM • JSX • Смешивание верстки и кода • bundle.js • Реальный DOM + morphdom • Любой* шаблонизатор (Pug, Handlebars, Dust…) • Стили и логика разделены • app.js + externals.js
  37. 37. React vs Catberry 4xRAM 1xRAM –15% производительность На примере 1000 ToDo MVC
  38. 38. React vs Catberry ~40 Кб ~28 Кб На примере Hello World
  39. 39. React vs Catberry ~40 Кб ~350 Кб ~28 Кб ~ 35 Кб На примере Hello World На примере ToDo MVC
  40. 40. React vs Catberry ~40 Кб ~350 Кб ~28 Кб ~ 35 Кб На примере Hello World На примере ToDo MVC
  41. 41. Приложения на Catberry
  42. 42. Опыт в команде Flamp • C 2014 года разработка фронтенда на Catberry • 4 проекта • Всего 3 фронтенд разработчика
  43. 43. Опыт в команде Flamp • C 2014 года разработка фронтенда на Catberry • 4 проекта • Всего 3 фронтенд разработчика • Год назад всё переписали с нуля
  44. 44. Опыт в команде Flamp • C 2014 года разработка фронтенда на Catberry • 4 проекта • Всего 3 фронтенд разработчика • Год назад всё переписали с нуля • 300+ компонентов в текущей версии flamp.ru
  45. 45. Опыт в команде Flamp • C 2014 года разработка фронтенда на Catberry • 4 проекта • Всего 3 фронтенд разработчика • Год назад всё переписали с нуля • 300+ компонентов в текущей версии flamp.ru • И мы не сошли с ума
  46. 46. Last chunk • Прогрессивный рендеринг – проверенная временем (с 1997г) технология и отлично поддерживается • Если у вас много долгих запросов, то это для вас • Есть отличные реализации • Можно реализовать самому в любом проекте (legacy code ♥)
  47. 47. Прогрессивный рендеринг, Catberry.js Михаил Реенко m.reenko@flamp.ru

×