AaronTweeton.com

Four JavaScript Tools Every Web Designer Should Know About

—

by

Aaron
in

If you’re a web designer or just anybody who uses the Internet, you’ve probably asked this question:

“Wouldn’t it be cool if I could do [SOMETHING] on this website so I could make my life easier?”

Maybe you’ve thought of something that enhances your website, like a calculator tool, or an interactive table, or a list that would allow you to filter through things.

Nah, that’s too hard…

So you’ve got this great idea to improve the user experience of your website, but maybe it seems too hard to bring to life. Somehow you get the idea you’ll need to get a team of expensive software engineers with computer science degrees and it will take two years with a budget of $1,000,000 to finish!

It’s actually easier than you think, with the help of four JavaScript tools I’m going to show you, along with resources to teach you how to use them.

So easy, even a graphic designer can learn it

Whoa whoa! Put down the stones! The graphic designer I’m referring to is me! For the longest time, I mostly stuck to designing websites in Photoshop, and then developing them in HTML and CSS, and some PHP or ASP. But for the most part, I stayed away from JavaScript because I didn’t know much until there arose a need to go beyond creating websites and learn how to build web applications.

Granted, it wasn’t easy at first:

  • I had to translate and make sense of technical language
  • Sometimes I had to rewatch the same tutorial video ten times for a concept to make sense
  • I had to rewrite code from scratch about five times. One application I rewrote using jQuery, then BackboneJS, then AngularJS, and AngularJS again to address lessons learned

But once I learned how to build something simple with these JavaScript tools, I’ve been able to create calculators, interactive tables, filterable lists, interactive quizzes, and more.

If you design websites or even just support one, these are tools worth checking out. You should at least know about them so you can improve the functionality of your website and provide a better user experience.

Please note, this is my opinion and it’s written for web designers, content creators and business leaders, so I’ve tried to avoid too much technobabble.

Four JavaScript tools you can learn to use yourself

So here’s four tools every web designer or anyone involved in a website should at least know about.

 

“Vanilla” JavaScript

The “vanilla” is a synonym for plain Jane JavaScript. It’s what comes shipped with every browser.

Strengths

  • Doesn’t rely on any other JavaScript tools
  • Everything you need is in the browser
  • Learning curve is easy

Weaknesses

  • Requires a lot of up-front code to be written to do more than basic functions, especially if you’re trying to support older browsers like Internet Explorer

Resources worth checking out for “Vanilla” JavaScript:

jQuery

 

jQuery is a tool that works on top of “Vanilla” JavaScript. It provides more functions that work right away instead of requiring you to write a bunch of functions from scratch.

Strengths

  • Saves a bunch of time
  • Excellent for when you want to change what gets viewed in the browser, such as colors, animations, or showing/hiding blocks of content
  • Learning curve is perhaps the easiest of these four

Weaknesses

  • Doesn’t handle behind-the-scenes data as well as other tools
  • Won’t help much if you’re trying to build a web application
  • Can quickly become a mess if you’re not keeping things simple and repeating code

Resources

BackboneJS

I started playing with Backbone about three years ago when I needed to build a web application with interactive tables that pulled data from an external source. BackboneJS was the first tool I used before rewriting the applications to use AngularJS.

Strengths

  • Excellent behind-the-scenes data handling
  • Packed with features like a template engine, a routing system that allows you to build single page applications, etc.
  • Learning curve is easier than AngularJS

Weaknesses

  • Sometimes writing code to change what gets viewed in the browser seems tedious
  • Learning curve is steeper than jQuery and Vanilla JavaScript

Recommended resources

AngularJS

AngularJS is like BackboneJS in that you can create web applications. However, they’re radically different in their approach. BackboneJS is like working with Legos to build a model car, whereas AngularJS is like buying a modeling kit with specific components. This has advantages and disadvantages. Anyway, I eventually rewrote my web applications using AngularJS because I needed to be able to write applications faster.

Strengths

  • It’s got everything you need to create web applications
  • It saves a ton of development time, once you get a handle on it

Weaknesses

  • Angular has an “opinion”: You’ve got to do things the Angular way
  • Learning curve is much steeper than Backbone. I found the official documentation confusing and almost worthless, having to rely on Lynda.com and YouTube videos.
  • Combines HTML and JavaScript code together in a way that might be confusing at first
  • There’s two types of Angular: Angular 1.x and Angular 2.x, and they both don’t seem compatible at all

Resources

So those are four JavaScript tools you can learn to use, even if you’re coming from a graphic design background like me. If you’re a content creator or a business owner, you can benefit from knowing these tools exist and who knows, maybe you’d be interested in learning how they work.