Vue 2 vs Marko: A Comprehensive Comparison

This website is powered by ItGalaxy.io

In the world of frontend development, Vue 2 and Marko represent two different approaches to building web applications. While Vue 2 is a mature framework with a rich ecosystem, Marko offers a unique streaming-first architecture with powerful templating features. 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. Performance and Bundle Size
  10. Learning Curve
  11. Conclusion

Core Concepts

Vue 2 and Marko take fundamentally different approaches to building web applications:

  • Vue 2 uses a progressive framework approach with a virtual DOM and component-based architecture
  • Marko is a streaming-first UI framework with a unique template syntax and powerful server-side rendering capabilities

Reactivity and State Management

State Declaration

Both frameworks offer different ways to declare and manage state:

Vue 2’s Approach

<script>
export default {
  data() {
    return {
      name: "John",
    };
  },
};
</script>

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

Vue 2 uses a component-based approach with a data function.

Marko’s Approach

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

Marko uses a concise template-based syntax for state declaration.

State Updates

Vue 2

<script>
export default {
  data() {
    return {
      name: "John",
    };
  },
  created() {
    this.name = "Jane";
  },
};
</script>

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

Marko

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

Computed Values

Vue 2

<script>
export default {
  data() {
    return {
      count: 10,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
};
</script>

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

Marko

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

Templating and Components

Basic Templates

Vue 2

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

Marko

<h1>Hello world</h1>

CSS Styling

Vue 2

<template>
  <div>
    <h1 class="title">I am red</h1>
    <button style="font-size: 10rem">I am a button</button>
  </div>
</template>

<style scoped>
.title {
  color: red;
}
</style>

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>

DOM Manipulation

List Rendering

Vue 2

<script>
export default {
  data() {
    return {
      colors: ["red", "green", "blue"],
    };
  },
};
</script>

<template>
  <ul>
    <li v-for="color in colors" :key="color">
      {{ color }}
    </li>
  </ul>
</template>

Marko

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

Conditional Rendering

Vue 2

<script>
export default {
  data() {
    return {
      TRAFFIC_LIGHTS: ["red", "orange", "green"],
      lightIndex: 0,
    };
  },
  computed: {
    light() {
      return this.TRAFFIC_LIGHTS[this.lightIndex];
    },
  },
  methods: {
    nextLight() {
      this.lightIndex = (this.lightIndex + 1) % this.TRAFFIC_LIGHTS.length;
    },
  },
};
</script>

<template>
  <div>
    <button @click="nextLight">Next light</button>
    <p>Light is: {{ light }}</p>
    <p>
      You must
      <span v-if="light === 'red'">STOP</span>
      <span v-else-if="light === 'orange'">SLOW DOWN</span>
      <span v-else-if="light === 'green'">GO</span>
    </p>
  </div>
</template>

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>

Event Handling

Click Events

Vue 2

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    incrementCount() {
      this.count++;
    },
  },
};
</script>

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="incrementCount">+1</button>
  </div>
</template>

Marko

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

Form Handling

Text Input

Vue 2

<script>
export default {
  data() {
    return {
      text: "Hello World",
    };
  },
};
</script>

<template>
  <div>
    <p>{{ text }}</p>
    <input v-model="text" />
  </div>
</template>

Marko

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

Select Input

Vue 2

<script>
export default {
  data() {
    return {
      selectedColorId: 2,
      colors: [
        { id: 1, text: "red" },
        { id: 2, text: "blue" },
        { id: 3, text: "green" },
        { id: 4, text: "gray", isDisabled: true },
      ],
    };
  },
};
</script>

<template>
  <select v-model="selectedColorId">
    <option
      v-for="color in colors"
      :key="color.id"
      :value="color.id"
      :disabled="color.isDisabled"
    >
      {{ color.text }}
    </option>
  </select>
</template>

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>

Lifecycle Management

Component Mounting

Vue 2

<script>
export default {
  data() {
    return {
      pageTitle: "",
    };
  },
  mounted() {
    this.pageTitle = document.title;
  },
};
</script>

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

Marko

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

Performance and Bundle Size

Vue 2

  • Virtual DOM-based updates
  • Progressive framework
  • Rich ecosystem
  • Moderate bundle size

Marko

  • Streaming-first architecture
  • Efficient server-side rendering
  • Progressive hydration
  • Automatic code splitting

Learning Curve

Vue 2

  • Moderate learning curve
  • Component-based architecture
  • Rich ecosystem to learn
  • Build setup required

Marko

  • Moderate learning curve
  • Unique template syntax
  • Powerful server features
  • Strong streaming capabilities

Conclusion

Choose Vue 2 if you:

  • Need a progressive framework
  • Want a gentle learning curve
  • Need a rich ecosystem
  • Are building traditional web applications
  • Value template-based development

Choose Marko if you:

  • Need powerful server-side rendering
  • Want streaming capabilities
  • Need progressive hydration
  • Are building large-scale applications
  • Value template-based development

Both frameworks excel in different scenarios:

  • Vue 2 is perfect for teams that want a flexible, progressive framework
  • Marko shines in applications where server-side rendering and streaming are crucial

The choice between Vue 2 and Marko often depends on your project’s requirements:

  • Use Vue 2 for building traditional applications with a gentle learning curve
  • Use Marko for building applications that need powerful server-side rendering and streaming capabilities





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