A
developer's
take on
Yatharth K
JavaScript Engineer
Classical Pianist
GitHub: yatharthk
Twitter: yatharthkhatri
I Promise
I'm NOT going to present BIASED thoughts
This talk is for you if
- You are curious why Vue is picking up so fast and what it has to offer
- You are starting with the frontend and confused if you should learn React and/or Vue
- You are a React developer and want to learn Vue but not sure if it's worth spending time on
- You are a startup guy and want to decide on choosing a framework for building your app's frontend
Why did I learn Vue?
- All this hype about Vue got me curious
- I guess I got bored of writing apps in the same very pattern
- I wanted to break-free from thinking in the "React Way"
- It's good to keep challenging yourself (& your brain)
- I love to keep exploring and learning
What's Vue?
"A progressive JavaScript framework"
⏺️ Framework (Not library)
⏺️ Incrementally adoptable
⏺️ Highly Performant
Let's understand
Vue
Components
State
Functional
☑️
☑️
Rendering
Vue templates
☑️
☑️
render methods w/ JSX
render methods w/ JSX
Data Model
Type
Not reactive
Props
Reactive
☑️
☑️
State
helper methods
☑️
☑️
computed
❌
props
props
☑️
data
☑️
state
methods
class methods
watchers
❌
Component Lifecycle Methods
Creation of Instance
Mount
❌
beforeCreate, created
beforeMount, mounted
componentWillMount,
componentDidMount
Update
beforeUpdate, updated
componentWillUpdate,
componentDidUpdate
Unmount
beforeDestroy,
destroyed
componentWillUnmount,
componentDidUnmount
should update ?
shouldComponentUpdate
❌
Vue's Smart VDOM
<section>
<h2>Welcome to MyApp</h2>
<p>Hi, {name}</p>
</section>
<section> // diff
<h2>Welcome to MyApp</h2> // diff
<p>Hi, {name}</p> // diff & update
</section>
JSX
Consider this JSX node in component
Consider that `name` is updated
Vue's Smart VDOM
<section> // static
<h2>Welcome to MyApp</h2> // static
<p>Hi, {name}</p> // dynamic, will need diff
</section>
At the time of template compilation in Vue
<section> // static
<h2>Welcome to MyApp</h2> // static
<p>Hi, {name}</p> // dynamic, will need diff
</section>
Consider component state -
{ address, name }
Vue's Smart VDOM
<section> // static
<h2>Welcome to MyApp</h2> // static
<p>Hi, {name}</p> // dynamic, diff, update
</section>
When `name` is updated
<section> // static, no-diff
<h2>Welcome to MyApp</h2> // static, no-diff
<p>Hi, {name}</p> // not related, no-diff
</section>
When `address` is updated
Other phenomenon
Context
Lazy
☑️
☑️
Hooks, Suspense,..
❌
☑️
Global instance can be supplied with plugins
( Well, a React concept )
☑️
❌
( Again, a React thing )
Vue also has...
directives
mixins
keyCodes
errorHandler
warnHandler
render
errorRender
extend
nextTick
observable
component
filter
compile
computed
watch
version
methods
errorCaptured
el
errorRender
$watch
parent$emit
inject
v-on
transition-group
slot
transition
...to be continued
But then...
- You don't need to consume all of the Vue's API.
- Vue takes away all the setup effort.
- Vue templates do more work than you'd imagine.
Ex no need to bind methods, easy looping, better handling of events, form-submissions, a lot more. - Extremely easy to extend with plugins
- Smart and performant VDOM with out of the box optimisations
- Clean components
How different is Vue from React
- Incomparable. Vue is a framework. React is a library.
- React was created to solve one company's own problem to created better and efficient UIs. Vue was created as a side project to create frontend applications.
- Vue aims to make applications on frontend easier, faster by standing between frameworks and libraries and giving you the best of both worlds.
But before that, understand..
Learning curve
Official docs
Effort
🏋️♂️🏋️♂️🏋️♂️1/2
🏋️♂️🏋️♂️🏋️♂️🏋️♂️🏋️♂️
Initial Setup
⭐⭐⭐⭐⭐
Zero. Plug and Play
Initial setup required
⭐⭐⭐1/2
Opinionated
More
Less
(Less decision making)
(More decision making)
Components & Code Style
Component splits out into template, script and style
Markup, styles and script sticks together
Functional + OOP
Functional
Lifecycle is much straightforward, simple
Lifecycle needs some understanding
Web perf
Built-in SSR, tree-shaking, etc
DOM manipulation faster
DOM manipulation slower
Lighter. 22kb gzip.
(33kb gzip w/ compiler)
Heavier. 36kb gzip.
Built-in SSR, tree-shaking, etc
Mobile Development
React Native
Via Nativescript
(, Weex, Quasar)
My Experience with
- It's a beautiful piece of tech
- Extremely easy to learn
- Extending/adding functionality is extremely easy
- Vue templates are dope
- Vuex is the better Redux
- Boilerplate tools like Vue CLI, Nuxt do as good as their React equivalents/counter-tools like create-react-app, Next
- Great choice if you love web perf
- Community
♥️
My Experience with
- As a React developer, it takes some effort to adapt to Vue
- Ecosystem isn't so rich at the moment. Although, it's growing.
- Styling did hurt. Especially if you are a CSS-in-JS fan.
- Functional aspect, composability isn't as good as React
- Although it's very extensible, and it'd serve in almost all cases, there's an upper limit to it
- I'm still a JSX fan for few reasons
💔
If you are building a new product
- You can develop apps faster in Vue.
- Even newbies and less experienced frontend developers can write fairly complex features. Keeping the code well structured.
- If your app is built using Angular, it's fairly easy to port the app to Vue
- Cost-effective
Final words
Don't compare. Just watch for your needs and trade-offs. And decide what suits you best.
</TALK>
I'm still a React fan. And now a Vue fan, too.
Learn Vue.
And TypeScript! 🤭
Hope that helps you
😇
Any questions?
A React developer's take on Vue
By Yatharth K
A React developer's take on Vue
- 128