Save 37% off PRO during our Black Friday Sale! »

Choosing Vue.js

1135c452bcb851741181b804cd184972?s=47 Rahul Kadyan
September 15, 2017

Choosing Vue.js

Why would you choose Vue?

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

September 15, 2017
Tweet

Transcript

  1. 65K+ Stars Top 10 All Time

  2. 250K+ Weekly Active Users Chrome DevTools Extension

  3. None
  4. None
  5. Rahul Kadyan Vue.js Core Contributor Software Engineer - Myntra

  6. Choosing xxx Choosing Vue

  7. Team Choosing for your team 1. Simplicity 2. Resources 3.

    Performance
  8. It’s simple

  9. None
  10. krausest/js-framework-benchmark 0.9 0.975 1.05 1.125 1.2 Slowdown 1.04 1.19 1.15

    Angular React Vue
  11. Tech Choosing for features 1. Declarative Rendering 2. Composition 3.

    Stylesheets or CSS
  12. None
  13. { template: `<App> <Sidebar /> <Content> <p>Hello World </p> </Content>

    </App>` } HTML { render () { return ( <App> <Sidebar /> <Content> <p>Hello World </p> </Content> </App> ) } } JSX { render (h) { return h('App', [ h('Sidebar'), h('Content', [ h( 'p', 'Hello World’ ) ]) ]) } } JS
  14. None
  15. <app> <app-header></app-header> <app-footer></app-footer> </app> <div class="container"> <header> <slot name="header"></slot> </header>

    <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> <div class="parent"> <child> <template scope="props"> <span>hello from parent</span> <span>{{ props.text }}</span> </template> </child> </div>
  16. None
  17. <child message=“hello!"></child> <child :my-message="parentMsg"></child> <input @keyup.enter="submit">

  18. None
  19. None
  20. Tech Choosing for large applications 1. Client Side Routing 2.

    Application State 3. Optimisation Efforts
  21. None
  22. None
  23. None
  24. Tech Choosing for emerging markets 1. Server Side Rendering

  25. None
  26. DX Choosing for developer experience 1. Collocation 2. Editor Support

    3. Build & Test Tools 4. Browser DevTools
  27. Templates Scripts Styles

  28. Template Script Style

  29. posva/vim-vue vuejs/vetur vuejs/vue-syntax-highlight

  30. None
  31. vue-test-utils In pre-release stage.

  32. None
  33. None
  34. – Jacob Schatz, Lead Frontend Developer, GitLab “We chose it

    (vue) because it was more simple than everything out at there. It makes it easy to grasp the concepts and it was also easy to make a large app.”
  35. @znck0