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

Thank You All

writing modern apps with ember octane

By Gokul Kathirvel

writing modern apps with ember octane

  • 69

More from Gokul Kathirvel