2. Painless Frontend Development
ue.js:
Painless Frontend Development

3. WIIFY Dive into modern frontend development
I dove in and created a modern web app within 3 days!

5. Agenda: Use Vue Vue is easy Vue can be easily integrated
Vue is less complex than other frameworks

6. Reactive web development concepts
Vue is easy
Reactive web development concepts

7. Templates and Data Binding

9. Manipulating the DOM structure

11. Two-Way Data Binding

13. Reactive web development concepts
Vue is easy
Reactive web development concepts

14. Vue can be easily integrated
LARGE or small

15. Components

16. Components

17. Components

18. Scaling down … …

19. Scaling down
No JavaScript build system? No problem!

20. Vue can be easily integrated
LARGE or small

21. Compared to other frameworks
Vue is less complex
Compared to other frameworks

22. Clean and Simple
Vue was created by Evan You after working for Google on AngularJS. You later summed up his thought process,
“I figured, what if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?”

23. “Quickstart” in other frameworks
Angular
ES2015 JavaScript / TypeScript
NPM with 18 dependencies
4 files
Over 3,000 words …
React
JSX
ES2015+
React class syntax …

24. Quickstart in Vue

25. Speed Demon Angular 2 React 15 Vue 2
create rowsDuration for creating 1000 rows after the page loaded.
(1.69)
(1.60)
(1.46)
replace all rowsDuration for updating all 1000 rows of the table (with 5 warmup iterations).
(3.32)
(3.54)
(1.28)
partial updateTime to update the text of every 10th row (with 5 warmup iterations).
(1.00)
(1.03)
(1.39)
select rowDuration to highlight a row in response to a click on the row. (with 5 warmup iterations).
(1.00)
(1.00)
(1.00)
swap rowsTime to swap 2 rows on a 1K table. (with 5 warmup iterations).
(3.13)
(3.02)
(1.20)
remove rowDuration to remove a row. (with 5 warmup iterations).
(1.94)
(2.03)
(1.33)
create many rowsDuration to create 10,000 rows
(1.59)
(1.52)
(1.42)
append rows to large tableDuration for adding 1000 rows on a table of 10,000 rows.
(2.86)
(1.43)
(2.02)
clear rowsDuration to clear the table filled with rows.
(1.79)
(2.36)
(1.42)
clear rows a 2nd timeTime to clear the table filled with rows. But warmed up with only one iteration.
(1.69)
(2.25)
(1.34)
slowdown geometric mean
1.85
1.82
1.37

26. Compared to other frameworks
Vue is less complex
Compared to other frameworks

27. Summary Vue is easy Vue can be easily integrated
Vue is less complex than other frameworks