Vue.js + Vuexチーム開発実践の事例
3 likes4,194 views
This document summarizes Hiroaki Ninomiya's presentation on using Vue.js and Vuex at Repro. It discusses Repro's transition from Rails with CoffeeScript and jQuery to Rails 5 with ES6, Webpack, and Vue components. It describes moving from Sprockets to Webpack and adopting Vue.js and Vuex for frontend development. It also mentions Repro's expansion into a web SDK and recent product launches.
![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)](https://image.slidesharecdn.com/fecf2018-181208064652/85/Vue-js-Vuex-38-320.jpg)
![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;
},
:
}
:
};](https://image.slidesharecdn.com/fecf2018-181208064652/85/Vue-js-Vuex-47-320.jpg)
Vue.js + Vuexチーム開発実践の事例
- 1. Vue.js + Vuex 2018/12/08 Repro Hiroaki Ninomiya Frontend Conference Fukuoka 2018
- 3. • ( ) • • 3 •
- 4. • ( ) • • 3 • #
- 5. • Hiroaki Ninomia a.k.a treby • Repro • Shinjuku.rb Organizer • Ruby • ( )
- 6. • • •
- 7. • • • • • •
- 9. Repro • 2014 • https://repro.io/ • BtoB SaaS • Repro SDK • • •
- 14. DAU /day Push
- 17. • AWS • • Ruby(Rails) • Python(AI ) • Golang( ) • ( )Ruby • Ruby CTO
- 18. • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
- 19. • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
- 20. • 8 • •
- 21. ( ) • • Vue.js / Vuex • ES6 • (jQuery) • • Ruby on Rails
- 22. Vuejs • Progressive Framework • Declarative Rendering • Two-way Binding • An incrementally adoptable Ecosystem •
- 23. Vuex • Vue.js Vue.js • Flux • Repro
- 24. Ruby on Rails (Rails) • • (Convention over Configuration) • Rails • • SDK API
- 25. • • • •
- 26. • • • • • =>
- 28. • • •
- 32. Vue.js • v0.10.4(2014/4) • v1.0.0(2015/10) • v2.0.0(2016/10)
- 33. • • Repro 2014 Vue.js • • 0 1 1 2 • Vue.js
- 34. (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
- 35. Rails4 (3,4 ) • • Sprockets(Asset Pipeline) • jQuery • CoffeeScript • Rails JavaScript • rails-assets
- 36. Rails Assets • Rails Assets is the frictionless proxy between Bundler and Bower. • xxx-rails • JavaScript ( ) • rails-assets-xxx Gem
- 37. 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'
- 38. 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)
- 39. Rails5 ( 1,2 ) • • Webpack / Browserify • React / Vue.js • Flux • ESNext AltJS • Rails JavaScript
- 41. 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
- 43. 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
- 45. !
- 46. 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
- 47. 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; }, : } : };
- 48. • Rails4 • Rails JS • Rails5 • Rails JS • Rails
- 49. ( ) • 6 • SDK (iOS / Android) • • • • AI • CRE( ) • QA
- 50. ( ) • 8 • SDK / Server Server (SDK ) • • •
- 52. • • Q • •
- 56. • • • • •
- 59. Repro
- 60. ( 2015 ) • • • Rails • CoffeeScript + jQuery / Ruby • • backbone.js / Vue.js 0.10 • jQuery Vue.js
- 61. ( 2015 )
- 62. ( 2015 ) • • • • ( ) •
- 63. Repro
- 64. ( 2017 ) • • / • Rails • Rails 5 / • • Vue.js 1 & Vue.js 2, Vuex • ES6
- 65. ( 2017 ) • • • ES6 • ES6 Browserify Sprockets • CoffeeScript ES6
- 66. ( 2017 )
- 67. ( 2017 )
- 68. ( 2017 )
- 69. ( 2017 )
- 70. ( 2017 )
- 71. ( 2017 ) • • • • • CoffeeScript jQuery •
- 72. Repro
- 73. ( 2018 ) • • 20 Daily • • Rails • Rails5.1 • • / npm v5 •
- 74. ( 2018 ) • • • • CoffeeScript ES6 • Vue component jQuery • Vue component
- 75. Rails 5.1 ( ) https://edgeguides.rubyonrails.org/51release_notes.html
- 76. ( 2018 ) • • • CoffeeScript ES6 • JavaScript Vue component
- 77. ( 2018 )
- 78. ( 2018 )
- 79. ( 2018 )
- 80. ( 2018 )
- 81. ( 2018 )
- 82. ( 2018 )
- 83. ( 2018 ) • • • CoffeeScript ES6 • JavaScript Vue component •
- 84. Repro
- 85. (2018 ) • • Web SDK • • Rails • • Webpack • • Vue.js / React / Angular2
- 88. (2018 ) • • • Repro • • Repro Web
- 92. ( )
- 93. ( )
- 94. (2018 ) • • • • • Pull Request • /
- 95. Repro
- 96. Repro
- 97. ( (2019 )) • • •
- 98. /
- 99. /
- 100. • • • • • •
- 105. ( )
- 106. Pull Request
- 107. • • • • Repro
- 108. • • • •
- 109. • • • • • => We're Hiring!!