Title

class: center, middle

# Intro to JS Libraries

???
Remember to breathe!

`P` for presenter mode.
`C` to open a cloned window.

---
class: left, middle

# Agenda

1. Introduction
2. What is a library?
3. When should I use a library?
4. When shouldn't I use a library?
5. Where can I find these libraries?
6. How do I use these libraries?
7. Top NPM downloads and companies who use them

---
class: center, middle

# Introduction

---
class: center, middle

# About me

---

layout: false
class: center, middle

# Carmen Long

## Twitter: [@Carmalou](https://twitter.com/carmalou)
## GitHub: [Carmalou](https://github.com/carmalou)
## Blog: [www.carmalou.com](http://carmalou.com/)
## TwisterJS: [www.twisterjs.org](http://twisterjs.org/)

???
Hi! My name is Carmen, and I'm a web developer with Weather Decision Technologies. I'm also working on TwisterJS -- a series of apps to teach underprivileged children about tech
---
class: center, middle

# What is a library?

---
class: center, middle

A JavaScript library is a bunch of pre-written JavaScript functions. Basically someone has gone in and written out all the less-than-fun stuff, so you don't have to. It's very handy.

---
class: center, middle

# But wait....what's a framework?

---
class: center, middle

A JavaScript framework is _also_ a bunch of pre-written JavaScript functions.

---
class: center, middle

# I'm confused....what's the difference?

---
class: center, middle

Well strictly speaking, there isn't one. Both provide prewritten functions for you to use. You'll often hear the words used interchangeably.

---
class: center, middle

# However

---
class: left, middle

A *library* will allow you to pick and choose which functions you would like to use. Much like a physical library doesn't require you to read every book in a specific order, and you can check out whichever books you want.

A *framework* will provide a very specific way to write your code. And much like the frame of a physical structure, if you don't follow the framework layout specifically, things can begin falling apart.

???
Angular/jQuery comparison

---
class: center, middle

### jQuery
``` js
$( "#productinfo p:contains('Orientation: One-Sided')" )
  .replaceWith( "<p>Orientation: All-Around</p>" );
```
---
class: center, middle

### AngularJS
``` js
app.controller('tabSetup', function($http) {
$http.get('JSON/buildingBlocks.json')
  .success(function(data) {
      this.tabMenu = data;
  }.bind(this))
  .error(function(data) {
      alert("FAILED TO GET");
  });
});
```

---
class: center, middle

# When should I use a library?

---
class: center, middle

### A library can be very useful in large-scale applications.

???
For instance a social network with millions of users which requires instanteous updating might want to use a framework.

---
class: center, middle

### When you understand how to write this without the library.

???
If you don't understand what you're doing without the library, please be strong and take a step back to learn it without the library

---
class: center, middle

### Whenever you want.

???
Really it all just boils down to personal preference. Some people really prefer using libraries to get things done fast, while others don't want the complexity. It really just comes down to your preference.

---
class: center, middle

# When should I *not* use a library?

---
class: center, middle

### If you are working on a small project.

???
Adding a library adds a lot of complexity to your project. Consider whether or not that complexity is actually necessary, or if you can get by without the library.

---
class: center, middle

### If you don't know how to write this without the library.

???
I said it before, but I think it stands repeating. If you are working on a project and you can't do it without the library, step back and learn how to do the work without the library. It will be far more beneficial later to understand what is going on under the hood.

---
class: center, middle

### Whenever you want.

---
class: center, middle

# Ok, I'm in.

# What's the best library?

???
Ok, I will let you in on a little secret. The best library is....
---
class: center, middle

# PSYCH!

---
class: center, middle

There isn't really a 'best' framework. Some are more beneficial in certain projects than others, but there isn't really a 'best' library.

---
class: center, middle

# Top 5 Libraries

???
I pulled these from the NPM list of most depended-upon libraries

---
class: left, middle

1. lodash
2. async
3. underscore
4. request
5. commander

---
class: center, middle

# lodash

A collection of JavaScript functions for manipulating objects, arrays, and collections.

---
class: center, middle

# async

Async is a utility module which provides straight-forward, powerful functions for working with asynchronous JavaScript. Basically there are some common issues that can arise in asynchronous JavaScript, and this library will help watch out for those.

---
class: center, middle

# underscore

A collection of JavaScript functions for manipulating objects, arrays, and collections. Lodash was forked from this library.

---
class: center, middle

# request

Simplifies making http calls

---
class: center, middle

# commander

Parses command line arguments, which can be helpful if you have more complex options being passed in.

---
class: center, middle

# Wrapping Up

---
class: center, middle

Remember that not all libraries are going to work together. If you are using more than one library, check to make sure that they are compatible.

---
class: center, middle

For example, one library might use promises for async, while another uses streams.

These will *not* work together.

---
class: center, middle

Be careful using the latest version of any library. Look for the word 'stable'

---
class: center, middle

When including a library you can use 'npm install', download the library and include it in your project, or link to it. This depends upon how the library has been made available. Check your library on GitHub and see what is recommended.

---
class: center, middle

# Questions?