Todo App

A simple ToDo web app using only javascript!

Website: todos
Source: github

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