SlideShare ist ein Scribd-Unternehmen logo
1 von 87
OPAL - RUBY STYLE
RUBY IN THE BROWSER
    Forrest Chang, OCRuby
TRENDS
NODE.JS
NOV 2011
MOST POPULAR REPO ON
       GITHUB
JAVASCRIPT REVOLUTION
JS EVERYWHERE
IDEA: TAKE THE FRONTEND
LANGUAGE PUT IT THE BACK
            END
GOOD IDEA?
LANGUAGES THAT COMPILE
    TO JAVASCRIPT
JUST A FEW..
I GET THE IDEA PEOPLE
MIGHT PREFER SOMETHING
 OTHER THAN JAVASCRIPT
IDEA: TAKE THE BACKEND
LANGUAGE, PUT IT ON THE
        FRONT END
APPARENTLY A POPULAR
        IDEA
Coffeescript
WHY
Better syntax

Less verbose, clearer, more intention

Some nice features, list comprehensions, implicit
return, etc.

Happier programmers *
Y U NO COFFEESCRIPT?
NOTHING WRONG WITH IT
BUT I LIKE RUBY BETTER
AND ALREADY WORK RUBY
   ON THE BACKEND
BUT IF YOU’RE GOING TO
CHANGE THE SYNTAX, WHY
   NOT ALL THE WAY?
HASN’T IT BEEN TRIED
     BEFORE?
active
active
active
active Less ruby like
active
WHAT IS OPAL
RUNTIME?
USED TO BOTHER ME, MIGHT
 BOTHER ME AGAIN LATER
JAVASCRIPT IS NOW THE “C
      OF THE WEB”
DO PEOPLE CARE THAT
RUBY/LISP/PYTHON DOESN’T
    LOOK/ACT LIKE C
AS LONG AS IT’S DONE WELL
EMBRACE THE
ABSTRACTION!
HTTPS://GITHUB.COM/OPAL

  opalscript
  Javascript + Ruby = OpalScript (Sssh, It's a secret and not
  ready yet).                                                   • opal-spec
  Last updated 14 hours ago                                       Spec Library for opal
                                                                  Last updated 23 days ago
• opal
  Ruby runtime and library on top of Javascript                 • opal-rails
  Last updated 14 hours ago                                       Rails bindings for Opal JS engine
                                                                  Last updated a month ago
• opal-jquery
  Give opal access to jquery
  Last updated 15 hours ago
                                                                  • opal-erb
• opal-todos                                                          ERB parser and runtime for opal
                                                                      Last updated a month ago
  todomvc based opal example
  Last updated 3 days ago
                                                                • vienna
• opal-node                                                       Client-side MVC framework for Opal
                                                                  Last updated a month ago
  Coffescript was so cool…
  Last updated 3 days ago


• opal.github.com
  Opal Website
  Last updated 7 days ago
I HAD A SIMILAR IDEA
CHAI-SCRIPT

Hot drink motif. What drink is reddish?

Ruby equivalent of Coffeescript

Syntactic sugar, but ruby flavor

eventd subset of ruby w/idea of eventd gems for front
and backend

Ease ‘em into ruby
OPALSCRIPT


Likely the same idea

1st public commits just released on 10/24/2012 (i.e.
yesterday)

I’ll be keeping a key eye on this, not certain which I’ll
prefer
MY DRIVER
MATZ PRINCIPLE
MAKE THE PROGRAMMER
       HAPPY
I.E. ME
I’M ENJOYING IT THUS FAR
A NEAT IDEA - TRY OPAL
An example: bit.ly/WFHLyh
CODE
modules to share functionality
modules to share functionality
wrapping js via x string
modules to share functionality
      wrapping js via x string

Easy classes
modules to share functionality
     wrapping js via x string

Easy classes
     include module
modules to share functionality
      wrapping js via x string

Easy classes
     include module
      easy attributes
modules to share functionality
      wrapping js via x string

Easy classes
     include module
      easy attributes



                calling my js wrapper
modules to share functionality
      wrapping js via x string

Easy classes
     include module
      easy attributes



                calling my js wrapper

    Inheritance, baby
modules to share functionality
       wrapping js via x string

 Easy classes
      include module
       easy attributes



                 calling my js wrapper

     Inheritance, baby

super, baby
modules to share functionality
       wrapping js via x string

 Easy classes
      include module
       easy attributes



                 calling my js wrapper

     Inheritance, baby

super, baby

     reusing JsUtils again...
COMPILED JS PRETTY
STRAIGHT FORWARD
BUT VERBOSE
Opal runtime
Opal runtime
matching line of code
Opal runtime
         matching line of code
JsUtils module
Opal runtime
         matching line of code
JsUtils module

             js alert wrapped
Opal runtime
         matching line of code
JsUtils module

             js alert wrapped




Dude class
Gal class
Gal class




     super
Gal class




     super


             Bystander class
Gal class




     super


             Bystander class




                 Instance invocations
WHAT’S TO LIKE?


Ruby

Rake

Rspec

nicer APIs

Ruby on the backend, Ruby on the frontend
RUBY EVERYWHERE!
Desktop/Server: MRI, JRuby, Iron Ruby, Rubinius

Faster Rubylike subset for JVM (Android and other
possibilities) Mirah

Embedded: mruby

IOS: RubyMotion

Browser/Node: opal
YOU KNOW WHAT I MEAN?
CODE ALONG
opal

opal-rails

opal-jquery

opal filter in haml

follow the gist https://gist.github.com/3956417
Opal - Ruby Style!!  Ruby in the browser

Weitere ähnliche Inhalte

Was ist angesagt?

Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
Manoj Kumar
 
Flickr Architecture Presentation
Flickr Architecture PresentationFlickr Architecture Presentation
Flickr Architecture Presentation
eraz
 
How to start using Scala
How to start using ScalaHow to start using Scala
How to start using Scala
Ngoc Dao
 

Was ist angesagt? (19)

Ruby On Rails Introduction
Ruby On Rails IntroductionRuby On Rails Introduction
Ruby On Rails Introduction
 
Introduction to Ruby on Rails
Introduction to Ruby on RailsIntroduction to Ruby on Rails
Introduction to Ruby on Rails
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
Ruby On Rails Basics
Ruby On Rails BasicsRuby On Rails Basics
Ruby On Rails Basics
 
Hanami
HanamiHanami
Hanami
 
New features of rails 5
New features of rails 5New features of rails 5
New features of rails 5
 
I18nize Scala programs à la gettext
I18nize Scala programs à la gettextI18nize Scala programs à la gettext
I18nize Scala programs à la gettext
 
Flickr Architecture Presentation
Flickr Architecture PresentationFlickr Architecture Presentation
Flickr Architecture Presentation
 
How to start using Scala
How to start using ScalaHow to start using Scala
How to start using Scala
 
Myphp-busters: symfony framework
Myphp-busters: symfony frameworkMyphp-busters: symfony framework
Myphp-busters: symfony framework
 
Rango
RangoRango
Rango
 
Myphp-busters: symfony framework (PHPCon.it)
Myphp-busters: symfony framework (PHPCon.it)Myphp-busters: symfony framework (PHPCon.it)
Myphp-busters: symfony framework (PHPCon.it)
 
Automating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 TaiwanAutomating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
Automating Your Daily Tasks with Scripting - RubyConf 2015 Taiwan
 
Bitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRubyBitter Java, Sweeten with JRuby
Bitter Java, Sweeten with JRuby
 
NoSQL for great good [hanoi.rb talk]
NoSQL for great good [hanoi.rb talk]NoSQL for great good [hanoi.rb talk]
NoSQL for great good [hanoi.rb talk]
 
Developing cross platform desktop application with Ruby
Developing cross platform desktop application with RubyDeveloping cross platform desktop application with Ruby
Developing cross platform desktop application with Ruby
 
Ruby and Rails by Example (GeekCamp edition)
Ruby and Rails by Example (GeekCamp edition)Ruby and Rails by Example (GeekCamp edition)
Ruby and Rails by Example (GeekCamp edition)
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)Webpack & EcmaScript 6 (Webelement #32)
Webpack & EcmaScript 6 (Webelement #32)
 

Andere mochten auch

RubyConf Brazil 2010 - Mirah
RubyConf Brazil 2010 - MirahRubyConf Brazil 2010 - Mirah
RubyConf Brazil 2010 - Mirah
Charles Nutter
 

Andere mochten auch (10)

How to write Ruby extensions with Crystal
How to write Ruby extensions with CrystalHow to write Ruby extensions with Crystal
How to write Ruby extensions with Crystal
 
Rubyの拡張をCrystalで書いてみる
Rubyの拡張をCrystalで書いてみるRubyの拡張をCrystalで書いてみる
Rubyの拡張をCrystalで書いてみる
 
Isomorphic App Development with Ruby and Volt - Rubyconf2014
Isomorphic App Development with Ruby and Volt - Rubyconf2014Isomorphic App Development with Ruby and Volt - Rubyconf2014
Isomorphic App Development with Ruby and Volt - Rubyconf2014
 
Building native Android applications with Mirah and Pindah
Building native Android applications with Mirah and PindahBuilding native Android applications with Mirah and Pindah
Building native Android applications with Mirah and Pindah
 
Rejectkaigi 2010
Rejectkaigi 2010Rejectkaigi 2010
Rejectkaigi 2010
 
RubyConf Brazil 2010 - Mirah
RubyConf Brazil 2010 - MirahRubyConf Brazil 2010 - Mirah
RubyConf Brazil 2010 - Mirah
 
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
 
Ruby 風シンタックスな静的言語 Crystal の紹介
Ruby 風シンタックスな静的言語 Crystal の紹介Ruby 風シンタックスな静的言語 Crystal の紹介
Ruby 風シンタックスな静的言語 Crystal の紹介
 
HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向HTTPとサーバ技術の最新動向
HTTPとサーバ技術の最新動向
 
Ruby で高速なプログラムを書く
Ruby で高速なプログラムを書くRuby で高速なプログラムを書く
Ruby で高速なプログラムを書く
 

Ähnlich wie Opal - Ruby Style!! Ruby in the browser

Ruby and Rails short motivation
Ruby and Rails short motivationRuby and Rails short motivation
Ruby and Rails short motivation
jistr
 
Polyglot Plugin Programming
Polyglot Plugin ProgrammingPolyglot Plugin Programming
Polyglot Plugin Programming
Atlassian
 
JRuby - The Best of Java and Ruby
JRuby - The Best of Java and RubyJRuby - The Best of Java and Ruby
JRuby - The Best of Java and Ruby
Evgeny Rahman
 
Scala for android
Scala for androidScala for android
Scala for android
Tack Mobile
 

Ähnlich wie Opal - Ruby Style!! Ruby in the browser (20)

Ruby and Rails short motivation
Ruby and Rails short motivationRuby and Rails short motivation
Ruby and Rails short motivation
 
Polyglot Plugin Programming
Polyglot Plugin ProgrammingPolyglot Plugin Programming
Polyglot Plugin Programming
 
Exploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQLExploring Ruby on Rails and PostgreSQL
Exploring Ruby on Rails and PostgreSQL
 
Polyglot Grails
Polyglot GrailsPolyglot Grails
Polyglot Grails
 
Scala in Model-Driven development for Apparel Cloud Platform
Scala in Model-Driven development for Apparel Cloud PlatformScala in Model-Driven development for Apparel Cloud Platform
Scala in Model-Driven development for Apparel Cloud Platform
 
Rails 3.1
Rails 3.1Rails 3.1
Rails 3.1
 
Ruby Performance - The Last Mile - RubyConf India 2016
Ruby Performance - The Last Mile - RubyConf India 2016Ruby Performance - The Last Mile - RubyConf India 2016
Ruby Performance - The Last Mile - RubyConf India 2016
 
Ruby on rails
Ruby on railsRuby on rails
Ruby on rails
 
Ruby - The Hard Bits
Ruby - The Hard BitsRuby - The Hard Bits
Ruby - The Hard Bits
 
Java to Scala: Why & How
Java to Scala: Why & HowJava to Scala: Why & How
Java to Scala: Why & How
 
Introduction to JRuby
Introduction to JRubyIntroduction to JRuby
Introduction to JRuby
 
Polyglot and Functional Programming (OSCON 2012)
Polyglot and Functional Programming (OSCON 2012)Polyglot and Functional Programming (OSCON 2012)
Polyglot and Functional Programming (OSCON 2012)
 
Modern javascript
Modern javascriptModern javascript
Modern javascript
 
Ruby Metaprogramming 08
Ruby Metaprogramming 08Ruby Metaprogramming 08
Ruby Metaprogramming 08
 
6 reasons Jubilee could be a Rubyist's new best friend
6 reasons Jubilee could be a Rubyist's new best friend6 reasons Jubilee could be a Rubyist's new best friend
6 reasons Jubilee could be a Rubyist's new best friend
 
JRuby - The Best of Java and Ruby
JRuby - The Best of Java and RubyJRuby - The Best of Java and Ruby
JRuby - The Best of Java and Ruby
 
Scala for android
Scala for androidScala for android
Scala for android
 
Rails Vs CakePHP
Rails Vs CakePHPRails Vs CakePHP
Rails Vs CakePHP
 
How DSL works on Ruby
How DSL works on RubyHow DSL works on Ruby
How DSL works on Ruby
 
Ruby on Rails All Hands Meeting
Ruby on Rails All Hands MeetingRuby on Rails All Hands Meeting
Ruby on Rails All Hands Meeting
 

Mehr von Forrest Chang

Mehr von Forrest Chang (9)

Crystal is a Rubyists friend (quick anecdote)
Crystal is a Rubyists friend (quick anecdote)Crystal is a Rubyists friend (quick anecdote)
Crystal is a Rubyists friend (quick anecdote)
 
Making terminal based apps w:ruby
Making terminal based apps w:rubyMaking terminal based apps w:ruby
Making terminal based apps w:ruby
 
Working Effectively with Legacy Javascript code in Opal
Working Effectively with Legacy Javascript code in OpalWorking Effectively with Legacy Javascript code in Opal
Working Effectively with Legacy Javascript code in Opal
 
Opal-hot-reloader
Opal-hot-reloaderOpal-hot-reloader
Opal-hot-reloader
 
Ruby-ying Javascript: Avoiding jQuery Spaghetti
Ruby-ying Javascript: Avoiding jQuery SpaghettiRuby-ying Javascript: Avoiding jQuery Spaghetti
Ruby-ying Javascript: Avoiding jQuery Spaghetti
 
Rubyconf 2014 recap
Rubyconf 2014 recapRubyconf 2014 recap
Rubyconf 2014 recap
 
Opal a new_hope
Opal a new_hopeOpal a new_hope
Opal a new_hope
 
Data Intensive RIAs on Rails with very little code (Netzke)
Data Intensive RIAs on Rails with very little code (Netzke)Data Intensive RIAs on Rails with very little code (Netzke)
Data Intensive RIAs on Rails with very little code (Netzke)
 
Rubyconf2012 recap
Rubyconf2012 recapRubyconf2012 recap
Rubyconf2012 recap
 

Kürzlich hochgeladen

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Kürzlich hochgeladen (20)

08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreterPresentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdfThe Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 

Opal - Ruby Style!! Ruby in the browser

Hinweis der Redaktion

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n
  77. \n
  78. \n
  79. \n
  80. \n
  81. \n
  82. \n
  83. \n