What it a Vue? 👀

What it a Vue? 👀

Boilerplates - @angular/cli 🛠️

Boilerplates - @angular/cli 🛠️

Boilerplates - @angular/cli 🛠️

Boilerplates - @vue/cli 🛠️

Boilerplates - @vue/cli 🛠️

Rendering 🌆

Change Detection

Rendering 🌆

Change Detection

Rendering 🌆

VirtualDOM aka VNodes

Rendering 🌆

VirtualDOM aka VNodes

Render function

JSX

Rendering 🌆

Render function

All Vue templates compiles into render function

Forms 

Forms 

Forms 

Template Driven Forms Features

• Easier to use
• Suitable for simple scenarios
• Uses Two-way data binding (using [(NgModel)] syntax)
• Minimal component code
• Automatic track of the form and its data(handled by Angular)
• Unit testing is a challenge

Reactive Forms Features

• Easier Unit testing
• More flexible, so Handles any complex scenarios.
• Reactive transformations can be made possible such as Adding elements dynamically
• No data binding is done (Immutable data model preferred by most developers)
• More component code and less HTML markup

Forms 

Forms 

State management

Via one-way data binding

State management

Via 2-way data binding

State management

Redux way

State management

And will emit change

Where child will use props to get input data

State management

A child needs to do

State management

vuex

What you have to know to start?

Required ☝️

Vue:

• Understanding core Vue concepts
• Data binding
• ...

languages:

• ES6 or ES5

Additionally, but also required  🤯

• Vuex
• events 
• advanced rxJs
• ngRx
• Lazy road route
• Ahead of Time compilation
• ...

What you have to know to start?

Bonus +