Vue.js Recent Trends

Transcript

1. Vue.js
   Recent Trends
   Tokyo Node Academy #20
   2016-04-05
   @kazupon
   (updated: 2016-04-07)
   

   View Slide

2. Who are you?
   • GitHub: kazupon
   • Twitter: kazu_pon
   • Company: CUUSOO SYSTEM
   • Position: CTO (Full-Stack)
   

   View Slide

3. OSS Contributions
   • Vue.js organization (vuejs team)
   • Vue.js official site for Japanese
   • Vue.js plugins
   • vue-validator
   • vue-i18n
   • Maintenance and Translate Vue.js
   official repositories
   

   View Slide

4. Introduction
   

   View Slide

5. Introduction
   

   View Slide

6. To Speak Today
   • 2015, Vue.js became rapidly popular
   • 2016, it has been further growth,
   Recently, Vue.js organization changed
   • Today, I speak about the recent trends
   while looking back the past history of
   Vue.js
   

   View Slide

7. View Slide

8. Jul 28 2013
   

   View Slide

9. Spawn
   Jul 28, 2013
   Project “seed”
   2013 2014 2015 2016
   

   View Slide

10. Author
    • Name: Evan you
    • GitHub: @yyx990803
    • Works:

    Google Creative labs
    • Start development

    as personal project

    and personal GitHub
    repository
    

    View Slide

11. Initial codes
    • README.md
    

    View Slide

12. Initial codes
    • Examples
    http://bit.ly/1SomDGp
    That’s
    personally project
    codes!!

    Angular.js Like!!
    

    View Slide

13. Aug 10 2013
    

    View Slide

14. First Release
    2013 2014 2015 2016
    spawn
    

    View Slide

15. Go through some
    release
    

    View Slide

16. Aug 16 2013
    

    View Slide

17. Release 0.2
    2013 2014 2015 2016
    spawn
    0.1
    

    View Slide

18. Aug 25 2013
    

    View Slide

19. Release 0.3
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    

    View Slide

20. Oct 18 2013
    

    View Slide

21. Release 0.4
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    

    View Slide

22. Nov 16 2013
    

    View Slide

23. Release 0.5
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    

    View Slide

24. And
    Dec 8 2013
    Release 0.6
    

    View Slide

25. Rename to Vue.js
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    

    View Slide

26. Vue.js is born!!
    
    

    View Slide

27. Publish into NPM
    

    View Slide

28. After that
    

    View Slide

29. Dec 24 2013
    

    View Slide

30. Release 0.7
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    

    View Slide

31. View Slide

32. Jan 27 2014
    

    View Slide

33. Release 0.8
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    

    View Slide

34. Launch Preparation
    • Marketing Plan for Media
    • WebSite & Documentation (vuejs.org)
    • Tests
    

    View Slide

35. Feb 3 2014
    

    View Slide

36. First Launch!!
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    Feb 3, 2014
    - HackerNews
    - Reddit
    - EchoJS
    - The DailyJS Blog
    - JavaScript Weekly

    - Twitter (@vuejs)

    

    View Slide

37. As result of
    First Launch
    

    View Slide

38. Acquisition stats
    • vuejs.org unique visits:
    26,809
    • GitHub Stars:

    615
    • Github unique visits:
    399
    http://blog.evanyou.me/2014/02/11/first-week-of-launching-an-oss-project/
    

    View Slide

39. At the time,
    In Japan
    

    View Slide

40. Feb 14 2014
    

    View Slide

41. http://mizchi.hatenablog.com/entry/2014/02/13/153742
    

    View Slide

42. Post a blog!!
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    

    View Slide

43. Beginning to spread
    amongst
    front-end engineers
    

    View Slide

44. Furthermore
    release
    

    View Slide

45. Feb 25 2014
    

    View Slide

46. 0.9: Animatrix
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    Begin to naming
    the code-name to
    major version
    from this version
    

    View Slide

47. Mar 24 2014
    

    View Slide

48. 0.10: Blade Runner
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    

    View Slide

49. Nov 7 2014
    

    View Slide

50. 0.11: Cowboy Bebop
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    Re-Implementation
    from Full
    Scratch!!
    

    View Slide

51. Nov 2014
    

    View Slide

52. Join to Meteor!!
    https://www.linkedin.com/in/evanyou
    

    View Slide

53. View Slide

54. Jan 28 2015
    

    View Slide

55. Vue.js Meetup In Japan
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Organized the
    small meetup!!
    http://connpass.com/event/10862/
    

    View Slide

56. Jan 30 2015
    

    View Slide

57. Joined to Vue.js organization
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    As maintainer of vuejs/vue-validator
    https://github.com/vuejs/vue-validator/pull/1
    Meetup
    in JP
    

    View Slide

58. Feb 2015
    

    View Slide

59. Kick-off Translation vuejs.org
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    https://twitter.com/kazu_pon/status/569413613431099392
    Start vuejs.org
    translation
    project!!
    

    View Slide

60. Apl 20 2015
    

    View Slide

61. View Slide

62. Adoption in the Laravel Community
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel author
    adopted the
    Vue.js!!
    https://twitter.com/taylorotwell/status/590281695581982720
    

    View Slide

63. Creation of Laravel Product
    http://koel.phanan.net
    

    View Slide

64. May 23 2015
    

    View Slide

65. Contribution from Pagekit
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    https://github.com/vuejs/vue/issues/859
    Joined to vuejs
    orgnaization
    as maintainer of
    vue-resource
    

    View Slide

66. Affected with Laravel
    

    View Slide

67. May 26 2015
    

    View Slide

68. Inauguration vuejs-jp
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    https://github.com/vuejs-jp
    With Translation
    project members!!
    

    View Slide

69. May 27 2015
    

    View Slide

70. Organized event with vuejs-jp
    http://vuejs-meetup.connpass.com/event/14017/
    

    View Slide

71. Jun 13 2015
    

    View Slide

72. 0.12: Dragon Ball
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    Many improvements
    &
    New Features!!
    

    View Slide

73. Jun 17 2015
    

    View Slide

74. Published jp.vuejs.org
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Included 0.12
    latest !!
    

    View Slide

75. Template syntax
    overhaul for 1.0
    

    View Slide

76. Discussion of template syntax
    https://github.com/vuejs/vue/issues/1308
    

    View Slide

77. Oct 2015
    

    View Slide

78. Opened Vue.js Discussion forum
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Solved the
    communication
    problem between
    the languages!!
    http://forum.vuejs.org
    

    View Slide

79. Oct 20 2015
    

    View Slide

80. Opened awesome-vue
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Eco-system
    Preparation!!
    https://github.com/vuejs/awesome-vue
    

    View Slide

81. Oct 25 2015
    

    View Slide

82. Post a blog
    http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
    

    View Slide

83. Oct 27 2015
    

    View Slide

84. View Slide

85. 1.0: Evangelion
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Provide Fully
    backward-
    compatibility!!
    https://twitter.com/hashedrock/status/660148402584326144
    

    View Slide

86. 1.0 released in
    conjunction with …
    

    View Slide

87. Published en/jp Official Sites
    

    View Slide

88. As result of 1.0
    release
    

    View Slide

89. Hacker News
    • Release post stayed
    on the front page
    • Gathering more than
    300 upvotes!!
    

    View Slide

90. NPM donwload
    http://npm-stat.com/charts.html?package=vue&author=&from=2015-01-01&to=2015-12-31
    

    View Slide

91. GitHub star
    • 7.6k+ growth since
    Feb 2015
    • A total of ~3.6k
    stars in its first
    year

    (Feb 2014 - Feb
    2015)
    • Ranked in the
    Github Trending!!
    

    View Slide

92. vuejs.org stats
    • Page views: 3,761,728 ytd
    • Unique visitors: 363,365 ytd
    • 30 Day Active Users: 76,090 current

    

    (NOTE: Dec 20 2014 - Dec 20 2015)
    http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/
    

    View Slide

93. Affected with 1.0 release
    

    View Slide

94. Release 1.0 later
    &
    2016
    

    View Slide

95. Growing

    Eco-System
    

    View Slide

96. Nov 8 2015
    

    View Slide

97. Published the VueServer.js
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Also same Vue.js
    I/F at the
    server-side!!
    https://github.com/ngsru/vue-server
    1.0
    

    View Slide

98. Nov 28 2015
    

    View Slide

99. Published vuex on GitHub Repo
    2013 2014 2015 2016
    spawn
    0.1
    0.2
    0.3
    0.4
    0.5
    0.6
    0.7
    0.8
    First
    Launch
    0.9
    0.10
    0.11
    Meetup
    in JP
    Laravel
    0.12
    Flux-inspired
    Application
    Architecture for
    Vue.js
    https://github.com/vuejs/vuex
    1.0
    

    View Slide

100. Dec 29 2015
     

     View Slide

101. Javascript Fatigue
     https://medium.com/@ericclemmons/javascript-fatigue-48d4011b6fc4#.jqxo59evz
     

     View Slide

102. Published vue-cli
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12
     A simple CLI for
     scaffolding Vue.js
     projects
     &
     Provide templates
     https://github.com/vuejs/vue-cli
     1.0
     

     View Slide

103. Podcast
     

     View Slide

104. Appeared in PodCasts!!
     • Full Stack Radio #30
     (11-23-2015)
     • JavaScript Jabber #187
     (11-25-2015)
     • Changelog #184
     (11-27-2015)
     • Software Engineering
     Daily (12-29-2015)
     • Javascript Air 016
     (03-30-2016)
     https://github.com/vuejs/awesome-vue#podcasts
     

     View Slide

105. Meetup events
     

     View Slide

106. Jan 4 2016
     

     View Slide

107. London Vuejs #1
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12
     http://www.meetup.com/London-Vue-js-Meetup/
     1.0
     

     View Slide

108. Vuejs Paris #1
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12
     http://www.meetup.com/Vuejs-Paris/
     1.0
     

     View Slide

109. Vuejs Paris #1
     

     View Slide

110. Book
     

     View Slide

111. First technical book
     https://leanpub.com/vuejs/
     

     View Slide

112. Feb 2016
     

     View Slide

113. Published it.vuejs.org
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12 1.0
     

     View Slide

114. We had been became
     difficult to support,
     because of rapid growth …
     

     View Slide

115. Mar 14 2016
     

     View Slide

116. Post a blog
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12
     http://vuejs.org/2016/03/14/march-update/
     1.0
     

     View Slide

117. Looking for collaborators!!
     https://docs.google.com/forms/d/1SgDgKZqyivEf5xl0EOWNfs68Xy3f4oBzLXIlwlS0BIs/viewform
     

     View Slide

118. Looking for sponsors!!
     https://www.patreon.com/evanyou?ty=h
     

     View Slide

119. Mar 16 2016
     

     View Slide

120. AMA at HashNode
     https://hashnode.com/ama/with-evan-you-cilauq0uu0027tl53gsjkhbmd
     

     View Slide

121. Exploring the Vue.js fulltime
     Left Meteor!!
     

     View Slide

122. Mar 18 2016
     

     View Slide

123. Kick-off Vue.js team
     2013 2014 2015 2016
     spawn
     0.1
     0.2
     0.3
     0.4
     0.5
     0.6
     0.7
     0.8
     First
     Launch
     0.9
     0.10
     0.11
     Meetup
     in JP
     Laravel
     0.12 1.0
     Start New
     development
     organization!!
     

     View Slide

124. Vue.js team members
     

     View Slide

125. Role of Vue.js team
     • Issue Triaging
     • bug report
     • feature request
     • clean up stable issues
     • Pull Request reviewing
     • Working on New Features or Bug fixes
     • Specific repository helping
     

     View Slide

126. Vue.js New Vision
     

     View Slide

127. “Progressive
     Framework”
     http://blog.evanyou.me/2015/12/20/vuejs-2015-in-review/
     ʮVUE.JS: 2015 IN REVIEWʯ
     

     View Slide

128. Vue.js 1.1
     https://github.com/vuejs/vue/milestones/1.1.0
     

     View Slide

129. Improve Official Plugins/Tools
     • vue-router
     • vuex
     • vue-loader/vuerify
     • vue-devtools
     • vue-cli
     

     View Slide

130. Future Plan
     • server side rendering (SSR)
     • official book/video tutorials
     • higher level framework for mobile
     applications
     • and more …
     

     View Slide

131. Conclustion
     • 2013
     • Vuejs was the personal project
     • 2014
     • Launch, and improvement and new features
     • 2015
     • Adoption in the Laravel community
     • Release 1.0
     • Growth Vuejs community and Eco-System!!
     

     View Slide

132. Conclustion
     • 2016
     • Kick-off vuejs team
     • We're going to continue to grow Vuejs as
     OSS project
     “Progressive
     Framework”
     

     View Slide

133. Announcements
     from vuejs-jp
     

     View Slide

134. Planning Vuejs Tokyo Meetup #1
     • We want to invite Evan you!!
     • If you are interested, please contact us!!
     

     View Slide

135. Opened vuejs-jp slack
     • Direct URL Access

     https://vuejs-jp-slackin.herokuapp.com
     • Vuejs official site for japanese

     http://jp.vuejs.org

     

     

     View Slide

136. Thanks!!
     
     

     View Slide