O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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チーム開発実践の事例
Próximos SlideShares
Carregando em…5
×

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

3.212 visualizações

Publicada em

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

Publicada em: Tecnologia
  • Seja o primeiro a comentar

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

×