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