Opal.rb

Transcript

1. Opal Michał Kalbarczyk
2. What is Opal ?
3. How to install ? $ gem install opal gem ‚opal’ or
4. How to use ? opal file.rb opal -c file.rb opal-repl Opal.compile(„[1, 2, 3].each { |a| puts a }")
5. How to use ? rake sprockets rails
6. Build with rake # Rakefile require 'opal' desc "Build our app to build.js" task :build do Opal.append_path "app" File.binwrite "build.js", Opal::Builder.build("application").to_s end
7. Build with sprockets # config.ru sprockets = Sprockets::Environment.new.tap do |s| # register opal s.register_engine '.rb', Opal::Processor # add folders s.append_path 'app' # add paths from opal Opal.paths.each do |p| s.append_path p end end map '/' do run sprockets end
8. What about Rails ? gem ’opal-rails’ rails new <app-name> --javascript=opal
9. Compiled Code nil -> nil true -> true false -> false self -> this(self) String, Symbol -> String Integer, Float, Numeric -> Numeric Array -> Array Hash -> __hash(key,value) Range -> __range(start,end,exclude) @val -> this.val method_missing -> Opal.add_stubs()
10. Javascript from Ruby Inline Javasctipt Native Module `window.title` # => "Opal: Ruby to Javascript compiler" %x{ console.log("opal version is:"); console.log(#{ RUBY_ENGINE_VERSION }); } # => opal version is: # => 0.7.0 class Array def length `this.length` end end require 'native' window = Native(`window`) # equivalent to Native::Object.new(`window`) window[:location][:href] # => "http://localhost/" window[:location][:href] = "http://localhost/" # redirect to localhost
11. Ruby to Javascript class Foo def bar puts "sample class" end end Opal.Foo.$new().$bar(); // => "sample class" var myHash = Opal.hash({a: 1, b: 2}); // output of $inspect: {"a"=>1, "b"=>2} myHash.$store('a', 10); // output of $inspect: {"a"=>10, "b"=>2} myHash.$fetch('b',''); // 2 myHash.$fetch('z',''); // "" myHash.$update(Opal.hash({b: 20, c: 30})); // output of $inspect: {"a"=>10, "b"=>20, "c"=>30} myHash.$to_n(); // provided by the Native module // output: {"a": 10, "b": 20, "c": 30} aka a standard Javascript object
12. jQuery require 'opal' require 'jquery' require 'opal-jquery' foos = Element.find('.foo') # => [<div class="foo">, ...] foos.class # => JQuery foos.on(:click) do alert "element was clicked" end HTTP.get("/users/1.json") do |response| puts response.body # => "{\"name\": \"Adam Beynon\"}" puts response.json # => {name: "Adam Beynon"} end Document.ready? do puts "Hello World" # Log to javascript console end
13. Promises require 'promise' def get_json(url) promise = Promise.new HTTP.get(url) do |response| if response.ok? promise.resolve response.json else promise.reject response end end promise end get_json('/users/1.json').then do |json| puts "Got data: #{json}" end.fail do |res| alert "It didn't work :( #{res}" end # chaining promises get_json('/users/1.json').then do |json| get_json("/posts/#{json[:post_id]}.json") end.then do |post| puts "got post: #{post}" end # composing primises first = get_json '/users/1.json' second = get_json '/users/2.json' Promise.when(first, second) .then do |user1, user2| puts "got users: #{user1}, #{user2}" end.fail do alert "Something bad happened" end end
14. Spec (in Rails) # app/assets/javascripts/spec/example_spec.js.rb describe 'a spec' do it 'has successful examples' do 'I run'.should =~ /run/ end end
15. Unsupported Features source_maps (only 0.7.0) mutable strings (#<<, #gsub!) encodings threads frozen objects private, protected methods
16. Frameworks volt (ruby both sides) vienna (browser) clearwater (browser) react.rb opal-native opal-phaser rubyfire.io ???
17. Demo and Thank You !