unknown

An overview of implementing sorting algorithms within Vue JS, discussing factors such as execution time, number of elements, and speed per frame.

Vue JS Sorting Algorithms

Hey there! Welcome to The Looop Tech - Vue.js. I’m your host IGC , your friendly neighborhood Vue.js enthusiast! Join me each week as I chat about the latest Vue.js news, share fun tips, and dive into all things Nuxt.js. It’s just me here, so if you’

Vuejs&Nuxtjs

# Visualising Sorting Algorithms with Vue.js & TypeScript
TL;DR
Built a sorting algorithm visualiser using Vue.js and TypeScript to:
1) Learn a new frontend framework (Vue).
2) Revisit and solidify my understanding of classic sorting algorithms.
3) The app precomputes all sorting steps and plays them back frame-by-frame using a custom player.

## Why I Built This
I’ve been deep in React for a while and wanted to challenge myself with something different, like Vue. Vue’s reactive system and the Composition API made it a breeze to get started, and I combined it with TypeScript to keep everything strongly typed.

I also wanted a hands-on way to refresh my knowledge of sorting algorithms. Rather than just reading up on them, I figured I'd build a tool that breaks them down visually.

## How It Works
The core of the app is a custom player that runs through each step of the selected sorting algorithm. Here’s how it works:
- When an algorithm is selected, it computes every step needed to sort the data.
- These steps are stored as a sequence of frames.
- The player then animates these frames one by one, allowing you to scrub, pause, resume, and reset the playback.
- You can also adjust the number of bars and speed per frame for more control over the visualisation.

### Supported algorithms:
- Bubble Sort
- Merge Sort
- Insertion Sort
- Quick Sort

## What I Learned
1) Vue is super easy to learn.
2) Building a step-by-step visualisation forces a much deeper understanding of how sorting actually works under the hood.
3) Creating a reusable playback system was a great challenge in timing, control flow, and UI sync.

<p># Visualising Sorting Algorithms with Vue.js &amp; TypeScript
TL;DR
Built a sorting algorithm visualiser using Vue.js and TypeScript to:
1) Learn a new frontend framework (Vue).
2) Revisit and solidify my understanding of classic sorting algorithms.
3) The app precomputes all sorting steps and plays them back frame-by-frame using a custom player.

## Why I Built This
I’ve been deep in React for a while and wanted to challenge myself with something different, like Vue. Vue’s reactive system and the Composition API made it a breeze to get started, and I combined it with TypeScript to keep everything strongly typed.

I also wanted a hands-on way to refresh my knowledge of sorting algorithms. Rather than just reading up on them, I figured I'd build a tool that breaks them down visually.

## How It Works
The core of the app is a custom player that runs through each step of the selected sorting algorithm. Here’s how it works:
- When an algorithm is selected, it computes every step needed to sort the data.
- These steps are stored as a sequence of frames.
- The player then animates these frames one by one, allowing you to scrub, pause, resume, and reset the playback.
- You can also adjust the number of bars and speed per frame for more control over the visualisation.

### Supported algorithms:
- Bubble Sort
- Merge Sort
- Insertion Sort
- Quick Sort

## What I Learned
1) Vue is super easy to learn.
2) Building a step-by-step visualisation forces a much deeper understanding of how sorting actually works under the hood.
3) Creating a reusable playback system was a great challenge in timing, control flow, and UI sync.</p>