O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
The Grail
React based Isomorph apps framework
Isomorphic Javascript means
you can run the same code
on the server as the c...
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
resource
REST
API
How the isomorphic ...
Isomorphic rendering
Isomorphic rendering
React
converts the state into DOM
state
virtual

dom
DOM
describe how your state is rendered declarat...
Isomorphic rendering
How the isomorphic app
should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
v...
Isomorphic routing
Isomorphic routing
How the isomorphic app
should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
v...
Isomorphic business logic
• get Items
• render Screen
• validate incoming Item
• save Item
• get updated Items
• handle Er...
Isomorphic business logic
• getItems
• renderScreen
• validateItem
• saveItem
• getItems
• handleError
• renderScreen
Fetc...
Isomorphic business logic
The PromisePipes
Isomorphic business logic
The PromisePipes
How the isomorphic app
should look like?
• rendering
• routing
• business logic
• resources
router business logic stores
v...
Isomorphic resources
client vs server

the 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 tru...
• rendering
• routing
• business logic
• resources
router business logic stores
view
How the isomorphic app
should look li...
Isomorphic business logic
validate
validate allowIf(‘canSave’) db.saveTo(‘Item’)
db.get(‘Item’,{})emit(‘items’)catch(‘item...
QA
djkojb@gmail.com
@edjafarov

github.com/edjafarov
https://github.com/edjafarov/grailjs
Próximos SlideShares
Carregando em…5
×

The Grail: React based Isomorph apps framework

1.396 visualizações

Publicada em

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.

Publicada em: Engenharia
  • Seja o primeiro a comentar

The Grail: React based Isomorph apps framework

  1. 1. The Grail React based Isomorph apps framework Isomorphic Javascript means you can run the same code on the server as the client
  2. 2. isomorphic webapps vs SPA? • Performance • Maintainability • Testability • SEO
  3. 3. existing isomorphic solutions • Meteor.js • Rendr • Derby
  4. 4. • rendering • routing • business logic • resources router business logic stores view resource REST API How the isomorphic app should look like?
  5. 5. Isomorphic rendering
  6. 6. 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
  7. 7. Isomorphic rendering
  8. 8. How the isomorphic app should look like? • rendering • routing • business logic • resources router business logic stores view resource router business logic stores view resource
  9. 9. Isomorphic routing
  10. 10. Isomorphic routing
  11. 11. 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. 12. 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
  13. 13. Isomorphic business logic • getItems • renderScreen • validateItem • saveItem • getItems • handleError • renderScreen Fetch data Save data
  14. 14. Isomorphic business logic The PromisePipes
  15. 15. Isomorphic business logic The PromisePipes
  16. 16. 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
  17. 17. Isomorphic resources
  18. 18. client vs server
 the difference • context • resource caching • for server, get is enough
  19. 19. what about modules? • npm • node require • npm • browserify/webpack Server Client
  20. 20. The Grail app DEMO https://grail-todomvc.herokuapp.com/ src: https://github.com/edjafarov/grailjs
  21. 21. 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.
  22. 22. • rendering • routing • business logic • resources router business logic stores view How the isomorphic app should look like?
  23. 23. Isomorphic business logic validate validate allowIf(‘canSave’) db.saveTo(‘Item’) db.get(‘Item’,{})emit(‘items’)catch(‘items:fail’) client server
  24. 24. QA djkojb@gmail.com @edjafarov
 github.com/edjafarov https://github.com/edjafarov/grailjs

×