1. ISOMORPHIC APP DEVELOPMENTWITH RUBY AND VOLT

2. @RYANSTOUT 3. COMPLEXITYIN WEB DEVELOPMENT 4. COMPLEXITY IN 2004Routes/AuthModelsControllersViewsServer Client 5. COMPLEXITY IN 2005Routes/AuthModelsControllersViewsAjaxServer Client 6. COMPLEXITY IN 2006RESTRoutes/AuthModelsControllersViewsRandom JSAjaxServer Client 7. COMPLEXITY IN 2007RESTRoutes/AuthModelsControllersViewsRandom JSAjaxServer Client 8. COMPLEXITY IN 2009Asset PackingRESTRoutes/AuthModelsControllersViewsRandom JSAjaxServer Client 9. COMPLEXITY IN 2011ModelsControllersViewsAsset PackingRESTRoutes/AuthModelsControllersViewsAjaxServer Client 10. COMPLEXITY IN 2012Asset LoadingModelsControllersViewsAsset PackingRESTRoutes/AuthModelsControllersViewsAjaxServer Client 11. COMPLEXITY IN 2013Asset PackingRESTRoutes/AuthModelsControllersViewsRoutes/AuthAsset LoadingModelsControllersViewsAjaxServer Client 12. COMPLEXITY IN 2014Asset PackingRESTRoutes/AuthModelsControllersViewsRoutes/AuthAsset LoadingModelsControllersViewsAjaxServer Client 13. COMPLEXITY IN 2004Routes/AuthModelsControllersViewsServer Client 14. COMPLEXITY IN 2014Asset PackingRESTRoutes/AuthModelsControllersViewsRoutes/AuthAsset LoadingModelsControllersViewsAjaxServer Client 15. THE SEA OF COMPLEXITY 16. TRAPPED! 17. WHATS THE SOLUTION?Turbo-linksjust kidding :-) 18. ISOMORPHICsimilar in form 19. ISOMORPHICSharing code betweenclient and server 20. COMPLEXITY IN 2014Routes/AuthAsset LoadingModelsControllersViewsAjaxAsset PackingRESTRoutes/AuthModelsControllersViewsAuto SyncServer Shared Client 21. ISOMORPHICSharing code betweenclient and server 22. WHAT IS VOLT? 23. WHAT IS VOLT?Isomorphic Web Framework(for ruby!) 24. HOW? 25. OPALRuby to JavaScript compiler 26. VOLTShare controllers, models, views, androutes between client and server 27. VOLTSame code runs on theclient and the server! 28. VOLTSame code runs on theclient and the server!! 29. VOLTSame code runs on theclient and the server!!!! 30. VOLTReactive Bindings for the DOM 31. VOLTAutomatic Data Syncing 32. VOLTBuild apps as nested components 33. OPAL 34. PERCEPTIONCompiling to JS adds complexity 35. COMPLEXITYJS BridgePerformanceFile SizeDebuggingComplexityBase LanguagethisType CoersionNo Std LibWTFsFalsenessBase LanguageJavaScript Compiled Ruby 36. COMPLEXITYDebuggingBase LanguagethisType CoersionNo Std LibWTFsFalsenessBase LanguageJavaScript Compiled Ruby 37. STOCKHOME SYNDROME 38. WTFsthis parseInt new type coercionsemicolon insertion typeof == vs ===case fall-through broken comparatorsstring instanceof String == falseundefined 39. PERCEPTIONExperimenting with @opalrb - every time Iexpected to find an issue, nothing happened.Maybe it'll be time to retire coffeescript soon- Sidu Ponnappa 40. 1,600Kb1,200Kb800Kb400Kb0KbUncompressed Minified Minified+Deflate FILE SIZEjQuery 2.0.3 Bootstrap+JS Angular Opal+Volt Ember 41. 110Kb83Kb55Kb28Kb0KbMIN+DEFLATEjQuery 2.0.3 Bootstrap Angular Opal+Volt Ember 42. DEBUGGING IN OPALTranspilingSource MapsFramework Black BoxingRubySpecsOpal-IRB 43. TRANSPILINGlocal variables => local variablesinstance variables => object propertiesmethods => function on objectwith $ prefixclasses => prototypes 44. TRANSPILINGclass Userdef initialize(name, age)@name = name@byear = Time.now.year - ageenddef welcomeHi #{@name}, you were born in #{@byear}"endendputs User.new('Ryan', 29).welcome 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. 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. 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. 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. puts User.new('Ryan', 29).welcomereturn self.$puts($scope.get('User').$new("Ryan", 29).$welcome()); 50. SOURCE MAPS 51. FRAMEWORK BLACK BOXING 52. OPAL-IRB 53. RUBYSPECS 54. PERFORMANCEJS OpalClass+Method Call 100x Array Push to_json vs JSON.stringifybenchmarks:https://github.com/ryanstout/opal_benchmarks 55. JS BRIDGEdef my_alert(msg)`alert(msg);`end 56. COMPLEXITYJS BridgePerformanceFile SizeDebuggingComplexityBase LanguagethisType CoersionNo Std LibWTFsFalsenessBase LanguageJavaScript Compiled Ruby 57. COMPLEXITYDebuggingBase LanguagethisType CoersionNo Std LibWTFsFalsenessBase LanguageJavaScript Compiled Ruby 58. VOLT 59. COLLECTIONSpagestoreparamslocal_storecookies 60. MVCControllerViewModel 61. MVVMController/Model ViewModel View 62. DEMO 63. COMPONENTSClient code + Assets + Server CodeCan be packaged as GemsCan provide tags 64. EXAMPLE COMPONENTSField Error MessagesPaginationFile UploadGoogle MapsLogin/Signup Templates 65. TASKSclass CompleteTask < Volt::TaskHandlerdef completestore._todos.each do |todo|todo._complete = trueendendend 66. VALIDATIONS &PERMISSIONS 67. RECAPAuto-SyncLess HTTP/RESTOne LanguageComponentsSingle FrameworkCentralized StateUnified Router 68. RECAP 69. RECAP 70. GETTING STARTED WITH VOLTVideo TutorialsDocsGitter Chat 71. STATUS 72. ROAD MAPMore DataStoresRails Integration (for legacy :-)Render HTML First (for SEO/Load Time)RubyMotion Integration 73. SPONSORSHIP 74. Thanks 75. voltframework.comThanks!@RYANSTOUT & @VOLTFRAMEWORKimages:https://www.flickr.com/photos/haquintero/14694249897https://www.flickr.com/photos/38535102@N04/12273961146