modern web development: node.js and angular

MODERN WEB DEVELOPMENT: JAVASCRIPT GALORE

Jamie DAVIDSON and Roberto Fuentes

Startup Institute boston // follow me : @jamiehdavidson

Who am I?

Web Developer/Full Stack Engineer

2+ years Rails experience

Angularjs, coffeescript, sass


What we’ll cover+

+ Express


DisclaimerI don’t really know node

But let’s learn together


Why Node?

✓Same language you use on the client

✓You’re building a data-intensive, real time application

✓you’re building your company’s mobile Web app

✓You want to use the newest stuff


If you’ve only be using jquery for your javascript, you might want to stay away

It’s still a teenager, so it requires patience

Documentation, conventions, and libraries are still being established

1

2

3

+ What should i know about node


Node package manager (Npm)

essentially, it’s bundler

npm install [library] --save


+ Web frameworks

Express

SocketStream- “Dedicated to building single page realtime apps”

Derby Sails - Rails inspired

Tower - Also Rails inspired

Compoundflatiron

Many others

The cool kidMeteor

The default


You can only build a web server with node. you need one of these to build a web app

AngularjsJavascript mvc on the client

developed by google

Models, controllers, templates, Directives


✓Well, google developed it

✓you’re building a website with rich functionality and interactivity

✓you hate full page loads

✓you want to write tests for your client-side javascript too

Why Angular?+

✓small learning curve


one-page web apps = difficult seo management

there’s a fight to be the de facto mvc Js client winner. angular may win, it may not

documentation can be inconsistent (although i hear it’s better than ember’s)

1

2

3

+ What should i know about Angular



HTML and css

Sass over css+


Browsers don’t know what a sass (or scss) file is. they still want css

with node, use compass to automatically compile sass to css. rails uses sass by default

it’s easy to understand. there’s no reason to not use it

1

2

3

+ What should i know about Sass


When used correctly, it can make cross-browser styling much, much, much easier4

plain old html also sucks+

HTML HaML Jade


Browsers don’t know what a haml or jade file is. they want html

jade is default in node and will automatically handle conversion to html

it’s easy to understand. there’s no reason to not use it

1

2

3

+ What should i know about haml/jade

closing html tags


Let’s Build Something!!


But first, visit:http://cryptic-headland-3164.herokuapp.com/

http://cryptic-headland-3164.herokuapp.com/

Disclaimer

There are no tests

But you should follow test-driven development


+ Step 1: The Core

app.js

Let’s use some Coffeescriptnpm install coffee-script --save

Define your routesRemember, unlike Rails, Node and

Express aren’t magic


A lot of this file is setup for you by running:

express [project name]

+ Step 1: The layoutviews/layout.jade

Better FontsTypekit

Google FontsWebfont Loader

CSSAlways include Foundation

Include a route-specific stylesheet

Template Inheritance over Layoutsapps/views/home/index.jade


https://developers.google.com/webfonts/docs/webfont_loader

+ Step 1: Routes AND VIEWS

apps/home/routes.coffee

Set Page-Specific VariablesSet page title and page-specific stylesheet name

Route-Specific HTMLNothing fancy yet

apps/home/views/index.jade


Download Node, NPM

Install dependencies with ‘npm install’

Install Foundation and use compass to compile scss -> css

Use Fonts with typekit and Google Fonts. Load them with Webfont loader

create a basic layout with foundation

handle a route to the homepage. define a simple view to render

+ STEP 1: Summary


+ Step 2: CLient-side javascript

Same rules apply

1. keep it organized(i.e. not a whole bunch of jquery selectors)

2. keep it to as few (minified) files if possible


+ Step 2: asset Pipeline

app.js

Time for some Rails-like magicnpm install connect-assets --save


Download connect-assets

SEtup your directory structure for some rails-like magic

one javascript file to rule them all!

+ STEP 2: Summary


+ Step 3: Setting up a database

app.js

Mongo and Mongoosebrew install mongodb

npm install mongoose --save

Mongo ModelsRequire them! Again, no magic

Your Mongo Servermongod


+ Step 3: Defining a model’s schema

models/users.js apps/users/routes.coffee

✓Define an api for our users

✓No redirects or renders. All json

✓require the route in app.js


Download mongo and mongoose

define a simple user model and its schema

Define a rest api for our users

Get ready for angular js

+ STEP 3: Summary


+ Step 4: Gimme some angular

assets/js/skill-show.coffee Dependency injectionHTML5 Mode

assets/js/services.coffeeAutomatic REST

Download angular-resourceBeware of minification

assets/js/controllers.coffee

Initialize and add users


+ Step 4: angular in the view

apps/home/views/index.jade

New scope

Bind to a dynamic model

Display all users

Create a new user

Default text when we have no skills


Create your angular app. reference it with ng-app

use $resource for automatic rest communication with a model

minification gotcha

controllers create a new scope where we create variables and define events/methods

remember ng-repeat, ng-model, ng-submit, ng-show....you’ll use them in every app

+ STEP 4: Summary


+ Step 5: Adding skills and searching

Add a new skill

Bind to new ‘query’ modelFilter users based on ‘query’

value

Show only when editing

Special Angular form select

Toggle the button when we go into ‘edit mode’

A new controller/scope for every user

ng-init acts as a scope ‘constructor’


We can automatically search a collection client-side with one line of angular

ng-init is used to initialize a variable in the current scope

a controller inside a controller creates a child scope. the 2 scopes can communicate with each other through events

use $watch to monitor for changes

+ STEP 5: Summary


+ Step 6: Creating a directive

Notice the embedded Angular bindings

Directives are probably the most complicated aspect of Angular


+ Step 6: routing a one-page app

Old apps/home/views/index.jade views/partials/users/index.jade

move to

change to


Directives act as ‘widgets’, allowing you to define a unique/complex dom structure for a single dom element

the directive documentation kinda sucks

ng-class = conditional css classes

the $routeprovider acts as a route handler: given a specific url, fetch and render a specific template

ng-view defines where the template is rendered

templates can contain angular bindings/expressions just like a view

watch out for seo with one-page apps/a lot of dom manipulation

+ STEP 6: The final conclusion


THANKS. FOR YOUR ATTENTION


modern web development: node.js and angular

Technology

step 2

step 1

step 6

step 4

node

angular

app

file