How to be a Web UI Developer

How To Be A Web UI Developer Casey West Wednesday,
June 5, 13 * Welcome * WhiteHat - Hiring

This is a Crash Course @caseywest Wednesday, June 5, 13
* We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together

HTML5 Boilerplate html5boilerplate.com @caseywest Wednesday, June 5, 13 * http://www.initializr.com/
- Bootstrap capable * Starter HTML

Boilerplate Initializer www.initializr.com @caseywest Wednesday, June 5, 13 * http://www.initializr.com/
- Bootstrap capable * Starter HTML

@caseywest Wednesday, June 5, 13 I like Twitter's bootstrap: more
later. Pick a style and Download it!

@caseywest Wednesday, June 5, 13 File structure of downloaded HTML5
Boilerplate.

<!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> body { padding-top: 60px; padding-bottom: 40px; } </style> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> @caseywest HTML Header Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr

Modernizr modernizr.com @caseywest Respond.js github.com/scottjehl/Respond Wednesday, June 5, 13 *
Modernizr: JS that detects HTML5 and CSS3 features in Browser. Runs tests on browser * Respond.js: Fast polyfill for min/max-width media queries in browser. * Modernizr Polyfills: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

<html class="no-js"> 
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths" style=""> @caseywest Modernizr Classes Wednesday, June 5, 13 * Legacy IE support for CSS. * Responsive * Modernizr

<div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a class="btn
btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="#">crit.do</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="active"> <a href="http://twitter.com/caseywest">by @caseywest</a> </li> </ul> </div> </div> </div> </div> @caseywest Navigation Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

<div class="container"> <div class="row"> <div class="span4 offset4"> <ol> <li>Try crit.do</li>
<li></li> <li></li> <li></li> <li></li> </ol> </div> </div> <div class="row"> <div class="span4 offset4"> <form> <input type="text" placeholder="What's critical?" /> </form> </div> </div> </div> @caseywest Content Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Mimosa @caseywest Wednesday, June 5, 13 * We'll Cover a
Lot * We'll leave some things out. * Overview of projects to glue together

# Install node and npm if needed. shell> brew install
npm shell> npm install -g mimosa shell> cd crit.do shell> mimosa config @caseywest Install Mimosa Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

exports.config = { watch: sourceDir: "src" compiledDir: "public" javascriptDir: "js"
exclude: [ /[/\\](\.|~)[^/\\]+$/, /tests/ ] server: defaultServer: enabled: true onePager: true views: path: '.' } @caseywest mimosa-config.coffee Wednesday, June 5, 13 Mimosa config. Here's what we get for free from Mimosa: * Optimization and minification of JavaScript and CSS. * A webserver. * Live reload of the page for any changes to HTML, JavaScript, and CSS. * Compilers for meta languages like Jade (HTML), SASS and LESS (CSS), and CoffeeScript (JavaScript)

@caseywest Wednesday, June 5, 13 File structure of downloaded HTML5
Boilerplate.

@caseywest Wednesday, June 5, 13 File Structure for mimosa

shell> mimosa watch --server \ --optimize --minify shell> open http://127.1:3000
@caseywest Run Mimosa Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@caseywest Wednesday, June 5, 13 File Structure for mimosa

<link rel="stylesheet" href="css/bootstrap.min.css"> <style> body {
padding-top: 60px; padding-bottom: 40px; } </style> <link rel="stylesheet" href="css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="css/main.css">  <link rel="stylesheet" href="css/main.css"> @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

@import "bootstrap.min.css"; @import "bootstrap-responsive.min.css"; @media (min-width: 979px) { body {
padding-top: 60px; padding-bottom: 40px; } } @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Stylus learnboost.github.io/stylus @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust
CSS

@import "bootstrap.min.css" @import "bootstrap-responsive.min.css" @media (min-width: 979px) body padding-top 60px
padding-bottom 40px @caseywest main.styl Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

jQuery jquery.com plugins.jquery.com jqueryui.com @caseywest Wednesday, June 5, 13 jQuery
is a given. * http://plugins.jquery.com/ * AJAX * DOM Manipulation * UI Effects * Event Handling * Style Manipulation * JqueryUI * http://jqueryui.com/ * Drag/Drop, Sortables

Bower bower.io sindresorhus.com/ bower-components @caseywest Wednesday, June 5, 13 *
We'll Cover a Lot * We'll leave some things out. * Overview of projects to glue together

shell> npm install -g bower shell> echo '{"directory": "src/js/vendor/bower"}' >
.bowerrc shell> bower init shell> bower install requirejs @caseywest Install Bower Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Require requirejs.org @caseywest Wednesday, June 5, 13 Module loading for
JavaScript

requirejs.config({ baseUrl: '/js', paths: { "jquery": "vendor/jquery-1.9.1.min", "bootstrap": "vendor/bootstrap.min" },
shim: { bootstrap: ["jquery"] }, enforceDefine: true }); requirejs( ['jquery', 'bootstrap'], function($, Bootstrap) { $(function() { // onLoad }) }); @caseywest main.js Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

CoffeeScript coffeescript.org @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust
CSS

requirejs.config baseUrl: '/js' paths: jquery: 'vendor/jquery-1.9.1.min' bootstrap: 'vendor/bootstrap.min' shim: bootstrap:
['jquery'] enforceDefine: true requirejs ['jquery', 'bootstrap'], ($, Bootstrap) -> $ -> console.log "loaded" @caseywest main.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Backbone backbonejs.org @caseywest Wednesday, June 5, 13 * MVC(ollections) *
Backbone.localStore * http://documentup.com/jeromegn/backbone.localStorage

shell> bower install underscore shell> bower install backbone shell> bower
install backbone.localStorage @caseywest Install Backbone Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

requirejs.config baseUrl: '/js' paths: jquery: 'vendor/jquery-1.9.1.min' bootstrap: 'vendor/bootstrap.min' underscore: 'vendor/bower/underscore/underscore-min'
backbone: 'vendor/bower/backbone/backbone-min' 'backbone.localstore': '.../backbone.localStorage-min' shim: bootstrap: ['jquery'] backbone: ['underscore', 'jquery'] enforceDefine: true @caseywest Backbone and Require Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

requirejs ['jquery', 'bootstrap', 'backbone', 'app/TodoRouter'], ($, Bootstrap, Backbone, TodoRouter) ->
# TodoRouter handles itself. Backbone.history.start pushState: true @caseywest Backbone and Require Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone', 'app/TodoCollection', 'app/TodoListView'], (Backbone, TodoCollection, TodoListView) -> TodoRouter =
Backbone.Router.extend routes: index: 'index' '.*': 'index' router = new TodoRouter router.on 'route:index', -> listView = new TodoListView collection: TodoCollection listView.render() router @caseywest TodoRouter.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone'], (Backbone) -> window.Backbone.View.extend el: '#todo-list' render: -> self
= this this.collection.each (todo) -> self.$el.append "<li>#{todo.get 'content'}</li>" @caseywest TodoListView.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

define ['backbone', 'backbone.localstore'], (Backbone) -> TodoCollection = Backbone.Collection.extend localStorage: new
Backbone.LocalStorage "Todos" new TodoCollection @caseywest TodoCollection.coffee Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

Underscore underscorejs.org @caseywest Wednesday, June 5, 13 Utility belt library
that holds up Backbone.

// JavaScript var width = _.reduce( $('.tabs').get(), 0, function(total,tab) {
return $(tab).outerWidth(true) + total; } ); # CoffeeScript width = _.reduce $('.tabs').get(), 0, (total,tab)-> $(tab).outerWidth(true) + total @caseywest Powerful Wins Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

var doubleYourMoney = _.map( [1.00, 2.00], function(money) { return money
* 2 } ); @caseywest Powerful Wins Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.

this.collection.each (todo) -> self.$el.append "<li>#{todo.get 'content'}</li>" @caseywest Powerful Wins Wednesday,
June 5, 13 File structure of downloaded HTML5 Boilerplate.

Moment momentjs.com @caseywest Wednesday, June 5, 13 Date Manipulation in
JS parsing, validating, manipulating, and formatting. Localized timeago()

Bootstrap twitter.github.io/bootstrap @caseywest Wednesday, June 5, 13 * Simpliﬁed Style
* Bootstrap Responsive * Style on any device

Font-Awesome fortawesome.github.io/Font-Awesome @caseywest Wednesday, June 5, 13 Scalable vector icons
that can be styled with CSS.

Mocha visionmedia.github.io/mocha @caseywest Wednesday, June 5, 13 JS testing framework.
BDD describe(), it(), before(), after(), etc.

PhantomJS phantomjs.org @caseywest Wednesday, June 5, 13 headless browser for
testing automation, screen capture, page automation, network monitorying

Thank you. @caseywest Wednesday, June 5, 13 * We'll Cover
a Lot * We'll leave some things out. * Overview of projects to glue together

How to be a Web UI Developer

How to be a Web UI Developer

More Decks by Casey West

Other Decks in Programming

Featured

Transcript