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
Method 2: ES6
Using ES6 features led to cleaner code.
const / letinstead of
for..ofloop is more natural.
- arrow functions don’t need
thisto 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.
- 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!