Your SlideShare is downloading. ×
0
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,...
Sunday, November 10, 13
http://www.westhighlandmuseum.org.uk/wp-content/uploads/2010/11/Show-of-hands.jpg

Sunday, November 10, 13
Who Works with
the

?

http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg
Sunday, November 10, 13
Who codes ruby

?
http://www.slate.com/content/dam/slate/articles/technology/technology/
2012/03/120307_FRESCA_whythelucky...
Who works with

?
http://www.bigfunkychicken.com/pctz/sith.jpg
Sunday, November 10, 13
Who Likes ruby
Better?

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

Are my targeT
audience
Sunday, November 10, 13
everyone else is
also welcome!

Sunday, November 10, 13
It is a time of Javascript
Revolution

Sunday, November 10, 13
JS Everywhere!

Sunday, November 10, 13
Desktops

JS Everywhere!

Sunday, November 10, 13
Desktops

JS Everywhere!
Mobile

Sunday, November 10, 13
Desktops

JS Everywhere!
Backend

Sunday, November 10, 13

Mobile
Performance

http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/
728...
V8 (Chrome, node)

Performance

http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPal...
V8 (Chrome, node)

Performance
Spidermonkey(ff)

http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thum...
V8 (Chrome, node)
carakan
(oPERA)
Performance
Spidermonkey(ff)

http://images2.wikia.nocookie.net/__cb20101216021216/starw...
V8 (Chrome, node)
carakan
(oPERA)
Performance
Spidermonkey(ff)
chakra(ie)
http://images2.wikia.nocookie.net/__cb2010121602...
libs/Frameworks

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg
Sunday, November 10, 13
dom

libs/Frameworks

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg
Sunday, November 10, 13
dom
GUi
libs/Frameworks

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg
Sunday, November 10, 13
dom
GUi
libs/Frameworks
MV***

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg
Sunday, November 10, 1...
dom
GUi
libs/Frameworks
MV***
So Much more

http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg
Sunday, N...
An exciting time

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

Sunday, November 10, 13
like it was for
ruby in 2008

http://assets.en.oreilly.com/1/event/24/rails2009_home_photo1.jpg
Sunday, November 10, 13
problem

Sunday, November 10, 13
language is
javascript

Sunday, November 10, 13
language is
javascript

Sunday, November 10, 13
The language is
javascript!

Sunday, November 10, 13
Sunday, November 10, 13
felt this way, you
have?

“JAVASCRIPT IS THE PATH TO THE DARK SIDE. JAVASCRIPT LEADS TO ANGER.
ANGER LEADS TO HATE. HATE L...
ruby == community
of forward
thinking
polyglots

Sunday, November 10, 13
can’t ignore the
possibilities/
opportunites

Sunday, November 10, 13
with all the momentum
behind javascript

Sunday, November 10, 13
pressure TO
ADOPT

Sunday, November 10, 13
feelS like this

Sunday, November 10, 13
feelS like this

Sunday, November 10, 13
no one wants to
be destroyed

Sunday, November 10, 13
segue

Sunday, November 10, 13
matz on ruby

Sunday, November 10, 13
matz on ruby

"For me the purpose of life is partly to have joy.
Programmers often feel joy when they can concentrate on
t...
The purpose of
Ruby

To make you happy

Sunday, November 10, 13
The purpose of
Ruby

To make you happy

Sunday, November 10, 13
The Ruby Way

Sunday, November 10, 13
Not this

Sunday, November 10, 13
ultimately

Sunday, November 10, 13
the pitch

Sunday, November 10, 13
opal will make
you happy

Sunday, November 10, 13
premise

Sunday, November 10, 13
ruby makes me
happy

Sunday, November 10, 13
you too

Sunday, November 10, 13
opal is ruby

Sunday, November 10, 13
opal makes me
happy

Sunday, November 10, 13
javascript makes
me happy?

not as much

Sunday, November 10, 13
javascript makes
me happy?

not as much

Sunday, November 10, 13
My opal journey JDD

j oy

Driven
Development

Sunday, November 10, 13
My opal journey JDD

j oy

Driven
Development

Sunday, November 10, 13
I don’t need Opal

Sunday, November 10, 13
I don’t need Opal

• in my job

Sunday, November 10, 13
I don’t need Opal

• in my job
• in my life

Sunday, November 10, 13
too much fun

Sunday, November 10, 13
too much fun

• can’t put it down

Sunday, November 10, 13
too much fun

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

Sunday, November 10, 13
SHARE

Sunday, November 10, 13
What is opal?

Sunday, November 10, 13
What is opal?
• Ruby to js source to source

compiler, similar to coffeescript

Sunday, November 10, 13
What is opal?
• Ruby to js source to source

compiler, similar to coffeescript

• small runtime (supports method
missing, ...
What is opal?
• Ruby to js source to source

compiler, similar to coffeescript

• small runtime (supports method
missing, ...
Ruby in the
browser

Sunday, November 10, 13
As Code
class Opal < Ruby
include Browser::Access
include Javascript::Interaction
runs_in :browser
runs_in :node
makes_you...
Sunday, November 10, 13
Sunday, November 10, 13
Switch gears

Sunday, November 10, 13
PAL SHOW
O
-2
Reasons Opal will make
you happy

Sunday, November 10, 13
Sunday, November 10, 13
Reasons Opal will make you
happy

Sunday, November 10, 13
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one

Sunday, November 10, 13
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition

Sunday, Novem...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
Reasons Opal will make you
happy
1. It's just Ruby, and a viable one
2. Greenspun's 10th Rule, Opal Edition
3. Solves thin...
1. It's just Ruby, and a
viable one

Sunday, November 10, 13
1. It's just Ruby, and a
viable one
• Question Number 1 - is opal a viable
option?

Sunday, November 10, 13
1. It's just Ruby, and a
viable one
• Question Number 1 - is opal a viable
option?

• in production - 6 plus apps, 2 more
...
1. It's just Ruby, and a
viable one
• Question Number 1 - is opal a viable
option?

• in production - 6 plus apps, 2 more
...
High End Fashion/
Luxury Site

Sunday, November 10, 13
High End Fashion/
Luxury Site
•

Sunday, November 10, 13

globally
High End Fashion/
Luxury Site
•

globally

•

Sunday, November 10, 13

~2 million unique visitors/month
High End Fashion/
Luxury Site
•

globally

•
•

Sunday, November 10, 13

~2 million unique visitors/month
~20 Million page...
High End Fashion/
Luxury Site
•

globally

•
•
•

Sunday, November 10, 13

~2 million unique visitors/month
~20 Million pa...
High End Fashion/
Luxury Site
•

globally

•
•
•

~2 million unique visitors/month
~20 Million page views/month

Parts tha...
High End Fashion/
Luxury Site
•

globally

•
•
•

~2 million unique visitors/month
~20 Million page views/month

Parts tha...
High End Fashion/
Luxury Site
•

globally

•
•
•

~2 million unique visitors/month
~20 Million page views/month

Parts tha...
High End Fashion/
Luxury Site
•

globally

•
•
•

~2 million unique visitors/month
~20 Million page views/month

Parts tha...
High End Fashion/
Luxury Site
•

globally

•
•
•

~2 million unique visitors/month
~20 Million page views/month

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

Sunday, November 10, 13
1. It's just Ruby, and a
viable one
•

Sunday, November 10, 13

Real Ruby1.9.3 - compliant (mostly)
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•

Sunday, November 10, 13

passes 2367 rubysp...
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•
•

Sunday, November 10, 13

passes 2367 ruby...
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•
•

capable of running complex ruby

•

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

Real Ruby1.9.3 - compliant (mostly)

•
•

passes 2367 rubyspec examples - goal to p...
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•
•

passes 2367 rubyspec examples - goal to p...
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•
•

passes 2367 rubyspec examples - goal to p...
1. It's just Ruby, and a
viable one
•

Real Ruby1.9.3 - compliant (mostly)

•
•

passes 2367 rubyspec examples - goal to p...
testimonials

Sunday, November 10, 13
Sunday, November 10, 13
Sunday, November 10, 13
Sunday, November 10, 13
“That guy”

Sunday, November 10, 13
“That guy”
what does dhh
think?
Sunday, November 10, 13
Text
DHH On Opal

Sunday, November 10, 13
Text
DHH On Opal

Sunday, November 10, 13
Text
DHH On Opal

Sunday, November 10, 13
**

Sunday, November 10, 13
Ruby language
features in OPal

Sunday, November 10, 13
Ruby language
features in OPal
• classes

• blocks

• modules &and mixins

• yield

• singleton methods

• constants

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

Sunday, November 10, 13

• string

...
don’t underestimate the
power of a a better language

Sunday, November 10, 13
don’t underestimate the
power of a a better language

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

Sunday, Nov...
don’t underestimate the
power of a a better language

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

• opal-irb,...
don’t underestimate the
power of a a better language

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

• opal-irb,...
2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule

Sunday, November 10, 13
2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule
Any sufficiently complicated C or Fortran program
contains an ad ho...
2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule
Any sufficiently complicated C or Fortran program
contains an ad ho...
2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule, Opal Edition

Sunday, November 10, 13
2. Greenspun's 10th
Rule, Opal Edition
Greenspun’s Rule, Opal Edition
Any sufficiently complicated Javascript program
conta...
greenspun in
action

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

Sunday, Novem...
prototype

Sunday, November 10, 13
prototype

Sunday, November 10, 13
underscore

Sunday, November 10, 13
underscore

Sunday, November 10, 13
http://rubyjs.org

Sunday, November 10, 13
http://rubyjs.org

Sunday, November 10, 13
strukt

Sunday, November 10, 13
strukt

Sunday, November 10, 13
string.js

Sunday, November 10, 13
http://
jsclass.jcoglan.com

Sunday, November 10, 13
http://
jsclass.jcoglan.com

Sunday, November 10, 13
http://code.google.com/p/
joose-js

Sunday, November 10, 13
http://code.google.com/p/
joose-js

Sunday, November 10, 13
JavaScriptMVC

Sunday, November 10, 13
JavaScriptMVC

Sunday, November 10, 13
def.js

Sunday, November 10, 13
def.js

Sunday, November 10, 13
Sunday, November 10, 13
Sunday, November 10, 13
Raiya in Humax

Sunday, November 10, 13
Raiya in Humax

Sunday, November 10, 13
http://scatterpoll.com/
#title-slide

Sunday, November 10, 13
http://scatterpoll.com/
#title-slide

Sunday, November 10, 13
ActiveJS

Sunday, November 10, 13
ActiveJS

Sunday, November 10, 13
RedScript

Sunday, November 10, 13
RedScript

Sunday, November 10, 13
Forml

Sunday, November 10, 13
Forml

Sunday, November 10, 13
Other attempts to
do Ruby in JS

Sunday, November 10, 13
people want
ruby in the
browser

Sunday, November 10, 13
even if they
don’t know it

Sunday, November 10, 13
some know they
don’t want js

Sunday, November 10, 13
some know they
don’t want js
Javascript...
It’s s**t
I never use it

Sunday, November 10, 13
some know they
don’t want js
Javascript...
It’s s**t
I never use it

ripoff of the Smug DHH meme
Sunday, November 10, 13
instead of the
adhoc, informally
specified, bug
ridden, slow
implementation...

Sunday, November 10, 13
Opal

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

Sunday...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

• comp...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

• comp...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

• comp...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

• comp...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

• comp...
3. Solves things the Ruby way,
making the programmer happy
• could be its own presentation, only
selected examples

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

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy
• non comparision

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy
• non comparision
• dom

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy
• non comparision
• dom
• css

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy
• non comparision
• dom
• css
• javascript integration

Sunday,...
3. Solves things the Ruby way,
making the programmer happy
• non comparision
• dom
• css
• javascript integration
• testin...
modular code:
Javascript

Sunday, November 10, 13
modular code:
Javascript
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for i...
modular code:
Javascript
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for i...
modular code:
Javascript
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for i...
MODULAR CODE ruby

Sunday, November 10, 13
MODULAR CODE ruby
create a ruby file or gem

Sunday, November 10, 13
MODULAR CODE ruby
create a ruby file or gem

require 'file_or_gem_you_want'

Sunday, November 10, 13
MODULAR CODE Opal

Sunday, November 10, 13
MODULAR CODE Opal
create a ruby file or gem

Sunday, November 10, 13
MODULAR CODE Opal
create a ruby file or gem

require 'file_or_gem_you_want'

Sunday, November 10, 13
example from
opal-irb
require
require
require
require

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

Document.r...
example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'
'opal_irb_jqconsol...
example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'
'opal_irb_jqconsol...
example from
opal-irb
require
require
require
require

require gems

'opal'
'opal-jquery'
'opal-parser'
'opal_irb_jqconsol...
Namespace - JS

Sunday, November 10, 13
Namespace - JS
• many ways

Sunday, November 10, 13
Namespace - JS
• many ways
• hand rolling nested objects

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

Sunday, November 10...
Namespace - JS
by hand

or like this

Sunday, November 10, 13
Namespace - JS

Sunday, November 10, 13
Namespace - JS
as a function

Sunday, November 10, 13
Namespace - JS
as a function

function definition

Sunday, November 10, 13
namespace - ruby

• use module or class

Sunday, November 10, 13
namespace - opal

• use module or class

Sunday, November 10, 13
templates as
external files: jsT

Sunday, November 10, 13
templates as
external files: jsT
write jst template

Sunday, November 10, 13
templates as
external files: jsT
write jst template

include in html

Sunday, November 10, 13
templates as
external files: jsT
write jst template

include in html
use

Sunday, November 10, 13
templates as
external files- Rails

• make external template
file

• render # if you even have to

Sunday, November 10, 13
templates as
external files • make external template file
• require “filename”
• Template[“filename”].render

Sunday, Nove...
automation tasks js

Sunday, November 10, 13
automation tasks js
• cake

Sunday, November 10, 13
automation tasks js
• cake
• grunt

Sunday, November 10, 13
automation tasks js
• cake
• grunt
• something new?

Sunday, November 10, 13
automation tasks ruby

• rake

Sunday, November 10, 13
AUTOMATION TASKS OPAL

• RAKE

Sunday, November 10, 13
scope - js
• wrap everything in a
function
• while	
  (i	
  <	
  2)	
  {
	
  	
  	
  	
  funcArray[i]	
  =	
  (function(va...
scope - ruby

• much more flexible and sane
rules

Sunday, November 10, 13
scope - opal

• see ruby

Sunday, November 10, 13
defer execution js

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

Sunday, November 10, 13
DEFER EXECUTION opal-browser

• proc { code_you_want }.defer

Sunday, November 10, 13
javascript
integration

Sunday, November 10, 13
javascript
integration
• x-strings

Sunday, November 10, 13
javascript
integration
• x-strings
• %x(window.location)

Sunday, November 10, 13
javascript
integration
• x-strings
• %x(window.location)
• `window.location`

Sunday, November 10, 13
javascript
integration
• x-strings
• %x(window.location)
• `window.location`
• used to have seemless bridging (via

method...
javascript
integration
• x-strings
• %x(window.location)
• `window.location`
• used to have seemless bridging (via

method...
DOM - opalbrowser

Sunday, November 10, 13
DOM - opalbrowser
create dom

Sunday, November 10, 13
DOM - opalbrowser
create dom

get by id

Sunday, November 10, 13
DOM - opalbrowser
create dom

get by id
ways to append

Sunday, November 10, 13
CSS opal-browser

Sunday, November 10, 13
CSS opal-browser

create css

Sunday, November 10, 13
CSS opal-browser

create css

append to head

Sunday, November 10, 13
Tests/Specs

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy

• not done (but easy in ruby)

Sunday, November 10, 13
3. Solves things the Ruby way,
making the programmer happy

• not done (but easy in ruby)
• monkey patching

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

• not done (but easy in ruby)
• monkey patching
• method missi...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)

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

Sunday, November 10, 13
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• opal-irb, opal-inspector easy
to write without a
...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• opal-irb, opal-inspector easy
to write without a
...
opal-inspector
spike code

Sunday, November 10, 13
opal-inspector
spike code
• 448 lines including
whitespace and debugging
lines

Sunday, November 10, 13
opal-inspector
spike code
• 448 lines including
whitespace and debugging
lines

• mostly just plain ruby w/
some opal-jque...
opal-inspector
spike code
• 448 lines including
whitespace and debugging
lines

• mostly just plain ruby w/
some opal-jque...
Sunday, November 10, 13
Require gems

Sunday, November 10, 13
Require gems
Require tempates

Sunday, November 10, 13
Require gems
Require tempates

Render template

Sunday, November 10, 13
App setup

Sunday, November 10, 13
App setup

Add panes

Sunday, November 10, 13
App setup

Add panes
jQuery stuff

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

Sunday, November 10, 13
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
4. Frameworks, we don't
need no stinking frameworks
(but we have some)
• while ruby is powerful by itself, opal have
some ...
5. Tools you already
know and love

Sunday, November 10, 13
5. Tools you already
know and love
• opal is Ruby

Sunday, November 10, 13
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

Sunday, Novemb...
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

• Rake

Sunday...
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

• Rake
• rspec...
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

• Rake
• rspec...
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

•
•
•
•

Sunda...
5. Tools you already
know and love
• opal is Ruby
• editor - emacs, textmate, vim,
sublime, Rubymine, etc.

•
•
•
•

Rake
...
Sunday, November 10, 13
6. Easy integration with
Ruby web frameworks

Sunday, November 10, 13
6. Easy integration with
Ruby web frameworks
• opal-rails

Sunday, November 10, 13
6. Easy integration with
Ruby web frameworks
• opal-rails
• opal-sprockets

Sunday, November 10, 13
6. Easy integration with
Ruby web frameworks
• opal-rails
• opal-sprockets
• opal-server

Sunday, November 10, 13
opal-rails

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

Sunday, November 10, 13
opal-rails

Sunday, November 10, 13
opal-rails
add to gemfile

Sunday, November 10, 13
opal-rails
add to gemfile
add to APPLICATION.JS

Sunday, November 10, 13
opal-rails
add to gemfile
add to APPLICATION.JS

EDIT *.JS.RB FILE

Sunday, November 10, 13
opal-rails SUPPORTE
HAML FILTERS

add to gemfile

add to APPLICATION.JS

EDIT *.JS.RB FILE

Sunday, November 10, 13
opal-rails SUPPORTE
HAML FILTERS

add to gemfile

add to APPLICATION.JS
add SPECS

EDIT *.JS.RB FILE

Sunday, November 10,...
opal-sprockets
FOR NON RAILS STANDALONE RAKEFILE
require 'bundler/setup'
require 'opal'
require 'opal-sprockets'
desc "bui...
opal-sprockets
FOR NON RAILS STANDALONE RAKEFILE
require 'bundler/setup'
require 'opal'
require 'opal-sprockets'
desc "bui...
opal-sprockets
FOR NON RAILS STANDALONE RAKEFILE
require 'bundler/setup'
require 'opal'
require 'opal-sprockets'
desc "bui...
opal-sprockets
FOR NON RAILS STANDALONE RAKEFILE
require 'bundler/setup'
require 'opal'
require 'opal-sprockets'
desc "bui...
opal-server

Sunday, November 10, 13
opal-server
add to gemfile

Sunday, November 10, 13
opal-server
add to gemfile

create your opal file(s)

Sunday, November 10, 13
opal-server
add to gemfile

create your opal file(s)

include application.js

Sunday, November 10, 13
opal-server
add to gemfile

setup config.ru

create your opal file(s)

include application.js

Sunday, November 10, 13
opal-server
add to gemfile

setup config.ru

create your opal file(s)
rackup and refresh
at will
include application.js

S...
7. Awesome In Browser
tools

• opal-irb
• opal-inspector

Sunday, November 10, 13
opal-irb

Sunday, November 10, 13
opal-irb
• irb for opal

Sunday, November 10, 13
opal-irb
• irb for opal
• history

Sunday, November 10, 13
opal-irb
• irb for opal
• history
• readline controls (most)

Sunday, November 10, 13
opal-irb
• irb for opal
• history
• readline controls (most)
• popup multiline editor (works
over all history)

Sunday, No...
opal-irb
• irb for opal
• history
• readline controls (most)
• popup multiline editor (works
over all history)

• send a l...
opal-inspector

Sunday, November 10, 13
opal-inspector
• inspired by amber.js’s in browser
smalltalk code browser

Sunday, November 10, 13
opal-inspector
• inspired by amber.js’s in browser
smalltalk code browser

• persistent live opal objects is
similar to th...
opal-inspector
• inspired by amber.js’s in browser
smalltalk code browser

• persistent live opal objects is
similar to th...
opal-inspector
• inspired by amber.js’s in browser
smalltalk code browser

• persistent live opal objects is
similar to th...
demos

Sunday, November 10, 13
opal-irb demo
• ruby
• invoke js
• multi line
• multi line edit
• dom example
• css example
• “live gist”

Sunday, Novembe...
opal-inspector
demo
• tabs overview
• show transcript
• class browser
• instance browser

Sunday, November 10, 13
OPAL-INSPECTOR

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

Sunday, November 10, 13
Sunday, November 10, 13
8. New possibilities

Sunday, November 10, 13
8. New possibilities
•

Sunday, November 10, 13

in browser development
8. New possibilities
•

in browser development

•

Sunday, November 10, 13

change the development paradigm
8. New possibilities
•

in browser development

•
•

Sunday, November 10, 13

change the development paradigm
take goodnes...
8. New possibilities
•

in browser development

•
•

take goodness from Smalltalk, ruby, lisp machines

•

Sunday, Novembe...
8. New possibilities
•

in browser development

•

change the development paradigm

•

take goodness from Smalltalk, ruby,...
8. New possibilities
•

in browser development

•

change the development paradigm

•

take goodness from Smalltalk, ruby,...
8. New possibilities
•

in browser development

•

change the development paradigm

•

take goodness from Smalltalk, ruby,...
8. New possibilities
•

in browser development

•

change the development paradigm

•

take goodness from Smalltalk, ruby,...
8. New possibilities

Sunday, November 10, 13
8. New possibilities
• meteor.js like same code on front and
back end

Sunday, November 10, 13
8. New possibilities
• meteor.js like same code on front and
back end

• blurring the lines - vienna
experiment

Sunday, N...
8. New possibilities
• meteor.js like same code on front and
back end

• blurring the lines - vienna
experiment

• eventd ...
8. New possibilities
• meteor.js like same code on front and
back end

• blurring the lines - vienna
experiment

• eventd ...
8. New possibilities

Sunday, November 10, 13
8. New possibilities
• component based coding, all in one place
for the web

Sunday, November 10, 13
8. New possibilities
• component based coding, all in one place
for the web

• hard to do oo programming with markup
and c...
8. New possibilities
• component based coding, all in one place
for the web

• hard to do oo programming with markup
and c...
8. New possibilities
• component based coding, all in one place
for the web

• hard to do oo programming with markup
and c...
8. New possibilities
• component based coding, all in one place
for the web

• hard to do oo programming with markup
and c...
8. New possibilities
• component based coding, all in one place
for the web

• hard to do oo programming with markup
and c...
Sunday, November 10, 13
behavior

Sunday, November 10, 13
behavior
element

Sunday, November 10, 13
behavior
element
html

Sunday, November 10, 13
behavior
element
html
css

Sunday, November 10, 13
behavior
element
html
css
all ruby

Sunday, November 10, 13
nested css

Sunday, November 10, 13
8. New possibilities

Sunday, November 10, 13
8. New possibilities
•

Sunday, November 10, 13

can you imagine a world w/o ruby?
8. New possibilities
•

can you imagine a world w/o ruby?

•

Sunday, November 10, 13

possible w/the javascript revolutio...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

Sunday, November 10, 13

possible w/the javascript revolut...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

facilitate the fantasy land of ruby everywhere

•

Sunday,...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
8. New possibilities
•

can you imagine a world w/o ruby?

•
•

possible w/the javascript revolution

facilitate the fanta...
(dubious) history
as starwars
films

Sunday, November 10, 13
Episode 1: The
Phantom JS Menace

Mesa use Javascript on the backend!
Mesa use Javascript everywhere!!!!
Mesa use Javascri...
Episode 2: Attack
of the Clones

Typescript
JSX

Sunday, November 10, 13

Coffescript

Dart
Fantom
Episode 3: Revenge
of the Sith

Windows 8 development using Javascript.
Evil Empire complete
http://conquent.com/bissellat...
Episode 4: A New
Hope
OPAL Wan Kenobi,
you’re my only hope

Sunday, November 10, 13
Episode 5: The
Empire Strikes Back
Join us, we have Ecmascript 6

Sunday, November 10, 13
Episode 6: Return
of the Jedi

Opal Viable, New Deathstar explodes

Sunday, November 10, 13
Episode 7: TBD

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

http://www.copywritematters.com.au/dev/wp-content/uploads/2011/09/Lady-Pointing-To-You-Small-.jpg
Sunday, ...
Sunday, November 10, 13
Call to arms

Sunday, November 10, 13
Call to arms
• hope for momentum like
rubinius

Sunday, November 10, 13
Call to arms
• hope for momentum like
rubinius

• rubyconf 06 - just an idea

Sunday, November 10, 13
Call to arms
• hope for momentum like
rubinius

• rubyconf 06 - just an idea
• rubyconf 07 - a movement

Sunday, November ...
Call to arms
• hope for momentum like
rubinius

• rubyconf 06 - just an idea
• rubyconf 07 - a movement
• opal is farther ...
right now

Sunday, November 10, 13
right now
• things are pretty good

Sunday, November 10, 13
right now
• things are pretty good
• things could be better

Sunday, November 10, 13
right now
• things are pretty good
• things could be better
• more ruby compatibility

Sunday, November 10, 13
right now
• things are pretty good
• things could be better
• more ruby compatibility
• more libs, complete libs **

Sunda...
right now
• things are pretty good
• things could be better
• more ruby compatibility
• more libs, complete libs **
• docu...
right now
• things are pretty good
• things could be better
• more ruby compatibility
• more libs, complete libs **
• docu...
things to do

Sunday, November 10, 13
things to do
• try it out,

Sunday, November 10, 13
things to do
• try it out,
• opalrb.org/try

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

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

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

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

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

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

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

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

• communicate - irc,...
will you

• join the dark side?

Sunday, November 10, 13
or

• code with the force?

Sunday, November 10, 13
you choose

Sunday, November 10, 13
But for me

Sunday, November 10, 13
change the world,
defeat the evil

Sunday, November 10, 13
resources
• opalrb.org
• github.com/opal
• irc opal
• google groups - not very active
• my blog funkworks.blogspot.com
• n...
thankful I am, for the
garbage collectors

Sunday, November 10, 13
thankful I am, for the
garbage collectors
• matz - ruby

Sunday, November 10, 13
thankful I am, for the
garbage collectors
• matz - ruby
• dhh - rails

Sunday, November 10, 13
thankful I am, for the
garbage collectors
• matz - ruby
• dhh - rails
• adam, meh, elia - opal

Sunday, November 10, 13
thankful I am, for the
garbage collectors
• matz - ruby
• dhh - rails
• adam, meh, elia - opal
• ruby and rails communitie...
thankful I am, for the
garbage collectors
• matz - ruby
• dhh - rails
• adam, meh, elia - opal
• ruby and rails communitie...
thankful I am, for the
garbage collectors
• matz - ruby
• dhh - rails
• adam, meh, elia - opal
• ruby and rails communitie...
hedgeye

• hiring like everyone else
• NYC Area, Stamford CT

Sunday, November 10, 13
@fkchang2000

may the force be
with you
Sunday, November 10, 13
Upcoming SlideShare
Loading in...5
×

Opal a new_hope

3,791

Published on

Rubyconf 2013 presentation on Opal - Ruby in the browser. A New Hope for Ruby Programmers. Actual presentation has a ton of sound and video. I'll post the confreaks link when it's available.

Update 2: link with sound, then a link to the rest of the video - https://vimeo.com/82573680

Update 1: Confreaks link. http://confreaks.com/videos/2904-rubyconf2013-opal-a-new-hope-for-ruby-programmers - They had to mute the star wars music coz youtube would reject all the sound. I'll see what can be done about that

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,791
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Opal a new_hope"

  1. 1. Opal - a new hope (for Ruby Programmers) Forrest Chang @fkchang2000 Sunday, November 10, 13
  2. 2. 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 Sunday, November 10, 13
  3. 3. Sunday, November 10, 13
  4. 4. http://www.westhighlandmuseum.org.uk/wp-content/uploads/2010/11/Show-of-hands.jpg Sunday, November 10, 13
  5. 5. Who Works with the ? http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg Sunday, November 10, 13
  6. 6. Who codes ruby ? http://www.slate.com/content/dam/slate/articles/technology/technology/ 2012/03/120307_FRESCA_whytheluckystiff.jpg.CROP.thumbnail-small.jpg Sunday, November 10, 13
  7. 7. Who works with ? http://www.bigfunkychicken.com/pctz/sith.jpg Sunday, November 10, 13
  8. 8. Who Likes ruby Better? http://th08.deviantart.net/fs70/200H/f/2009/349/4/f/Screamy_and_Bee_love_Ruby__by_dark__romance.jpg Sunday, November 10, 13
  9. 9. You Are my targeT audience Sunday, November 10, 13
  10. 10. everyone else is also welcome! Sunday, November 10, 13
  11. 11. It is a time of Javascript Revolution Sunday, November 10, 13
  12. 12. JS Everywhere! Sunday, November 10, 13
  13. 13. Desktops JS Everywhere! Sunday, November 10, 13
  14. 14. Desktops JS Everywhere! Mobile Sunday, November 10, 13
  15. 15. Desktops JS Everywhere! Backend Sunday, November 10, 13 Mobile
  16. 16. Performance http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/ 728px-EmperorPalpatine-PoV.jpg Sunday, November 10, 13
  17. 17. V8 (Chrome, node) Performance http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/ 728px-EmperorPalpatine-PoV.jpg Sunday, November 10, 13
  18. 18. V8 (Chrome, node) Performance Spidermonkey(ff) http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/ 728px-EmperorPalpatine-PoV.jpg Sunday, November 10, 13
  19. 19. V8 (Chrome, node) carakan (oPERA) Performance Spidermonkey(ff) http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/ 728px-EmperorPalpatine-PoV.jpg Sunday, November 10, 13
  20. 20. V8 (Chrome, node) carakan (oPERA) Performance Spidermonkey(ff) chakra(ie) http://images2.wikia.nocookie.net/__cb20101216021216/starwars/images/thumb/8/89/EmperorPalpatine-PoV.jpg/ 728px-EmperorPalpatine-PoV.jpg Sunday, November 10, 13
  21. 21. libs/Frameworks http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg Sunday, November 10, 13
  22. 22. dom libs/Frameworks http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg Sunday, November 10, 13
  23. 23. dom GUi libs/Frameworks http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg Sunday, November 10, 13
  24. 24. dom GUi libs/Frameworks MV*** http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg Sunday, November 10, 13
  25. 25. dom GUi libs/Frameworks MV*** So Much more http://www.pulsarmedia.eu/data/media/26/Darth_Vader_3D_Wallpaper.jpg Sunday, November 10, 13
  26. 26. An exciting time http://www.kiagarriques.com/wp-content/uploads/2013/02/excited.jpg Sunday, November 10, 13
  27. 27. like it was for ruby in 2008 http://assets.en.oreilly.com/1/event/24/rails2009_home_photo1.jpg Sunday, November 10, 13
  28. 28. problem Sunday, November 10, 13
  29. 29. language is javascript Sunday, November 10, 13
  30. 30. language is javascript Sunday, November 10, 13
  31. 31. The language is javascript! Sunday, November 10, 13
  32. 32. Sunday, November 10, 13
  33. 33. 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 Sunday, November 10, 13
  34. 34. ruby == community of forward thinking polyglots Sunday, November 10, 13
  35. 35. can’t ignore the possibilities/ opportunites Sunday, November 10, 13
  36. 36. with all the momentum behind javascript Sunday, November 10, 13
  37. 37. pressure TO ADOPT Sunday, November 10, 13
  38. 38. feelS like this Sunday, November 10, 13
  39. 39. feelS like this Sunday, November 10, 13
  40. 40. no one wants to be destroyed Sunday, November 10, 13
  41. 41. segue Sunday, November 10, 13
  42. 42. matz on ruby Sunday, November 10, 13
  43. 43. 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." Sunday, November 10, 13
  44. 44. The purpose of Ruby To make you happy Sunday, November 10, 13
  45. 45. The purpose of Ruby To make you happy Sunday, November 10, 13
  46. 46. The Ruby Way Sunday, November 10, 13
  47. 47. Not this Sunday, November 10, 13
  48. 48. ultimately Sunday, November 10, 13
  49. 49. the pitch Sunday, November 10, 13
  50. 50. opal will make you happy Sunday, November 10, 13
  51. 51. premise Sunday, November 10, 13
  52. 52. ruby makes me happy Sunday, November 10, 13
  53. 53. you too Sunday, November 10, 13
  54. 54. opal is ruby Sunday, November 10, 13
  55. 55. opal makes me happy Sunday, November 10, 13
  56. 56. javascript makes me happy? not as much Sunday, November 10, 13
  57. 57. javascript makes me happy? not as much Sunday, November 10, 13
  58. 58. My opal journey JDD j oy Driven Development Sunday, November 10, 13
  59. 59. My opal journey JDD j oy Driven Development Sunday, November 10, 13
  60. 60. I don’t need Opal Sunday, November 10, 13
  61. 61. I don’t need Opal • in my job Sunday, November 10, 13
  62. 62. I don’t need Opal • in my job • in my life Sunday, November 10, 13
  63. 63. too much fun Sunday, November 10, 13
  64. 64. too much fun • can’t put it down Sunday, November 10, 13
  65. 65. too much fun • can’t put it down • like a good book Sunday, November 10, 13
  66. 66. SHARE Sunday, November 10, 13
  67. 67. What is opal? Sunday, November 10, 13
  68. 68. What is opal? • Ruby to js source to source compiler, similar to coffeescript Sunday, November 10, 13
  69. 69. What is opal? • Ruby to js source to source compiler, similar to coffeescript • small runtime (supports method missing, operator overloading, etc) Sunday, November 10, 13
  70. 70. What is opal? • Ruby to js source to source compiler, similar to coffeescript • small runtime (supports method missing, operator overloading, etc) • Ruby in the browser Sunday, November 10, 13
  71. 71. Ruby in the browser Sunday, November 10, 13
  72. 72. As Code class Opal < Ruby include Browser::Access include Javascript::Interaction runs_in :browser runs_in :node makes_you :happy end Sunday, November 10, 13
  73. 73. Sunday, November 10, 13
  74. 74. Sunday, November 10, 13
  75. 75. Switch gears Sunday, November 10, 13
  76. 76. PAL SHOW O -2 Reasons Opal will make you happy Sunday, November 10, 13
  77. 77. Sunday, November 10, 13
  78. 78. Reasons Opal will make you happy Sunday, November 10, 13
  79. 79. Reasons Opal will make you happy 1. It's just Ruby, and a viable one Sunday, November 10, 13
  80. 80. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition Sunday, November 10, 13
  81. 81. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy Sunday, November 10, 13
  82. 82. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy 4. Frameworks, we don't need no stinking frameworks (but we have some) Sunday, November 10, 13
  83. 83. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy 4. Frameworks, we don't need no stinking frameworks (but we have some) 5. Tools you already know and love Sunday, November 10, 13
  84. 84. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy 4. Frameworks, we don't need no stinking frameworks (but we have some) 5. Tools you already know and love 6. Easy integration with Ruby web frameworks Sunday, November 10, 13
  85. 85. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy 4. Frameworks, we don't need no stinking frameworks (but we have some) 5. Tools you already know and love 6. Easy integration with Ruby web frameworks 7. Awesome In Browser tools Sunday, November 10, 13
  86. 86. Reasons Opal will make you happy 1. It's just Ruby, and a viable one 2. Greenspun's 10th Rule, Opal Edition 3. Solves things the Ruby way, making the programmer happy 4. Frameworks, we don't need no stinking frameworks (but we have some) 5. Tools you already know and love 6. Easy integration with Ruby web frameworks 7. Awesome In Browser tools 8. New possibilities Sunday, November 10, 13
  87. 87. 1. It's just Ruby, and a viable one Sunday, November 10, 13
  88. 88. 1. It's just Ruby, and a viable one • Question Number 1 - is opal a viable option? Sunday, November 10, 13
  89. 89. 1. It's just Ruby, and a viable one • Question Number 1 - is opal a viable option? • in production - 6 plus apps, 2 more coming soon Sunday, November 10, 13
  90. 90. 1. It's just Ruby, and a viable one • Question Number 1 - is opal a viable 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) Sunday, November 10, 13
  91. 91. High End Fashion/ Luxury Site Sunday, November 10, 13
  92. 92. High End Fashion/ Luxury Site • Sunday, November 10, 13 globally
  93. 93. High End Fashion/ Luxury Site • globally • Sunday, November 10, 13 ~2 million unique visitors/month
  94. 94. High End Fashion/ Luxury Site • globally • • Sunday, November 10, 13 ~2 million unique visitors/month ~20 Million page views/month
  95. 95. High End Fashion/ Luxury Site • globally • • • Sunday, November 10, 13 ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal
  96. 96. High End Fashion/ Luxury Site • globally • • • ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal • Sunday, November 10, 13 store: ~2 million page views/month
  97. 97. High End Fashion/ Luxury Site • globally • • • ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal • • Sunday, November 10, 13 store: ~2 million page views/month mobile: ~2 million page views/month
  98. 98. High End Fashion/ Luxury Site • globally • • • ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal • • • Sunday, November 10, 13 store: ~2 million page views/month mobile: ~2 million page views/month store is responsive, mobile works
  99. 99. High End Fashion/ Luxury Site • globally • • • ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal • • • store: ~2 million page views/month mobile: ~2 million page views/month store is responsive, mobile works • Sunday, November 10, 13 opal is not too heavy mobile devices
  100. 100. High End Fashion/ Luxury Site • globally • • • ~2 million unique visitors/month ~20 Million page views/month Parts that involve opal • • • store: ~2 million page views/month mobile: ~2 million page views/month store is responsive, mobile works • • Sunday, November 10, 13 opal is not too heavy mobile devices opal battle tested for ie8+, chrome, safari, firefox
  101. 101. 1. It's just Ruby, and a viable one Sunday, November 10, 13
  102. 102. 1. It's just Ruby, and a viable one • Sunday, November 10, 13 Real Ruby1.9.3 - compliant (mostly)
  103. 103. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • Sunday, November 10, 13 passes 2367 rubyspec examples - goal to pass all
  104. 104. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • Sunday, November 10, 13 passes 2367 rubyspec examples - goal to pass all capable of running complex ruby
  105. 105. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • capable of running complex ruby • Sunday, November 10, 13 passes 2367 rubyspec examples - goal to pass all runs asciidoc gem unmodified
  106. 106. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • passes 2367 rubyspec examples - goal to pass all capable of running complex ruby • • Sunday, November 10, 13 runs asciidoc gem unmodified runs mspec gem unmodified,
  107. 107. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • passes 2367 rubyspec examples - goal to pass all capable of running complex ruby • runs asciidoc gem unmodified • runs mspec gem unmodified, • rspec with some modification, primarily due to mutable strings Sunday, November 10, 13
  108. 108. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • passes 2367 rubyspec examples - goal to pass all capable of running complex ruby • runs asciidoc gem unmodified • runs mspec gem unmodified, • rspec with some modification, primarily due to mutable strings • Sunday, November 10, 13 can compile itself
  109. 109. 1. It's just Ruby, and a viable one • Real Ruby1.9.3 - compliant (mostly) • • passes 2367 rubyspec examples - goal to pass all capable of running complex ruby • runs asciidoc gem unmodified • runs mspec gem unmodified, • rspec with some modification, primarily due to mutable strings • • Sunday, November 10, 13 can compile itself much of stdlib in already in place
  110. 110. testimonials Sunday, November 10, 13
  111. 111. Sunday, November 10, 13
  112. 112. Sunday, November 10, 13
  113. 113. Sunday, November 10, 13
  114. 114. “That guy” Sunday, November 10, 13
  115. 115. “That guy” what does dhh think? Sunday, November 10, 13
  116. 116. Text DHH On Opal Sunday, November 10, 13
  117. 117. Text DHH On Opal Sunday, November 10, 13
  118. 118. Text DHH On Opal Sunday, November 10, 13
  119. 119. ** Sunday, November 10, 13
  120. 120. Ruby language features in OPal Sunday, November 10, 13
  121. 121. 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 Sunday, November 10, 13
  122. 122. More Ruby language features in OPal • Basic object • Kernel • Nilclass • range • hash Sunday, November 10, 13 • string interpolation • heredocs • %%w splits
  123. 123. don’t underestimate the power of a a better language Sunday, November 10, 13
  124. 124. don’t underestimate the power of a a better language • those who chose ruby for the backend know what i mean Sunday, November 10, 13
  125. 125. 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 *** Sunday, November 10, 13
  126. 126. 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 *** • leads us to ... Sunday, November 10, 13
  127. 127. 2. Greenspun's 10th Rule, Opal Edition Greenspun’s Rule Sunday, November 10, 13
  128. 128. 2. Greenspun's 10th Rule, Opal Edition Greenspun’s Rule Any sufficiently complicated C or Fortran program contains an ad hoc, informally-specified, bug-ridden, slow implementation of half of Common Lisp. Sunday, November 10, 13
  129. 129. 2. Greenspun's 10th Rule, Opal Edition Greenspun’s Rule Any sufficiently complicated C or Fortran program contains an ad hoc, informally-specified, bug-ridden, slow implementation of half of Common Lisp. Sunday, November 10, 13
  130. 130. 2. Greenspun's 10th Rule, Opal Edition Greenspun’s Rule, Opal Edition Sunday, November 10, 13
  131. 131. 2. Greenspun's 10th Rule, Opal Edition Greenspun’s Rule, Opal Edition Any sufficiently complicated Javascript program contains an ad hoc, informally-specified, bug-ridden, slow implementation of half of Ruby Sunday, November 10, 13
  132. 132. greenspun in action Sunday, November 10, 13
  133. 133. greenspun in action Some attempts inspired by, trying to imitate ruby or emulating ruby like features in JS Sunday, November 10, 13
  134. 134. prototype Sunday, November 10, 13
  135. 135. prototype Sunday, November 10, 13
  136. 136. underscore Sunday, November 10, 13
  137. 137. underscore Sunday, November 10, 13
  138. 138. http://rubyjs.org Sunday, November 10, 13
  139. 139. http://rubyjs.org Sunday, November 10, 13
  140. 140. strukt Sunday, November 10, 13
  141. 141. strukt Sunday, November 10, 13
  142. 142. string.js Sunday, November 10, 13
  143. 143. http:// jsclass.jcoglan.com Sunday, November 10, 13
  144. 144. http:// jsclass.jcoglan.com Sunday, November 10, 13
  145. 145. http://code.google.com/p/ joose-js Sunday, November 10, 13
  146. 146. http://code.google.com/p/ joose-js Sunday, November 10, 13
  147. 147. JavaScriptMVC Sunday, November 10, 13
  148. 148. JavaScriptMVC Sunday, November 10, 13
  149. 149. def.js Sunday, November 10, 13
  150. 150. def.js Sunday, November 10, 13
  151. 151. Sunday, November 10, 13
  152. 152. Sunday, November 10, 13
  153. 153. Raiya in Humax Sunday, November 10, 13
  154. 154. Raiya in Humax Sunday, November 10, 13
  155. 155. http://scatterpoll.com/ #title-slide Sunday, November 10, 13
  156. 156. http://scatterpoll.com/ #title-slide Sunday, November 10, 13
  157. 157. ActiveJS Sunday, November 10, 13
  158. 158. ActiveJS Sunday, November 10, 13
  159. 159. RedScript Sunday, November 10, 13
  160. 160. RedScript Sunday, November 10, 13
  161. 161. Forml Sunday, November 10, 13
  162. 162. Forml Sunday, November 10, 13
  163. 163. Other attempts to do Ruby in JS Sunday, November 10, 13
  164. 164. people want ruby in the browser Sunday, November 10, 13
  165. 165. even if they don’t know it Sunday, November 10, 13
  166. 166. some know they don’t want js Sunday, November 10, 13
  167. 167. some know they don’t want js Javascript... It’s s**t I never use it Sunday, November 10, 13
  168. 168. some know they don’t want js Javascript... It’s s**t I never use it ripoff of the Smug DHH meme Sunday, November 10, 13
  169. 169. instead of the adhoc, informally specified, bug ridden, slow implementation... Sunday, November 10, 13
  170. 170. Opal Sunday, November 10, 13
  171. 171. 3. Solves things the Ruby way, making the programmer happy Sunday, November 10, 13
  172. 172. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples Sunday, November 10, 13
  173. 173. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons Sunday, November 10, 13
  174. 174. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons • modular code Sunday, November 10, 13
  175. 175. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons • modular code • namespaces Sunday, November 10, 13
  176. 176. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons • modular code • namespaces • external templates Sunday, November 10, 13
  177. 177. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons • modular code • namespaces • external templates • automation tasks Sunday, November 10, 13
  178. 178. 3. Solves things the Ruby way, making the programmer happy • could be its own presentation, only selected examples • comparisons • modular code • namespaces • external templates • automation tasks • scope Sunday, November 10, 13
  179. 179. 3. Solves things the Ruby way, making the programmer happy Sunday, November 10, 13
  180. 180. 3. Solves things the Ruby way, making the programmer happy • non comparision Sunday, November 10, 13
  181. 181. 3. Solves things the Ruby way, making the programmer happy • non comparision • dom Sunday, November 10, 13
  182. 182. 3. Solves things the Ruby way, making the programmer happy • non comparision • dom • css Sunday, November 10, 13
  183. 183. 3. Solves things the Ruby way, making the programmer happy • non comparision • dom • css • javascript integration Sunday, November 10, 13
  184. 184. 3. Solves things the Ruby way, making the programmer happy • non comparision • dom • css • javascript integration • testing Sunday, November 10, 13
  185. 185. modular code: Javascript Sunday, November 10, 13
  186. 186. 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 Sunday, November 10, 13
  187. 187. 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 require(['foo', 'bar'], function ( foo, bar ) { // rest of your code here foo.doSomething(); }); Sunday, November 10, 13
  188. 188. 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 require(['foo', 'bar'], function ( foo, bar ) { // rest of your code here foo.doSomething(); }); Lots of other stuff Sunday, November 10, 13
  189. 189. MODULAR CODE ruby Sunday, November 10, 13
  190. 190. MODULAR CODE ruby create a ruby file or gem Sunday, November 10, 13
  191. 191. MODULAR CODE ruby create a ruby file or gem require 'file_or_gem_you_want' Sunday, November 10, 13
  192. 192. MODULAR CODE Opal Sunday, November 10, 13
  193. 193. MODULAR CODE Opal create a ruby file or gem Sunday, November 10, 13
  194. 194. MODULAR CODE Opal create a ruby file or gem require 'file_or_gem_you_want' Sunday, November 10, 13
  195. 195. example from opal-irb require require require require 'opal' 'opal-jquery' 'opal-parser' 'opal_irb_jqconsole' Document.ready? do OpalIrbJqconsole.create("#console") end Sunday, November 10, 13
  196. 196. example from opal-irb require require require require require gems 'opal' 'opal-jquery' 'opal-parser' 'opal_irb_jqconsole' Document.ready? do OpalIrbJqconsole.create("#console") end Sunday, November 10, 13
  197. 197. example from opal-irb require require require require require gems 'opal' 'opal-jquery' 'opal-parser' 'opal_irb_jqconsole' require my file Document.ready? do OpalIrbJqconsole.create("#console") end Sunday, November 10, 13
  198. 198. example from opal-irb require require require require require gems 'opal' 'opal-jquery' 'opal-parser' 'opal_irb_jqconsole' require my file Document.ready? do OpalIrbJqconsole.create("#console") end use it Sunday, November 10, 13
  199. 199. Namespace - JS Sunday, November 10, 13
  200. 200. Namespace - JS • many ways Sunday, November 10, 13
  201. 201. Namespace - JS • many ways • hand rolling nested objects Sunday, November 10, 13
  202. 202. Namespace - JS • many ways • hand rolling nested objects • namespace functions, self coded, Yui, Dojo Sunday, November 10, 13
  203. 203. Namespace - JS by hand or like this Sunday, November 10, 13
  204. 204. Namespace - JS Sunday, November 10, 13
  205. 205. Namespace - JS as a function Sunday, November 10, 13
  206. 206. Namespace - JS as a function function definition Sunday, November 10, 13
  207. 207. namespace - ruby • use module or class Sunday, November 10, 13
  208. 208. namespace - opal • use module or class Sunday, November 10, 13
  209. 209. templates as external files: jsT Sunday, November 10, 13
  210. 210. templates as external files: jsT write jst template Sunday, November 10, 13
  211. 211. templates as external files: jsT write jst template include in html Sunday, November 10, 13
  212. 212. templates as external files: jsT write jst template include in html use Sunday, November 10, 13
  213. 213. templates as external files- Rails • make external template file • render # if you even have to Sunday, November 10, 13
  214. 214. templates as external files • make external template file • require “filename” • Template[“filename”].render Sunday, November 10, 13
  215. 215. automation tasks js Sunday, November 10, 13
  216. 216. automation tasks js • cake Sunday, November 10, 13
  217. 217. automation tasks js • cake • grunt Sunday, November 10, 13
  218. 218. automation tasks js • cake • grunt • something new? Sunday, November 10, 13
  219. 219. automation tasks ruby • rake Sunday, November 10, 13
  220. 220. AUTOMATION TASKS OPAL • RAKE Sunday, November 10, 13
  221. 221. scope - js • wrap everything in a function • while  (i  <  2)  {        funcArray[i]  =  (function(value)  {                  return  function(){  alert(value);  return  false;  }        })(i);        i++; } Sunday, November 10, 13
  222. 222. scope - ruby • much more flexible and sane rules Sunday, November 10, 13
  223. 223. scope - opal • see ruby Sunday, November 10, 13
  224. 224. defer execution js • var immediateId = window.setImmediate(function() { code_you_want}); Sunday, November 10, 13
  225. 225. DEFER EXECUTION opal-browser • proc { code_you_want }.defer Sunday, November 10, 13
  226. 226. javascript integration Sunday, November 10, 13
  227. 227. javascript integration • x-strings Sunday, November 10, 13
  228. 228. javascript integration • x-strings • %x(window.location) Sunday, November 10, 13
  229. 229. javascript integration • x-strings • %x(window.location) • `window.location` Sunday, November 10, 13
  230. 230. javascript integration • x-strings • %x(window.location) • `window.location` • used to have seemless bridging (via method missing) like jruby, now need to wrap objects with native Sunday, November 10, 13
  231. 231. javascript integration • x-strings • %x(window.location) • `window.location` • used to have seemless bridging (via method missing) like jruby, now need to wrap objects with native • @editor = Native(`CodeMirror.fromTextArea(areas)`) Sunday, November 10, 13
  232. 232. DOM - opalbrowser Sunday, November 10, 13
  233. 233. DOM - opalbrowser create dom Sunday, November 10, 13
  234. 234. DOM - opalbrowser create dom get by id Sunday, November 10, 13
  235. 235. DOM - opalbrowser create dom get by id ways to append Sunday, November 10, 13
  236. 236. CSS opal-browser Sunday, November 10, 13
  237. 237. CSS opal-browser create css Sunday, November 10, 13
  238. 238. CSS opal-browser create css append to head Sunday, November 10, 13
  239. 239. Tests/Specs Sunday, November 10, 13
  240. 240. 3. Solves things the Ruby way, making the programmer happy Sunday, November 10, 13
  241. 241. 3. Solves things the Ruby way, making the programmer happy • not done (but easy in ruby) Sunday, November 10, 13
  242. 242. 3. Solves things the Ruby way, making the programmer happy • not done (but easy in ruby) • monkey patching Sunday, November 10, 13
  243. 243. 3. Solves things the Ruby way, making the programmer happy • not done (but easy in ruby) • monkey patching • method missing Sunday, November 10, 13
  244. 244. 4. Frameworks, we don't need no stinking frameworks (but we have some) Sunday, November 10, 13
  245. 245. 4. Frameworks, we don't need no stinking frameworks (but we have some) Sunday, November 10, 13
  246. 246. 4. Frameworks, we don't need no stinking frameworks (but we have some) • opal-irb, opal-inspector easy to write without a framework, very few lines Sunday, November 10, 13
  247. 247. 4. Frameworks, we don't need no stinking frameworks (but we have some) • opal-irb, opal-inspector easy to write without a framework, very few lines • power of a better language Sunday, November 10, 13
  248. 248. opal-inspector spike code Sunday, November 10, 13
  249. 249. opal-inspector spike code • 448 lines including whitespace and debugging lines Sunday, November 10, 13
  250. 250. opal-inspector spike code • 448 lines including whitespace and debugging lines • mostly just plain ruby w/ some opal-jquery Sunday, November 10, 13
  251. 251. opal-inspector spike code • 448 lines including whitespace and debugging lines • mostly just plain ruby w/ some opal-jquery • selected code showN Sunday, November 10, 13
  252. 252. Sunday, November 10, 13
  253. 253. Require gems Sunday, November 10, 13
  254. 254. Require gems Require tempates Sunday, November 10, 13
  255. 255. Require gems Require tempates Render template Sunday, November 10, 13
  256. 256. App setup Sunday, November 10, 13
  257. 257. App setup Add panes Sunday, November 10, 13
  258. 258. App setup Add panes jQuery stuff Sunday, November 10, 13
  259. 259. 4. Frameworks, we don't need no stinking frameworks (but we have some) Sunday, November 10, 13
  260. 260. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs Sunday, November 10, 13
  261. 261. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs • opal-jquery - jquery wrapped in a ruby way Sunday, November 10, 13
  262. 262. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs • opal-jquery - jquery wrapped in a ruby way • opal-browser - browser functionality Sunday, November 10, 13
  263. 263. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs • opal-jquery - jquery wrapped in a ruby way • opal-browser - browser functionality • can use iN lieu of opal-jquery if you’re not using jquery Sunday, November 10, 13
  264. 264. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs • opal-jquery - jquery wrapped in a ruby way • opal-browser - browser functionality • can use iN lieu of opal-jquery if you’re not using jquery • vienna - MVC Sunday, November 10, 13
  265. 265. 4. Frameworks, we don't need no stinking frameworks (but we have some) • while ruby is powerful by itself, opal have some libs • opal-jquery - jquery wrapped in a ruby way • opal-browser - browser functionality • can use iN lieu of opal-jquery if you’re not using jquery • vienna - MVC • lissio - MVC Sunday, November 10, 13
  266. 266. 5. Tools you already know and love Sunday, November 10, 13
  267. 267. 5. Tools you already know and love • opal is Ruby Sunday, November 10, 13
  268. 268. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. Sunday, November 10, 13
  269. 269. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. • Rake Sunday, November 10, 13
  270. 270. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. • Rake • rspec (sorry DHH) Sunday, November 10, 13
  271. 271. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. • Rake • rspec (sorry DHH) • guard Sunday, November 10, 13
  272. 272. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. • • • • Sunday, November 10, 13 Rake rspec (sorry DHH) guard <fill in the ruby tool> - remember it's just Ruby
  273. 273. 5. Tools you already know and love • opal is Ruby • editor - emacs, textmate, vim, sublime, Rubymine, etc. • • • • Rake rspec (sorry DHH) guard <fill in the ruby tool> - remember it's just Ruby • Reuse your ood and patterns Knowledge Sunday, November 10, 13
  274. 274. Sunday, November 10, 13
  275. 275. 6. Easy integration with Ruby web frameworks Sunday, November 10, 13
  276. 276. 6. Easy integration with Ruby web frameworks • opal-rails Sunday, November 10, 13
  277. 277. 6. Easy integration with Ruby web frameworks • opal-rails • opal-sprockets Sunday, November 10, 13
  278. 278. 6. Easy integration with Ruby web frameworks • opal-rails • opal-sprockets • opal-server Sunday, November 10, 13
  279. 279. opal-rails • The easy way • rails new new_project --javascript=opal Sunday, November 10, 13
  280. 280. opal-rails Sunday, November 10, 13
  281. 281. opal-rails add to gemfile Sunday, November 10, 13
  282. 282. opal-rails add to gemfile add to APPLICATION.JS Sunday, November 10, 13
  283. 283. opal-rails add to gemfile add to APPLICATION.JS EDIT *.JS.RB FILE Sunday, November 10, 13
  284. 284. opal-rails SUPPORTE HAML FILTERS add to gemfile add to APPLICATION.JS EDIT *.JS.RB FILE Sunday, November 10, 13
  285. 285. opal-rails SUPPORTE HAML FILTERS add to gemfile add to APPLICATION.JS add SPECS EDIT *.JS.RB FILE Sunday, November 10, 13
  286. 286. 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 Sunday, November 10, 13
  287. 287. 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 to write to 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 Sunday, November 10, 13
  288. 288. 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 to write to 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 append dirs to search Sunday, November 10, 13
  289. 289. 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 to write to 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 append dirs to search write contents Sunday, November 10, 13
  290. 290. opal-server Sunday, November 10, 13
  291. 291. opal-server add to gemfile Sunday, November 10, 13
  292. 292. opal-server add to gemfile create your opal file(s) Sunday, November 10, 13
  293. 293. opal-server add to gemfile create your opal file(s) include application.js Sunday, November 10, 13
  294. 294. opal-server add to gemfile setup config.ru create your opal file(s) include application.js Sunday, November 10, 13
  295. 295. opal-server add to gemfile setup config.ru create your opal file(s) rackup and refresh at will include application.js Sunday, November 10, 13
  296. 296. 7. Awesome In Browser tools • opal-irb • opal-inspector Sunday, November 10, 13
  297. 297. opal-irb Sunday, November 10, 13
  298. 298. opal-irb • irb for opal Sunday, November 10, 13
  299. 299. opal-irb • irb for opal • history Sunday, November 10, 13
  300. 300. opal-irb • irb for opal • history • readline controls (most) Sunday, November 10, 13
  301. 301. opal-irb • irb for opal • history • readline controls (most) • popup multiline editor (works over all history) Sunday, November 10, 13
  302. 302. opal-irb • irb for opal • history • readline controls (most) • popup multiline editor (works over all history) • send a link (live gist) Sunday, November 10, 13
  303. 303. opal-inspector Sunday, November 10, 13
  304. 304. opal-inspector • inspired by amber.js’s in browser smalltalk code browser Sunday, November 10, 13
  305. 305. opal-inspector • inspired by amber.js’s in browser smalltalk code browser • persistent live opal objects is similar to the Smalltalk image Sunday, November 10, 13
  306. 306. opal-inspector • inspired by amber.js’s in browser smalltalk code browser • persistent live opal objects is similar to the Smalltalk image • change the paradigm of webapp development Sunday, November 10, 13
  307. 307. opal-inspector • inspired by amber.js’s in browser smalltalk code browser • persistent live opal objects is similar to the Smalltalk image • change the paradigm of webapp development • develop in browser w/better tools Sunday, November 10, 13
  308. 308. demos Sunday, November 10, 13
  309. 309. opal-irb demo • ruby • invoke js • multi line • multi line edit • dom example • css example • “live gist” Sunday, November 10, 13
  310. 310. opal-inspector demo • tabs overview • show transcript • class browser • instance browser Sunday, November 10, 13
  311. 311. OPAL-INSPECTOR • WAiting on a feature from the opal parser to store code and comments Sunday, November 10, 13
  312. 312. Sunday, November 10, 13
  313. 313. 8. New possibilities Sunday, November 10, 13
  314. 314. 8. New possibilities • Sunday, November 10, 13 in browser development
  315. 315. 8. New possibilities • in browser development • Sunday, November 10, 13 change the development paradigm
  316. 316. 8. New possibilities • in browser development • • Sunday, November 10, 13 change the development paradigm take goodness from Smalltalk, ruby, lisp machines
  317. 317. 8. New possibilities • in browser development • • take goodness from Smalltalk, ruby, lisp machines • Sunday, November 10, 13 change the development paradigm finally a standard Ui platform
  318. 318. 8. New possibilities • 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. Sunday, November 10, 13
  319. 319. 8. New possibilities • 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. • Sunday, November 10, 13 everyone has a browser
  320. 320. 8. New possibilities • 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. • • Sunday, November 10, 13 everyone has a browser use these tools for backend too, ala better errors
  321. 321. 8. New possibilities • 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. • • use these tools for backend too, ala better errors • Sunday, November 10, 13 everyone has a browser better tooling for ruby across the board
  322. 322. 8. New possibilities Sunday, November 10, 13
  323. 323. 8. New possibilities • meteor.js like same code on front and back end Sunday, November 10, 13
  324. 324. 8. New possibilities • meteor.js like same code on front and back end • blurring the lines - vienna experiment Sunday, November 10, 13
  325. 325. 8. New possibilities • meteor.js like same code on front and back end • blurring the lines - vienna experiment • eventd safe ruby libs Sunday, November 10, 13
  326. 326. 8. New possibilities • meteor.js like same code on front and back end • blurring the lines - vienna experiment • eventd safe ruby libs • as opal matures, eventd safe ruby libs/gems for both front and backend Sunday, November 10, 13
  327. 327. 8. New possibilities Sunday, November 10, 13
  328. 328. 8. New possibilities • component based coding, all in one place for the web Sunday, November 10, 13
  329. 329. 8. New possibilities • component based coding, all in one place for the web • hard to do oo programming with markup and css Sunday, November 10, 13
  330. 330. 8. New possibilities • component based coding, all in one place for the web • hard to do oo programming with markup and css • lissio - ruby class, all parts in ruby Sunday, November 10, 13
  331. 331. 8. New possibilities • component based coding, all in one place for the web • hard to do oo programming with markup and css • lissio - ruby class, all parts in ruby • html Sunday, November 10, 13
  332. 332. 8. New possibilities • component based coding, all in one place for the web • hard to do oo programming with markup and css • lissio - ruby class, all parts in ruby • html • css Sunday, November 10, 13
  333. 333. 8. New possibilities • component based coding, all in one place for the web • hard to do oo programming with markup and css • lissio - ruby class, all parts in ruby • html • css • behavior Sunday, November 10, 13
  334. 334. Sunday, November 10, 13
  335. 335. behavior Sunday, November 10, 13
  336. 336. behavior element Sunday, November 10, 13
  337. 337. behavior element html Sunday, November 10, 13
  338. 338. behavior element html css Sunday, November 10, 13
  339. 339. behavior element html css all ruby Sunday, November 10, 13
  340. 340. nested css Sunday, November 10, 13
  341. 341. 8. New possibilities Sunday, November 10, 13
  342. 342. 8. New possibilities • Sunday, November 10, 13 can you imagine a world w/o ruby?
  343. 343. 8. New possibilities • can you imagine a world w/o ruby? • Sunday, November 10, 13 possible w/the javascript revolution
  344. 344. 8. New possibilities • can you imagine a world w/o ruby? • • Sunday, November 10, 13 possible w/the javascript revolution facilitate the fantasy land of ruby everywhere
  345. 345. 8. New possibilities • can you imagine a world w/o ruby? • • facilitate the fantasy land of ruby everywhere • Sunday, November 10, 13 possible w/the javascript revolution backend mri, jruby, rubinius
  346. 346. 8. New possibilities • can you imagine a world w/o ruby? • • possible w/the javascript revolution facilitate the fantasy land of ruby everywhere • • Sunday, November 10, 13 backend mri, jruby, rubinius mirah - everywhere jvm runs
  347. 347. 8. New possibilities • can you imagine a world w/o ruby? • • possible w/the javascript revolution facilitate the fantasy land of ruby everywhere • • mirah - everywhere jvm runs • Sunday, November 10, 13 backend mri, jruby, rubinius embedded mruby
  348. 348. 8. New possibilities • can you imagine a world w/o ruby? • • possible w/the javascript revolution facilitate the fantasy land of ruby everywhere • • mirah - everywhere jvm runs • embedded mruby • Sunday, November 10, 13 backend mri, jruby, rubinius mobile
  349. 349. 8. New possibilities • 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 • mobile • Sunday, November 10, 13 rubymotion
  350. 350. 8. New possibilities • 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 • mobile • • Sunday, November 10, 13 rubymotion mobiruby
  351. 351. 8. New possibilities • 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 • mobile • • • Sunday, November 10, 13 rubymotion mobiruby opal - everywhere javascript runs
  352. 352. (dubious) history as starwars films Sunday, November 10, 13
  353. 353. Episode 1: The Phantom JS Menace Mesa use Javascript on the backend! Mesa use Javascript everywhere!!!! Mesa use Javascript in ways unintended... Sunday, November 10, 13
  354. 354. Episode 2: Attack of the Clones Typescript JSX Sunday, November 10, 13 Coffescript Dart Fantom
  355. 355. Episode 3: Revenge of the Sith Windows 8 development using Javascript. Evil Empire complete http://conquent.com/bissellator/blogimg/darth_gates.jpg Sunday, November 10, 13
  356. 356. Episode 4: A New Hope OPAL Wan Kenobi, you’re my only hope Sunday, November 10, 13
  357. 357. Episode 5: The Empire Strikes Back Join us, we have Ecmascript 6 Sunday, November 10, 13
  358. 358. Episode 6: Return of the Jedi Opal Viable, New Deathstar explodes Sunday, November 10, 13
  359. 359. Episode 7: TBD http://www.copywritematters.com.au/dev/wp-content/uploads/2011/09/Lady-Pointing-To-You-Small-.jpg Sunday, November 10, 13
  360. 360. Episode 7: TBD http://www.copywritematters.com.au/dev/wp-content/uploads/2011/09/Lady-Pointing-To-You-Small-.jpg Sunday, November 10, 13
  361. 361. Sunday, November 10, 13
  362. 362. Call to arms Sunday, November 10, 13
  363. 363. Call to arms • hope for momentum like rubinius Sunday, November 10, 13
  364. 364. Call to arms • hope for momentum like rubinius • rubyconf 06 - just an idea Sunday, November 10, 13
  365. 365. Call to arms • hope for momentum like rubinius • rubyconf 06 - just an idea • rubyconf 07 - a movement Sunday, November 10, 13
  366. 366. Call to arms • hope for momentum like rubinius • rubyconf 06 - just an idea • rubyconf 07 - a movement • opal is farther along, if we could make similar progress... Sunday, November 10, 13
  367. 367. right now Sunday, November 10, 13
  368. 368. right now • things are pretty good Sunday, November 10, 13
  369. 369. right now • things are pretty good • things could be better Sunday, November 10, 13
  370. 370. right now • things are pretty good • things could be better • more ruby compatibility Sunday, November 10, 13
  371. 371. right now • things are pretty good • things could be better • more ruby compatibility • more libs, complete libs ** Sunday, November 10, 13
  372. 372. right now • things are pretty good • things could be better • more ruby compatibility • more libs, complete libs ** • documentation Sunday, November 10, 13
  373. 373. right now • things are pretty good • things could be better • more ruby compatibility • more libs, complete libs ** • documentation • we need your helP Sunday, November 10, 13
  374. 374. things to do Sunday, November 10, 13
  375. 375. things to do • try it out, Sunday, November 10, 13
  376. 376. things to do • try it out, • opalrb.org/try Sunday, November 10, 13
  377. 377. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html Sunday, November 10, 13
  378. 378. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group Sunday, November 10, 13
  379. 379. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document Sunday, November 10, 13
  380. 380. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document • contribute, it’s just ruby Sunday, November 10, 13
  381. 381. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document • contribute, it’s just ruby • convert gems****, write new stuff, test, etc.. Sunday, November 10, 13
  382. 382. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document • contribute, it’s just ruby • convert gems****, write new stuff, test, etc.. • be a garbage collector, change the world Sunday, November 10, 13
  383. 383. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document • contribute, it’s just ruby • convert gems****, write new stuff, test, etc.. • be a garbage collector, change the world • have fun Sunday, November 10, 13
  384. 384. things to do • try it out, • opalrb.org/try • http://fkchang.github.io/opal-irb/indexembeddable.html • communicate - irc, google group • document • contribute, it’s just ruby • convert gems****, write new stuff, test, etc.. • be a garbage collector, change the world • have fun • be happy Sunday, November 10, 13
  385. 385. will you • join the dark side? Sunday, November 10, 13
  386. 386. or • code with the force? Sunday, November 10, 13
  387. 387. you choose Sunday, November 10, 13
  388. 388. But for me Sunday, November 10, 13
  389. 389. change the world, defeat the evil Sunday, November 10, 13
  390. 390. 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 Sunday, November 10, 13
  391. 391. thankful I am, for the garbage collectors Sunday, November 10, 13
  392. 392. thankful I am, for the garbage collectors • matz - ruby Sunday, November 10, 13
  393. 393. thankful I am, for the garbage collectors • matz - ruby • dhh - rails Sunday, November 10, 13
  394. 394. thankful I am, for the garbage collectors • matz - ruby • dhh - rails • adam, meh, elia - opal Sunday, November 10, 13
  395. 395. thankful I am, for the garbage collectors • matz - ruby • dhh - rails • adam, meh, elia - opal • ruby and rails communities Sunday, November 10, 13
  396. 396. thankful I am, for the garbage collectors • matz - ruby • dhh - rails • adam, meh, elia - opal • ruby and rails communities • George Lucas Sunday, November 10, 13
  397. 397. thankful I am, for the garbage collectors • matz - ruby • dhh - rails • adam, meh, elia - opal • ruby and rails communities • George Lucas • you Sunday, November 10, 13
  398. 398. hedgeye • hiring like everyone else • NYC Area, Stamford CT Sunday, November 10, 13
  399. 399. @fkchang2000 may the force be with you Sunday, November 10, 13
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×