DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 970,177 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Sadhan Sarker
Sadhan Sarker

Posted on • Updated on

Ember Octane Preview Highlights

Alt Text

😎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.

  1. install Node.js
  2. then open terminal then hit
npm install -g ember-cli
ember new ember-quickstart -b @ember/octane-app-blueprint
Enter fullscreen mode Exit fullscreen mode

πŸ‘Œ 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!

😨 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
Enter fullscreen mode Exit fullscreen mode

Open, app/components/person.js and includes

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
  }
}
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

Initially, we make it.

2. Handling From Elements

ember g component state
Enter fullscreen mode Exit fullscreen mode

Open, app/components/state.js and includes


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 = {};
  }
}

Enter fullscreen mode Exit fullscreen mode

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

<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}}
Enter fullscreen mode Exit fullscreen mode

Note: Here, I'm just trying to cover basic form binding but the recommendation will be using theember servicefeature. 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
Enter fullscreen mode Exit fullscreen mode

open, app/controllers/application.js and includes

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

Open app/templates/application.hbs


   {{#component  
       greetingMSG='Hello From, DCI Component'
       functionRef = this.parentFunc
     }}

    <h1> Welcome Here! </h1>
   {{/component}}

Enter fullscreen mode Exit fullscreen mode

Open, app/components/dci.js and includes


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
  }
}

Enter fullscreen mode Exit fullscreen mode

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


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

Enter fullscreen mode Exit fullscreen mode

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


Finally 4. It's about Routing & Navigation

ember g route welcome
Enter fullscreen mode Exit fullscreen mode
  1. Open app/router.js and update
this.route('welcome', {path: '/:app_code'}, function() {
});
Enter fullscreen mode Exit fullscreen mode
  1. Open app/routes/welcome.js and includes

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 );
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. finally open app/templates/application.hbs
<LinkTo class="" @route="welcome" @model="myappcode">Welcome</LinkTo>
Enter fullscreen mode Exit fullscreen mode

πŸ‘Œ Congratulations!. & Thank You!
Feel free to comments, If you have any issues & queries.


References

Top comments (0)

🀯

"I made 10x faster JSON.stringify() functions, even type safe"

☝️ Must read for JS devs