How to be a Web UI Developer

How to be a Web UI Developer

YAPC::NA 2013, Austin TX

1ed0b822068d34032bca7d2beeb2f846?s=128

Casey West

June 05, 2013
Tweet

Transcript

  1. How To Be A Web UI Developer Casey West Wednesday,

    June 5, 13 * Welcome * WhiteHat - Hiring
  2. 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
  3. HTML5 Boilerplate html5boilerplate.com @caseywest Wednesday, June 5, 13 * http://www.initializr.com/

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

    - Bootstrap capable * Starter HTML
  5. @caseywest Wednesday, June 5, 13 I like Twitter's bootstrap: more

    later. Pick a style and Download it!
  6. @caseywest Wednesday, June 5, 13 File structure of downloaded HTML5

    Boilerplate.
  7. <!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8

    lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <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
  8. 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
  9. <!-- From this... --> <html class="no-js"> <!-- To this... -->

    <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
  10. <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.
  11. <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.
  12. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/ jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/ jquery-1.9.1.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script> </body> @caseywest </body> Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  13. Mimosa @caseywest Wednesday, June 5, 13 * We'll Cover a

    Lot * We'll leave some things out. * Overview of projects to glue together
  14. # 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.
  15. 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)
  16. @caseywest Wednesday, June 5, 13 File structure of downloaded HTML5

    Boilerplate.
  17. @caseywest Wednesday, June 5, 13 File Structure for mimosa

  18. 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.
  19. @caseywest Wednesday, June 5, 13 File Structure for mimosa

  20. <!-- From this... --> <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"> <!-- To this... --> <link rel="stylesheet" href="css/main.css"> @caseywest Refactor CSS Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  21. @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.
  22. Stylus learnboost.github.io/stylus @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust

    CSS
  23. @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.
  24. 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
  25. 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
  26. 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.
  27. Require requirejs.org @caseywest Wednesday, June 5, 13 Module loading for

    JavaScript
  28. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/ jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/ jquery-1.9.1.min.js"><\/script>')</script> <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script> </body> @caseywest Refactor JavaScript Load Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  29. <script src="js/main-built.js"></script> <script src="/socket.io/socket.io.js"></script> <script src="/js/reload-client.js"></script> </body> @caseywest Refactor JavaScript

    Load Wednesday, June 5, 13 File structure of downloaded HTML5 Boilerplate.
  30. 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.
  31. CoffeeScript coffeescript.org @caseywest Wednesday, June 5, 13 Expressive, dynamic, robust

    CSS
  32. 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.
  33. Backbone backbonejs.org @caseywest Wednesday, June 5, 13 * MVC(ollections) *

    Backbone.localStore * http://documentup.com/jeromegn/backbone.localStorage
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 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.
  40. Underscore underscorejs.org @caseywest Wednesday, June 5, 13 Utility belt library

    that holds up Backbone.
  41. // 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.
  42. 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.
  43. 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.
  44. Moment momentjs.com @caseywest Wednesday, June 5, 13 Date Manipulation in

    JS parsing, validating, manipulating, and formatting. Localized timeago()
  45. Bootstrap twitter.github.io/bootstrap @caseywest Wednesday, June 5, 13 * Simplified Style

    * Bootstrap Responsive * Style on any device
  46. Font-Awesome fortawesome.github.io/Font-Awesome @caseywest Wednesday, June 5, 13 Scalable vector icons

    that can be styled with CSS.
  47. Mocha visionmedia.github.io/mocha @caseywest Wednesday, June 5, 13 JS testing framework.

    BDD describe(), it(), before(), after(), etc.
  48. PhantomJS phantomjs.org @caseywest Wednesday, June 5, 13 headless browser for

    testing automation, screen capture, page automation, network monitorying
  49. Thank you. @caseywest Wednesday, June 5, 13 * We'll Cover

    a Lot * We'll leave some things out. * Overview of projects to glue together