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

  1. Incomparable. Vue is a framework. React is a library.
  2. 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.
  3. 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?

Made with Slides.com