The Grail: React based Isomorph apps framework

Eldar Djafarov

djkojb@gmail.com @edjafarov github.com/edjafarov

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

QA

djkojb@gmail.com @edjafarovgithub.com/edjafarov

https://github.com/edjafarov/grailjs