Slides from my wrocloverb talk

1. ISOMORPHIC APP DEVELOPMENT
WITH RUBY AND VOLT

2. @RYANSTOUT

3. COMPLEXITY
IN WEB DEVELOPMENT

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

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

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

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

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

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

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

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

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

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

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

18. THE SEA OF COMPLEXITY

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

23. ISOMORPHIC
“similar in form”

24. ISOMORPHIC
Sharing code between
client and server

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

26. ISOMORPHIC
Sharing code between
client and server

27. WHAT IS VOLT?

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

29. HOW?

30. OPAL
Ruby to JavaScript compiler

31. VOLT
Share controllers, models, views, and
routes between client and 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
Same code runs on the
client and the server!!!!

35. VOLT
Reactive Bindings for the DOM

36. VOLT
Automatic Data Syncing

37. VOLT
Build apps as nested components

38. OPAL

39. PERCEPTION
Compiling to JS adds complexity

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

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

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

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

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

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

47. TRANSPILINGclass 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

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

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

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. return self.$puts($scope.get('User').$new("Ryan", 29).$welcome());
puts User.new('Ryan', 29).welcome

53. SOURCE MAPS

54. FRAMEWORK BLACK BOXING

55. OPAL-IRB

56. RUBYSPECS

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

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

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

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

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

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

63. VOLT

64. COLLECTIONS
page
store
params
local_store
cookies

65. MVCController
View
Model

66. MVVM
Controller/
ViewModel
ViewModel

67. DEMO

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

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

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

71. VALIDATIONS &
PERMISSIONS

72. VALIDATIONS
class Post < Volt::Model
validate :name, length: 4
validate :username, unique: true
end

73. PERMISSIONS
class Post < Volt::Model
own_by_user
permissions do
# Only allow owner or admin
deny unless owner? || user.admin?
end
end

74. PERMISSIONS
class Post < Volt::Model
own_by_user
permissions(:update, :delete) do
# Only allow owner to update, or admins
deny unless owner? || user.admin?
end
end

75. PERMISSIONS
class Post < Volt::Model
own_by_user
permissions(:update, :delete) do
# Only allow owner to update, or admins
deny unless owner? || user.admin?
end
permissions(:read) do
# Only the owner can see unpublished posts
deny :notes if !published? && !owner?
end
end

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

77. RECAP

78. RECAP

79. GETTING STARTED WITH VOLT
Video Tutorials
Docs
Gitter Chat

80. ROAD MAP
Data Provider API
Rails Integration (for legacy :-)
Render HTML First (for SEO/Load Time)
RubyMotion Integration

81. Thanks

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