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


Disclaimer
I 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


+ What should i know about node

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

2 It’s still a teenager, so it requires patience

3 Documentation, conventions, and libraries are still being
established


Node package manager (Npm)

essentially, it’s bundler

npm install [library] --save


+ Web frameworks

The default
Express

The cool kid
Meteor
Many others
SocketStream
- “Dedicated to building single page realtime apps”

Derby You can only build a web server
Sails with node. you need one of these to
- Rails inspired
build a web app
Tower
- Also Rails inspired

Compound
flatiron Startup Institute boston // follow me : @jamiehdavidson

Javascript mvc on the client
Angularjs

developed by google

Models, controllers, templates, Directives


+ Why Angular?

✓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

✓small learning curve

Startup Institute boston // follow me : @ jamiehdavidson

+ What should i know about Angular

1 one-page web apps = difficult seo management

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

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


HTML and css


+ Sass over css


+ What should i know about Sass

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

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

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

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


+ plain old html also sucks

HTML HaML Jade


+ What should i know about haml/jade

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

closing html tags

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

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


Let’s Build Something!!
But first, visit:
http://cryptic-headland-3164.herokuapp.com/


Disclaimer
There are no tests

But you should follow
test-driven development

+ Step 1: The Core A lot of this file is setup for you by running:
app.js
express [project name]

Let’s use some Coffeescript
npm install coffee-script --save

Define your routes
Remember, unlike Rails, Node and
Express aren’t magic


+ Step 1: The layout
views/layout.jade

Better Fonts
Typekit
Google Fonts
Webfont Loader

CSS
Always include Foundation
Include a route-specific stylesheet

Template Inheritance over Layouts
apps/views/home/index.jade


+ Step 1: Routes AND
VIEWS
apps/home/routes.coffee

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

apps/home/views/index.jade

Route-Specific HTML
Nothing fancy yet


+STEP 1: Summary
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 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 magic
npm install connect-assets --save


+STEP 2: Summary

Download connect-assets

SEtup your directory structure for some rails-like magic

one javascript file to rule them all!


+ Step 3: Setting up a database
app.js

Mongo and Mongoose
brew install mongodb
npm install mongoose --save

Your Mongo Server
mongod

Mongo Models
Require them! Again, no magic


+ 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

+STEP 3: Summary

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 4: Gimme some angular
assets/js/skill-show.coffee
Dependency injection
HTML5 Mode

assets/js/services.coffee
Automatic REST
Download angular-resource
Beware of minification

assets/js/controllers.coffee

Initialize and add users


+ Step 4: angular in the view
apps/home/views/index.jade

New scope
Create a new user

Bind to a dynamic model

Display all users

Default text when we
have no skills


+STEP 4: Summary

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 5: Adding skills and searching

Add a new skill

Bind to new ‘query’ model
Filter users based on ‘query’ value

A new controller/scope for every user
ng-init acts as a scope ‘constructor’
Show only when editing

Special Angular form select

Toggle the button when we go
into ‘edit mode’

+STEP 5: Summary

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 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


+ STEP 6: The final conclusion

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


THANK
S. FOR YOUR ATTENTION


Modern Web Development: Node.js and Angular

Recommended

Recommended

More Related Content

Recently uploaded

Recently uploaded (20)

Featured

Featured (20)

Modern Web Development: Node.js and Angular