VueJs Workshop

1. 1

2. VueJS Workshop
By Digvijay & Anish

3. Let’s start with stats
Created by
Evan You
Github
188 Contributors | 109K Stars
vue
352,868 /week
vue-cli
28,242 /week
Since
Feb 2014FEB
2014
Current Version
2.5.16

4. Benefits of Vue
● Easiest learning curve.
● Great documentation.
● Active development community.
● Progressive yet Scalability.
● Separation of concerns (JS / HTML / CSS) |
Clean code
● Lightweight framework (23k gzip)

5. Ecosystem
vue-router Single-page application routing
vuex Large-scale state management
vue-cli Project scaffolding
vue-loader Single File Component (*.vue file) loader for webpack
vue-server-renderer Server-side rendering support
vue-class-component TypeScript decorator for a class-based API
vue-rx RxJS integration
vue-devtools Browser DevTools extension

6. War of the frameworks
● Components
● Type Checking (with Typescript)
● Templates - JSX or HTML
● State management and data binding
● Size (gzip file) - 143k Angular, 43k React, 23k Vue
● Testing.

7. Extras
● JSX - If you really really want it.
● Redux can be used - vue-redux
● Redux sagas - vuex-saga
● vue-migration-helper
● https://github.com/vuejs/awesome-vue

8. Vue CLI
npm install -g vue-cli
vue init <template> <project_name>
Or
vue create <project_name>
vue ui

9. CLI demonstration

10. Workshop - IMDB clone

11. Getting started
git clone --depth 1
https://github.com/unfoldui/vue_workshop -b step-0
npm run serve
cd vue_workshop
rm -rf .git
git init
npm install

12. Install vue devtools

13. Basic single page component
1. SCRIPT: Component Logic

14. Basic single page component
2. TEMPLATE: View

15. Basic single page component
2. STYLE: Css or css preprocessors

16. Vue cli makes it easy to add loaders
npm install --save-dev node-sass sass-loader
<style lang=”scss”>...</style>
require(‘./path-to/app.scss’)

17. Props & v-bind
Using the component and passing props
You can pass dynamic data using v-bind

18. Registering component for use

19. Computed properties

20. Conditional rendering
Using v-if directive to render DOM conditionally
Special class binding method to bind various classes

21. Let’s get coding
● Build a Movie Card component
● Make it display mockMovie
● Should show a badge for “tomato
recommends” if the movie has a Rotten
Tomatoes score of > 85%

22. List rendering

23. Component lifecycle - part 1

24. Component lifecycle - part 2

25. Component lifecycle - part 3

26. Using the API
npm run mockServer
GET http://localhost:3000/movies
GET http://localhost:3000/movies/:id

27. Let’s get coding
● Fetch all movies from the API server
● List all movies in a list, or better, a grid
fashion

28. Routing with vue-router: Installation
npm install --save vue-router

29. Routing with vue-router: Plugging it in

30. Emitting and catching events from components
Emitting in child using this.$emit method
Catching and handling the event

31. Miscellaneous
Let’s not forget, programmatic routing
Event modifiers

32. Let’s get coding
● Refactor your app so that it supports two
pages - home and movie details
● Use vue-router to route between the two
● Clicking on a movie card on home page
should route to details
● Provide a back button on details page

33. Questions?

34. bit.do/unfoldui-feedback

35. THANK YOU
Digvijay Anil Gunjal
App Developer, ThoughtWorks
digvijag@thoughtworks.com
github.com/digvijay19
@digvijaygunjal
Anish George
UI Developer, ThoughtWorks
anishgeo@thoughtworks.com
github.com/bassoGeorge
@ageorgedev