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 ことはじめ
2. 松島 史秋 GitHub, Twitter @mtsmfm
5. Ruby で JS !
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
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
8. opal filter
9. doctype html html head title opal sample script(src='assets/opal.js') body h1 Hello world opal: puts 'Hello world'
11. opal-parser
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'
14. opal-jquery
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
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
18. Ruby で JS
19. gem も
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
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?
23. べんり!
25. number_to_humansize 使いたい
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)
29. - 非対応の機能 http://opalrb.org/docs/unsupported_features/ - String の破壊的変更 - Thread - 一部 stdlib が未実装 - BigDecimal とか
30. class BigDecimal class << self def new(val) `Number(#{val})` end end end def BigDecimal(value) BigDecimal.new(value) end `` で直接 js
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
33. 既存の ruby の資産を そのまま生かすのは まだ難しそう