Removing jQuery

March 28, 2019

I spent the last week removing jQuery from the Todo MVC app and replacing it with vanilla JavaScript. (Result: https://glitch.com/~courageous-sandalwood)

I struggled at first and realized how useful some jQuery functions are at simplifying certain things. Such as event delegation + method chaining combined with specific selectors. Eg.

Element
  .on('click', '.class', [callback])
  .on('dblclick', 'label', [callback])
  .on...

Also I'm much more comfortable with Handlebars.js and templating in general, as well as routing and local storage.

Some notes:

Handlebars.compile([htmlTemplate]) takes in an HTML template in String format, and returns a function. This function can be passed in data, whose values will replace the corresponding variables in the html template.

EG.

var data = {title: 'I'm a Title!'} 
var htmlTemplate = '<div>{{title}}</div>';
var handlebarsTemplate = Handlebars.compile(htmlTemplate);
handlebarsTemplate(data)
// returns "<div>I'm a Title!</div>"

In Handlebars.js, the syntax for looping through an array that's a property of an object is:

{{#[propertyname]}} {{/propertyname}}

If you want to pass in an array directly and loop through it, we can use: {{#this}} {{/this}}

Next exercise is to remove certain functions from the app, and then fix it by reimplementing the function.

← back to all posts