Write modern apps with
Ember Octane
Gokul Kathirvel
Front-end Develoepr @zoho
@_gokatz | gokatz.me
A framework for
ambitious web developers.
-
Convention
-
Productivity
-
Stability
-
Community
Ember Octane
What the deal with
- No jQuery
- Native Classes (+Decorators)
- Angle Bracket Syntax & Named Arguments
- Tracked Properties
- Glimmer Components
Good Old Counter
class Counter {
count = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
Let's see how EASY is to convert a native class into an Ember Component
Generate Ember App With Octane Blueprint
ember new ember-counter -b @ember/octane-app-blueprint
ember s
http://localhost:4200
Create a counter Component
ember g component counter
Angle Bracket Component
// templates/application.hbs
<Counter />
// components/templates/counter.hbs
<h1>This is a counter</h1>
Skeleton
// components/templates/counter.hbs
<button> - </button>
<span class="counter"> 0 </span>
<button> + </button>
JS State
import Component from '@glimmer/component';
// This is a perfectly
// valid ember component
class Counter extends Component {
count = 0;
increment() {
this.counter++;
}
decrement() {
this.counter--;
}
}
class Counter {
count = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
Native Class Support
Wire Up
// components/templates/counter.hbs
<button> - </button>
<span class="counter"> 0 </span>
<button> + </button>Wire Up
// components/templates/counter.hbs
<button> - </button>
<span class="counter">
{{count}}
</span>
<button> + </button>Wire Up
// components/templates/counter.hbs
<button onclick={{action this.decrement}}>
-
</button>
<span class="counter">
{{count}}
</span>
<button onclick={{action this.decrement}}>
+
</button>Let's Hands-On
Tracked Properties
import Component from '@glimmer/component';
class Counter extends Component {
count = 0;
increment() {
this.counter++;
}
decrement() {
this.counter--;
}
}
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
class Counter extends Component {
@tracked count = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
}
Computed Properties
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
class Counter extends Component {
@tracked count = 0;
increment() {
this.count++;
}
decrement() {
this.count--;
}
get isPositive() {
return this.count > 0;
}
}
Component Arguments
// templates/application.hbs
<Counter @title="Octane Counter" />
// components/templates/counter.hbs
<h1>{{@title}}</h1>Conditionals
// components/templates/counter.hbs
{{#if isPositive}}
<button onclick={{action this.decrement}}>
-
</button>
{{/if}}
<span class="counter">
{{count}}
</span>
<button onclick={{action this.decrement}}>
+
</button>
Looping in template
// components/counter.hbs
{{#each counters as |counter|}}
<Counter @title={{counter.title}} />
{{/each}}
Few exciting upcomings...
- Code Splitting
- Module Unification
- Named Blocks
- and many more...
Community