Ajax Type Ahead in PlainJS vs VueJS

1 minute read

A while ago, a certain Wes Bos released a free Javascript course where he builds 30 apps using plain javascript.

The 6th exercise was to implement a simple ajax type ahead. I followed the exercise and refactored the code using module design pattern, and used proper forms of event listeners.

I also implemented it using Vue JS.

Here’s the Plain JS version

(click ‘Rerun’ and also open in a new tab to see the demo clearly:

See the Pen JS30 - 06 - Ajax Type Ahead - PlainJS by Prasanna N (@npras) on CodePen.

And here’s the Vue JS version:

See the Pen JS30 - 06 - Ajax Type Ahead - VueJS by Prasanna N (@npras) on CodePen.

Things I learned from this exercise

  • ES6 is so cool. I’m almost done with this book covering all the features of ES6 (aka EcmaScript2015). It feels great to relate to and be able to use all the new cool features. Javascript is becoming powerful! Features that I used here:
    • fat arrow functions
    • array destructuring
    • const and let declarations
    • string interpolation
    • concise method syntax to define a method in an object
  • CoffeeScript might no more be needed! The fat arrow idea, the string interpolation, the destructuring etc were all pioneered by CS when it came up. But now that ES6 took the lessons and implemented them fairly, we won’t be needing it anymore.

  • I didn’t use any library APIs to deal with the DOM. For sending ajax request, I was planning Wes would use the ever present (and only available) XMLHttpRequest. But he introduced me to the awesome fetch api which is a native api soon to be standardised (but already working in firefox and chrome). I also found and used the 'DOMContentLoaded' event to implement the native alternative for jquery’s famous $(document.ready()).

  • The vast different between these 2 implementations of the same idea. Vue (and other frameworks) bring in a lot of abstractions and introduce new ways to think about the web interactions.

  • The current Vue JS version is the final one I arrived at. But previously I used watchers and data function (in the component) to get the same result. I’d like to know the ideal way though.