The Grail: React based Isomorph apps framework
•
3 gefällt mir•1,565 views
The document discusses Grail, a React-based framework for building isomorphic JavaScript applications. It describes the key components of an isomorphic app as rendering, routing, business logic, and resources. Isomorphic apps can run the same code on both the server and client for performance, maintainability, and testability benefits over single-page apps. Existing isomorphic solutions include Meteor.js, Rendr, and Derby. The document provides examples of isomorphic rendering, routing, and business logic and notes differences between implementing these components on the client versus server. It highlights a TodoMVC demo built with Grail.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie The Grail: React based Isomorph apps framework
Ähnlich wie The Grail: React based Isomorph apps framework (20)
Mehr von Eldar Djafarov
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
The Grail: React based Isomorph apps framework
- 1. The Grail React based Isomorph apps framework Isomorphic Javascript means you can run the same code on the server as the client
- 2. isomorphic webapps vs SPA? • Performance • Maintainability • Testability • SEO
- 3. existing isomorphic solutions • Meteor.js • Rendr • Derby
- 4. • rendering • routing • business logic • resources router business logic stores view resource REST API How the isomorphic app should look like?
- 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
- 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
- 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. 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. Isomorphic business logic • getItems • renderScreen • validateItem • saveItem • getItems • handleError • renderScreen Fetch data Save data
- 14. Isomorphic business logic The PromisePipes
- 15. Isomorphic business logic The PromisePipes
- 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
- 18. client vs server the difference • context • resource caching • for server, get is enough
- 19. what about modules? • npm • node require • npm • browserify/webpack Server Client
- 20. The Grail app DEMO https://grail-todomvc.herokuapp.com/ src: https://github.com/edjafarov/grailjs
- 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. • rendering • routing • business logic • resources router business logic stores view How the isomorphic app should look like?
- 23. Isomorphic business logic validate validate allowIf(‘canSave’) db.saveTo(‘Item’) db.get(‘Item’,{})emit(‘items’)catch(‘items:fail’) client server