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