opal beginning

Ruby合同勉強会@Sansan 発表資料

http://connpass.com/event/14398

https://github.com/mtsmfm/sandbox/tree/master/opal/opal_test

#sansan_esm

Transcript

1. (株)永和システムマネジメント
   @mtsmfm
   松島 史秋
   Opal ことはじめ
   

   View Slide

2. 松島 史秋
   GitHub, Twitter
   @mtsmfm
   

   View Slide

3. View Slide

4. View Slide

5. Ruby で
   JS !
   

   View Slide

6. source 'https://rubygems.org'
   gem 'activesupport'
   gem 'opal'
   gem 'opal-jquery'
   gem 'pry-byebug'
   gem 'slim'
   gem 'sprockets'
   source 'https://rails-assets.org' do
   gem 'rails-assets-jquery'
   end
   Gemfile
   

   View Slide

7. require 'bundler'
   Bundler.require
   map '/assets' do
   environment = Sprockets::Environment.new
   environment.append_path 'app/js'
   RailsAssets.load_paths.each {|p| environment.append_path(p) }
   Opal.paths.each {|p| environment.append_path(p) }
   run environment
   end
   map '/' do
   environment = Sprockets::Environment.new
   environment.append_path 'app/html'
   environment.register_engine '.slim', Slim::Template
   run environment
   end
   config.ru
   

   View Slide

8. opal filter
   

   View Slide

9. doctype html
   html
   head
   title opal sample
   script(src='assets/opal.js')
   body
   h1 Hello world
   opal:
   puts 'Hello world'
   

   View Slide

10. View Slide

11. opal-parser
    

    View Slide

12. doctype html
    html
    head
    title opal sample
    script(src='assets/opal.js')
    script(src='assets/opal-parser.js')
    body
    h1 Hello world
    script(type='text/ruby')
    |
    puts 'Hello world'
    

    View Slide

13. View Slide

14. opal-jquery
    

    View Slide

15. doctype html
    html
    head
    title opal sample
    script(src='assets/opal.js')
    script(src='assets/jquery.js')
    script(src='assets/opal-jquery.js')
    script(src='assets/opal-parser.js')
    body
    button
    | click me
    script(type='text/ruby')
    |
    Document.ready? do
    Element.find('button').on(:click) do |evt|
    h1 = Element.new(:h1)
    h1.text = 'Hello world'
    Element.find('body').append(h1)
    evt.current_target.remove
    end
    end
    

    View Slide

16. require 'bundler'
    Bundler.require
    map '/assets' do
    environment = Sprockets::Environment.new
    environment.append_path 'app/js'
    RailsAssets.load_paths.each {|p| environment.append_path(p) }
    Opal.use_gem 'opal-jquery'
    Opal.paths.each {|p| environment.append_path(p) }
    run environment
    end
    map '/' do
    environment = Sprockets::Environment.new
    environment.append_path 'app/html'
    environment.register_engine '.slim', Slim::Template
    run environment
    end
    config.ru
    

    View Slide

17. View Slide

18. Ruby で
    JS
    

    View Slide

19. gem も
    

    View Slide

20. require 'bundler'
    Bundler.require
    map '/assets' do
    environment = Sprockets::Environment.new
    environment.append_path 'app/js'
    RailsAssets.load_paths.each {|p| environment.append_path(p) }
    Opal.use_gem 'activesupport'
    Opal.use_gem 'opal-jquery'
    Opal.paths.each {|p| environment.append_path(p) }
    run environment
    end
    map '/' do
    environment = Sprockets::Environment.new
    environment.append_path 'app/html'
    environment.register_engine '.slim', Slim::Template
    run environment
    end
    config.ru
    

    View Slide

21. doctype html
    html
    head
    title opal sample
    script(src='assets/opal.js')
    script(src='assets/jquery.js')
    script(src='assets/opal-jquery.js')
    script(src='assets/active_support/core_ext/object/blank.js')
    body
    .ruby nil.blank?
    .opal
    opal:
    Element.find('.opal').text = nil.blank?
    

    View Slide

22. View Slide

23. べんり!
    

    View Slide

24. View Slide

25. number_to_humansize
    使いたい
    

    View Slide

26. doctype html
    html
    head
    title opal sample
    script(src='assets/opal.js')
    script(src='assets/jquery.js')
    script(src='assets/opal-jquery.js')
    script(src='assets/active_support/all.js')
    body
    .ruby ActiveSupport::NumberHelper.number_to_human_size(1234)
    .opal
    opal:
    Element.find('.opal').text =
    ActiveSupport::NumberHelper.number_to_human_size(1234)
    

    View Slide

27. View Slide

28. View Slide

29. - 非対応の機能
    http://opalrb.org/docs/unsupported_features/
    - String の破壊的変更
    - Thread
    - 一部 stdlib が未実装
    - BigDecimal とか
    

    View Slide

30. class BigDecimal
    class << self
    def new(val)
    `Number(#{val})`
    end
    end
    end
    def BigDecimal(value)
    BigDecimal.new(value)
    end
    `` で直接 js
    

    View Slide

31. module ActiveSupport
    module NumberHelper
    class NumberToDelimitedConverter
    private
    def parts
    left, right = number.to_s.split('.')
    left = left.gsub(DELIMITED_REGEX) do
    |digit_to_delimit|
    "#{digit_to_delimit}#{options[:delimiter]}"
    end
    [left, right].compact
    end
    end
    end
    end
    gsub! -> gsub
    

    View Slide

32. View Slide

33. 既存の ruby の資産を
    そのまま生かすのは
    まだ難しそう
    

    View Slide