Starter App


for Mac/Linux

http://seattlejs.training.formidablelabs.com

@FormidableLabs | formidablelabs.com

Tip - space bar advances slides

Introduction

Let's get a starter application installed, up and running to build on...


github.com/FormidableLabs/notes

Tools

You will need the following basic tools on your development machine:

Node.js

Download from nodejs.org/download/

Node.js

Test it out!

$ node --version
$ npm --version

Git

Download from git-scm.com/downloads

Git

Test it out!

$ git --version

Notes

Notes is an example of a modern frontend application, test and infrastructure.

github.com/FormidableLabs/notes

Git Clone

Open up a terminal (cmd+spacebar, then start typing "terminal")

$ cd /PATH/TO/REPOS
$ git clone https://github.com/FormidableLabs/notes.git

which creates "/PATH/TO/REPOS/notes"

The Starter

We provide a "skeleton" and "full" version of the app.

We'll copy and use the "skeleton"...

Copy Skeleton

Copy "skeleton/amd" to your own folder.

$ cd PATH/TO/REPOS
$ cp -r notes/skeleton/amd APP_NAME
$ cd APP_NAME

Install Skeleton

Now install all the components.

$ npm install

Build Skeleton

Now let's build everything and run all the tests!

$ ./node_modules/.bin/grunt

... SNIPPED ...

Done, without errors

Our Lifecycles

... a teaser ...

Development Lifecycle

  • Write new code.
  • Experiment in dev. server (_dist=0)
  • Write and run tests.
  • Check code quality.
  • Commit!
  • ... rinse, and repeat ...

Release Lifecycle

  • Check code quality.
  • Run multi-browser tests.
  • Bundle for production.
  • Deploy!
  • ... rinse, and repeat ...

Application Tour

Let's see what we're starting with!

Dev. Server

Start the development server

$ ./node_modules/.bin/grunt server
Running "nodemon:dev" (nodemon) task
[nodemon] v1.0.19
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: /PATH/TO/notes/skeleton/amd/server/**/*
[nodemon] starting `node server/index.js`

Dev. Server

Kick the tires at:

The App!

Our JavaScript web application:

(gh) app/app.js | (local) app/app.js

Anatomy of a Web App

Let's look at our web app file hierarchy.

Tests

And let's see some Jasmine tests at: 127.0.0.1:3000/test/jasmine/test.html

And mocha tests here: 127.0.0.1:3000/test/mocha/test.html

Anatomy of Tests

Let's look at our test file hierarchy.

Get it started!

github.com/FormidableLabs/notes