Ember Octane Preview Highlights
Tags: ember, emberoctane, octane, javascript
Published: 2019-12-04 07:19:48

---
title: Ember Octane Preview Highlights
published: true
description: EmberJS Octane Features and Highlights
tags: #emberjs #emberoctane #octane #js
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mur6x2ddc4gn5ob2hryk.png)

😎It's time for Ember Octane! Sound great!

Official Announcement


> Octane becomes the default for Ember, Thanks in advance! If you are looking for the latest stable release of Ember, please instead visit guides.emberjs.com.


***Quick roll-up with `ember octant` You can find the details guide from the [official site]((https://octane-guides-preview.emberjs.com/release/getting-started/quick-start)
).***


1. [install Node.js](https://docs.npmjs.com/getting-started/installing-node)
2. then open terminal then hit

```
npm install -g ember-cli
ember new ember-quickstart -b @ember/octane-app-blueprint
```

👌 Congratulations!. We make it, see how easy it was?.

`Note:- I'm not going to focus on each section as we know ember official guide is super useful and more advance. Here, I'm going to cover something those are really essential when we roll up with a project.`


Ohm! One thing I forgot to talk about

EmberJs related update news we can find [here!](https://blog.emberjs.com/)



😨 Okay it's too much talk now let's begin

___



### 1. Play with the octane new component features.

We can create a component using CLI from the terminal,

```
ember g component person
```

Open, `app/components/person.js` and includes


```js
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action, get, set } from '@ember/object';
import { inject as service } from '@ember/service';

export default class PersonComponent extends Component {

  name = "Hello from - Person Component";
  @tracked bindableVariable = 'It makes two way binding easier';
  @service store;  // access ember data easily.
  @service router; // access router from component
  person = {};     // declare object

  // array declaration
  persons = [
   {name: "ABC", country: "Bangladesh"},
   {name: "DEF", country: "Dhaka"},
  ]

  // replacement of init() method
  constructor() {
    super(...arguments);
    this.bindableVariable = "change it nolonger needs set() method";

    set(this.person, 'name', 'Sadhan');
    set(this.persons[1], 'name', 'Sadhan');

    console.log('person', this.person);
    console.log('persons', this.persons);
  }

  @action onClick() {
    alert('Great Job! We can make it!')
    

    // dynamically we can navigate to different route from component
    this.router.transitionTo('About'); // make sure you have this route
  }
}
```

Now open, `app/components/person.hbs` add includes

```hbs
<h1>{{this.name}}</h1>

<!-- open up, your browser dev console -->
{{log this.person}}

<p>Updated Value is: {{this.bindableVariable}}<p>

<ol>
{{#each this.persons as |item|}}
   <li>{{item.name}}</li>
{{/each}}
</ol>

<button {{on "click" this.onClick}}>Clik Me!</button>
```

Initially, we make it.


### 2. Handling From Elements


```
ember g component state
```

Open, `app/components/state.js` and includes
 

```js

import Component from '@glimmer/component';
import {tracked} from '@glimmer/tracking';
import {action, get, set} from '@ember/object';
import {inject as service} from '@ember/service';
import utils from "../utils";

export default class StateComponent extends Component {

  @tracked stateData = {
    label: '',
    description: '',
    code: ''
  };
  @tracked isPermitToSave = false;

  constructor() {
    super(...arguments);
  }

  @action onChange(event) {
    let code = event.target.value.trim();
    if(code) {
      if (code) {
        set(this.stateData, 'code', code);
      }
    }
    this.isPermitToSave = true;
  }

  @action save() {
    console.log('Save Data:-', this.stateData);

    // after save, optional staff we can do
    this.isPermitToSave = false;
    this.stateData = {};
  }
}

```


Now open, `app/components/state.hbs` and includes


```hbs
<h1>Hello from, Form Manipulation</h1>
<label for="select">Select Class:</label>
<select id="select" onchange={{action this.onChange}}>
   <option value="">-- Select One --</option>
   <option value="item1">items 1</option>
   <option value="item2">items 2</option>
</select>

<label for="label">Label:</label>
<input value={{this.stateData.label}} onchange={{action (mut this.stateData.label) value="target.value"}} type="text" placeholder="Ex. ABC">

<label for="description">Description:</label>
<input value={{this.stateData.description}} onchange={{action (mut this.stateData.description) value="target.value"}} type="text" id="description" placeholder="Ex. ABC Description">

{{#if this.isPermitToSave}}
   <button {{on 'click' this.save}}>Save</button>
{{/if}}
```

`Note: Here, I'm just trying to cover basic form binding but the recommendation will be using the `ember service` feature. I will try to cover its future if I can.`

😎Great! another achievement.
___

### 3. Dynamic Component Injection with passing data & function reference


```
ember g controller application
ember g component dci
```


open, `app/controllers/application.js` and includes

```js
import Controller from '@ember/controller';
import { action, get, set } from '@ember/object';
import { tracked } from "@glimmer/tracking";
export default class ApplicationController extends Controller {
  @tracked componentName = 'dci';

  @action parentFunc(value) {
     alert('Hello From Parent:-' + value);
  }
}
```

Open `app/templates/application.hbs`


```hbs

   {{#component  
       greetingMSG='Hello From, DCI Component'
       functionRef = this.parentFunc
     }}
   
    <h1> Welcome Here! </h1>
   {{/component}}

```


Open, `app/components/dci.js` and includes
 
```js

import Component from '@glimmer/component';
export default class DciComponent extends Component {

  constructor() {
    super(...arguments);

    console.log('Parent data:- ', this.args.greetingMSG;
    this.args.functionRef('ABC');  // it will call parent function
  }
}

```


Now open, `app/components/dci.js` and includes another implementation
 

```hbs

<h1>{{this.args.greetingMSG}}</h1>
<button {{on 'click' this.functionRef 'ABC'}}>Click Me!</button>

```

😨 We do lots of things, we are almost done.


___
### Finally 4. It's about Routing & Navigation 


```
ember g route welcome
```

1. Open `app/router.js` and update

```js
this.route('welcome', {path: '/:app_code'}, function() {
});
```

2. Open `app/routes/welcome.js` and includes


```js

import Route from '@ember/routing/route';
export default class WelcomeRoute extends Route {

  beforeModel(transition) {
    console.log('message:-', transition);
  }

  model(params) {
    console.log('This is the dynamic segment data: ', params );
  }
}
```

3. finally open `app/templates/application.hbs`


```hbs
<LinkTo class="" @route="welcome" @model="myappcode">Welcome</LinkTo>
```

👌 Congratulations!. & Thank You!
Feel free to comments, If you have any issues & queries.


___
#### References

- [Offical Guides](https://octane-guides-preview.emberjs.com/release/getting-started/quick-start)
- [Keep touch with an official blog](https://blog.emberjs.com/)