Ember Octane vs Aurelia 1 Comparison

Reactivity

Reactivity is a core concept in both Ember Octane and Aurelia 1, allowing developers to build dynamic and responsive applications. Let’s explore how each framework handles state declaration, updates, and computed properties.

Declare state

Ember Octane

name.hbs

<h1>Hello {{this.name}}</h1>

name.js

In Ember Octane, state is typically managed within components using tracked properties, which automatically update the UI when their values change.

Aurelia 1

name.html

<template>
  <h1>Hello ${name}</h1>
</template>

name.ts

Aurelia 1 uses a more declarative approach with data binding, allowing the UI to automatically reflect changes in the underlying data model.

Update state

Ember Octane

name.hbs

<h1>Hello {{this.name}}</h1>

name.js

State updates in Ember Octane are straightforward, often involving direct assignment to tracked properties.

Aurelia 1

name.html

<template>
  <h1>Hello ${name}</h1>
</template>

name.ts

In Aurelia 1, state updates are similarly simple, with changes to bound properties automatically propagating to the UI.

Computed state

Ember Octane

double-count.hbs

<div>{{this.doubleCount}}</div>

double-count.js

Computed properties in Ember Octane are defined using getters, providing a way to derive values based on other state.

Aurelia 1

double-count.html

<template>
  <div>${doubleCount}</div>
</template>

double-count.ts

Aurelia 1 supports computed properties through its binding system, allowing for dynamic updates based on other data.

Templating

Templating in both frameworks allows for the creation of reusable and dynamic UI components.

Minimal template

Ember Octane

hello-world.hbs

<h1>Hello world</h1>

Aurelia 1

hello-world.html

<template>
  <h1>Hello world</h1>
</template>

Styling

Styling in Ember Octane and Aurelia 1 can be managed using CSS, with support for scoped styles and CSS modules.

Ember Octane

css-style.css

/* using: https://github.com/salsify/ember-css-modules */
.title {
  color: red;
}

css-style.hbs

Aurelia 1

css-style.css

.title {
  color: red;
}

css-style.html

Loop

Loops in both frameworks allow for the iteration over collections to dynamically generate UI elements.

Ember Octane

colors.hbs

<ul>
  {{#each (array "red" "green" "blue") as |color|}}
    <li>{{color}}</li>
  {{/each}}
</ul>

Aurelia 1

colors.html

<template>
  <ul>
    <li repeat.for="color of colors">${color}</li>
  </ul>
</template>

colors.ts

Event click

Event handling in Ember Octane and Aurelia 1 is intuitive, allowing developers to respond to user interactions.

Ember Octane

counter.hbs

<p>Counter: {{this.count}}</p>
<button {{on "click" this.incrementCount}}>+1</button>

counter.js

Aurelia 1

counter.html

<template>
  <p>Counter: ${count}</p>
  <button click.trigger="incrementCount()">+1</button>
</template>

counter.ts

Dom ref

DOM references in both frameworks allow for direct manipulation of DOM elements.

Ember Octane

input-focused.hbs

<input {{this.autofocus}} />

input-focused.js

Aurelia 1

input-focused.html

<template>
  <input ref="inputElement" />
</template>

input-focused.ts

Conditional

Conditional rendering in Ember Octane and Aurelia 1 allows for dynamic UI updates based on application state.

Ember Octane

traffic-light.hbs

<button {{on "click" this.nextLight}}>Next light</button>
<p>Light is: {{this.light}}</p>
<p>
  You must
  {{#if (eq this.light "red")}}
    STOP
  {{else if (eq this.light "orange")}}
    SLOW DOWN
  {{else if (eq this.light "green")}}
    GO
  {{/if}}
</p>

traffic-light.js

Aurelia 1

traffic-light.html

<template>
  <button click.trigger="nextLight()">Next light</button>
  <p>Light is: ${light}</p>
  <p>
    You must
    <span if.bind="light === 'red'">STOP</span>
    <span if.bind="light === 'orange'">SLOW DOWN</span>
    <span if.bind="light === 'green'">GO</span>
  </p>
</template>

traffic-light.ts

Lifecycle

Lifecycle hooks in both frameworks provide a way to execute code at specific points in a component’s lifecycle.

On mount

Ember Octane

page-title.hbs

<p>Page title is: {{(this.pageTitle)}}</p>

page-title.js

Aurelia 1

page-title.html

<template>
  <p>Page title is: ${pageTitle}</p>
</template>

page-title.ts

On unmount

Ember Octane

time.hbs

<p>Current time: {{this.time}}</p>

time.js

Aurelia 1

time.html

<template>
  <p>Current time: ${time}</p>
</template>

time.ts

Component composition

Component composition in Ember Octane and Aurelia 1 allows for the creation of complex UIs from smaller, reusable components.

Props

Ember Octane

app.hbs

<UserProfile
  @name="John"
  @age={{20}}
  @favouriteColors={{array "green" "blue" "red"}}
  @isAvailable={{true}}
/>

user-profile.hbs

user-profile.js

Aurelia 1

app.html

<template>
  <require from="./user-profile"></require>
  <user-profile
    name.bind="name"
    age.bind="age"
    favourite-colors.bind="colors"
    is-available.bind="available"
  ></user-profile>
</template>

app.ts

user-profile.html

user-profile.ts

Emit to parent

Ember Octane

app.hbs

<p>Are you happy?</p>
<AnswerButton @onYes={{this.handleYes}} @onNo={{this.handleNo}} />
<p style="font-size: 50px;">{{if this.isHappy "😀" "😥"}}</p>

app.js

answer-button.hbs

Aurelia 1

app.html

<template>
  <require from="./answer-button"></require>
  <p>Can I come ?</p>
  <answer-button action-handler.call="handleAnswer(reply)"></answer-button>
  <p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>
</template>

app.ts

answer-button.html

answer-button.ts

Slot

Ember Octane

app.hbs

<FunnyButton> Click me! </FunnyButton>

funny-button.hbs

Aurelia 1

app.html

<template>
  <require from="./funny-button"></require>

  <funny-button>Click me !</funny-button>
</template>

funny-button.html

Slot fallback

Ember Octane

app.hbs

<FunnyButton />
<FunnyButton>I got content!</FunnyButton>

funny-button.hbs

Aurelia 1

app.html

<template>
  <require from="./funny-button"></require>

  <funny-button></funny-button>
  <funny-button>Click me !</funny-button>
</template>

funny-button.html

Context

Context management in Ember Octane and Aurelia 1 allows for the sharing of data and functionality across components.

Ember Octane

app.hbs

<UserProfile />

user-profile.hbs

user-profile.js

user-service.js

Aurelia 1

Missing snippet

Form input

Form inputs in both frameworks support two-way data binding, making it easy to manage form state.

Input text

Ember Octane

input-hello.hbs

<p>{{this.text}}</p>
<input value={{this.text}} {{on "input" this.handleInput}} />

input-hello.js

Aurelia 1

input-hello.html

<template>
  <p>${text}</p>
  <input value.bind="text" />
</template>

input-hello.ts

Checkbox

Ember Octane

is-available.hbs

<input
  id="is-available"
  type="checkbox"
  checked={{this.isAvailable}}
  {{on "change" this.handleChange}}
/>
<label for="is-available">Is available</label>

is-available.js

Aurelia 1

is-available.html

<template>
  <input id="is-available" type="checkbox" checked.bind="isAvailable" />
  <label for="is-available">Is available</label>: ${isAvailable}
</template>

is-available.ts

Radio

Ember Octane

pick-pill.hbs

<div>Picked: {{this.picked}}</div>

<input
  id="blue-pill"
  type="radio"
  value="blue"
  checked={{eq this.picked "blue"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="blue-pill">Blue pill</label>

<input
  id="red-pill"
  type="radio"
  value="red"
  checked={{eq this.picked "red"}}
  {{on "change" this.handleChange}}
/>
<label htmlFor="red-pill">Red pill</label>

pick-pill.js

Aurelia 1

pick-pill.html

<template>
  <div>Picked: ${picked}</div>

  <input id="blue-pill" checked.bind="picked" type="radio" value="blue" />
  <label for="blue-pill">Blue pill</label>

  <input id="red-pill" checked.bind="picked" type="radio" value="red" />
  <label for="red-pill">Red pill</label>
</template>

pick-pill.ts

Select

Ember Octane

color-select.hbs

<select {{on "change" this.select}}>
  {{#each this.colors as |color|}}
    <option
      value={{color.id}}
      disabled={{color.isDisabled}}
      selected={{eq color.id this.selectedColorId}}
    >
      {{color.text}}
    </option>
  {{/each}}
</select>

color-select.js

Aurelia 1

color-select.html

<template>
  <select value.bind="selectedColorId">
    <option value="">Select A Color</option>
    <option
      repeat.for="color of colors"
      value.bind="color.id"
      disabled.bind="color.isDisabled"
    >
      ${color.text}
    </option>
  </select>
</template>

color-select.ts

Webapp features

Webapp features in both frameworks include data fetching and rendering, with support for asynchronous operations.

Render app

Ember Octane

Missing snippet

Aurelia 1

Missing snippet

Fetch data

Ember Octane

app.hbs

{{#let (this.fetchUsers) as |request|}}
  {{#if request.isLoading}}

    <p>Fetching users...</p>

  {{else if request.error}}

    <p>An error occurred while fetching users</p>

  {{else}}

    <ul>
      {{#each request.users as |user|}}
        <li>
          <img src={{user.picture.thumbnail}} alt="user" />
          <p>{{user.name.first}} {{user.name.last}}</p>
        </li>
      {{/each}}
    </ul>

  {{/if}}
{{/let}}

app.js

Aurelia 1

app.html

<template>
  <p if.bind="isLoading">Fetching users...</p>
  <p if.bind="error">An error ocurred while fetching users</p>
  <ul if.bind="users">
    <li repeat.for="user of users">
      <img src.bind="user.picture.thumbnail" alt="user" />
      <p>${ user.name.first } ${ user.name.last }</p>
    </li>
  </ul>
</template>

app.ts

UseFetchUsers.ts

Decouvrez plus d’Offres de la plateform ItGalaxy.io :

Découvrez notre gamme complète de services et formations pour accélérer votre carrière.

1. Nous contactez

Description: Besoin de Formation et des Solutions cloud complètes pour vos applications
Links:
- Nous contactez

2. Infra as a Service

Description: Infrastructure cloud évolutive et sécurisée
Links:
- Demandez un devis

3. Projets Développeurs

Description: Découvrez des opportunités passionnantes pour les développeurs
Links:

4. Développeurs

Description: Rejoignez notre communauté de développeurs
Links:
- DevOps
- Web
- Backend
- SEO
- Design
- Mobile
- Wordpress
- Shopify

5. Formations Complètes

Description: Accédez à des formations professionnelles de haute qualité
Links:

6. Marketplace

Description: Découvrez notre place de marché de services
Links:

7. Blogs

Description: Découvrez nos blogs
Links: