Изоморфные Java script приложения с catberry.js
- 1. Изоморфные JavaScript-приложения pragmadash Денис Речкунов node.js-разработчик с Catberry.js
- 3. Одностраничный фронт-енд & SEO бэк-енд
- 4. Один код и одно поведение
- 5. Зачем? Хочется: 1. Иметь одностраничное приложение 2. Не жертвовать SEO 3. Не повторяться (DRY) 4. Одну языковую среду — JavaScript 5. Экономить ресурсы сервера 6. И чтобы все это было просто 5
- 6. И не только мне хочется • Rendr (AirBnb) • Kraken (Paypal) • Mojito (Yahoo) • Meteor • Derby • Invisible • Ezel • ... who knows? 6
- 7. Почему они не так хороши?
- 8. Используют фронт-енд на сервере • Rendr, Ezel — Backbone • Mojito — YUI • MEAN — Angular 8
- 9. Привязаны к одной БД Например, MongoDB: • Rendr • Meteor • Derby + Redis 9
- 10. Навязывают сложный real-time • Meteor • Derby 10
- 11. А хочется-то просто сайт
- 13. Catberry.js
- 14. Service-Module-Placeholer • Service — RESTful API про данные (node, Scala, Erlang и что угодно) • Module — Подготовка данных для шаблона и обработка событий • Placeholder — Шаблон 14
- 15. Почему не MVC? • Нет обработки и хранения данных как в Model • Все обрабатывается и хранится на удаленном Service • Placeholder не привязан к Model как View • Placeholder привязан к Module • Module инициатор обновления Placeholder`ов, а не Model • Отслеживается состояние Module, а не Model 15
- 17. Потоковый рендеринг с бэк-енда • Нет "белого экрана" • Браузер не простаивает • Экономим память 17
- 19. Параллельный рендеринг на фронт-енде • Когда меняется состояние модуля • Все запросы к RESTful API параллельны • Все очень быстро 19
- 20. Настоящая изоморфность • URL path • Очистка URL hash • User Agent • Referrer • Чтение/редактирование Cookie • Redirect • Universal HTTP(S) request • Rendered cache 20
- 21. Module API
- 22. Service Locator 01. 02. 03. 04. locator.register(‘uhr’, UHR); locator.registerInstance('uhr', new UHR()); locator.resolve(‘uhr’, UHR); locator.resolveInstance(SomeModuleDependsOnUHR); 22
- 23. Dependency Injection 01. 02. 03. 04. function ModuleConstructor ($uhr, someConfigSection) { // use injected $uhr // and event config sections } 23
- 24. Render method 01. 02. 03. 04. ModuleConstructor.prototype.renderSome = function () { // get data from somewhere return {some: data}; // }; 24
- 25. After method ModuleConstructor.prototype.afterRenderSome = function (dataContext) { // do everything with rendered Placeholder }; 01. 02. 03. 04. 25
- 26. Handle method 01. 02. 03. 04. 05. 06. 07. ModuleConstructor.prototype.handleSome = function (event) { // do something // event.args // event.element // event.isEnding // event.isHashChanging }; 26
- 27. Submit method 01. 02. 03. 04. 05. ModuleConstructor.prototype.submitSome = function (event) { // handle form submit // event.values // event.element }; 27
- 29. Auto camelCase Если шаблон называется some-cool-placeholder ModuleConstructor.prototype.renderSomeCoolPlaceholer = function () { // ... }; 01. 02. 03. 04. И так для всех методов 29
- 30. Promises Можно адаптировать колбэки return new Promise(function (fulfill, reject) { fulfill(result); // when ready // or reject(error); // if error 01. 02. 03. 04. 05. }); 30
- 31. Promises Чейнинг асинхронного кода promise .then(function (result) { // return Promise }) .then(function (result) { // return result }); 01. 02. 03. 04. 05. 06. 07. 31
- 32. Promises Обработка ошибок в одном месте promise // many .then .then(null, function (error) { // handle error }); 01. 02. 03. 04. 05. 32
- 33. А где-то уже используется? konfettin.ru flamp.ru (скоро) catberry.org (скоро) 33
- 34. Open Source — это круто!
- 35. Благодаря чему все это есть? • Идея потокового рендеринга взята с trumpet github.com/substack/node-trumpet • Серверный код работает в браузере благодаря browserify github.com/substack/node-browserify • Используется форк форка шаблонизатора Dust github.com/catberry/catberry-dust • И все это подключается к express/connect github.com/strongloop/express / github.com/senchalabs/connect 35
- 36. Где узнать больше? github.com/catberry/catberry twitter.com/catberryjs runnable.com/catberry 01. 02. $ npm -g install catberry-cli $ catberry init example 36
- 37. Вопросы?