Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Isomorphic goodness in
your web app
- shifa khan
Isomorphic goodness in
your web app
What ?
Isomorphic JS
Means you can run the same Javascript code
on the server as well as the client (aka the
web browser).
Once upon a time..
These guys competed to be
the beloved poster child of web apps
Ruby on Rails
PHP + ‘x’ framework
Python...
They had a distinct divide between the
backend and frontend
Ruby / PHP
/ Python
HTML, CSS
& JS
Node allowed Javascript code on both
backend and frontend
JS
HTML, CSS
& JS
Node JS
Next Logical step seems obvious..
backend and frontend
JS
Html,
css
js
Isomorphic JS
Why ?
Angular Stapes
Spine
Ember
Meteor
Flight
Riot
Can
Sammy
Backbone
Agility
Volt
Yay! Faster
Snappy Apps!
Drawbacks ?
➔ Slow Initial Load Times
➔ Difficult SEO
➔ Logic Duplication
How to?
backend and frontend
Isomorphic JS
backend and frontend
Isomorphic JS
Business/
Application Logic
backend and frontend
Isomorphic JS
Routing
backend and frontend
Isomorphic JS
Views
Isomorphic JS
Views
Business/
Application Logic
Routing
Problems:
Not a lot of Documentation/ guidelines... Yet.
Increased Complexity
What’s in it for me ?
backend and frontend
Isomorphic JS
Views
backend and frontend
Isomorphic JS
Views
React JS
React
➔ Isomorphic JS Library
➔ For Views/ UI components (V in MVC)
➔ Backed and used by Facebook, Instagram
➔ Virtual DOM...
gem ‘react-rails’
➔ Helper methods for react components
➔ Integrates with turbolinks
➔ No need for templates (mustache, et...
Sample app
Code - https://github.com/shifakhan/react_hello
What you’ll miss about rails views
➔ Helper methods - current_user, simple form
Thank You !
Prochain SlideShare
Chargement dans…5
×

Isomorphic js - React in Rails

795 vues

Publié le

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

Publié dans : Technologie
  • Soyez le premier à commenter

Isomorphic js - React in Rails

  1. 1. Isomorphic goodness in your web app - shifa khan
  2. 2. Isomorphic goodness in your web app What ?
  3. 3. Isomorphic JS Means you can run the same Javascript code on the server as well as the client (aka the web browser).
  4. 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. 5. They had a distinct divide between the backend and frontend Ruby / PHP / Python HTML, CSS & JS
  6. 6. Node allowed Javascript code on both backend and frontend JS HTML, CSS & JS Node JS
  7. 7. Next Logical step seems obvious.. backend and frontend JS Html, css js Isomorphic JS
  8. 8. Why ?
  9. 9. Angular Stapes Spine Ember Meteor Flight Riot Can Sammy Backbone Agility Volt Yay! Faster Snappy Apps!
  10. 10. Drawbacks ? ➔ Slow Initial Load Times ➔ Difficult SEO ➔ Logic Duplication
  11. 11. How to?
  12. 12. backend and frontend Isomorphic JS
  13. 13. backend and frontend Isomorphic JS Business/ Application Logic
  14. 14. backend and frontend Isomorphic JS Routing
  15. 15. backend and frontend Isomorphic JS Views
  16. 16. Isomorphic JS Views Business/ Application Logic Routing
  17. 17. Problems: Not a lot of Documentation/ guidelines... Yet. Increased Complexity
  18. 18. What’s in it for me ?
  19. 19. backend and frontend Isomorphic JS Views
  20. 20. backend and frontend Isomorphic JS Views React JS
  21. 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. 22. gem ‘react-rails’ ➔ Helper methods for react components ➔ Integrates with turbolinks ➔ No need for templates (mustache, etc)
  23. 23. Sample app Code - https://github.com/shifakhan/react_hello
  24. 24. What you’ll miss about rails views ➔ Helper methods - current_user, simple form
  25. 25. Thank You !

×