Synth - 東京Node学園2014

東京Node学園2014発表資料
Synthの紹介

Transcript

1. Synth @pchw
2. https://otakumode.com/careers WANTS YOU
3. What is Synth?
4. http://www.infoq.com/jp/news/2014/06/synth Synth, API-First Web Framework, Confuses Community - APIϑΝʔετͷWebϑϨʔϜϫʔΫSynthΛ८ΔίϛϡχςΟͷࠔ࿭ -
5. http://www.synthjs.com/ The back-end web framework designed to make (Angular|Ember|Backbone)JS web apps easy to create and manage.
6. an API-first web app framework is
7. #1 - #4 Synth Introduction
8. API-first #1
9. Synth is composed of … RESTful JSON API and Client side MV* application
10. Backend Frontend View /api/tweets View Model Model JSON /api/memos JSON database /tweets
11. Map directory structures to URL routings #2
12. Synth provides … Easy to add an endpoint
13. /api/tweets /api/memos back/resources/ tweets/ getTweets.js exports.getIndex = function () {! :! } memos/ getMemos.js exports.getIndex = function () {! :! } Directories Backend
14. exports.getIndex?
15. exports.getIndex? exports.getIndex = function () {! // GET /api/tweets! } exports.get = function () {! // GET /api/tweets/123! } exports.post = function () {! // POST /api/tweet! }
16. #3 Preloaded HTML Preloaded Data
17. Client side MV* frameworks have a problem
19. Synth resolves … initial rendering delays
20. Backend Frontend View /api/tweets View Model Model /api/memos database /tweets templates
21. index.jade ! script.! var preloadedData = !{data};! body! h1= appName! ! div(ng-view)! ! if preloadHTML! script(type="text/ng-template")! != preloadHTML
22. #4 Promises
23. Synth implements preload… By using Promises
24. getTweets.js ! exports.getIndex = function (db) {! return db.collection('tweets').find()! .sort({ created_at: -1 })! .limit(30)! .toArray().then(function (tweets) {! return {! tweets: tweets! };! });! };
25. Conclusion
26. Synth • is an API-first web application framework • resolves initial rendering delays • recommend to use promised handler • have a simple directory - URL mapping