EmberJS is now available on the Internet Computer

Hi everyone,

I am happy to announce that you can now use EmberJS to develop frontends for the Internet Computer that run either on-chain or off-chain. This is now possible using an EmberJS add-on called ember-cli-dfinity that I have created. You can learn more about it here:

GitHub - onehilltech/ember-cli-dfinity: An add-on for using the Internet Computer in your EmberJS app

One of the strengths of this add-on is it makes it really easy to integrate actors and use them in the front-end. Here is example code of the html template code and the corresponding controller for the hello world example:

{{!-- index.hbs --}}
<form {{on "submit" this.submit}}>
  <label for="name">Enter your name: &nbsp;</label>

  {{!-- bind the input value to the name property in the controller --}}
  <Input id="name" alt="Name" type="text" @value={{this.name}} />

  <button type="submit">Click Me!</button>
</form>

{{!-- print the received greeting here --}}
<section>{{this.greeting}}</section>
// app/controllers/index.js

import Controller from '@ember/controller';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';

import { actor } from 'ember-cli-dfinity';

export default class IndexController extends Controller {
  @tracked
  name;

  @tracked
  greeting;

  // Bind to the hello actor using the default canister and agent
  @actor
  hello;

  @action
  async submit(ev) {
    // Prevent the default behavior for the submit button.
    ev.preventDefault();

    // Call the greet method on the actor/canister.
    this.greeting = await this.hello.greet(this.name);
  }
}

One thing you should notice is the amount of boilerplate code that is reduced because EmberJS provides state management out-of-the-box with Glimmer. Also, we use the @actor decorator to bind to actors, and expose the underlying interface of the actor via the associated property.

The add-on is designed to work out-of-the-box with little configuration needed on your end—unless you need to override the default configuration that is auto-generated during the build process.

Please give it a try and let me know what you think!

9 Likes

This is an awesome contribution! I think it would be a great addition to awesome-internet-computer too.

2 Likes

@NathanosDev Thank you very much!

I am currently working on a getting started tutorial. Once that is done, I will post it here and also submit an update to awesome-internet-computer.

2 Likes

The getting started tutorial for ember-cli-dfinity is now online.

@NathanosDev I tried to update internet-awesome-computer per the guidelines in CONTRIBUTION.md. The PR was rejected and automatically closed because I’m an external contributor. Should I assume the link to the getting started tutorial I added to the README.md will be added to internet-awesome-computer?

@domwoe can probably help here.

1 Like

I’m sorry about that, we’ll get this sorted for future contributions and make sure your changes are incorporated!

I’m really sorry for that.

We recently renamed awesome-dfinity to awesome-internet-computer, but didn’t change the name in the list of repositories open for external contribution.

Fix is coming.

1 Like

As a follow-up to this post, we have released the first official version of the EmberJS add-on for the Internet Computer. The getting started tutorial walks you through how to use the EmberJS frontend as you create a simple hello example.

You can also find a demonstration of using EmberJS for the Internet Computer, and its benefits here.

2 Likes