Successfully reported this slideshow.
Your SlideShare is downloading. ×

Isomorphic App Development with Ruby and Volt - Rubyconf2014

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Volt 2015
Volt 2015
Loading in …3
×

Check these out next

1 of 81 Ad

Isomorphic App Development with Ruby and Volt - Rubyconf2014

Download to read offline

The slides for my rubyconf2014 talk.

See the full presentation here: http://confreaks.com/videos/5065-RubyConf2014-isomorphic-app-development-with-ruby-and-volt

The slides for my rubyconf2014 talk.

See the full presentation here: http://confreaks.com/videos/5065-RubyConf2014-isomorphic-app-development-with-ruby-and-volt

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Isomorphic App Development with Ruby and Volt - Rubyconf2014 (20)

Advertisement

Recently uploaded (20)

Advertisement

Isomorphic App Development with Ruby and Volt - Rubyconf2014

  1. 1. ISOMORPHIC APP DEVELOPMENT WITH RUBY AND VOLT
  2. 2. @RYANSTOUT
  3. 3. COMPLEXITY IN WEB DEVELOPMENT
  4. 4. COMPLEXITY IN 2004 Routes/Auth Models Controllers Views Server Client
  5. 5. COMPLEXITY IN 2005 Routes/Auth Models Controllers Views Ajax Server Client
  6. 6. COMPLEXITY IN 2006 REST Routes/Auth Models Controllers Views Random JS Ajax Server Client
  7. 7. COMPLEXITY IN 2007 REST Routes/Auth Models Controllers Views Random JS Ajax Server Client
  8. 8. COMPLEXITY IN 2009 Asset Packing REST Routes/Auth Models Controllers Views Random JS Ajax Server Client
  9. 9. COMPLEXITY IN 2011 Models Controllers Views Asset Packing REST Routes/Auth Models Controllers Views Ajax Server Client
  10. 10. COMPLEXITY IN 2012 Asset Loading Models Controllers Views Asset Packing REST Routes/Auth Models Controllers Views Ajax Server Client
  11. 11. COMPLEXITY IN 2013 Asset Packing REST Routes/Auth Models Controllers Views Routes/Auth Asset Loading Models Controllers Views Ajax Server Client
  12. 12. COMPLEXITY IN 2014 Asset Packing REST Routes/Auth Models Controllers Views Routes/Auth Asset Loading Models Controllers Views Ajax Server Client
  13. 13. COMPLEXITY IN 2004 Routes/Auth Models Controllers Views Server Client
  14. 14. COMPLEXITY IN 2014 Asset Packing REST Routes/Auth Models Controllers Views Routes/Auth Asset Loading Models Controllers Views Ajax Server Client
  15. 15. THE SEA OF COMPLEXITY
  16. 16. TRAPPED!
  17. 17. WHAT’S THE SOLUTION? Turbo-links …just kidding :-)
  18. 18. ISOMORPHIC “similar in form”
  19. 19. ISOMORPHIC Sharing code between client and server
  20. 20. COMPLEXITY IN 2014 Routes/Auth Asset Loading Models Controllers Views Ajax Asset Packing REST Routes/Auth Models Controllers Views Auto Sync Server Shared Client
  21. 21. ISOMORPHIC Sharing code between client and server
  22. 22. WHAT IS VOLT?
  23. 23. WHAT IS VOLT? Isomorphic Web Framework (for ruby!)
  24. 24. HOW?
  25. 25. OPAL Ruby to JavaScript compiler
  26. 26. VOLT Share controllers, models, views, and routes between client and server
  27. 27. VOLT Same code runs on the client and the server!
  28. 28. VOLT Same code runs on the client and the server!!
  29. 29. VOLT Same code runs on the client and the server!!!!
  30. 30. VOLT Reactive Bindings for the DOM
  31. 31. VOLT Automatic Data Syncing
  32. 32. VOLT Build apps as nested components
  33. 33. OPAL
  34. 34. PERCEPTION Compiling to JS adds complexity
  35. 35. COMPLEXITY JS Bridge Performance File Size Debugging Complexity Base Language this Type Coersion No Std Lib WTF’s Falseness Base Language JavaScript Compiled Ruby
  36. 36. COMPLEXITY Debugging Base Language this Type Coersion No Std Lib WTF’s Falseness Base Language JavaScript Compiled Ruby
  37. 37. STOCKHOME SYNDROME
  38. 38. WTF’s this parseInt new type coercion semicolon insertion typeof == vs === case fall-through broken comparators “string” instanceof String == false undefined
  39. 39. PERCEPTION “Experimenting with @opalrb - every time I expected to find an issue, nothing happened. Maybe it'll be time to retire coffeescript soon…” - Sidu Ponnappa
  40. 40. 1,600Kb 1,200Kb 800Kb 400Kb 0Kb Uncompressed Minified Minified+Deflate FILE SIZE jQuery 2.0.3 Bootstrap+JS Angular Opal+Volt Ember
  41. 41. 110Kb 83Kb 55Kb 28Kb 0Kb MIN+DEFLATE jQuery 2.0.3 Bootstrap Angular Opal+Volt Ember
  42. 42. DEBUGGING IN OPAL Transpiling Source Maps Framework Black Boxing RubySpecs Opal-IRB
  43. 43. TRANSPILING local variables => local variables instance variables => object properties methods => function on object with $ prefix classes => prototypes
  44. 44. TRANSPILING class User def initialize(name, age) @name = name @byear = Time.now.year - age end def welcome “Hi #{@name}, you were born in #{@byear}" end end puts User.new('Ryan', 29).welcome
  45. 45. def.name = def.birth_year = nil; def.$initialize = function(name, age) { var self = this; self.name = name; return self.byear = $scope.get('Time').$now().$year()['$-'](age); }; return (def.$welcome_message = function() { var self = this; return "Hi " + (self.name) + ", you were born in " + (self.byear); }, nil) && 'welcome_message';
  46. 46. def.name = def.birth_year = nil; def.$initialize = function(name, age) { var self = this; self.name = name; return self.byear = $scope.get('Time').$now().$year()['$-'](age); }; return (def.$welcome_message = function() { var self = this; return "Hi " + (self.name) + ", you were born in " + (self.byear); }, nil) && 'welcome_message';
  47. 47. def.name = def.birth_year = nil; def.$initialize = function(name, age) { var self = this; self.name = name; return self.byear = $scope.get('Time').$now().$year()['$-'](age); }; return (def.$welcome_message = function() { var self = this; return "Hi " + (self.name) + ", you were born in " + (self.byear); }, nil) && 'welcome_message';
  48. 48. def.name = def.birth_year = nil; def.$initialize = function(name, age) { var self = this; self.name = name; return self.byear = $scope.get('Time').$now().$year()['$-'](age); }; return (def.$welcome_message = function() { var self = this; return "Hi " + (self.name) + ", you were born in " + (self.byear); }, nil) && 'welcome_message';
  49. 49. puts User.new('Ryan', 29).welcome return self.$puts($scope.get('User').$new("Ryan", 29).$welcome());
  50. 50. SOURCE MAPS
  51. 51. FRAMEWORK BLACK BOXING
  52. 52. OPAL-IRB
  53. 53. RUBYSPECS
  54. 54. PERFORMANCE JS Opal Class+Method Call 100x Array Push to_json vs JSON.stringify benchmarks: https://github.com/ryanstout/opal_benchmarks
  55. 55. JS BRIDGE def my_alert(msg) `alert(msg);` end
  56. 56. COMPLEXITY JS Bridge Performance File Size Debugging Complexity Base Language this Type Coersion No Std Lib WTF’s Falseness Base Language JavaScript Compiled Ruby
  57. 57. COMPLEXITY Debugging Base Language this Type Coersion No Std Lib WTF’s Falseness Base Language JavaScript Compiled Ruby
  58. 58. VOLT
  59. 59. COLLECTIONS page store params local_store cookies
  60. 60. MVC Controller View Model
  61. 61. MVVM Controller/ Model ViewModel View
  62. 62. DEMO
  63. 63. COMPONENTS Client code + Assets + Server Code Can be packaged as Gems Can provide “tags” <:pagination page="{{ params._page }}" />
  64. 64. EXAMPLE COMPONENTS Field Error Messages Pagination File Upload Google Maps Login/Signup Templates
  65. 65. TASKS class CompleteTask < Volt::TaskHandler def complete store._todos.each do |todo| todo._complete = true end end end
  66. 66. VALIDATIONS & PERMISSIONS
  67. 67. RECAP Auto-Sync Less HTTP/REST One Language Components Single Framework Centralized State Unified Router
  68. 68. RECAP
  69. 69. RECAP
  70. 70. GETTING STARTED WITH VOLT Video Tutorials Docs Gitter Chat
  71. 71. STATUS
  72. 72. ROAD MAP More DataStores Rails Integration (for legacy :-) Render HTML First (for SEO/Load Time) RubyMotion Integration
  73. 73. SPONSORSHIP
  74. 74. Thanks
  75. 75. voltframework.com Thanks! @RYANSTOUT & @VOLTFRAMEWORK images: https://www.flickr.com/photos/haquintero/14694249897 https://www.flickr.com/photos/38535102@N04/12273961146

×