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.

Vue.js + Vuexチーム開発実践の事例

2,455 views

Published on

Frontend Conference Fukuoka 2018
https://frontend-conf.fukuoka.jp/sessions#b-7 #fec_fukuoka

Published in: Technology
  • Be the first to comment

Vue.js + Vuexチーム開発実践の事例

  1. 1. Vue.js + Vuex 2018/12/08 Repro Hiroaki Ninomiya Frontend Conference Fukuoka 2018
  2. 2. • ( ) • • 3 •
  3. 3. • ( ) • • 3 • #
  4. 4. • Hiroaki Ninomia a.k.a treby • Repro • Shinjuku.rb Organizer • Ruby • ( )
  5. 5. • • •
  6. 6. • • • • • •
  7. 7. Repro • 2014 • https://repro.io/ • BtoB SaaS • Repro SDK • • •
  8. 8. https://prtimes.jp/main/html/rd/p/000000072.000013569.html
  9. 9. DAU /day Push
  10. 10. • AWS • • Ruby(Rails) • Python(AI ) • Golang( ) • ( )Ruby • Ruby CTO
  11. 11. • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
  12. 12. • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
  13. 13. • 8 • •
  14. 14. ( ) • • Vue.js / Vuex • ES6 • (jQuery) • • Ruby on Rails
  15. 15. Vuejs • Progressive Framework • Declarative Rendering • Two-way Binding • An incrementally adoptable Ecosystem •
  16. 16. Vuex • Vue.js Vue.js • Flux • Repro
  17. 17. Ruby on Rails (Rails) • • (Convention over Configuration) • Rails • • SDK API
  18. 18. • • • •
  19. 19. • • • • • =>
  20. 20. • • •
  21. 21. Vue.js • v0.10.4(2014/4) • v1.0.0(2015/10) • v2.0.0(2016/10)
  22. 22. • • Repro 2014 Vue.js • • 0 1 1 2 • Vue.js
  23. 23. (Rails ) • v4.0.0(2013/06): Ruby JavaScript • v4.2.0(2014/12) • v5.0.0(2016/07): Action Cable / Rails API • v5.1.0(2017/04): Webpack / jQuery default • v5.2.0(2018/04) • v6.0.0( ): CoffeeScript ES6 • https://github.com/rails/rails/pull/33079
  24. 24. Rails4 (3,4 ) • • Sprockets(Asset Pipeline) • jQuery • CoffeeScript • Rails JavaScript • rails-assets
  25. 25. Rails Assets • Rails Assets is the frictionless proxy between Bundler and Bower. • xxx-rails • JavaScript ( ) • rails-assets-xxx Gem
  26. 26. Rails4 Gemfile source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.0.2' : : gem 'rails-assets-vue' # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~> 4.0.0' # Use jquery as the JavaScript library gem 'jquery-rails'
  27. 27. 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)
  28. 28. Rails5 ( 1,2 ) • • Webpack / Browserify • React / Vue.js • Flux • ESNext AltJS • Rails JavaScript
  29. 29. Rails 5.0 https://edgeguides.rubyonrails.org/50release_notes.html
  30. 30. Rails 5.0 • Action Cable • Rails API • Active Record Attributes API • Test Runner • Exclusive use of rails CLI over Rake • Sprockets 3 • Turbolinks 5 • Ruby 2.2.2+ required
  31. 31. Rails 5.1 https://edgeguides.rubyonrails.org/51release_notes.html
  32. 32. Rails 5.1 • Yarn Support • Optional Webpack support • jQuery no longer a default dependency • System tests • Encrypted secrets • Parameterized mailers • Direct & resolved routes • Unification of formfor and formtag into form_with
  33. 33. ( Rails6 ) https://github.com/rails/rails/pull/33079
  34. 34. !
  35. 35. 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
  36. 36. 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; }, : } : };
  37. 37. • Rails4 • Rails JS • Rails5 • Rails JS • Rails
  38. 38. ( ) • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
  39. 39. ( ) • 8 • SDK / Server Server (SDK ) • • •
  40. 40. • • Q • •
  41. 41. • • • • •
  42. 42. Repro • 4 • • • •
  43. 43. Repro
  44. 44. ( 2015 ) • • • Rails • CoffeeScript + jQuery / Ruby • • backbone.js / Vue.js 0.10 • jQuery Vue.js
  45. 45. ( 2015 )
  46. 46. ( 2015 ) • • • • ( ) •
  47. 47. Repro
  48. 48. ( 2017 ) • • / • Rails • Rails 5 / • • Vue.js 1 & Vue.js 2, Vuex • ES6
  49. 49. ( 2017 ) • • • ES6 • ES6 Browserify Sprockets • CoffeeScript ES6
  50. 50. ( 2017 )
  51. 51. ( 2017 )
  52. 52. ( 2017 )
  53. 53. ( 2017 )
  54. 54. ( 2017 )
  55. 55. ( 2017 ) • • • • • CoffeeScript jQuery •
  56. 56. Repro
  57. 57. ( 2018 ) • • 20 Daily • • Rails • Rails5.1 • • / npm v5 •
  58. 58. ( 2018 ) • • • • CoffeeScript ES6 • Vue component jQuery • Vue component
  59. 59. Rails 5.1 ( ) https://edgeguides.rubyonrails.org/51release_notes.html
  60. 60. ( 2018 ) • • • CoffeeScript ES6 • JavaScript Vue component
  61. 61. ( 2018 )
  62. 62. ( 2018 )
  63. 63. ( 2018 )
  64. 64. ( 2018 )
  65. 65. ( 2018 )
  66. 66. ( 2018 )
  67. 67. ( 2018 ) • • • CoffeeScript ES6 • JavaScript Vue component •
  68. 68. Repro
  69. 69. (2018 ) • • Web SDK • • Rails • • Webpack • • Vue.js / React / Angular2
  70. 70. Repro Web https://jp.techcrunch.com/2018/10/04/reproweb/
  71. 71. (2018 ) • • • Repro • • Repro Web
  72. 72. ( )
  73. 73. ( )
  74. 74. (2018 ) • • • • • Pull Request • /
  75. 75. Repro
  76. 76. Repro
  77. 77. ( (2019 )) • • •
  78. 78. /
  79. 79. /
  80. 80. • • • • • •
  81. 81. ( )
  82. 82. Pull Request
  83. 83. • • • • Repro
  84. 84. • • • •
  85. 85. • • • • • => We're Hiring!!

×