Isomorphic js - React in Rails
3 likes985 views
The document discusses isomorphic JavaScript, which allows the same JavaScript code to run on both the server and client, integrating backend and frontend development. It highlights frameworks and libraries, specifically React, that facilitate this approach and mentions potential drawbacks like slow initial load times and SEO challenges. Additionally, it points out the limited documentation and increased complexity associated with implementing isomorphic JS in applications.
Isomorphic js - React in Rails
- 1. Isomorphic goodness in your web app - shifa khan
- 2. Isomorphic goodness in your web app What ?
- 3. Isomorphic JS Means you can run the same Javascript code on the server as well as the client (aka the web browser).
- 4. Once upon a time.. These guys competed to be the beloved poster child of web apps Ruby on Rails PHP + ‘x’ framework Python + Django
- 5. They had a distinct divide between the backend and frontend Ruby / PHP / Python HTML, CSS & JS
- 6. Node allowed Javascript code on both backend and frontend JS HTML, CSS & JS Node JS
- 7. Next Logical step seems obvious.. backend and frontend JS Html, css js Isomorphic JS
- 8. Why ?
- 9. Angular Stapes Spine Ember Meteor Flight Riot Can Sammy Backbone Agility Volt Yay! Faster Snappy Apps!
- 10. Drawbacks ? ➔ Slow Initial Load Times ➔ Difficult SEO ➔ Logic Duplication
- 11. How to?
- 13. backend and frontend Isomorphic JS Business/ Application Logic
- 14. backend and frontend Isomorphic JS Routing
- 15. backend and frontend Isomorphic JS Views
- 17. Problems: Not a lot of Documentation/ guidelines... Yet. Increased Complexity
- 18. What’s in it for me ?
- 19. backend and frontend Isomorphic JS Views
- 20. backend and frontend Isomorphic JS Views React JS
- 21. React ➔ Isomorphic JS Library ➔ For Views/ UI components (V in MVC) ➔ Backed and used by Facebook, Instagram ➔ Virtual DOM concept ➔ Renders on both server and client
- 22. gem ‘react-rails’ ➔ Helper methods for react components ➔ Integrates with turbolinks ➔ No need for templates (mustache, etc)
- 23. Sample app Code - https://github.com/shifakhan/react_hello
- 24. What you’ll miss about rails views ➔ Helper methods - current_user, simple form
- 25. Thank You !