The document discusses the increasing complexity of web development over time and introduces Volt as a Ruby-based isomorphic framework that allows sharing code between the client and server. Volt uses Opal to compile Ruby code to JavaScript and supports features like automatic data syncing, reactive bindings, and building apps as nested components to help manage complexity. It aims to provide a simpler development experience compared to traditional approaches while still offering high performance.

1. ISOMORPHIC APP DEVELOPMENT
WITH RUBY AND VOLT

2. @RYANSTOUT

3. COMPLEXITY
IN WEB DEVELOPMENT

7. COMPLEXITY IN 2004
Routes/Auth
Models
Controllers
Views
Server Client

8. COMPLEXITY IN 2005
Routes/Auth
Models
Controllers
Views
Ajax
Server Client

9. COMPLEXITY IN 2006
REST
Routes/Auth
Models
Controllers
Views
Random JS
Ajax
Server Client

10. COMPLEXITY IN 2007
REST
Routes/Auth
Models
Controllers
Views
Random JS
Ajax
Server Client

11. COMPLEXITY IN 2009
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Random JS
Ajax
Server Client

12. COMPLEXITY IN 2011
Models
Controllers
Views
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Ajax
Server Client

13. COMPLEXITY IN 2012
Asset Loading
Models
Controllers
Views
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Ajax
Server Client

14. COMPLEXITY IN 2013
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Routes/Auth
Asset Loading
Models
Controllers
Views
Ajax
Server Client

15. COMPLEXITY IN 2014
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Routes/Auth
Asset Loading
Models
Controllers
Views
Ajax
Server Client

17. COMPLEXITY IN 2004
Routes/Auth
Models
Controllers
Views
Server Client

18. COMPLEXITY IN 2014
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Routes/Auth
Asset Loading
Models
Controllers
Views
Ajax
Server Client

19. THE SEA OF COMPLEXITY

20. TRAPPED!

21. WHAT’S THE SOLUTION?
Turbo-links
…just kidding :-)

22. ISOMORPHIC
“similar in form”

23. ISOMORPHIC
Sharing code between
client and server

24. COMPLEXITY IN 2014
Routes/Auth
Asset Loading
Models
Controllers
Views
Ajax
Asset Packing
REST
Routes/Auth
Models
Controllers
Views
Auto Sync
Server Shared Client

25. ISOMORPHIC
Sharing code between
client and server

26. WHAT IS VOLT?

27. WHAT IS VOLT?
Isomorphic Web Framework
(for ruby!)

28. HOW?

29. OPAL
Ruby to JavaScript compiler

30. VOLT
Share controllers, models, views, and
routes between client and server

31. VOLT
Same code runs on the
client and the server!

32. VOLT
Same code runs on the
client and the server!!

33. VOLT
Same code runs on the
client and the server!!!!

34. VOLT
Reactive Bindings for the DOM

35. VOLT
Automatic Data Syncing

36. VOLT
Build apps as nested components

37. OPAL

38. PERCEPTION
Compiling to JS adds complexity

39. COMPLEXITY
JS Bridge
Performance
File Size
Debugging
Complexity
Base Language
this
Type Coersion
No Std Lib
WTF’s
Falseness
Base Language
JavaScript Compiled Ruby

40. COMPLEXITY
Debugging
Base Language
this
Type Coersion
No Std Lib
WTF’s
Falseness
Base Language
JavaScript Compiled Ruby

43. STOCKHOME SYNDROME

44. WTF’s
this parseInt new type coercion
semicolon insertion typeof == vs ===
case fall-through broken comparators
“string” instanceof String == false
undefined

45. 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

46. 1,600Kb
1,200Kb
800Kb
400Kb
0Kb
Uncompressed Minified Minified+Deflate FILE SIZE
jQuery 2.0.3 Bootstrap+JS Angular Opal+Volt Ember

47. 110Kb
83Kb
55Kb
28Kb
0Kb
MIN+DEFLATE
jQuery 2.0.3 Bootstrap Angular Opal+Volt Ember

48. DEBUGGING IN OPAL
Transpiling
Source Maps
Framework Black Boxing
RubySpecs
Opal-IRB

49. TRANSPILING
local variables => local variables
instance variables => object properties
methods => function on object
with $ prefix
classes => prototypes

50. 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

51. 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';

52. 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';

53. 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';

54. 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';

55. puts User.new('Ryan', 29).welcome
return self.$puts($scope.get('User').$new("Ryan", 29).$welcome());

56. SOURCE MAPS

57. FRAMEWORK BLACK BOXING

58. OPAL-IRB

59. RUBYSPECS

60. PERFORMANCE
JS Opal
Class+Method Call 100x Array Push to_json vs JSON.stringify
benchmarks:
https://github.com/ryanstout/opal_benchmarks

61. JS BRIDGE
def my_alert(msg)
`alert(msg);`
end

62. COMPLEXITY
JS Bridge
Performance
File Size
Debugging
Complexity
Base Language
this
Type Coersion
No Std Lib
WTF’s
Falseness
Base Language
JavaScript Compiled Ruby

63. COMPLEXITY
Debugging
Base Language
this
Type Coersion
No Std Lib
WTF’s
Falseness
Base Language
JavaScript Compiled Ruby

64. VOLT

65. COLLECTIONS
page
store
params
local_store
cookies

66. MVC
Controller
View
Model

67. MVVM
Controller/
Model ViewModel View

68. DEMO

69. COMPONENTS
Client code + Assets + Server Code
Can be packaged as Gems
Can provide “tags”
<:pagination page="{{ params._page }}" />

70. EXAMPLE COMPONENTS
Field Error Messages
Pagination
File Upload
Google Maps
Login/Signup Templates

71. TASKS
class CompleteTask < Volt::TaskHandler
def complete
store._todos.each do |todo|
todo._complete = true
end
end
end

72. VALIDATIONS &
PERMISSIONS

73. RECAP
Auto-Sync
Less HTTP/REST
One Language
Components
Single Framework
Centralized State
Unified Router

74. RECAP

75. RECAP

76. GETTING STARTED WITH VOLT
Video Tutorials
Docs
Gitter Chat

77. STATUS

78. ROAD MAP
More DataStores
Rails Integration (for legacy :-)
Render HTML First (for SEO/Load Time)
RubyMotion Integration

79. SPONSORSHIP

80. Thanks

81. voltframework.com
Thanks!
@RYANSTOUT & @VOLTFRAMEWORK
images:
https://www.flickr.com/photos/haquintero/14694249897
https://www.flickr.com/photos/38535102@N04/12273961146