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.

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 !