Marko vs Aurelia 1: A Comprehensive Comparison

This website is powered by ItGalaxy.io

In the world of frontend development, Marko and Aurelia 1 represent two distinct approaches to building web applications. While Marko introduces a unique template-first approach with powerful streaming capabilities and compile-time optimizations, Aurelia 1 offers a convention-based framework with powerful data binding and dependency injection. 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

Marko and Aurelia 1 take fundamentally different approaches to building web applications:

  • Marko employs a template-first approach with powerful streaming capabilities and compile-time optimizations
  • Aurelia 1 uses a convention-based approach with powerful data binding and dependency injection

Reactivity and State Management

Declare State

Marko

<let/name = "John"/>
<h1>Hello ${name}</h1>

Aurelia 1

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

Update State

Marko

<let/name = "John"/>
<effect() { name = "Jane" }/>
<h1>Hello ${name}</h1>

Aurelia 1

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

Computed State

Marko

<let/count = 10/>
<const/doubleCount = count * 2/>
<div>${doubleCount}</div>

Aurelia 1

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

Templating

Minimal Template

Marko

<h1>Hello world</h1>

Aurelia 1

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

Styling

Marko

<h1.title>I am red</h1>
<button style={ fontSize: "10rem" }>I am a button</button>
<button class=scopedButton>I am a style-scoped button</button>

<style>
  .title {
    color: red;
  }
</style>
<style/{ scopedButton }>
  .scopedButton {
    font-size: 10rem;
  }
</style>

Aurelia 1

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

Loop

Marko

<ul>
  <for|color| of=["red", "green", "blue"]>
    <li>${color}</li>
  </for>
</ul>

Aurelia 1

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

Event Click

Marko

<let/count = 0/>
<p>Counter: ${count}</p>
<button onClick() { count++ }>+1</button>

Aurelia 1

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

DOM Reference

Marko

<input/inputElement>
<effect() { inputElement().focus() }/>

Aurelia 1

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

Conditional

Marko

static const TRAFFIC_LIGHTS = ["red", "orange", "green"];
<let/lightIndex = 0/>
<const/light = TRAFFIC_LIGHTS[lightIndex]/>

<button onClick() { lightIndex = (lightIndex + 1) % TRAFFIC_LIGHTS.length }>
  Next light
</button>
<p>Light is: ${light}</p>
<p>
  You must
  <if=light === "red">STOP</if>
  <else-if=light === "orange">SLOW DOWN</else-if>
  <else>GO</else>
</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

Marko

<let/pageTitle = ""/>
<effect() { pageTitle = document.title }/>
<p>Page title: ${pageTitle}</p>

Aurelia 1

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

On Unmount

Marko

<let/time = new Date()/>
<lifecycle
  onMount() { this.timer = setInterval(_ => time = new Date(), 1000) }
  onDestroy() { clearInterval(this.timer) }
/>
<p>Current time: ${time.toLocaleTimeString()}</p>

Aurelia 1

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

Component Composition

Props

Marko

<UserProfile
  name="John"
  age=20
  favouriteColors=["green", "blue", "red"]
  isAvailable
/>

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

Marko

<let/isHappy = true/>
<p>Are you happy?</p>
<AnswerButton
  onYes() { isHappy = true }
  onNo() { isHappy = false }
/>
<p style={ fontSize: 50 }>${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

Marko

<FunnyButton>Click me!</FunnyButton>

Aurelia 1

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

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

Slot Fallback

Marko

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

Aurelia 1

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

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

Context

Marko

<let/user = {
  id: 1,
  username: "unicorn42",
  email: "unicorn42@example.com",
}/>
<const/updateUsername(newUsername) {
  user = { ...user, username: newUsername };
}/>

<h1>Welcome back, ${user.username}</h1>
<set={ ...user, updateUsername }>
  <UserProfile />
</set>

Form Input

Input Text

Marko

<let/text = "Hello world"/>
<p>${text}</p>
<input value:=text/>

Aurelia 1

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

Checkbox

Marko

<input#is-available
  type="checkbox"
  checked:=input.isAvailable
/>
<label for="is-available">Is available</label>

Aurelia 1

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

Radio

Marko

<let/picked = "red"/>
<const/handleChange(event) {
  picked = event.target.value;
}/>

<div>Picked: ${picked}</div>
<input#blue-pill
  type="radio"
  checked=picked === "blue"
  value="blue"
  onChange=handleChange
/>
<label for="blue-pill">Blue pill</label>

<input#red-pill
  type="radio"
  checked=picked === "red"
  value="red"
  onChange=handleChange
/>
<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

Marko

static const colors = [
  { id: 1, text: "red" },
  { id: 2, text: "blue" },
  { id: 3, text: "green" },
  { id: 4, text: "gray", isDisabled: true },
];
<let/selectedColorId = 2/>

<select onChange(event) { selectedColorId = event.target.value }>
  <for|{ id, isDisabled, text }| of=colors>
    <option value=id disabled=isDisabled selected=id === selectedColorId>
      ${text}
    </option>
  </for>
</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

Marko

<!DOCTYPE html>
<html>
  <App/>
</html>

Fetch Data

Marko

<await(fetch("https://randomuser.me/api/?results=3").then(res => res.json()))>
  <@placeholder>
    <p>Fetching users...</p>
  </@placeholder>
  <@catch|error|>
    <p>An error occurred while fetching users</p>
  </@catch>
  <@then|{ results: users }|>
    <ul>
      <for|{ picture, name }| of=users>
        <li>
          <img src=picture.thumbnail alt="user">
          <p>${name.first} ${name.last}</p>
        </li>
      </for>
    </ul>
  </@then>
</await>

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

Marko

  • Compile-time optimizations
  • Streaming rendering
  • Partial hydration
  • Automatic code splitting
  • Small runtime footprint

Aurelia 1

  • Convention over configuration
  • Powerful dependency injection
  • Strong data binding system
  • Modular architecture
  • Extensive ecosystem

Learning Curve

Marko

  • Template-first approach
  • Unique syntax to learn
  • Built-in streaming capabilities
  • Growing documentation and community
  • Innovative development patterns

Aurelia 1

  • Convention-based approach
  • Object-oriented programming
  • Strong TypeScript support
  • Comprehensive documentation
  • Active community support

Conclusion

Choose Marko if you:

  • Need streaming server rendering
  • Want compile-time optimizations
  • Need partial hydration
  • Value template-first development
  • Are building large, scalable applications

Choose Aurelia 1 if you:

  • Prefer convention over configuration
  • Need powerful dependency injection
  • Want strong data binding capabilities
  • Value object-oriented programming
  • Are building medium to large applications

Both frameworks excel in different scenarios:

  • Marko is perfect for applications that need streaming capabilities and compile-time optimizations
  • Aurelia 1 shines in larger applications that benefit from conventions and strong architecture

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

  • Use Marko for applications that need streaming capabilities and compile-time optimizations
  • Use Aurelia 1 for applications that need strong conventions and architecture





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