A summary of JavaScript libraries and frameworks that web designers should know about. Features "Vanilla" JavaScript, jQuery, BackboneJS and AngularJS.

1. EVERY WEB DESIGNER
SHOULD KNOW ABOUT
4 JAVASCRIPT TOOLS

2. “WOULDN’T IT BE COOL IF I COULD
DO ___ ON THIS WEBSITE TO
MAKE MY LIFE EASIER?”
Everybody
FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT

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

4. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
VANILLA JAVASCRIPT
▸ Doesn’t rely on any other
JavaScript tools
▸ Everything you need is in
the browser
▸ Learning curve is easy

5. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
VANILLA JAVASCRIPT
▸ 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

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

7. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
JQUERY
‣ 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

8. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
JQUERY
‣ 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

9. 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.

10. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
BACKBONEJS
▸ 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

11. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
BACKBONEJS
▸ Sometimes writing code to change
what gets viewed in the browser
seems tedious
▸ Learning curve is steeper than
jQuery and Vanilla JavaScript

12. 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.

13. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
ANGULARJS
▸ It’s got everything you need to
create web applications
▸ It saves a ton of development time,
once you get a handle on it

14. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
ANGULARJS
▸ Angular has an “opinion”: You’ve got to do
things the Angular way
▸ Learning curve is much steeper than Backbone.
I personally 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 to be
compatible at all, which is causing web
developers to consider other tools like
ReactJS.

15. FOUR JAVASCRIPT TOOLS EVERY WEB DESIGNER SHOULD KNOW ABOUT
RESOURCES
▸ CSS-Tricks (https://css-tricks.com/snippets/javascript/)
▸ Smashing Magazine (https://www.smashingmagazine.com/tag/javascript/)
▸ TutsPlus (https://code.tutsplus.com/categories/javascript)
▸ Mozilla (https://developer.mozilla.org/en-US/docs/Web/JavaScript)
▸ jQuery documentation (http://api.jquery.com)
▸ Joe Zim’s JavaScript blog/BackboneJS (https://www.joezimjs.com)
▸ lynda.com (https://www.lynda.com/JavaScript-training-tutorials/244-0.html)
▸ CodeAcademy (https://www.codecademy.com)
▸ Joe Maddalone’s Angular videos (https://www.youtube.com/user/joemaddalone)
▸ Thinkster’s revised Angular documentation (https://thinkster.io/a-better-way-to-learn-angularjs)