Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜

1,477 views

Published on

https://shuuu-mai.connpass.com/event/103940/ での発表スライドです。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Railsのフロントエンドのトレンドと実際〜事業を進めながら、レールに乗り続けるためのテクニック〜

  1. 1. Rails 2018/11/06 Hiroaki Ninomiya Ruby on Rails
  2. 2. • Hiroaki Ninomiya (@treby006) • Vue.js, AWS(ECS, EMR), Go • Repro •
  3. 3. ( ) • (2013 ) (PHP) • 2015 (Rails) • 2016 (Rails, Django) • 2017 Repro (Rails)
  4. 4. DAU /day Push
  5. 5. https://d1.awsstatic.com/events/jp/2017/summit/devday/D3T7-6.pdf
  6. 6. https://d1.awsstatic.com/events/jp/2017/summit/devday/D3T7-6.pdf
  7. 7. Repro Tech Meetup • 12/4( ) 19:30 Repro •
  8. 8. Frontend Conference Fukuoka • 12/8( ) / 40 • https://frontend-conf.fukuoka.jp/
  9. 9. Agenda • Rails- • •
  10. 10. Agenda • • • • •
  11. 11. !
  12. 12. Rails
  13. 13. Rails 1. 1 (2017 ) 2. 2 (2016 ) 3. 3 (2015 ) 4. 4 (2014 ) 5.
  14. 14. Rails Release • v5.1.0(2017/04): Webpack • v5.0.0(2016/07): Action Cable / Rails API • v4.2.0(2014/12) • v4.0.0(2013/06) • v3.1.0(2012/01): Asset Pipeline
  15. 15. Rails
  16. 16. :
  17. 17. :
  18. 18. 2015, 2016
  19. 19. Rails 4 5
  20. 20. Rails4 (3,4 ) • • Sprockets(Asset Pipeline) • jQuery • CoffeeScript • Rails JavaScript • rails-assets
  21. 21. Rails4 Gemfile source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.0.2' : : # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~> 4.0.0' # Use jquery as the JavaScript library gem 'jquery-rails'
  22. 22. Rails4 $ -> $btn = $("[data-toggle='backToTop']") $btn.hide() $(window).scroll -> if window.scrollY > 100 $btn.fadeIn() else $btn.fadeOut() $btn.on 'click', (e) -> $('html,body').animate({ scrollTop: 0 }, 500)
  23. 23. Rails5 ( 1,2 ) • • Webpack / Browserify • React / Vue.js • Flux • ESNext AltJS • Rails JavaScript
  24. 24. Rails5 Gemfile gem "rails", "5.2.0" : : gem "sass", "3.4.16" # JS translation generator gem "i18n-js", require: false group :assets do : : gem "sassc-rails" gem "browserify-rails" : end
  25. 25. Rails5 import cookie from 'utils/cookie'; import Deactivater from 'mixins/deactivater'; export default { mixins: [Deactivater], data() { return { expanded: true, appListShown: false, }; }, methods: { toggleAppList() { this.appListShown = !this.appListShown; }, closeAppList() { this.appListShown = false; }, : } : };
  26. 26. Rails JS Rails JS
  27. 27. Rails Release • v5.1.0(2017/04) ! Repro • v5.0.0(2016/07): Action Cable / Rails API • v4.2.0(2014/12) • v4.0.0(2013/06) " Repro • v3.1.0(2012/01): Asset Pipeline
  28. 28. Rails
  29. 29. Rails • assets • • jQuery • CoffeeScript ESNext / AltJS
  30. 30. • • • • ( )
  31. 31. • • • •
  32. 32. • Qiita Rails • Rails
  33. 33. • ! • PR • • •
  34. 34. Repro • • Slack / GitHub / esa • •
  35. 35. • Repro • Vuex • or • • package : npm or yarn
  36. 36. esa
  37. 37. esa
  38. 38. esa
  39. 39. esa Repro
  40. 40. • ( ) • 30 • • • •
  41. 41. https://speakerdeck.com/joker1007/realworld- domain-model-on-rails
  42. 42. • Rails • Rails JS Rails JS • Rails
  43. 43. • • • •
  44. 44. Happy Hacking!!

×