Opal a new_hope

Opal - a new hope

(for Ruby Programmers)Forrest Chang@fkchang2000

Sunday, November 10, 13

THIS PRESENTATION HAS BEEN RATED

RUBYR 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


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

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


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


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

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!


JS Everywhere!

Desktops


JS Everywhere!

Desktops

Mobile


JS Everywhere!

Desktops

MobileBackend


Performance

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






Performance

V8 (Chrome, node)







Performance

V8 (Chrome, node)

Spidermonkey(ff)







Performance

V8 (Chrome, node)

Spidermonkey(ff)

carakan (oPERA)







Performance

V8 (Chrome, node)

Spidermonkey(ff)

carakan (oPERA)

chakra(ie)







libs/Frameworks

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




libs/Frameworks

dom





libs/Frameworks

dom

GUi





libs/Frameworks

dom

GUi

MV****





libs/Frameworks

dom

GUi

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 oyDrivenDevelopment


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


class Opal < Ruby include Browser::Access include Javascript::Interaction

runs_in :browser runs_in :node

makes_you :happyend

As Code


Switch gears


PAL SHOO W-2

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









7. Awesome In Browser tools8. New possibilities




• Question Number 1 - is opal a viable option?




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




• 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



• globally



• globally

• ~2 million unique visitors/month



• globally


• ~20 Million page views/month



• globally



• Parts that involve opal



• globally




• store: ~2 million page views/month



• globally





• mobile: ~2 million page views/month



• globally






• store is responsive, mobile works



• globally







• opal is not too heavy mobile devices



• globally







• opal is not too heavy mobile devices

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



• 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









• can compile itself









• can compile itself

• much of stdlib in already in place


testimonials


“That guy”


“That guy”what does dhh

think?


TextDHH On Opal


**


Ruby language features in OPal


Ruby language features in OPal

• classes

• modules &and mixins

• singleton methods

• method-missing

• arity checks

• lambda

• blocks

• yield

• constants

• global variables

• class variables

• 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 *****




• opal-irb, opal-inspector easy to write, easy to read, little code *****

• leads us to ...



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.

Greenspun’s Rule



Greenspun’s Rule, Opal Edition



Any sufficiently complicated Javascript program contains an ad hoc, informally-specified, bug-ridden,

slow implementation of half of Ruby

Greenspun’s Rule, Opal Edition


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


http://rubyjs.org

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


http://scatterpoll.com/#




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



Javascript...

It’s s**tI never use it



Javascript...

It’s s**tI never use it

ripoff of the Smug DHH meme


instead of the adhoc, informally

specified, bug ridden, slow

implementation...


Opal



• could be its own presentation, only selected examples




• comparisons




• comparisons

• modular code




• comparisons

• modular code

• namespaces




• comparisons

• modular code

• namespaces

• external templates




• comparisons

• modular code

• namespaces


• automation tasks




• 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



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();});




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 'opal'require 'opal-jquery'require 'opal-parser'require 'opal_irb_jqconsole'

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





require gems





require gems

require my file





require gems

require my file

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 - JSby hand

or like this


Namespace - JS


Namespace - JSas a function


Namespace - JSas a function

function definition


namespace - ruby

• use module or class


namespace - opal

• use module or class


templates as external files: jsT



write jst template



write jst template

include in html



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



• cake



• cake

• grunt



• 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



• x-strings



• x-strings

• %x(window.location)



• x-strings


• `window.location`



• x-strings



• used to have seemless bridging (via method missing) like jruby, now need to wrap objects with native



• 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 - opal-browser


DOM - opal-browser

create dom


DOM - opal-browser

create dom

get by id


DOM - opal-browser

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)

• opal-irb, opal-inspector easy to write without a framework, very few lines



(but we have some)

• opal-irb, opal-inspector easy to write without a framework, very few lines

• power of a better language


opal-inspector spike code



• 448 lines including whitespace and debugging lines




• mostly just plain ruby w/some opal-jquery




• 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 panesjQuery stuff



(but we have some)



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

some libs




some libs

• opal-jquery - jquery wrapped in a ruby way




some libs


• opal-browser - browser functionality




some libs



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




some libs




• vienna - MVC




some libs




• vienna - MVC

• lissio - MVC



• opal is Ruby



• opal is Ruby• editor - emacs, textmate, vim,

sublime, Rubymine, etc.




sublime, Rubymine, etc.• Rake




sublime, Rubymine, etc.• Rake• rspec (sorry DHH)




sublime, Rubymine, etc.• Rake• rspec (sorry DHH)• guard




sublime, Rubymine, etc.• Rake• rspec (sorry DHH)• guard• <fill in the ruby tool> - remember it's just Ruby




sublime, Rubymine, etc.• Rake• rspec (sorry DHH)• guard• <fill in the ruby tool> - remember it's just Ruby

• Reuse your ood and patterns Knowledge



• opal-rails



• opal-rails

• opal-sprockets



• opal-rails

• opal-sprockets

• opal-server


opal-rails

• The easy way

• rails new new_project --javascript=opal


opal-rails


opal-railsadd to gemfile



add to APPLICATION.JS




EDIT *.JS.RB FILE




EDIT *.JS.RB FILE

HAML FILTERS SUPPORTED




EDIT *.JS.RB FILE

HAML FILTERS SUPPORTED

add SPECS


opal-sprocketsFOR NON RAILS STANDALONE -

RAKEFILErequire '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






file to write to






file to write to

append dirs to search






file to write to

append dirs to search

write contents


opal-server


opal-serveradd to gemfile



create your opal file(s)




include application.js





setup config.ru





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


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.








• everyone has a browser









• use these tools for backend too, ala better errors









• 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




• blurring the lines - vienna experiment





• eventd safe ruby libs





• 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




• hard to do oo programming with markup and css





• lissio - ruby class, all parts in ruby






• html






• html

• 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

Coffescript

Typescript DartJSX Fantom


Episode 3: Revenge of the Sith

http://conquent.com/bissellator/blogimg/darth_gates.jpg

Windows 8 development using Javascript.Evil Empire complete




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


• rubyconf 06 - just an idea


Call to arms



• rubyconf 07 - a movement


Call to arms



• 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/index-

embeddable.html


things to do


embeddable.html • communicate - irc, google group


things to do


embeddable.html • communicate - irc, google group• document


things to do


embeddable.html • communicate - irc, google group• document• contribute, it’s just ruby


things to do


embeddable.html • communicate - irc, google group• document• contribute, it’s just ruby• convert gems******, write new stuff, test, etc..


things to do


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


things to do



• have fun


things to do



• 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



• matz - ruby



• matz - ruby

• dhh - rails



• matz - ruby

• dhh - rails

• adam, meh, elia - opal



• matz - ruby

• dhh - rails


• ruby and rails communities



• matz - ruby

• dhh - rails



• George Lucas



• matz - ruby

• dhh - rails



• George Lucas

• you


hedgeye

• hiring like everyone else

• NYC Area, Stamford CT


may the force be with you

@fkchang2000


Opal a new_hope

Technology

Transcript of Opal a new_hope