Aurelia 2 vs Aurelia 1: A Comprehensive Comparison

This website is powered by ItGalaxy.io

In the world of frontend development, Aurelia 2 and Aurelia 1 represent two generations of the same framework family. While Aurelia 2 brings modern features and improved performance, Aurelia 1 offers a mature ecosystem with proven patterns. Let’s explore their differences and use cases.

Table of Contents

  1. Core Concepts
  2. Reactivity and State Management
  3. Templating and Components
  4. DOM Manipulation
  5. Event Handling
  6. Component Composition
  7. Form Handling
  8. Lifecycle Management
  9. Web App Features
  10. Performance and Bundle Size
  11. Learning Curve
  12. Conclusion

Core Concepts

Aurelia 2 and Aurelia 1 share similar philosophies but with different implementations:

  • Aurelia 2 brings modern features, improved performance, and better TypeScript support while maintaining familiar patterns
  • Aurelia 1 established the convention-based approach with strong dependency injection and data binding capabilities

Reactivity and State Management

Declare State

Aurelia 2

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

Aurelia 1

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

Update State

Aurelia 2

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

Aurelia 1

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

Computed State

Aurelia 2

<div>${doubleCount}</div>

Aurelia 1

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

Templating

Minimal Template

Aurelia 2

<h1>Hello world</h1>

Aurelia 1

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

Styling

Aurelia 2

/* css-style.css */
.title {
  color: red;
}

Aurelia 1

/* css-style.css */
.title {
  color: red;
}

Loop

Aurelia 2

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

Aurelia 1

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

Event Click

Aurelia 2

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

Aurelia 1

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

DOM Reference

Aurelia 2

<input ref="inputElement" />

Aurelia 1

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

Conditional

Aurelia 2

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

Aurelia 1

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

Lifecycle

On Mount

Aurelia 2

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

Aurelia 1

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

On Unmount

Aurelia 2

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

Aurelia 1

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

Component Composition

Props

Aurelia 2

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

Aurelia 1

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

Emit to Parent

Aurelia 2

<p>Can I come ?</p>
<answer-button action-handler.bind="handleAnswer"></answer-button>
<p style="font-size: 50px">${isHappy ? "😀" : "😥"}</p>

Aurelia 1

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

Slot

Aurelia 2

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

Aurelia 1

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

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

Slot Fallback

Aurelia 2

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

Aurelia 1

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

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

Context

Aurelia 2

<h1>Welcome back, {{ user.username }}</h1>
<user-profile />

Form Input

Input Text

Aurelia 2

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

Aurelia 1

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

Checkbox

Aurelia 2

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

Aurelia 1

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

Radio

Aurelia 2

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

Aurelia 1

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

Select

Aurelia 2

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

Aurelia 1

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

Web App Features

Render App

Aurelia 2

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="./main.ts"></script>
  </head>

  <body>
    <app></app>
  </body>
</html>

Fetch Data

Aurelia 2

<template promise.bind="useFetchUsers.fetchData()">
  <p pending>Fetching users...</p>
  <p catch>An error ocurred while fetching users</p>
  <ul then.from-view="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>

Aurelia 1

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

Performance and Bundle Size

Aurelia 2

  • Modern, optimized architecture
  • Tree-shakeable modules
  • Efficient template compilation
  • Strong performance characteristics
  • Improved bundle size

Aurelia 1

  • Mature and stable architecture
  • Proven performance patterns
  • Comprehensive ecosystem
  • Established tooling
  • Legacy browser support

Learning Curve

Aurelia 2

  • Modern development patterns
  • Enhanced TypeScript support
  • Improved documentation
  • Familiar conventions
  • Active community

Aurelia 1

  • Well-established patterns
  • Extensive documentation
  • Large community resources
  • Proven in production
  • Stable API

Conclusion

Choose Aurelia 2 if you:

  • Need modern features and patterns
  • Want improved performance
  • Need better TypeScript support
  • Are starting a new project
  • Want smaller bundle sizes

Choose Aurelia 1 if you:

  • Have existing Aurelia 1 projects
  • Need legacy browser support
  • Value stability and maturity
  • Have team expertise in Aurelia 1
  • Need extensive community resources

Both frameworks excel in different scenarios:

  • Aurelia 2 is perfect for new projects that need modern features and improved performance
  • Aurelia 1 remains solid for existing projects and teams with established expertise

The choice between Aurelia 2 and Aurelia 1 often depends on your specific needs:

  • Use Aurelia 2 for new projects that need modern features and better performance
  • Use Aurelia 1 for maintaining existing projects or when you need its mature ecosystem





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:

2. Infra as a Service

  • Description: Infrastructure cloud évolutive et sécurisée
  • Links:

3. Projets Développeurs

4. Développeurs

5. Formations Complètes

6. Marketplace

7. Blogs

This website is powered by ItGalaxy.io