RequireJS

• Module
• Dependency
• Bundle
• Home task
  

Module

• Only small piece fits in brain
• Divide and rule
• Component driven development
  
• How to package
  
• Things that are reused
• Things that change together
• Things that are used together
• Package by feature, not layer
• Button, menu, panel, page is component

define([], function () {

  return function MenuWidget() {
    this.showMeHere = function (element) {
    };
  };

});

Dependency

define(["jquery", "text!./MenuView.html"], function ($, MenuView) {

  return function MenuWidget() {
    this.showMeHere = function (element) {
    };
  };

});

Bundle

• RequireJS Optimizer
  
• Gluing all in one package
• js
• html
  
• css
• Divide one bundle into several files
  
• Demo
  

Home task

• Main content widget
• Weather widget (advanced)
• $.ajax({ dataType: "jsonp", url: "http://openweathermap.org/data/2.0/weather/city/709930", success: function(r){console.log(r)}})
  
• Animated appearance