Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Vue.js + Vuex
2018/12/08
Repro Hiroaki Ninomiya
Frontend Conference Fukuoka 2018
• ( )
•
• 3
•
• ( )
•
• 3
•
#
• Hiroaki Ninomia a.k.a treby
• Repro
• Shinjuku.rb Organizer
• Ruby
• ( )
•
•
•
•
•
•
•
•
•
Repro
• 2014
• https://repro.io/
• BtoB SaaS
• Repro SDK
•
•
•
https://prtimes.jp/main/html/rd/p/000000072.000013569.html
DAU
/day Push
• AWS
•
• Ruby(Rails)
• Python(AI )
• Golang( )
• ( )Ruby
• Ruby CTO
• 6
• SDK (iOS / Android)
•
•
•
• AI
• CRE( )
• QA
• 6
• SDK (iOS / Android)
•
•
•
• AI
• CRE( )
• QA
• 8
•
•
( )
•
• Vue.js / Vuex
• ES6
• (jQuery)
•
• Ruby on Rails
Vuejs
• Progressive Framework
• Declarative Rendering
• Two-way Binding
• An incrementally adoptable Ecosystem
•
Vuex
• Vue.js Vue.js
• Flux
• Repro
Ruby on Rails (Rails)
•
• (Convention over Configuration)
• Rails
•
• SDK API
•
•
•
•
•
•
•
•
• =>
•
•
•
Vue.js
• v0.10.4(2014/4)
• v1.0.0(2015/10)
• v2.0.0(2016/10)
•
• Repro 2014 Vue.js
•
• 0 1 1 2
• Vue.js
(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...
Rails4 (3,4 )
•
• Sprockets(Asset Pipeline)
• jQuery
• CoffeeScript
• Rails JavaScript
• rails-assets
Rails Assets
• Rails Assets is the frictionless proxy between Bundler and
Bower.
• xxx-rails
• JavaScript ( )
• rails-asse...
Rails4 Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '...
Rails4
$ ->
$btn = $("[data-toggle='backToTop']")
$btn.hide()
$(window).scroll ->
if window.scrollY > 100
$btn.fadeIn()
el...
Rails5 ( 1,2 )
•
• Webpack / Browserify
• React / Vue.js
• Flux
• ESNext AltJS
• Rails JavaScript
Rails 5.0
https://edgeguides.rubyonrails.org/50release_notes.html
Rails 5.0
• Action Cable
• Rails API
• Active Record Attributes API
• Test Runner
• Exclusive use of rails CLI over Rake
•...
Rails 5.1
https://edgeguides.rubyonrails.org/51release_notes.html
Rails 5.1
• Yarn Support
• Optional Webpack support
• jQuery no longer a default dependency
• System tests
• Encrypted sec...
( Rails6 )
https://github.com/rails/rails/pull/33079
!
Rails5 Gemfile
gem "rails", "5.2.0"
:
:
gem "sass", "3.4.16"
# JS translation generator
gem "i18n-js", require: false
group...
Rails5
import cookie from 'utils/cookie';
import Deactivater from 'mixins/deactivater';
export default {
mixins: [Deactiva...
• Rails4
• Rails JS
• Rails5
• Rails JS
• Rails
( )
• 6
• SDK (iOS / Android)
•
•
•
• AI
• CRE( )
• QA
( )
• 8
• SDK / Server Server (SDK )
•
•
•
•
• Q
•
•
•
•
•
•
•
Repro
• 4
•
•
•
•
Repro
( 2015 )
•
•
• Rails
• CoffeeScript + jQuery / Ruby
•
• backbone.js / Vue.js 0.10
• jQuery Vue.js
( 2015 )
( 2015 )
•
•
•
• ( )
•
Repro
( 2017 )
•
• /
• Rails
• Rails 5 /
•
• Vue.js 1 & Vue.js 2, Vuex
• ES6
( 2017 )
•
•
• ES6
• ES6 Browserify Sprockets
• CoffeeScript ES6
( 2017 )
( 2017 )
( 2017 )
( 2017 )
( 2017 )
( 2017 )
•
•
•
•
• CoffeeScript jQuery
•
Repro
( 2018 )
•
• 20 Daily
•
• Rails
• Rails5.1
•
• / npm v5
•
( 2018 )
•
•
•
• CoffeeScript ES6
• Vue component jQuery
• Vue component
Rails 5.1 ( )
https://edgeguides.rubyonrails.org/51release_notes.html
( 2018 )
•
•
• CoffeeScript ES6
• JavaScript Vue component
( 2018 )
( 2018 )
( 2018 )
( 2018 )
( 2018 )
( 2018 )
( 2018 )
•
•
• CoffeeScript ES6
• JavaScript Vue component
•
Repro
(2018 )
•
• Web SDK
•
• Rails
•
• Webpack
•
• Vue.js / React / Angular2
Repro Web
https://jp.techcrunch.com/2018/10/04/reproweb/
(2018 )
•
•
• Repro
•
• Repro Web
( )
( )
(2018 )
•
•
•
•
• Pull Request
• /
Repro
Repro
( (2019 ))
•
•
•
/
/
•
•
•
•
•
•
( )
Pull Request
•
•
•
• Repro
•
•
•
•
•
•
•
•
• => We're Hiring!!
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Nächste SlideShare
Wird geladen in …5
×

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

3.210 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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!!

×