Building with Javascript - MidWestJS

Building-with-Javascript

<section>
<section id="welcome" data-background-transition='zoom' data-transition='concave' data-background='http://ryanjarvinen.com/presentations/shared/img/broadcast_reveal_dark.png' data-state='blackout'>
<h2>Building</h2>
<p>with</p>
<h1>Javascript</h1>
<br/>
<p><i>featuring npm, grunt, yeoman, bower, and more!</i></p>
<br/>


<p class='fragment'><small><a class='fragment' href='http://gist-reveal.it/03ed892d1baad2798236'>gist-reveal.it/03ed892d1baad2798236</a></small></p>
</section>
<section id="contact-info" data-background-transition='zoom' data-transition='linear'>
 
<a href="http://ryanjarvinen.com"><img src="http://ryanjarvinen.com/presentations/shared/img/moo_openshift_horizontal.png"/></a>
 
<a href="http://ryanjarvinen.com/#/contact">contact info</a>
 
</section>
</section>
<section data-background-transition='zoom' data-transition='linear'>
  <section id="agenda" data-background-transition='zoom' data-transition='linear' data-markdown>
    #Agenda
1. [npm](#npm)
2. [grunt](#grunt)
3. [yeoman](#yeoman) 
4. [bower](#bower) 
5. [demo](#mean-stack)
6. [and MORE!](#new-tools)
  </section>
  <section id="requirements" data-markdown>
### Requirements:
`npm` provides an easy way to install your javascript build tools:

      npm install -g yo bower grunt-cli

  </section>
</section>
<section data-transition='concave'>
  <section id="npm" data-transition='concave' data-markdown>

![npm](https://www.npmjs.org/static/img/npm.png)

[npmjs.org](npmjs.org)

  </section>
  <section id="package.json" data-markdown>
## package everything

    package.json

[package.json spec](https://www.npmjs.org/doc/files/package.json.html)

  </section>
  <section id="installing-dependencies" data-markdown>

install `dependencies`:

    npm install --production

install `dependencies` && `devDependencies`:

    npm install

  </section>
  <section id="saving-dependencies" data-markdown>
### Saving dependencies

Saving `dependencies`:

npm install --save MODULE_NAME


Saving `dev-dependencies`:

npm install --save-dev MODULE_NAME

  </section>
  <section id="npm-start" data-markdown>
Start your webserver:

    npm start

Runs whatever you define in `scripts.start`

  </section>
  <section id="node-modules" data-markdown>

`node_modules`

When to check your [`node_modules` into git](http://www.futurealoof.com/posts/nodemodules-in-git.html) (mikeal)

  </section>
</section>
<section data-transition='concave'>
  <section id="grunt" data-transition='concave' data-markdown>
## grunt

![grunt](https://www.openshift.com/sites/default/files/grunt_logo.gif)

[Grunt](http://gruntjs.com/): The Javascript task runner

    npm install --save-dev grunt

  </section>
  <section id="using-grunt" data-transition='concave' data-markdown>
### using grunt

Watch your files and automatically reload your webserver when needed:

    grunt serve

Combine and minify your client side sources:

    grunt build

  </section>
  <section id="grunt-vs-npm" data-transition='concave' data-markdown>
# OR
  </section>
  <section id="npm-run" data-transition='concave' data-markdown>
## npm run

`npm` is also a task runner!

Task Automation with [npm run](http://substack.net/task_automation_with_npm_run) (substack)

  </section>
  <section id="browserify" data-transition='concave' data-markdown>
![browserify](http://browserify.org/images/browserify.png)

![browserify](http://browserify.org/images/wizard_hat_blue.png)

[Browserify](http://browserify.org/) lets you `require('modules')` in the browser by bundling up All of your dependencies.

    npm install -g browserify

  </section>
</section>
<section data-transition='concave'>
  <section id="yeoman" data-transition='concave' data-markdown>

## yeoman
Scaffolding for Javascript

![yeoman](https://www.openshift.com/sites/default/files/yo-man.png)

[Yeoman](http://yeoman.io/)

    npm install -g yo

  </section>
  <section id="angular-fullstack" data-transition='concave' data-markdown>

## angular-fullstack 

Testing out the top community-maintained generator:

    npm install -g generator-angular-fullstack

[https://github.com/DaftMonk/generator-angular-fullstack](https://github.com/DaftMonk/generator-angular-fullstack)

  </section>
  <section id="mean-stack" data-transition='concave' data-markdown>
# MEAN stack

![MEAN stack](https://www.openshift.com/sites/default/files/mean_logo.png)

[Yeoman serves up a real MEAN stack](https://www.openshift.com/blogs/yeoman-serves-up-a-real-mean-stack)

  </section>
</section>
<section data-transition='concave'>
  <section id="bower" data-transition='concave' data-markdown>
## bower

client side dependency management

[http://bower.io/](http://bower.io/)

![bower](http://bower.io/img/bower-logo.png)

  </section>
  <section id="rework" data-transition='concave' data-markdown>
## rework
`rework` or `npm-rework-cli`

[rework](https://www.npmjs.org/package/rework)

`@import` css from a node module

  </section>
  <section id="resinate" data-transition='concave' data-markdown>
### resin / resinate

[resinate](https://www.npmjs.org/package/resinate)

`@import` css from a node module, pre-processing

  </section>
</section>
<section data-transition='concave'>
  <section id="new-tools" data-transition='concave' data-markdown>
## New Stuff

It's hip to be a stream
  </section>
  <section id="gasket" data-transition='concave' data-markdown>
[https://github.com/datproject/gasket](https://github.com/datproject/gasket)

![gasket](https://raw.githubusercontent.com/datproject/gasket/master/gasket.png)


  </section>
</section>
<section>
  <section id="links" data-markdown>
  ## Want More Info?

  1. [npmjs.org](https://www.npmjs.org)
  2. [browserify](http://browserify.org/)
  3. [gasket](https://github.com/datproject/gasket)
  4. [MEAN stack demo](https://www.openshift.com/blogs/yeoman-serves-up-a-real-mean-stack)

  </section>
  <section id="thank-you" data-markdown>

  ***Thanks for following along!***

  link to slides: 

  [gist-reveal.it/03ed892d1baad2798236](http://gist-reveal.it/03ed892d1baad2798236)
  </section>
</section>