Изоморфный JavaScript — будущее уже здесь
2 likes2,653 views
Документ обсуждает изоморфный JavaScript, который исполняется как на сервере, так и в браузере, обеспечивая единое поведение и производительность. Он описывает подходы к реализации изоморфных приложений, управление разным рендерингом и использование template helpers, а также сравнивает серверные и клиентские контексты. В заключение упоминаются готовые фреймворки и примеры использования изоморфного JavaScript в популярных веб-приложениях.
![Серверный контекст
var context = {
userAgent: request.headers['user-agent'],
location: request.url,
redirect: function (url) {
response.writeHead(302, {Location: url});
},
getCookie: function () { return request.headers.cookie; }
setCookie: function (string) {
response.setHeader('Set-Cookie', string);
}
};
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
34](https://image.slidesharecdn.com/javascript-150406044214-conversion-gate01/85/JavaScript-34-320.jpg)
Изоморфный JavaScript — будущее уже здесь
- 1. Изоморфный JavaScript Будущее уже здесь Денис Речкунов, Flamp
- 2. «Мартин, в будущем JavaScript изоморфный!»
- 3. Что такое изоморфный JavaScript код? • Исполняется в различных окружениях (нам важен сервер и браузер) • Гарантирует одно поведение • Справляется с разностью окружений через абстракции 3
- 4. Что он нам даёт? • Мы можем создать изоморфный Web UI • Который будет строить HTML на сервере для SEO • Работать как Single Page Application в браузере • Получим единую языковую среду — JavaScript • Максимально переиспользуем код • Получим прирост производительности на старте (ms vs sec) 4
- 5. Что он нам не даёт? • Не работаем с хранилищем • Как правило, работаем с RESTful API • Не включает код для обеспечения безопасности • Чаще всего это только Web UI 5
- 6. Как мы к этому пришли?
- 7. 27 мая 2009 года вышел релиз Автор — Райан Дал, разработчик из Joyent
- 8. Вот оно!
- 9. В 2011 году вышел релиз сборщика Автор — Джеймс Холлидей (substack)
- 10. Словно Делориан для изоморфного JavaScript
- 11. Люди начали его использовать В своих проектах
- 12. 18 октября 2011 появился пост Nodejitsu "Scaling Isomorphic Javascript Code"
- 13. 9 ноября 2011 nodejitsu представляет фреймворк
- 14. 16 июня 2012 года Yahoo релизит фреймворк Mojito
- 15. Но термин "изоморфный" Стал популярным благодаря Спайку Брехему из Airbnb
- 16. 11 ноября 2013 появляется пост "Isomorphic JavaScript: The Future of Web Apps"
- 17. Позже Спайк Брехм выступает на JSConf 2014 с докладом "Building Isomorphic Apps"
- 19. Нужно решить ряд проблем • Разный рендеринг • Зависимость от окружения • Запросы за данными к RESTful API по-разному • Собирать серверный код для браузера 19
- 20. Разный рендеринг
- 21. Virtual DOM (на сервере) • Имитация DOM для фронт-енд фреймворка на сервере • Приложение применяет изменения к эталонному DOM • Происходит сериализация в строку HTML • HTML уходит в браузер 21
- 22. Virtual DOM (в браузере) • Приложение делает изменения в Virtual DOM • Состояние Virtual DOM сравнивается с DOM • При найденном отличии применяется поэлементный patch к DOM • Используется в React 22
- 23. Мартин не в восторге от Virtual DOM
- 24. Template Helpers (на сервере) • Берем шаблонизатор, например Handlebars • Определяем Helper, который будет рендерить View с данными • При вызове хелпера запрашиваем данные для шаблона • Рендерим шаблон с данными, создавая элемент-обертку с меткой • Когда отрендерили все View – отдаем HTML браузеру 24
- 25. Template Helpers (в браузере) • Компилируем шаблоны для браузера • Клиентский код привязывается к помеченным элементам-обёрткам • Обновляем поддеревья DOM (каждую View полностью) 25
- 26. Мартин по-прежнему не сильно рад
- 27. Прогрессивный рендеринг (на сервере) • Используем кастомные тэги HTML • Используем Node.js Streams API и реализуем Transform Stream • ourTransform.pipe(response).end(root.render()); • Transform Stream ищет наши тэги в потоке HTML • Если нашел—рендерит в них соответствующий шаблон • Который пропускается через такой же Transform Stream • Весь отрендеренный HTML сразу порциями уходит в браузер 27
- 29. Когда у вас прогрессивный рендеринг 29
- 30. Прогрессивный рендеринг (в браузере) • Компилируем шаблоны для браузера • Используем привязки клиентского кода по нашим тэгам HTML • Обновляем поддеревья DOM (каждый HTML-тэг полностью) • Используется в Catberry.js 30
- 31. Мы с Мартином выбираем этот вариант
- 32. Как балансировать между серверным и браузерным окружением
- 33. Серверный роутер Router.prototype.route = function (request, response) { var context = { ... }; var state = this.getState(request.url); renderer.render(state, context, response); }; 01. 02. 03. 04. 05. 33
- 34. Серверный контекст var context = { userAgent: request.headers['user-agent'], location: request.url, redirect: function (url) { response.writeHead(302, {Location: url}); }, getCookie: function () { return request.headers.cookie; } setCookie: function (string) { response.setHeader('Set-Cookie', string); } }; 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 34
- 35. Браузерный роутер Router.prototype.route = function (state) { var context = { ... } renderer.render(state, context); }; 01. 02. 03. 04. 35
- 36. Браузерный контекст var context = { userAgent: window.navigator.userAgent, location: window.location.pathname + window.location.search, redirect: function (url) { window.location = url; }, getCookie: function () { return document.cookie; } setCookie: function (string) { document.cookie = string; } }; 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 36
- 37. На что срабатывает роутинг? window.addEventListener('popstate', function (event) { router.route(event.state); }); window.document.body.addEventListener('click', function (event) { event.preventDefault(); var location = window.location.toString(); var state = router.getState(location); window.history.pushState(state, '', location); router.route(state); }); 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 37
- 38. Ну а остальное детали
- 39. Запросы к API по-разному • На сервере http или https модули node.js • В браузере XMLHttpRequest • Есть готовые решения (superagent, catberry-uhr, iso-http) 39
- 40. Собирать серверный код для браузера • Для нас это уже делает browserify • Умеет подставлять браузерные версии модулей node.js • Делает заглушки для того, что работать не может • Можно указать в package.json замену на браузерную версию 40
- 41. package.json "browser": { "./lib/Renderer.js": "./browser/Renderer.js", "./lib/Router.js": "./browser/Router.js" } 01. 02. 03. 04. 41
- 42. И так, что мы имеем? • Рендеринг можно реализовать несколькими способами • С разницей окружений вполне можно разобраться • Есть готовые изоморфные npm-пакеты для HTTP-запросов • Browserify решает проблемы со сборкой 42
- 43. Готовые фреймворки: • Meteor • Derby • React • Catberry.js • Slot • Taunus • ещё на isomorphic.net 43
- 44. Будущее уже здесь Несколько изоморфных веб-приложений: • instagram.com • flickr.com • airbnb.ru • 2gis.ru • konfettin.ru • flamp.ru 44
- 45. Спасибо за внимание! catberry.org Денис Речкунов, Flamp ([email protected]) pragmadash