4 JavaScript Tools Every Designer Should Know About
1 like521 views
The document outlines four essential JavaScript tools for web designers: Vanilla JavaScript, jQuery, Backbone.js, and AngularJS, each with unique features and learning curves. Vanilla JavaScript is foundational but requires extensive code for advanced functions, while jQuery simplifies common tasks at the cost of not handling backend data well. Backbone.js excels in data handling for web applications but has a steeper learning curve than jQuery, and AngularJS provides a comprehensive framework for web apps but demands adherence to its specific approach and presents compatibility issues between its versions.
4 JavaScript Tools Every Designer Should Know About
- 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)