https://github.com/raravi/todo-vanilla

A simple ToDo web app using only javascript!
https://github.com/raravi/todo-vanilla

babel bem css es5 es6 javascript mvc-pattern transpile

Last synced: about 2 months ago
JSON representation

A simple ToDo web app using only javascript!

• Host: GitHub
• URL: https://github.com/raravi/todo-vanilla
• Owner: raravi
• License: mit
• Created: 2020-01-12T21:45:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-09T12:52:14.000Z (over 3 years ago)
• Last Synced: 2025-05-17T03:14:56.061Z (about 1 year ago)
• Topics: babel, bem, css, es5, es6, javascript, mvc-pattern, transpile
• Language: JavaScript
• Homepage: https://raravi.github.io/todo-vanilla/
• Size: 279 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# todo-vanilla

A simple ToDo web app using only javascript!

![license](https://img.shields.io/github/license/raravi/todo-vanilla)  ![version](https://img.shields.io/github/package-json/v/raravi/todo-vanilla)  ![dependencies](https://img.shields.io/depfu/raravi/todo-vanilla)  ![last-commit](https://img.shields.io/github/last-commit/raravi/todo-vanilla)

This project is written to highlight the differences between ES5 / ES6 code. And provide an easy reference to refactor the same app into MVC pattern.

It is motivated by [todomvc](http://todomvc.com), and conducted as an exercise to understand the differences of each method followed.

For all methods,

* **Semantic HTML** elements used for better organization of code.

* [BEM](http://getbem.com/) used to write CSS. **BEM** helped to incorporate changes to the design of the app with minimal updates to the CSS.

## Method 1: ES5

The first iteration was used to get Todo app working as fast as possible. The javascript was written in classical style. There is no separation of **UI/Business Logic/Data**.

## Method 2: ES6

Using ES6 features led to cleaner code.

* `const / let` instead of `var` variables.

* `for..of` loop is more natural.

* arrow functions don't need `this` to be set separately.

* spread operator makes life much easier :)

## Method 3: MVC pattern

Refactoring the code to be written in MVC requires quite a bit of boilerplate. But it makes writing code easier!

* The focus is adding each functionality one after the other.

* Thinking in terms of what each part handles (Model, View, Controller) reduced errors.

* When errors cropped up, they were far easier to debug than in the previous approaches!

* Maintainable code.

## ES5 transpiled

This folder contains the transpiled output of the ES6 Javascript code. It is generated to understand the performance of transpiled code on older browsers.

* Does the transpilation add too much extra code for it to be not useful?

* Which ES6 features add the most code?

By knowing these, we get an idea of the benefits of using ES6 features too!

[![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/Y8Y21VCIL)