Ember & Vue

A Real world Comparision

 

Gokul Kathirvel

Front End Developer, Zoho Corp

Ember and Vue

Love building Browser Extension

 

 

Why Vue in the first place?

• Building Widget

• Progressive Enhancement

• Plug & Play

• Lightweight

• Use existing knowledge **

And It was surprisingly easy to adapt Vue really quickly

🙀

And we successfully did that

😃

Ember.js

Ember Framework Values

• Convention

• Stability

• Productivity

• Community

• Add-on Ecosystem

• Computed Properties

Common Framework Aspects

// Ember
fullName: computed('firstName', 'lastName', function() {
  return `${this.firstName} ${this.lastName}`;
})

// Vue
computed: {
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

• Observers

// Ember
nameChanged: observer('fullName', function() {
  this.processName();
}),

// Vue
watch: {
  fullName() {
    this.processName();
  }
}

• Watchers

• Template Syntax

<MyMagicalComponent />

Name: {{name}}

<div v-if="canShow"> ... </div>

<div @click="doSomething()"> ... </div>

<div v-for="item in items" :key="item.id"> ... </div>
<MyMagicalComponent />

Name: {{name}}

{{#if canShow}} <div> ... </div> {{/if}}

<div {{action this.doSomething}}> ... </div>

{{#each items as |item|}}
  <div> ... </div>
{{/each}}

• Element Modifiers

// Ember
export default class Focus extends Modifier {
  didInsert(element) {
    element.focus();
  }
}
// Vue

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

• Directives

Let's build a real world Application

in Vue and Ember

vue create vue-app

(Class Component blueprint)

ember new ember-app -b @ember/octane-app-blueprint

 

It's coding time...

Caveats and Notable from the coding session...

Happy Vue Developer 

Happy Ember Developer

 

😉

 

A comprehensive comparision between Ember and Nuxt

by Robert Wagner (Ship Shape)

Resources

Guides, Docs,  Blog...

https://emberjs.com/

 

Discord, Forum, Newsletters and more..

Community

Thanks for your time...

 
Made with Slides.com