Gokul Kathirvel
A fellow human 💕 Love building things over the web... 💕 doing Ember and Vue @zoho!!! Curated @emberjstweet 🐹🤖 with 🔥
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)
http://github.com/gokatz/vue-app
(insert real link)
http://github.com/gokatz/ember-app
(insert real link)
Resources
Guides (Octane Preview)
https://octane-guides-preview.emberjs.com/release/getting-started/quick-start/
Guides, Docs, Blog...
Discord, Forum, Newsletters and more..
Community
Thanks for your time...
Slides: http://bit.ly/ember-vue
Ember and Vue: A Real World Comparison
By Gokul Kathirvel
Ember and Vue: A Real World Comparison
A talk on how Ember and Vue utilize the native features and share concepts and even syntaxes along with a demo of how simple to jump between them without much friction by building a counter component
