Skip to content

Latest commit

 

History

History
 
 

polygonEditor

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
js
js
 
 
snapshots
snapshots
 
 
README.md
README.md
 
 
index.html
index.html
 
 

README.md

This code is from a screencast recorded at an HTML5 tutorial at UMass Lowell given by Curran Kelleher on 4/1/2013. In the tutorial we use Underscore.js, Backbone.js, Require.js, the Model View Controller paradigm, and HTML5 Canvas to build from scratch a graphical polygon editor.

Material

Topics

  • Underscore.js
    • each
    • map
    • reduce
    • range
    • extend
  • Backbone.js
    • Events
      • on
      • trigger
    • Models
      • set and get
      • change events
    • Collections
      • adding Models to Collections
      • events 'add', 'remove', 'change'
  • Require.js
    • Using data-main
    • Syntax of the require and define functions
    • Script Loaders, motivating Asynchronous Module Definition
    • Module dependency graph concept
    • Defining a simple module dependency graph
      • app -> myModule -> anotherModule
    • The "baseURL" concept
    • Using require.config()
    • Busting the cache using the urlArgs configuration option
    • Using a directory tree and / in module names
  • The Model-View-Controller Paradigm
    • Using events to couple between the view and model
    • Having the controller change the model and cause events
  • Defining a Vertex "class" as a module that creates a Backbone Model type
  • Defining Model-View-Controller application using modules for:
    • The Model, a Backbone Collection of Vertices
    • The View, a rendering enging for an HTML5 Canvas
    • The Controller, a set of mouse listeners that implement interactions
      • These change the model, causing it to fire events
  • Discussion of the HTML feature/bug that each tag with an id gets assigned to a global variable automatically
  • Drawing circles on an HTML5 Canvas using the arc function
  • Make the canvas element flush against the upper left corner using inline CSS
  • Rendering a polygon using HTML5 Canvas moveTo and lineTo functions.
  • Discussion of when the Canvas API flushes the buffer to the display
  • Clearing and re-rendering the canvas content based on events
  • Using Underscore methods on Backbone Collections