JS, Front End Frameworks, and Libraries

Street Cred

SDSU
Taught Myself to Code
EdgeCast / Verizon
- Network monitoring UI
LinkedIn
- Messenger

HTML(5)

Visit the site

CSS

Cascading Stlye Sheets

Normalize.css

CSS Reset vs normalize

CSS PREPROCESSORS

Things they do

Auto add browser prefixes
Programming in CSS
Ability to extend CSS classes
DRY out your CSS
Make CSS a lot more manageable

sass

/* SASS */
$black: #000;

#header {
  color: $black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

/* CSS */ 
#header {
  color: #000;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

SASS

CSS

#header {
  color: #6c94be;
}

#footer {
  background-color: #5B83AD;
  color: #e0e0e0;
}

.another-element {
  background-color: #e0e0e0;
  color: #5B83AD;
}

$dark-grey: #e0e0e0;
$nice-blue: #5B83AD;
$light-blue: @nice-blue + #111;

#header {
  color: $light-blue;
}

#footer {
  background-color: $nice-blue;
  color: $dark-grey;
}

.another-element {
  background-color: $dark-grey;
  color: $nice-blue;
}

Variable$

SASS

CSS

#header {
  color: #6c94be;
}

/* variables.scss */

$dark-grey: #e0e0e0;
$nice-blue: #5B83AD;
$light-blue: $nice-blue + #111;

Importing

/* landing-page.scss */

@import "variables"

#header {
  color: $light-blue;
}

less

/* CSS */ 
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

/* LESS */
@black: #000;

#header {
  color: $black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

http://winless.org/online-less-compiler

LESS

CSS

#header {
  color: #6c94be;
}

#footer {
  background-color: #5B83AD;
  color: #e0e0e0;
}

.another-element {
  background-color: #e0e0e0;
  color: #5B83AD;
}

@dark-grey: #e0e0e0;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
}

#footer {
  background-color: @nice-blue;
  color: @dark-grey;
}

.another-element {
  background-color: @dark-grey;
  color: @nice-blue;
}

V@riables

LESS

CSS

#header {
  color: #6c94be;
}

/* variables.less */

@dark-grey: #e0e0e0;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

Importing

/* landing-page.less */

@import "variables"

#header {
  color: @light-blue;
}

CSS FRAMEWORKS

Things they do Well:

Reusable boilerplate UI elements
Quick prototyping
Don't reinvent the wheel
Grid system
Improve UI/UX consistency
Good documentation

Things they do Poorly:

Force you into conventions
- ( This can be good and bad)
Bloat
Can be a crutch
New version upgrades are never easy

Bootstrap

First released by Twitter
The most popular CSS framework

FoundAtion

Released by ZURB

Differences are mostly stylistic

JavaScript

Libraries and Frameworks

Libraries Vs Frameworks

Library

Framework

Simplifies JavaScript
ToolKit
Improves cross browser compatibility

Simplifies architecture
Gives structure
Enforces Conventions

Quantcast Top 1 million sites: 78% use jQuery
Simplifies accessing the DOM
Simplifies JavaScript
Improves cross-browser JS inconsistencies

* Quantcast jQuery Statistics

JavaScript Utility Belt

Frameworks

* For many of the next slides, it is assumed that you have previously installed node.js

+ More on Node.js

One of the Older MVC
Heavy Leverage of jQuery
Heavy Leverage of Events
Lightweight toolset
More like a library
No 2-way data binding out of the box
Developer Freedom

2-way data binding
Extends HTML
- Web Components, now
Expressive HTML
- Highly readable
- Logic split between HTML/JS (con)
Performance prone at scale
Concepts can be tricky

+ More on Angular

2-way data binding
Powerful router
Simple component structure
Computed property API
Ember Data
- Steep Learning Curve
- Getters and Setters make development difficult
Cryptic errors / hard to debug

Verbose JS (Virtual DOM)
- Hard for junior devs
Known for performance
Conforms Developers to Structure
Easy to write Virtual DOM tests

Generators

Yeomen

Grunt Generator
- One of the first JS build tools
- Configuration based

npm install -g grunt-cli bower yo && 
npm install -g generator-karma && 
npm install -g generator-angular && 
mkdir my-angular-app && cd $_ &&
yo angular my-angular-app

1 Liner Yeomen install + angular setup

Slush

Gulp Generator
- "New kid on the block"
- JS script based

npm install -g slush && 
npm install -g slush-angular && 
mkdir my-slush-angular-app && cd $_ &&
slush angular

+ More on Gulp.js

1 Liner Slush install + angular setup