«The Grail: React based Isomorph apps framework»
1 like5,334 views
Since Nodejs came into my life the idea of architecture that would allow me to build SPA apps that would render on server as well as on client. With Grail, Reactjs and React router this is possible right now without any side effects and with any kind of backend API.
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to «The Grail: React based Isomorph apps framework» (20)
Ad
More from FDConf (13)
Recently uploaded (20)
«The Grail: React based Isomorph apps framework»
- 2. The Grail React based Isomorph apps framework Isomorphic Javascript means you can run the same code on the server as the client
- 3. isomorphic webapps vs SPA? • Performance • Maintainability • Testability • SEO
- 4. existing isomorphic solutions • Meteor.js • Rendr • Derby
- 5. • rendering • routing • business logic • resources router business logic stores view resource REST API How the isomorphic app should look like?
- 7. Isomorphic rendering React converts the state into DOM state virtual dom DOM describe how your state is rendered declaratively and make your business logic manipulate state instead of view
- 9. How the isomorphic app should look like? • rendering • routing • business logic • resources router business logic stores view resource router business logic stores view resource
- 12. How the isomorphic app should look like? • rendering • routing • business logic • resources router business logic stores view resource router business logic stores view resource
- 13. Isomorphic business logic • get Items • render Screen • validate incoming Item • save Item • get updated Items • handle Error is save failed • render Screen Fetch data Save data
- 14. Isomorphic business logic • getItems • renderScreen • validateItem • saveItem • getItems • handleError • renderScreen Fetch data Save data
- 15. Isomorphic business logic The PromisePipes
- 16. Isomorphic business logic The PromisePipes
- 17. How the isomorphic app should look like? • rendering • routing • business logic • resources router business logic stores view resource router business logic stores view resource REST API
- 19. client vs server the difference • context • resource caching • for server, get is enough
- 20. what about modules? • npm • node require • npm • browserify/webpack Server Client
- 21. The Grail app DEMO https://grail-todomvc.herokuapp.com/ src: https://github.com/edjafarov/grailjs
- 22. there is no server - Do not try and code the isomorphic backend. That's impossible. Instead... only try to realize the truth. - What truth? - There is no server.
- 23. • rendering • routing • business logic • resources router business logic stores view How the isomorphic app should look like?
- 24. Isomorphic business logic validate validate allowIf(‘canSave’) db.saveTo(‘Item’) db.get(‘Item’,{})emit(‘items’)catch(‘items:fail’) client server