Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Volt: Ruby Web Development Recharged by Bozhidar Batsov

Slide 4

Slide 4 text

@bbatsov

Slide 5

Slide 5 text

Joan

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Привет!

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Sasha, our beloved leader/CTO

Slide 11

Slide 11 text

sad Sasha

Slide 12

Slide 12 text

I’m an Emacs fanatic

Slide 13

Slide 13 text

I love Ruby

Slide 14

Slide 14 text

I don’t like JavaScript

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Why am I here?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

Ruby (2005)

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Ruby (2006)

Slide 23

Slide 23 text

OMG, Rails is amazing!

Slide 24

Slide 24 text

Ruby (2008)

Slide 25

Slide 25 text

OMG, Rails is amazing & useful!

Slide 26

Slide 26 text

Ruby (today)

Slide 27

Slide 27 text

Rails is somewhat boring…

Slide 28

Slide 28 text

Rails is the new JEE!

Slide 29

Slide 29 text

Aren’t all the cool devs doing Clojure now?

Slide 30

Slide 30 text

Hell, yeah!!!

Slide 31

Slide 31 text

Rails innovation (2005-2008) • Convention over configuration • Interactive development • Scaffolding • ActiveRecord • REST

Slide 32

Slide 32 text

Rails innovation (today) • new Turbolinks • new Sprockets • foreign keys • background jobs • web sockets

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

4% 96% Web Development Other

Slide 36

Slide 36 text

10% 90% Rails Other

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 39

Slide 39 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 40

Slide 40 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 41

Slide 41 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 42

Slide 42 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 43

Slide 43 text

Ruby 2.2 includes many new features and improvements for the increasingly diverse and expanding demands for Ruby. For example, Ruby’s Garbage Collector is now able to collect Symbol type objects. This reduces memory usage of Symbols; because GC was previously unable to collect them before 2.2. Since Rails 5.0 will require Symbol GC, it will support only Ruby 2.2 or later. (See Rails 4.2 release post for details.) Also, a reduced pause time thanks to the new Incremental Garbage Collector will be helpful for running Rails applications. Recent developments mentioned on the Rails blog suggest that Rails 5.0 will take advantage of Incremental GC as well as Symbol GC.

Slide 44

Slide 44 text

That’s sick!

Slide 45

Slide 45 text

JRuby

Slide 46

Slide 46 text

RubyMotion

Slide 47

Slide 47 text

Rails, Rails, Rails

Slide 48

Slide 48 text

And what about JavaScript?

Slide 49

Slide 49 text

Things people are doing with JavaScript • Client-side apps • Server-side apps - Node.js (& io.js) • iOS & Android apps (using React Native) • Windows Phone apps • Desktop app (e.g. for Windows & GNOME)

Slide 50

Slide 50 text

WOW!

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

Development Complexity

Slide 53

Slide 53 text

0 25 50 75 100 1999 2000 2001 2002 2003 2004 2005 2006 2007 2009 2011 2015

Slide 54

Slide 54 text

Web development (2005) Power to the server! Model View Controller Routing Server Client

Slide 55

Slide 55 text

Web development (2006) Model View Controller Routing Server Client AJAX RandomJS

Slide 56

Slide 56 text

Web development (2010) Model View Controller Routing Server Client AJAX REST Assets RandomJS

Slide 57

Slide 57 text

Model View Controller Routing Server Client AJAX REST Model View Controller Routing Assets Assets Present Days

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Is there a solution?

Slide 60

Slide 60 text

Yes!

Slide 61

Slide 61 text

What’s the solution?

Slide 62

Slide 62 text

VBScript!

Slide 63

Slide 63 text

Isomorphic Development

Slide 64

Slide 64 text

Isomorphic?

Slide 65

Slide 65 text

Isomorphic being of identical or similar form, shape, or structure

Slide 66

Slide 66 text

Same code runs on the client & the server

Slide 67

Slide 67 text

Model View Controller Routing Server Client AJAX REST Model View Controller Routing Assets Assets Shared Auto Sync

Slide 68

Slide 68 text

Meteor.js

Slide 69

Slide 69 text

JS makes me sad!

Slide 70

Slide 70 text

Ruby is better than JavaScript

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

Ruby’s advantages • Doesn’t have this • Sane boolean semantics • No need for a book called “Ruby: The Good Parts” • No wtfruby.com • Solid core library • Extensive standard library • Do you really need more?

Slide 74

Slide 74 text

Meet Volt

Slide 75

Slide 75 text

Volt is a web framework

Slide 76

Slide 76 text

Volt is isomorphic

Slide 77

Slide 77 text

Models, views, controllers & routing are shared between the client and the server

Slide 78

Slide 78 text

One more thing…

Slide 79

Slide 79 text

They are all written in Ruby

Slide 80

Slide 80 text

WOW!!!

Slide 81

Slide 81 text

Ruby on the server-side, Ruby on the client-side

Slide 82

Slide 82 text

Ruby on the server-side, Ruby on the client-side

Slide 83

Slide 83 text

Ruby on the server-side

Slide 84

Slide 84 text

Ruby on the client-side

Slide 85

Slide 85 text

Fuck this shit!!!

Slide 86

Slide 86 text

Opal.rb http://opalrb.org/

Slide 87

Slide 87 text

The Value Proposition

Slide 88

Slide 88 text

Ruby to JavaScript source-to-source compiler

Slide 89

Slide 89 text

Ruby Opal JavaScript

Slide 90

Slide 90 text

No new VM

Slide 91

Slide 91 text

No bytecode

Slide 92

Slide 92 text

No translation layers

Slide 93

Slide 93 text

An implementation of Ruby’s corelib and stdlib

Slide 94

Slide 94 text

But we already have CoffeeScript!

Slide 95

Slide 95 text

CoffeeScript’s shortfalls • Same (spartan) core library • No standard library • It’s not Ruby

Slide 96

Slide 96 text

A basic example

Slide 97

Slide 97 text

def hello(name) puts "Hello, #{name.capitalize}!" end hello("bruce")

Slide 98

Slide 98 text

/* Generated by Opal 0.7.0 */ (function(Opal) { Opal.dynamic_require_severity = "error"; var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice; Opal.add_stubs(['$puts', '$capitalize', '$hello']); Opal.Object.$$proto.$hello = function(name) { var self = this; return self.$puts("Hello, " + (name.$capitalize()) + "!"); }; return self.$hello("bruce"); })(Opal);

Slide 99

Slide 99 text

Opal.Object.$$proto.$hello = function(name) { var self = this; return self.$puts("Hello, " + (name.$capitalize()) + "!"); }; return self.$hello("bruce");

Slide 100

Slide 100 text

The magic happens in Opal.compile

Slide 101

Slide 101 text

Opal.compile( "puts 'Hi, RailsClub!’" )

Slide 102

Slide 102 text

"/* Generated by Opal 0.7.2 */ \n(function(Opal) {\n Opal.dynamic_require_severity = \"error\";\n var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice;\n\n Opal.add_stubs(['$puts']);\n return self.$puts(\"Hi, RailsClub!\")\n}) (Opal);\n"

Slide 103

Slide 103 text

/* Generated by Opal 0.7.2 */ (function(Opal) { Opal.dynamic_require_severity = "error"; var self = Opal.top, $scope = Opal, nil = Opal.nil, $breaker = Opal.breaker, $slice = Opal.slice; Opal.add_stubs(['$puts']); return self.$puts("Hi, RailsClub!") })(Opal);

Slide 104

Slide 104 text

Ruby to JS mapping • self -> this (mostly) • Ruby method/block -> JS function • Ruby string -> JS string • Ruby number -> JS number • Ruby array -> JS array • Ruby hash -> custom JS type

Slide 105

Slide 105 text

JavaScript interop

Slide 106

Slide 106 text

>> `"bozhidar".toUpperCase()` => "BOZHIDAR"

Slide 107

Slide 107 text

class Array def length `this.length` end end

Slide 108

Slide 108 text

`window.title` # => "Opal: Ruby to JavaScript compiler" %x{ console.log("Opal version is:"); console.log(#{RUBY_ENGINE_VERSION}); } # => Opal version is: # => 0.8.0

Slide 109

Slide 109 text

Alternative JS interop (coming in Opal 0.9)

Slide 110

Slide 110 text

# JavaScript: foo.bar(1, "a") foo.JS.bar(1, :a) foo.JS.bar 1, :a

Slide 111

Slide 111 text

# JavaScript: # ($a = foo) # .bar # .apply($a, [1].concat([2, 3])) foo.JS.bar(1, *[2, 3]) foo.JS.bar 1, *[2, 3]

Slide 112

Slide 112 text

# JavaScript: # ($a = (TMP_1 = function(arg){ # var self = TMP_1.$$s || this; # if (arg == null) arg = nil; # return "" + (arg.method()) + " " + (self.$baz(3)) # }, # TMP_1.$$s = self, TMP_1), # foo.bar)(1, 2, $a); foo.JS.bar(1, 2) { |arg| arg.JS.method + baz(3) }

Slide 113

Slide 113 text

# JavaScript: foo["bar"] foo.JS[:bar] # JavaScript: foo[2] foo.JS[2] # JavaScript: foo["bar"] = 1 foo.JS[:bar] = 1 # JavaScript: foo[2] = "a" foo.JS[2] = :a

Slide 114

Slide 114 text

require 'js' # new foo(bar) JS.new(foo, bar) # delete foo["bar"] JS.delete(foo, :bar) # "bar" in foo JS.in(:bar, foo) # foo instanceof bar JS.instanceof(foo, bar) # typeof foo JS.typeof(foo)

Slide 115

Slide 115 text

require 'js' # parseFloat("1.1") JS.call(:parseFloat, '1.1') JS.parseFloat('1.1')

Slide 116

Slide 116 text

Ruby from JavaScript

Slide 117

Slide 117 text

class Foo def bar puts 'Called Foo#bar' end end

Slide 118

Slide 118 text

Opal.Foo.$new().$bar(); // => “Called Foo#bar”

Slide 119

Slide 119 text

Is Opal any good?

Slide 120

Slide 120 text

Very basic corelib No stdlib Semicolons Misc WTFs JavaScript Complexity

Slide 121

Slide 121 text

Performance Debugging Ruby Compatibility Ruby WTFs Opal’s Perceived Complexity File Size

Slide 122

Slide 122 text

Very basic corelib No stdlib Semicolons Misc WTFs JavaScript Performance Debugging Ruby Compatibility Ruby WTFs Opal File Size

Slide 123

Slide 123 text

Performance

Slide 124

Slide 124 text

File Size

Slide 125

Slide 125 text

opal.min.js =~ 259 kb opal.min.js.gz =~ 49 kb

Slide 126

Slide 126 text

Debugging

Slide 127

Slide 127 text

It’s just JavaScript

Slide 128

Slide 128 text

Opal has source maps

Slide 129

Slide 129 text

No content

Slide 130

Slide 130 text

No content

Slide 131

Slide 131 text

Ruby Compatibility

Slide 132

Slide 132 text

Ruby compatibility • Mostly compatible with Ruby 2.0 • Tested against RubySpec • Implements most of the Ruby corelib • Implements some of the stdlib (e.g. Set)

Slide 133

Slide 133 text

Notable differences • true and false are translated to JavaScript’s booleans • All numbers are JavaScript floats • Strings are immutable • Symbols are strings • No dynamic requires • No threads • No frozen objects • All methods are public

Slide 134

Slide 134 text

Performance is key

Slide 135

Slide 135 text

Performance Debugging Ruby Compatibility Ruby WTFs Opal Complexity

Slide 136

Slide 136 text

Very basic corelib No stdlib Semicolons Misc WTFs JavaScript Complexity Performance Debugging Ruby Compatibility Ruby WTFs Opal Complexity

Slide 137

Slide 137 text

Epic!!!

Slide 138

Slide 138 text

Diving in

Slide 139

Slide 139 text

opal-irb

Slide 140

Slide 140 text

opal-rails

Slide 141

Slide 141 text

opal-browser

Slide 142

Slide 142 text

$document.ready do alert 'yo folks, I'm all loaded up in here' end $document.body.style.apply { background color: 'black' color 'white' font family: 'Verdana' } Browser::HTTP.get '/something.json' do on :success do |res| alert res.json.inspect end end

Slide 143

Slide 143 text

opal-jquery

Slide 144

Slide 144 text

Element.find('#header') Element.find('#navigation li:last') Document.ready? do alert 'document is ready to go!' end Element.find('#header').on :click do puts 'The header was clicked!' end

Slide 145

Slide 145 text

opal-react

Slide 146

Slide 146 text

opal-native

Slide 147

Slide 147 text

No content

Slide 148

Slide 148 text

opal- activesupport

Slide 149

Slide 149 text

Volt Architecture

Slide 150

Slide 150 text

MVC Controller View Model

Slide 151

Slide 151 text

MVVM Controller/ViewModel View Model

Slide 152

Slide 152 text

Volt is reactive

Slide 153

Slide 153 text

Web Sockets FTW

Slide 154

Slide 154 text

Components

Slide 155

Slide 155 text

Universal

Slide 156

Slide 156 text

Batteries Included

Slide 157

Slide 157 text

<:Body>

Todo List

Todo

Slide 158

Slide 158 text

def add_todo page._todos << { name: page._new_todo } page._new_todo = '' end

Slide 159

Slide 159 text

<:Body>

Todo List

{{ page._todos.each do |todo| }} {{ end }} {{ todo._name }}

Slide 160

Slide 160 text

No content

Slide 161

Slide 161 text

Demo

Slide 162

Slide 162 text

Volt’s not perfect • Opal isn’t quite there yet • MongoDB is the only supported datastore • Many features are work in progress • The documentation is kind of lacking

Slide 163

Slide 163 text

Contribute to Volt!

Slide 164

Slide 164 text

0 25 50 75 100 1998 1999 2000 2001 2002 2003 2004 2005 2006 2009 2011 2015

Slide 165

Slide 165 text

0 25 50 75 100 1998 1999 2000 2001 2002 2003 2004 2005 2006 2009 2011 2015 2016

Slide 166

Slide 166 text

Hell, yeah!!!

Slide 167

Slide 167 text

Getting Started with Volt • Official docs (http://voltframework.com/ docs) • gitter • office hours • video tutorials • DataMelon blog (http://datamelon.io/blog/)

Slide 168

Slide 168 text

Felina

Slide 169

Slide 169 text

@bbatsov http://batsov.com http://emacsredux.com

Slide 170

Slide 170 text

[email protected]