This document compares React and Vue, discusses their pros and cons, and explores reactivity and the use of proxies in Vue. It finds that Vue has an easier learning curve and smaller size than React, but React has a larger ecosystem. Proxies, introduced in ES2015, allow intercepting and customizing default behavior of operations on objects. Vue 3 uses proxies for reactivity which provides better performance than Vue 2. Proxies are also used for change detection in some React libraries, though come with performance caveats.

1. VS
Harijs Deksnis
Amsterdam, 7th of July 2018

2. VS

3. VS
8.2
7.6

6. Right tool for the right job
• If you like building apps with templates
(or want the option to)
• If you like simplicity and things that
“just work”
• If you need your application to be as
small and fast as possible
• If you want a library that is adaptable
for both web and native apps
• If you plan to build a large scale app
• If you want the biggest ecosystem
If you’re already happy with one or the other, there’s no need to switch.
https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d

8. Experience with frontend frameworks
Angular 1.x - 6 years
Angular 2-6 - 1.5 years
React - 4 months
Vue - 48 hours

9. In a graph
Approx 1425 hours a year
With 261 working days a year = 5.5h hours per work day

11. http://www.timqian.com/star-history/
Frontend framework stars mid-March

12. http://www.timqian.com/star-history/
Frontend framework stars 4th of June
Gap: 1000 stars

13. https://issel.ee.auth.gr/wp-content/uploads/2017/01/User-Perceived-Source-Code-Quality-Estimation-based-on-Sta

16. https://medium.com/js-dojo/react-or-vue-which-javascript-ui-library-should-you-be-using-543a383608d

17. Approachable, easy to learn
One step away from mobile development (React Native)
Desktop application on all platforms (Proton Native; uses React syntax)
Functional programming benefits (immutability, explicit state management)
Redux
Lot’s of innovation in the community (Relay, Next.js)
Virtual DOM
One-direction data flow
Reuse of components
React pros

18. Alone never enough
- Combining various libraries can be challenging
- Need transpilation, build tools etc.
Redux is verbose
JSX?
High pace of development
- Documentation doesn’t always catch up
- Easy to fall behind
React cons

19. Size 59KB (React: 98KB)
Easy learning curve (also when switching from Angular or React)
Can do both: full SPA and simple components
Best documentation
Great supplement libraries (router, store..)
Template syntax
Vue pros

20. A rather small community development
Language barrier
Too much flexibility?
Vue cons

21. Reactivity (change detection) in Vue

22. https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

23. https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

24. This will not trigger update
https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

25. Have to do this instead
https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

26. This will not work
Have to do this instead
Adding dynamic properties
https://blog.cloudboost.io/reactivity-in-vue-js-2-vs-vue-js-3-dcdd0728dcdf

27. PROXIES
JAVASCRIPT

28. What are proxies?

29. https://www.etymonline.com/word/proxy

32. In spec since ES2015
Unshimmable
No polyfill
No way to fake them in older browsers

33. https://www.atyantik.com/proxy-javascript-es6-feature/

34. How they work?

35. • apply
• construct
• defineProperty
• deleteProperty
• get
• getOwnPropertyDescriptor
• getPrototypeOf
• has
• isExtensible
• ownKeys
• preventExtensions
• set
• setPrototypeOf
Traps

36. • apply - trap for a function call
• construct - trap for the new operator
• defineProperty - trap for Object.defineProperty()
• deleteProperty - trap for the delete operator
• get - trap for getting a property value
• getOwnPropertyDescriptor - trap for Object.getOwnPropertyDescriptor()
• getPrototypeOf - trap for the [[GetPrototypeOf]] internal method
• has - trap for the in operator
• isExtensible - trap for Object.isExtensible()
• ownKeys - trap for Object.keys() and Reflect.ownKeys()
• preventExtensions - trap for Object.preventExtensions()
• set - trap for setting a property value
• setPrototypeOf - trap for Object.setPrototypeOf()
Traps

40. https://developers.google.com/web/updates/2016/02/es2015-proxies

41. Apply

42. Delete
https://github.com/mikaelbr/proxy-fun/blob/master/examples/smart-delete.js

43. Use cases
• Generic wrappers
• Access control
• Validation
• Statistics
• Profiling
• Virtual objects
• Virtual objects (emulation)
• Transparent futures??

44. https://www.atyantik.com/proxy-javascript-es6-feature/

45. Revocable proxy

47. Reactivity in Vue 3

48. For arrays

49. Proxies in React

51. Caveat: proxies and performance
http://thecodebarbarian.com/thoughts-on-es6-proxies-performance

52. http://thecodebarbarian.com/thoughts-on-es6-proxies-performance

53. http://thecodebarbarian.com/thoughts-on-es6-proxies-performance
… but then again, also promises…

54. Final extra - new vue-cli
https://medium.com/@brandonl.4231/getting-to-know-the-new-vue-cli-3-user-interface-a173b00128bd