An Introduction to Isomorphic Applications using an example of React JS in a Ruby on Rails project. Pros and cons of Isomorphic Applications versus regular web apps. Code for demo app available here: https://github.com/shifakhan/react_hello

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?

12. backend and frontend
Isomorphic JS

13. backend and frontend
Isomorphic JS
Business/
Application Logic

14. backend and frontend
Isomorphic JS
Routing

15. backend and frontend
Isomorphic JS
Views

16. Isomorphic JS
Views
Business/
Application Logic
Routing

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 !