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

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

12. https://prtimes.jp/main/html/rd/p/000000072.000013569.html

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

40. Rails 5.0
https://edgeguides.rubyonrails.org/50release_notes.html

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

42. Rails 5.1
https://edgeguides.rubyonrails.org/51release_notes.html

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

44. ( Rails6 )
https://github.com/rails/rails/pull/33079

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. •
•
•
•
•

58. Repro
• 4
•
•
•
•

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

87. Repro Web
https://jp.techcrunch.com/2018/10/04/reproweb/

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