Embed Size (px)
Citation preview
The GrailReact based Isomorph apps framework
Isomorphic Javascript means you can run the same code on the server as the client
isomorphic webapps vs SPA?
• Performance
• Maintainability
• Testability
• SEO
existing isomorphic solutions
• Meteor.js
• Rendr
• Derby
• rendering
• routing
• business logic
• resources
router business logic stores
view
resourceRESTAPI
How the isomorphic app should look like?
Isomorphic rendering
Isomorphic renderingReact
converts the state into DOM
state virtualdom DOM
describe how your state is rendered declaratively and make your business logic manipulate state
instead of view
Isomorphic rendering
How the isomorphic app should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
view
resource
router business logic stores
view
resource
Isomorphic routing
Isomorphic routing
How the isomorphic app should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
view
resource
router business logic stores
view
resource
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
Isomorphic business logic
• getItems
• renderScreen
• validateItem
• saveItem
• getItems
• handleError
• renderScreen
Fetch data Save data
Isomorphic business logicThe PromisePipes
Isomorphic business logicThe PromisePipes
How the isomorphic app should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
view
resource
router business logic stores
view
resourceRESTAPI
Isomorphic resources
client vs serverthe difference
• context
• resource caching
• for server, get is enough
what about modules?
• npm
• node require
• npm
• browserify/webpack
Server Client
The Grail app DEMO
https://grail-todomvc.herokuapp.com/
src: https://github.com/edjafarov/grailjs
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.
• rendering
• routing
• business logic
• resources
router business logic stores
view
How the isomorphic app should look like?
Isomorphic business logic
validate
validate allowIf(‘canSave’) db.saveTo(‘Item’)
db.get(‘Item’,{})emit(‘items’)catch(‘items:fail’)
client server
