- DOM manipulation
- DOM Events
- AJAX / Data retrieval
- Effects & animation
- HTML templating
- Page layout
- UI widgets
- Graphics & charts
- Data modeling
- Routing & navigation
- Multi-browser support
- Mobile support
Here's another way I like to think of it - a webpage is made up of the User Interface (HTML & CSS), Interactivity (JS + DOM), and Data (which we often bring in through JS). You can make your data-driven interactive UI without a library, or you can bring in different libraries to help out with different parts. Some libraries will do a lot, some will do just one part:
One of the hardest parts of web development is deciding what libraries to use, because you'll often be writing code that builds on top of the libraries, and it's hard to change your decision later. There's no right answer - know your options, then make an educated guess.
JS browser libraries
These are libraries that will make it easier for you to use browser functionality - like the DOM API, the window methods - the topics we discussed in this course. They often make it possible to accomplish the same thing in less code, and they'll take care of cross-browser bugs.
JS app architecture libraries
These libraries help you with your web apps as they grow larger. Your code might be manageable now, at a few hundred lines of code, but once you get to thousands of lines of code, your code might become "spaghetti code" - an unmanageable mess. These libraries help you separate your "model" (data) from your "view" (presentation), and often use object-oriented programming principles to organize your code.
Mini libraries & microlibraries
You can also use small libraries that developers have written for a specific task - when they're really small, they're sometimes called "microlibraries". Here's a smattering:
- DOM: tinyDOM
- Events: Events.js
- AJAX: MicroAjax
- Animation: Morpheus, Viper
- Data Modeling: Spine, Knockout
- Templates: Handlebars, Mustache
- Routing: PathJS
- Object-Orientation: Classy, Klass
- Graphics: Processing.JS (See example on KA), RaphaelJS (See example on KA), D3, Three.JS (See example on KA), Paper.js
- Charts: gRaphael, High Charts
- Date/time: moment.js
Have you tried out a JS library in your webpages here on Khan Academy? Share it in the comments below.
Want to join the conversation?
- don't you think that using these libraries ; is preventing people for learning more? making a lot of reasearch? or not? because by using that people can get lazy. of course up to me!(20 votes)
- hmmm...after watching the video and reading the article, I was introduced to various JS libraries, but I failed to grab the essence of "how to use a library". I go visit the sites and there are download and code for copy but I don't know how to start...it is just me or does anyone share the same predicament?(28 votes)
- The library has to be hosted somewhere, which means you have to download a js file and upload it to a place it can be hosted, or you could link to an existing hosted file, or you can write or paste your own code in a text document (like notepad) and save it with a .js extension.
Then you link to your code with script tags as described in this section of the course, and begin using the functions from the library as usual.
For me, I have hosted websites so I upload my js libraries to a js folder on the server. Then I link to them in the head of the document.(14 votes)
- If I make a library, can I somehow share it with everyone on Khan Academy?(6 votes)
- Khan Academy allows resources from RawGit.com. If you host your library on a GitHub.com repository, Khan Academy users can access it via RawGit's CDN.(8 votes)
- Are these libraries allowed on Khan Academy?(6 votes)
- Yes many library's are allowed on Khan Academy such as processing.js, JQuery, and the example one Pamela made.(7 votes)
- Can you guys make a tutorial for React JS and Node JS, and maybe even full stack? These are newer technologies that are becoming more and more wanted in the job market rather than Vanilla JS/JQuery.(8 votes)
- I think they only did front end because you can make web editors, it's not like they're gonnna let you try backend on their server(3 votes)
- I always end up using a couple plugins on each website i build which all require JQuery. Here you've said it (Jquery) is generally too big to be including with your website, so what's the solution? Build your own custom programs every time you want to do something, just so you don't have to include jquery?(3 votes)
- If you have to use it because another library requires it, there's really no choice.
Either you use jQuery, or you don't use the plugins that require it.
Including jQuery is not a disaster or anything.(5 votes)
- So if I learn Jquery next , can it actually replace the DOM events and animations in a more easier and neat way?(2 votes)
- Hi guys! I have a few questions. First, what does UI stand for? I saw it used in this article but I don't know what it means. Second, can you only use one code library for every program you make or can you use multiple? Also, how would you decide which library to use? Thanks in advance!(2 votes)
- Hey Garrett.
UI stands for User Interface. So it's the part of a program where the computer communicates to the user, or the user communicates to the computer.
A button is a prime example. It allows the user to press it, after which the computer will know that it has to respond.
An other example is a text area, where the computer can display some text for the user.
You can use as many libraries as you would like.
As long as they don't conflict with each other.
Just keep in mind that the person visiting the website will have to download all those libraries.
So the fewer the better.(4 votes)
- Hmm, I have a problem here. Why isn't Node.js listed?(2 votes)
- Perhaps you should read the first line of this article again?
There is not room to list them all. I can think of many more that aren't listed here either.(4 votes)
- What's the difference between a CDN and the cloud? Or is the CDN a part of the cloud?(2 votes)
- You could say a CDN a part of the cloud. A CDN is just servers that distribute internet content to people.(2 votes)