Opal a new_hope

Opal - a new
hope
(for Ruby Programmers)
Forrest Chang
@fkchang2000

Sunday, November 10, 13

THIS PRESENTATION HAS BEEN RATED

R

RUBY
UNDER 17 REQUIRES ACCOMPANYING PARENT OR ADULT GUARDIAN

STRONG CODER HAPPINESS, COOLNESS,
JOY AND LANGUAGE
FOR OPTIMUM VIEWING EXPERIENCE, PLEASE WAIT
UNTIL THE TEXT HITS THE MIDDLE OF THE SCREEN
BEFORE READING (YOU’LL KNOW WHAT THIS MEANS


http://www.westhighlandmuseum.org.uk/wp-content/uploads/2010/11/Show-of-hands.jpg


Who Works with
the

?

http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg

Who codes ruby

?
http://www.slate.com/content/dam/slate/articles/technology/technology/
2012/03/120307_FRESCA_whytheluckystiff.jpg.CROP.thumbnail-small.jpg

Who works with

?
http://www.bigfunkychicken.com/pctz/sith.jpg

Who Likes ruby
Better?

http://th08.deviantart.net/fs70/200H/f/2009/349/4/f/Screamy_and_Bee_love_Ruby__by_dark__romance.jpg

You

Are my targeT
audience

everyone else is
also welcome!


It is a time of Javascript
Revolution


JS Everywhere!


Desktops

JS Everywhere!


Desktops

JS Everywhere!
Mobile


Desktops

JS Everywhere!
Backend


Mobile

Performance

http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/
728px-EmperorPalpatine-PoV.jpg

V8 (Chrome, node)

Performance


V8 (Chrome, node)

Performance
Spidermonkey(ff)


V8 (Chrome, node)
carakan
(oPERA)
Performance
Spidermonkey(ff)


V8 (Chrome, node)
carakan
(oPERA)
Performance
Spidermonkey(ff)
chakra(ie)

libs/Frameworks

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg

dom

libs/Frameworks


dom
GUi
libs/Frameworks


dom
GUi
libs/Frameworks
MV***


dom
GUi
libs/Frameworks
MV***
So Much more


An exciting time

http://www.kiagarriques.com/wp-content/uploads/2013/02/excited.jpg


like it was for
ruby in 2008

http://assets.en.oreilly.com/1/event/24/rails2009_home_photo1.jpg

problem


language is
javascript


The language is
javascript!


felt this way, you
have?

“JAVASCRIPT IS THE PATH TO THE DARK SIDE. JAVASCRIPT LEADS TO ANGER.
ANGER LEADS TO HATE. HATE LEADS TO SUFFERING.”
- YODA, IF HE WERE A CODER

ruby == community
of forward
thinking
polyglots


can’t ignore the
possibilities/
opportunites


with all the momentum
behind javascript


pressure TO
ADOPT


feelS like this


no one wants to
be destroyed


segue


matz on ruby


matz on ruby

"For me the purpose of life is partly to have joy.
Programmers often feel joy when they can concentrate on
the creative side of programming, So Ruby is designed to
make programmers happy."

The purpose of
Ruby

To make you happy


The Ruby Way


Not this


ultimately


the pitch


opal will make
you happy


premise


ruby makes me
happy


you too


opal is ruby


opal makes me
happy


javascript makes
me happy?

not as much


My opal journey JDD

j oy

Driven
Development


I don’t need Opal


I don’t need Opal

• in my job


I don’t need Opal

• in my job
• in my life


too much fun


too much fun

• can’t put it down


too much fun

• can’t put it down
• like a good book


SHARE


What is opal?


What is opal?
• Ruby to js source to source

compiler, similar to coffeescript


What is opal?


• small runtime (supports method
missing, operator overloading,
etc)


What is opal?


• small runtime (supports method
missing, operator overloading,
etc)

• Ruby in the browser


Ruby in the
browser


As Code
class Opal < Ruby
include Browser::Access
include Javascript::Interaction
runs_in :browser
runs_in :node
makes_you :happy
end


Switch gears


PAL SHOW
O
-2
Reasons Opal will make
you happy


Reasons Opal will make you
happy


happy
1. It's just Ruby, and a viable one


happy
2. Greenspun's 10th Rule, Opal Edition


happy
3. Solves things the Ruby way, making the programmer
happy


happy
happy
4. Frameworks, we don't need no stinking frameworks
(but we have some)


happy
happy
(but we have some)
5. Tools you already know and love


happy
happy
(but we have some)
6. Easy integration with Ruby web frameworks


happy
happy
(but we have some)
7. Awesome In Browser tools

happy
happy
(but we have some)
7. Awesome In Browser tools
8. New possibilities

1. It's just Ruby, and a
viable one


viable one
• Question Number 1 - is opal a viable
option?


viable one
option?

• in production - 6 plus apps, 2 more
coming soon


viable one
option?

• in production - 6 plus apps, 2 more
coming soon

• Biggest apps are the store and

mobile sites for a High end fashion/

luxury brand (client confidentiality
agreement)


High End Fashion/
Luxury Site


High End Fashion/
Luxury Site
•


globally

High End Fashion/
Luxury Site
•

globally

•


~2 million unique visitors/month

High End Fashion/
Luxury Site
•

globally

•
•


~20 Million page views/month

High End Fashion/
Luxury Site
•

globally

•
•
•



Parts that involve opal

High End Fashion/
Luxury Site
•

globally

•
•
•



•


store: ~2 million page views/month

High End Fashion/
Luxury Site
•

globally

•
•
•



•
•


mobile: ~2 million page views/month

High End Fashion/
Luxury Site
•

globally

•
•
•



•
•
•



store is responsive, mobile works

High End Fashion/
Luxury Site
•

globally

•
•
•



•
•
•



•


opal is not too heavy mobile devices

High End Fashion/
Luxury Site
•

globally

•
•
•



•
•
•



•
•


opal is not too heavy mobile devices

opal battle tested for ie8+, chrome, safari, firefox

viable one
•


Real Ruby1.9.3 - compliant (mostly)

viable one
•


•


passes 2367 rubyspec examples - goal to pass all

viable one
•


•
•



capable of running complex ruby

viable one
•


•
•


•



runs asciidoc gem unmodified

viable one
•


•
•



•
•


runs mspec gem unmodified,

viable one
•


•
•



•


•


•

rspec with some modification, primarily due to mutable
strings


viable one
•


•
•



•


•


•

strings

•


can compile itself

viable one
•


•
•



•


•


•

strings

•
•


can compile itself

much of stdlib in already in place

testimonials


“That guy”


“That guy”
what does dhh
think?

Text
DHH On Opal


Ruby language
features in OPal


Ruby language
features in OPal
• classes

• blocks

• modules &and mixins

• yield

• singleton methods

• constants

• method-missing

• global variables

• arity checks

• class variables

• lambda

• instance variables


More Ruby language
features in OPal
• Basic object
• Kernel
• Nilclass
• range
• hash


• string

interpolation

• heredocs
• %%w splits

don’t underestimate the
power of a a better language



• those who chose ruby for the
backend know what i mean




• opal-irb, opal-inspector easy

to write, easy to read, little
code ***





to write, easy to read, little
code ***

• leads us to ...

2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule


2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule
Any sufﬁciently complicated C or Fortran program
contains an ad hoc, informally-speciﬁed, bug-ridden,
slow implementation of half of Common Lisp.


2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule, Opal Edition


2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule, Opal Edition
Any sufﬁciently complicated Javascript program
contains an ad hoc, informally-speciﬁed, bug-ridden,
slow implementation of half of Ruby


greenspun in
action


greenspun in
action
Some attempts inspired
by, trying to imitate
ruby or emulating
ruby like features in
JS


prototype


underscore


http://rubyjs.org


strukt


string.js


http://
jsclass.jcoglan.com


http://code.google.com/p/
joose-js


JavaScriptMVC


def.js


Raiya in Humax


http://scatterpoll.com/
#title-slide


ActiveJS


RedScript


Forml


Other attempts to
do Ruby in JS


people want
ruby in the
browser


even if they
don’t know it


some know they
don’t want js


some know they
don’t want js
Javascript...
It’s s**t
I never use it


some know they
don’t want js
Javascript...
It’s s**t
I never use it

ripoff of the Smug DHH meme

instead of the
adhoc, informally
specified, bug
ridden, slow
implementation...


3. Solves things the Ruby way,
making the programmer happy


• could be its own presentation, only
selected examples


selected examples

• comparisons


selected examples

• comparisons
• modular code


selected examples

• comparisons
• modular code
• namespaces


selected examples

• comparisons
• modular code
• namespaces
• external templates


selected examples

• comparisons
• modular code
• namespaces
• automation tasks


selected examples

• comparisons
• modular code
• namespaces
• automation tasks
• scope


• non comparision


• non comparision
• dom


• non comparision
• dom
• css


• non comparision
• dom
• css
• javascript integration


• non comparision
• dom
• css
• javascript integration
• testing

modular code:
Javascript


modular code:
Javascript
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the module or object*/
);
// Consider 'foo' and 'bar' are two external modules
// In this example, the 'exports' from the two modules loaded are passed as
// function arguments to the callback (foo and bar)
// so that they can similarly be accessed


modular code:
Javascript
define(
);

require(['foo', 'bar'], function ( foo, bar ) {
// rest of your code here
foo.doSomething();
});


modular code:
Javascript
define(
);

require(['foo', 'bar'], function ( foo, bar ) {
// rest of your code here
foo.doSomething();
});

Lots of other stuff

MODULAR CODE ruby


MODULAR CODE ruby
create a ruby file or gem


MODULAR CODE ruby

require 'file_or_gem_you_want'


MODULAR CODE Opal


MODULAR CODE Opal

require 'file_or_gem_you_want'


example from
opal-irb
require
require
require
require

'opal'
'opal-jquery'
'opal-parser'
'opal_irb_jqconsole'

Document.ready? do
OpalIrbJqconsole.create("#console")
end


example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'

Document.ready? do
end


example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'

require my file

Document.ready? do
end


example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'

require my file

Document.ready? do
end

use it


Namespace - JS


Namespace - JS
• many ways


Namespace - JS
• many ways
• hand rolling nested objects


Namespace - JS
• many ways
• hand rolling nested objects
• namespace functions, self
coded, Yui, Dojo


Namespace - JS
by hand

or like this


Namespace - JS
as a function


Namespace - JS
as a function

function definition


namespace - ruby

• use module or class


namespace - opal

• use module or class


templates as
external files: jsT


templates as
external files: jsT
write jst template


templates as
external files: jsT
write jst template

include in html


templates as
external files: jsT
write jst template

include in html
use


templates as
external files- Rails

• make external template
file

• render # if you even have to


templates as
external files • make external template file
• require “filename”
• Template[“filename”].render


automation tasks js


automation tasks js
• cake


automation tasks js
• cake
• grunt


automation tasks js
• cake
• grunt
• something new?


automation tasks ruby

• rake


AUTOMATION TASKS OPAL

• RAKE


scope - js
• wrap everything in a
function
• while
(i
<
2)
{

funcArray[i]
=
(function(value)
{

return
function(){
alert(value);
return
false;
}

})(i);

i++;
}


scope - ruby

• much more flexible and sane
rules


scope - opal

• see ruby


defer execution js

• var immediateId =
window.setImmediate(function()
{ code_you_want});


DEFER EXECUTION opal-browser

• proc { code_you_want }.defer


javascript
integration


javascript
integration
• x-strings


javascript
integration
• x-strings
• %x(window.location)


javascript
integration
• x-strings
• `window.location`


javascript
integration
• x-strings
• used to have seemless bridging (via

method missing) like jruby, now need to
wrap objects with native


javascript
integration
• x-strings
• used to have seemless bridging (via

method missing) like jruby, now need to
wrap objects with native

• @editor =
Native(`CodeMirror.fromTextArea(areas)`)


DOM - opalbrowser


DOM - opalbrowser
create dom


DOM - opalbrowser
create dom

get by id


DOM - opalbrowser
create dom

get by id
ways to append


CSS opal-browser


CSS opal-browser

create css


CSS opal-browser

create css

append to head


Tests/Specs



• not done (but easy in ruby)



• monkey patching



• monkey patching
• method missing


4. Frameworks, we don't
need no stinking frameworks
(but we have some)


(but we have some)
to write without a
framework, very few lines


(but we have some)
to write without a
framework, very few lines

• power of a better language


opal-inspector
spike code


opal-inspector
spike code
• 448 lines including
whitespace and debugging
lines


opal-inspector
spike code
lines

• mostly just plain ruby w/
some opal-jquery


opal-inspector
spike code
lines

• mostly just plain ruby w/
some opal-jquery

• selected code showN

Require gems


Require gems
Require tempates


Require gems
Require tempates

Render template


App setup


App setup

Add panes


App setup

Add panes
jQuery stuff


(but we have some)
• while ruby is powerful by itself, opal have
some libs


(but we have some)
some libs

• opal-jquery - jquery wrapped in a ruby way


(but we have some)
some libs

• opal-browser - browser functionality


(but we have some)
some libs

• can use iN lieu of opal-jquery if you’re
not using jquery


(but we have some)
some libs

not using jquery

• vienna - MVC


(but we have some)
some libs

not using jquery

• vienna - MVC
• lissio - MVC


5. Tools you already
know and love


know and love
• opal is Ruby


know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.


know and love
• opal is Ruby

• Rake


know and love
• opal is Ruby

• Rake
• rspec (sorry DHH)


know and love
• opal is Ruby

• Rake
• rspec (sorry DHH)
• guard


know and love
• opal is Ruby

•
•
•
•


Rake
rspec (sorry DHH)
guard
<fill in the ruby tool> - remember
it's just Ruby

know and love
• opal is Ruby

•
•
•
•

Rake
rspec (sorry DHH)
guard
<fill in the ruby tool> - remember
it's just Ruby

• Reuse your ood and patterns
Knowledge


6. Easy integration with
Ruby web frameworks


Ruby web frameworks
• opal-rails


Ruby web frameworks
• opal-rails
• opal-sprockets


Ruby web frameworks
• opal-rails
• opal-sprockets
• opal-server


opal-rails

• The easy way
• rails new new_project --javascript=opal


opal-rails


opal-rails
add to gemfile


opal-rails
add to gemfile
add to APPLICATION.JS


opal-rails
add to gemfile

EDIT *.JS.RB FILE


opal-rails SUPPORTE
HAML FILTERS

add to gemfile


EDIT *.JS.RB FILE


opal-rails SUPPORTE
HAML FILTERS

add to gemfile

add SPECS

EDIT *.JS.RB FILE


opal-sprockets
FOR NON RAILS STANDALONE RAKEFILE
require 'bundler/setup'
require 'opal'
require 'opal-sprockets'
desc "build jqconsole based irb"
task :build_jqconsole do
File.open("js/app-jqconsole.js", "w+") do |out|
env = Opal::Environment.new
env.append_path "examples"
env.append_path "opal"
out << env["app-jqconsole"].to_s
end
# system "terminal-notifier -title 'opal-irb build' -message 'js file built'"
system "open -a 'Google Chrome' index-jq.html"
end


opal-sprockets
require 'opal'

file to write to

end
end


opal-sprockets
require 'opal'

file to write to

end
end

append dirs to search


opal-sprockets
require 'opal'

file to write to

end
end

append dirs to search
write contents


opal-server


opal-server
add to gemfile


opal-server
add to gemfile

create your opal file(s)


opal-server
add to gemfile


include application.js


opal-server
add to gemfile

setup config.ru




opal-server
add to gemfile

setup config.ru

rackup and refresh
at will


7. Awesome In Browser
tools

• opal-irb
• opal-inspector


opal-irb


opal-irb
• irb for opal


opal-irb
• irb for opal
• history


opal-irb
• irb for opal
• history
• readline controls (most)


opal-irb
• irb for opal
• history
• popup multiline editor (works
over all history)


opal-irb
• irb for opal
• history
• popup multiline editor (works
over all history)

• send a link (live gist)

opal-inspector


opal-inspector
• inspired by amber.js’s in browser
smalltalk code browser


opal-inspector

• persistent live opal objects is
similar to the Smalltalk image


opal-inspector


• change the paradigm of webapp
development


opal-inspector


• change the paradigm of webapp
development

• develop in browser w/better tools

demos


opal-irb demo
• ruby
• invoke js
• multi line
• multi line edit
• dom example
• css example
• “live gist”


opal-inspector
demo
• tabs overview
• show transcript
• class browser
• instance browser


OPAL-INSPECTOR

• WAiting on a feature from
the opal parser to store
code and comments


•


in browser development

•


•


change the development paradigm

•


•
•


take goodness from Smalltalk, ruby, lisp machines

•


•
•


•



finally a standard Ui platform

•


•


•


•


•

fragmented/stagnant before, gtk, wxwindows,
qt, tk, etc.


•


•


•


•


•

qt, tk, etc.

•


everyone has a browser

•


•


•


•


•

qt, tk, etc.

•
•



use these tools for backend too, ala better errors

•


•


•


•


•

qt, tk, etc.

•
•

use these tools for backend too, ala better errors

•



better tooling for ruby across the board

• meteor.js like same code on front and
back end


back end

• blurring the lines - vienna
experiment


back end

experiment

• eventd safe ruby libs


back end

experiment

• eventd safe ruby libs
• as opal matures, eventd safe ruby
libs/gems for both front and
backend


• component based coding, all in one place
for the web


for the web

• hard to do oo programming with markup
and css


for the web

and css

• lissio - ruby class, all parts in ruby


for the web

and css

• html


for the web

and css

• html
• css


for the web

and css

• html
• css
• behavior


behavior


behavior
element


behavior
element
html


behavior
element
html
css


behavior
element
html
css
all ruby


nested css


•


can you imagine a world w/o ruby?

•


•


possible w/the javascript revolution

•


•
•



facilitate the fantasy land of ruby everywhere

•


•
•


•



backend mri, jruby, rubinius

•


•
•



•
•


mirah - everywhere jvm runs

•


•
•



•
•


•



embedded mruby

•


•
•



•
•


•

embedded mruby

•



mobile

•


•
•



•


•


•

embedded mruby

•

mobile

•


rubymotion

•


•
•



•


•


•

embedded mruby

•

mobile

•
•


rubymotion
mobiruby

•


•
•



•


•


•

embedded mruby

•

mobile

•
•
•


rubymotion
mobiruby

opal - everywhere javascript runs

(dubious) history
as starwars
films


Episode 1: The
Phantom JS Menace

Mesa use Javascript on the backend!
Mesa use Javascript everywhere!!!!
Mesa use Javascript in ways unintended...


Episode 2: Attack
of the Clones

Typescript
JSX


Coffescript

Dart
Fantom

Episode 3: Revenge
of the Sith

Windows 8 development using Javascript.
Evil Empire complete
http://conquent.com/bissellator/blogimg/darth_gates.jpg


Episode 4: A New
Hope
OPAL Wan Kenobi,
you’re my only hope


Episode 5: The
Empire Strikes Back
Join us, we have Ecmascript 6


Episode 6: Return
of the Jedi

Opal Viable, New Deathstar explodes


Episode 7: TBD

http://www.copywritematters.com.au/dev/wp-content/uploads/2011/09/Lady-Pointing-To-You-Small-.jpg

Call to arms


Call to arms
• hope for momentum like
rubinius


Call to arms
rubinius

• rubyconf 06 - just an idea


Call to arms
rubinius

• rubyconf 07 - a movement


Call to arms
rubinius

• rubyconf 07 - a movement
• opal is farther along, if we

could make similar progress...


right now


right now
• things are pretty good


right now
• things could be better


right now
• more ruby compatibility


right now
• more libs, complete libs **


right now
• documentation


right now
• documentation
• we need your helP


things to do


things to do
• try it out,


things to do
• try it out,
• opalrb.org/try


things to do
• try it out,
• opalrb.org/try
• http://fkchang.github.io/opal-irb/indexembeddable.html


things to do
• try it out,
• opalrb.org/try

• communicate - irc, google group


things to do
• try it out,
• opalrb.org/try

• document


things to do
• try it out,
• opalrb.org/try

• document
• contribute, it’s just ruby


things to do
• try it out,
• opalrb.org/try

• document
• convert gems****, write new stuff, test, etc..


things to do
• try it out,
• opalrb.org/try

• document
• be a garbage collector, change the world


things to do
• try it out,
• opalrb.org/try

• document
• have fun


things to do
• try it out,
• opalrb.org/try

• document
• have fun
• be happy


will you

• join the dark side?


or

• code with the force?


you choose


But for me


change the world,
defeat the evil


resources
• opalrb.org
• github.com/opal
• irc opal
• google groups - not very active
• my blog funkworks.blogspot.com
• not a lot, but better than nothing
• more soon


thankful I am, for the
garbage collectors


garbage collectors
• matz - ruby


garbage collectors
• matz - ruby
• dhh - rails


garbage collectors
• matz - ruby
• dhh - rails
• adam, meh, elia - opal


garbage collectors
• matz - ruby
• dhh - rails
• ruby and rails communities


garbage collectors
• matz - ruby
• dhh - rails
• George Lucas


garbage collectors
• matz - ruby
• dhh - rails
• George Lucas
• you

hedgeye

• hiring like everyone else
• NYC Area, Stamford CT


@fkchang2000

may the force be
with you

Opal a new_hope

Recommended

Recommended

More Related Content

Similar to Opal a new_hope

Similar to Opal a new_hope (13)

More from Forrest Chang

More from Forrest Chang (7)

Recently uploaded

Recently uploaded (20)

Opal a new_hope