Mike Wilcox, profile picture
Uploaded byMike Wilcox
KEY, PPTX4,144 views

AMD - Why, What and How

The document discusses the challenges faced in developing complex web applications, emphasizing the need for structured frameworks and object-oriented programming to manage code effectively. It contrasts single-file and multi-file approaches to JavaScript coding, outlining the pros and cons of each method, including considerations of maintainability and performance. Additionally, it introduces Asynchronous Module Definition (AMD) as a solution for managing dependencies and loading modules in a more efficient manner.

Embed presentation

Download as KEY, PPTX
1 / 120
2 / 120
3 / 120
4 / 120
5 / 120
6 / 120
7 / 120
8 / 120
9 / 120
10 / 120
11 / 120
12 / 120
13 / 120
14 / 120
15 / 120
16 / 120
17 / 120
18 / 120
19 / 120
20 / 120
21 / 120
22 / 120
23 / 120
24 / 120
25 / 120
26 / 120
27 / 120
28 / 120
29 / 120
30 / 120
31 / 120
32 / 120
33 / 120
34 / 120
35 / 120
36 / 120
37 / 120
38 / 120
39 / 120
40 / 120
41 / 120
42 / 120
43 / 120
44 / 120
45 / 120
46 / 120
47 / 120
48 / 120
49 / 120
50 / 120
51 / 120
52 / 120
53 / 120
54 / 120
55 / 120
56 / 120
57 / 120
58 / 120
59 / 120
60 / 120
61 / 120
62 / 120
63 / 120
64 / 120
65 / 120
66 / 120
67 / 120
68 / 120
69 / 120
70 / 120
71 / 120
72 / 120
73 / 120
74 / 120
75 / 120
76 / 120
77 / 120
78 / 120
79 / 120
80 / 120
81 / 120
82 / 120
83 / 120
84 / 120
85 / 120
86 / 120
87 / 120
88 / 120
89 / 120
90 / 120
91 / 120
92 / 120
93 / 120
94 / 120
95 / 120
96 / 120
97 / 120
98 / 120
99 / 120
100 / 120
101 / 120
102 / 120
103 / 120
104 / 120
105 / 120
106 / 120
107 / 120
108 / 120
109 / 120
110 / 120
111 / 120
112 / 120
113 / 120
114 / 120
115 / 120
116 / 120
117 / 120
118 / 120
119 / 120
120 / 120
AMD - WHY, WHAT, AND HOW Mike Wilcox - January 2012 Tweets: @clubajax Blogs: clubajax.org
The Problem
The Problem Today’s complex Web Apps have created the need for:
The Problem Today’s complex Web Apps have created the need for: Structure Some sort of framework, to aid in rapid development
The Problem Today’s complex Web Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code
The Problem Today’s complex Web Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins...
The Problem Today’s complex Web Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins... Dependencies (includes, requires, imports, what-ev)
The Problem Today’s complex Web Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins... Dependencies (includes, requires, imports, what-ev) Reusable code Scope-isolated, clean API, portable Globals are bad!
Single Files
Single Files The “old fashioned way” to write JavaScript was to do it all in a single file.
Single Files The “old fashioned way” to write JavaScript was to do it all in a single file. // define library ! var!noop = function(){ ! ! }, ! ! isEmpty = function(it){ ! ! ! for(var p in it){ ! ! ! ! return 0; ! ! ! } ! ! ! return 1; ! ! }, ! ! toString = {}.toString, ! ! isFunction = function(it){ ! ! ! return toString.call(it) == "[object Function]"; ! ! }, ! ! isString = function(it){ ! ! ! return toString.call(it) == "[object String]";
Single Files ! ! ! ! ! ! ! ! ! computeMapProg = function(map, dest, packName){ ! ! dest.splice(0, dest.length); var p, i, item, reverseName = 0; The “old fashioned way” to write JavaScript was to do ! ! ! ! for(p in map){ ! ! ! ! ! dest.push([p, map[p]]); it all in a single file. ! ! ! ! ! if(map[p]==packName){ ! ! ! ! ! ! reverseName = p; ! ! ! ! ! } ! ! ! ! } ! ! ! ! dest.sort(function(lhs, rhs){ ! ! ! ! ! return rhs[0].length - lhs[0].length; ! ! ! ! }); ! ! ! ! for(i = 0; i < dest.length;){ ! ! ! ! ! item = dest[i++]; ! ! ! ! ! item[2] = new RegExp("^" + item[0].replace(/([.$?*|{} ()[]/+^])/g, function(c){ return "" + c; }) + "(/|$)"); ! ! ! ! ! item[3] = item[0].length + 1; ! ! ! ! } ! ! ! ! return reverseName; ! ! ! }, ! ! ! fixupPackageInfo = function(packageInfo, baseUrl){ ! ! ! ! // calculate the precise (name, baseUrl, main, mappings) for a package ! ! ! ! var name = packageInfo.name; ! ! ! ! if(!name){
Single File - pros & cons
Single File - pros & cons Pros Fewer resources means faster load times.
Single File - pros & cons Pros Fewer resources means faster load times. No “build step” necessary.
Single File - pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line #
Single File - pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line # Code reusability is dirt poor. Copy and paste?
Single File - pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line # Code reusability is dirt poor. Copy and paste? Makes team development near impossible. GITMERGETOOL
Multiple Files
Multiple Files Multiple files which follow an object oriented or namespaced approach are easier to maintain because the brain more easily maps files to ideas.
Multiple Files Multiple files which follow an object oriented or namespaced approach are easier to maintain because the brain more easily maps files to ideas. [dom.js] [lang.js] library.dom = { library.lang = { // code // code } } [events.js] [string.js] library.events = library.string = { { // code // code } }
Multi File - pros & cons
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier.
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects).
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly.
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page.
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page. Lots of <script> tags. BLEAH.
Multi File - pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page. Lots of <script> tags. BLEAH. The system to track all these files and their order is YOU.
Web App with <script> tags
Web App with <script> tags
Web App with <script> tags
Build solution for <script> tags
Build solution for <script> tags Result can be fed into Google Closure Combiner, Dojo Shrinksafe, UglifyJS, etc, etc.
Dependency Matters
Dependency Matters Scripts load in this order [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
Dependency Matters Scripts load in this order A change is made to dom.js Adds events to node on create. [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
Dependency Matters Scripts load in this order A change is made to dom.js Adds events to node on create. [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] dom.js is trying to access library.lang = { // code } // code events.js but it’s not loaded } library.string = yet { // code }
Dependency Management [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
Dependency Management [player.html] [dom.js] [events.js] library.dom = { // code [admin.html] [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code } [test.html] Now script order needs to be changed in all your
I thought Dojo had a build tool with dependency
Dojo’s <1.7 Solution
Dojo’s <1.7 Solution “provide” registers this page of code as “a class” (but actually just an object). dojo.provide(“dijit.Dialog”);
Dojo’s <1.7 Solution “provide” registers this page of code as “a class” (but actually just an object). dojo.provide(“dijit.Dialog”); dojo.require(“dijit.form.Button”); “require” tells Dojo that the provided code depends upon the required code. Dojo guarantees that the required code is loaded before the provided code is executed.
How Dojo <1.7 Worked
How Dojo <1.7 Worked Script files were pulled in as text with XHR. -= XHR =- [dom.js] code code code require(‘event’) library.dom = { // code }
How Dojo <1.7 Worked Script files were pulled in as text with XHR. One at a time, each text file is eval’d into JavaScript. synchronously! -= XHR =- -= EVAL =- [dom.js] [dom.js] [dom.js] code code code code code code code code code require(‘event’) require(‘event’) require(‘event’) library.dom = { library.dom = { library.dom = { // code // code // code } } }
Dojo <1.7 Problems
Dojo <1.7 Problems XHR load has same-origin restrictions
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR)
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR) eval executes differently across browsers
Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR) eval executes differently across browsers Developers are taught that eval is evil
ALTERNATIVE LOADER TECHNIQUES
Async
Async var Employee = require("Employee"); function Manager () { } Manager.prototype = new Employee(); [ ERROR ]
Async var Employee = require("Employee"); function Manager () { } Manager.prototype = new Employee(); [ ERROR ] The Employee code is loaded async, so it happens in the background while Manager is invoked, which means Employee is not ready and an error occurs.
document.write
document.write write(‘<script src=”Store.js” />’); write(‘<script src=”Employee.js” />’);
document.write write(‘<script src=”Store.js” />’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies
document.write write(‘<script src=”Store.js” />’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies Does not work after page load
document.write write(‘<script src=”Store.js” />’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies Does not work after page load Blocks page rendering
appendChild(‘script’);
appendChild(‘script’); head = document.getElementsByTagName('head')[0]; script = document.createElement('script'); script.src = url; head.appendChild(script); No access to the script’s dependencies
appendChild(‘script’); head = document.getElementsByTagName('head')[0]; script = document.createElement('script'); script.src = url; head.appendChild(script); No access to the script’s dependencies Has same async issues
THE SOLUTION
Function Wrapping
Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later }
Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later } Wrapping code in function allows the loader to control when invocation needs to occur
Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later } Wrapping code in function allows the loader to control when invocation needs to occur All code can defer until after all dependencies are determined and loaded
AMD’s Methods
AMD’s Methods “define” registers this page of code as “a class”. define();
AMD’s Methods “define” registers this page of code as “a class”. define(); require(); “require” loads in the requested modules and provides them in a callback function.
Anatomy of AMD - define()
Anatomy of AMD - define() define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two globals used in the spec define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two Dependencies list defined globals used in as an array in the first the spec argument define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments ); * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments All of your module ); magic happens here, complete with scope isolation * There are other argument options, but these are the most common.
Anatomy of AMD - define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments All of your module ); magic happens here, complete with scope isolation Looks like a class, smells like a class... * There are other argument options, but these are the most common.
Anatomy of AMD - require()
Anatomy of AMD - require() require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
Anatomy of AMD - require() The other global require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
Anatomy of AMD - require() Modules, or “Imports” list The other global defined as an array in the first argument require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
Anatomy of AMD - require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
Anatomy of AMD - require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); * There are other argument options, but these are the most common.
Anatomy of AMD - require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); Modules are ready to access here * There are other argument options, but these are the most common.
Anatomy of AMD - require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); Modules are ready to access here Looks like “define”! Simple! * There are other argument options, but these are the most common.
Why is ASYNC fast anyway?
Why is ASYNC fast anyway? In this context, “async” refers to allowing the browser to load the scripts natively. It can load many scripts at once, concurrently.
Why is ASYNC fast anyway? The “sync” loader needed to block all other processes while a script was loaded.
EXTENDING AMD
Plugins
Plugins The bang! symbol represents a plugin that performs a special task. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget });
Plugins The bang! symbol represents a plugin that performs a special task. domReady! is a common plugin that prevents the callback from firing until the DOM is in fact... ready. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget });
Plugins The bang! symbol represents a plugin that performs a special task. domReady! is a common plugin that prevents the callback from firing until the DOM is in fact... ready. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget }); text! knows that it is reading text or HTML and possibly applies transforms to it.
Build Tools
Build Tools A “profile” is the description file the Dojo Builder uses. The AMD structure works well as individual files or as one combined file. var profile = { ! releaseDir:"../clubajax-deploy", ! packages:[ ! ! { ! ! ! name:"clubajax", ! ! ! location:"." ! ! },{ ! ! ! name:"plugin", ! ! ! location:"../plugin" ! ! } ! ], ! layers:{ ! ! "clubajax/layer":{ ! ! ! include:[ 'custom/main', 'plugin/main' ] ! ! } ! } };
Packages
Packages A package.json file will help describe your code, its external dependencies, and how it should be used. { "name": "clubajax.js", "description": "Club AJAX Base Library", "licenses": [{ "type": "AFLv2.1", "url": "http://dojo/LICENSE" }], "bugs": "", "keywords": [], "homepage": "http://clubajax.org/", "dependencies": {}, "dojoBuild": "clubajax.profile.js", "main": "./main"
Packages A package.json file will help describe your code, its external dependencies, and how it should be used. { "name": "clubajax.js", "description": "Club AJAX Base Library", "licenses": [{ "type": "AFLv2.1", "url": "http://dojo/LICENSE" }], "bugs": "", "keywords": [], "homepage": "http://clubajax.org/", "dependencies": {}, "dojoBuild": "clubajax.profile.js", "main": "./main" “dojoBuild” points to the profile, and “main” points to the master file that knows of all the files in the package.
RESOURCES
AMD Authors
AMD Authors James Burke Original Dojo Loader author Developed RequireJS and spearheaded AMD
AMD Authors
AMD Authors Kevin Dangoor Authored blog post: “What Server Side JavaScript Needs” Founded CommonJS Expressed the need for JS modules and packages RequireJS based on CommonJS module spec
AMD Authors
AMD Authors Rawld Gill Wrote the Dojo 1.7 loader and Node.js build tool key contributor to AMD spec Authored all AMD plugins (text, i18n, domReady, ready) dojo bootstrap (kernel and base load) dojo's has.js implementation (enhanced from standard version)
AMD Authors
AMD Authors Kris Zyp Of course he helped. What is there that Kris Zyp DOESN’T do??
AMD Libraries The following libraries are either AMD- compliant or AMD loaders jQuery 1.7 Dojo 1.7 MooTools 2.0 EmbedJS curl.js
More AMD Info https://github.com/amdjs/amdjs-api/wiki/AMD http://www.commonjs.org/ http://www.commonjs.org/specs/ http://dojotoolkit.org/reference-guide/loader/ index.html#loader-index http://dojotoolkit.org/reference-guide/loader/amd.html#loader- amd http://arstechnica.com/web/news/2009/12/commonjs-effort- sets-javascript-on-path-for-world-domination.ars http://requirejs.org/docs/history.html http://www.commonjs.org/history/ https://groups.google.com/group/amd-implement?pli=1 ✴ Special credit to Rawld Gill of Alto Visio for his in depth explanations of Dojo Loader and Build Tool ✴ And a very special credit to James Burke - since most of the information in this presentation came from the RequireJS pages.
Description

More Related Content

PDF
Introducing RaveJS: Spring Boot concepts for JavaScript applications
byJohn Hann
 
PDF
Having Fun with Play
byClinton Dreisbach
 
PDF
Differential Sync and JSON Patch @ SpringOne2GX 2014
byBrian Cavalier
 
PPTX
Modeling Tricks My Relational Database Never Taught Me
byDavid Boike
 
KEY
#NewMeetup Performance
byJustin Cataldo
 
PDF
Meetup Performance
byGreg Whalin
 
PDF
Building Real-Time Web Applications with Vortex-Web
byAngelo Corsaro
 
KEY
Embrace NoSQL and Eventual Consistency with Ripple
bySean Cribbs
 
Introducing RaveJS: Spring Boot concepts for JavaScript applications
byJohn Hann
 
Having Fun with Play
byClinton Dreisbach
 
Differential Sync and JSON Patch @ SpringOne2GX 2014
byBrian Cavalier
 
Modeling Tricks My Relational Database Never Taught Me
byDavid Boike
 
#NewMeetup Performance
byJustin Cataldo
 
Meetup Performance
byGreg Whalin
 
Building Real-Time Web Applications with Vortex-Web
byAngelo Corsaro
 
Embrace NoSQL and Eventual Consistency with Ripple
bySean Cribbs
 

What's hot

PDF
Even faster django
byGage Tseng
 
PPTX
Html5 Overview
byAbdel Moneim Emad
 
PDF
Painless Persistence in a Disconnected World
byChristian Melchior
 
PDF
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
byDoris Chen
 
PDF
Updates to the java api for json processing for java ee 8
byAlex Soto
 
PDF
Http4s, Doobie and Circe: The Functional Web Stack
byGaryCoady
 
PDF
Performance Improvements in Browsers
byjeresig
 
KEY
Building a real life application in node js
byfakedarren
 
KEY
Riak with node.js
bySean Cribbs
 
PDF
The DOM is a Mess @ Yahoo
byjeresig
 
PDF
Eve - REST API for Humans™
byNicola Iarocci
 
PDF
HTML5 JavaScript APIs
byRemy Sharp
 
PDF
Django at Scale
bybretthoerner
 
PDF
How to make Ajax work for you
bySimon Willison
 
PPTX
Learning About JavaScript (…and its little buddy, JQuery!)
byJulie Meloni
 
PDF
From render() to DOM
byBoris Dinkevich
 
KEY
Socket applications
byJoão Moura
 
PDF
Please dont touch-3.5
byFrancesco Fullone
 
ODP
An Introduction to Windows PowerShell
byDale Lane
 
PPT
jQuery Objects
bySteve Wells
 
Even faster django
byGage Tseng
 
Html5 Overview
byAbdel Moneim Emad
 
Painless Persistence in a Disconnected World
byChristian Melchior
 
jQuery Makes Writing JavaScript Fun Again (for HTML5 User Group)
byDoris Chen
 
Updates to the java api for json processing for java ee 8
byAlex Soto
 
Http4s, Doobie and Circe: The Functional Web Stack
byGaryCoady
 
Performance Improvements in Browsers
byjeresig
 
Building a real life application in node js
byfakedarren
 
Riak with node.js
bySean Cribbs
 
The DOM is a Mess @ Yahoo
byjeresig
 
Eve - REST API for Humans™
byNicola Iarocci
 
HTML5 JavaScript APIs
byRemy Sharp
 
Django at Scale
bybretthoerner
 
How to make Ajax work for you
bySimon Willison
 
Learning About JavaScript (…and its little buddy, JQuery!)
byJulie Meloni
 
From render() to DOM
byBoris Dinkevich
 
Socket applications
byJoão Moura
 
Please dont touch-3.5
byFrancesco Fullone
 
An Introduction to Windows PowerShell
byDale Lane
 
jQuery Objects
bySteve Wells
 

Viewers also liked

PPT
Amd processor
byImmu Faraaz
 
PDF
AMD Radeon Technology Group Summit
byLow Hong Chuan
 
PDF
AMD 2014 Performance Mobile APUs
byAMD
 
PDF
AMD and the new “Zen” High Performance x86 Core at Hot Chips 28
byAMD
 
PPTX
Introducing the 2012 AMD E-Series APU
byAMD
 
PDF
AMD CES 2013 Press Conference
byAMD
 
PPSX
Mantle - Introducing a new API for Graphics - AMD at GDC14
byAMD Developer Central
 
PPTX
Whats New in AMD - 2012
byRick Trevino
 
PPTX
AMD Opteron 6000 Series Platform Press Presentation
byAMD
 
PDF
AMD AM1 Platform Presentation
byLow Hong Chuan
 
PPTX
AMD Financial Analyst Day 2015
byAMD
 
PPTX
Vorstellung AMD-netz.de
byJohannes Meier
 
PDF
Computex 2014 AMD Press Conference
byAMD
 
PPTX
GS-4106 The AMD GCN Architecture - A Crash Course, by Layla Mah
byAMD Developer Central
 
PPTX
evolucion de los microprocesadores AMD
bystephanyarias
 
PPTX
Microprocesadorores: INTEL o AMD
byies valledeltietar
 
PPSX
Inside XBOX ONE by Martin Fuller
byAMD Developer Central
 
PPTX
Micropocesadores amd e intel upc jaime
byJaime Andres Paredes Manjarres
 
PPTX
AMD Bridges the X86 and ARM Ecosystems for the Data Center
byAMD
 
PPTX
Battlefield 4 + Frostbite + Mantle
byElectronic Arts / DICE
 
Amd processor
byImmu Faraaz
 
AMD Radeon Technology Group Summit
byLow Hong Chuan
 
AMD 2014 Performance Mobile APUs
byAMD
 
AMD and the new “Zen” High Performance x86 Core at Hot Chips 28
byAMD
 
Introducing the 2012 AMD E-Series APU
byAMD
 
AMD CES 2013 Press Conference
byAMD
 
Mantle - Introducing a new API for Graphics - AMD at GDC14
byAMD Developer Central
 
Whats New in AMD - 2012
byRick Trevino
 
AMD Opteron 6000 Series Platform Press Presentation
byAMD
 
AMD AM1 Platform Presentation
byLow Hong Chuan
 
AMD Financial Analyst Day 2015
byAMD
 
Vorstellung AMD-netz.de
byJohannes Meier
 
Computex 2014 AMD Press Conference
byAMD
 
GS-4106 The AMD GCN Architecture - A Crash Course, by Layla Mah
byAMD Developer Central
 
evolucion de los microprocesadores AMD
bystephanyarias
 
Microprocesadorores: INTEL o AMD
byies valledeltietar
 
Inside XBOX ONE by Martin Fuller
byAMD Developer Central
 
Micropocesadores amd e intel upc jaime
byJaime Andres Paredes Manjarres
 
AMD Bridges the X86 and ARM Ecosystems for the Data Center
byAMD
 
Battlefield 4 + Frostbite + Mantle
byElectronic Arts / DICE
 

Similar to AMD - Why, What and How

PDF
Using RequireJS for Modular JavaScript Code
byThomas Lundström
 
PPTX
JS Essence
byUladzimir Piatryka
 
PPTX
Javascript best practices
byJayanga V. Liyanage
 
PPTX
JS Basics
byJohn Fischer
 
PDF
"Javascript" por Tiago Rodrigues
byNúcleo de Electrónica e Informática da Universidade do Algarve
 
PDF
Choosing Javascript Libraries to Adopt for Development
byEdward Apostol
 
PDF
Server Side JavaScript - You ain't seen nothing yet
byTom Croucher
 
PDF
The Future of JavaScript (Ajax Exp '07)
byjeresig
 
PDF
Building a JavaScript Library
byjeresig
 
KEY
JavaScript Growing Up
byDavid Padbury
 
PDF
Module, AMD, RequireJS
by偉格 高
 
PPTX
Going Offline with JS
bybrendankowitz
 
PDF
Tamarin and ECMAScript 4
byjeresig
 
PDF
DLW Europe - JavaScript Tooling
byFabian Jakobs
 
PDF
Better code in JavaScript
bynhm taveer hossain khan
 
PDF
Tamarin And Ecmascript 4
byelliando dias
 
PPTX
JS - Basics
byJohn Fischer
 
PDF
Client side scripting
byEleonora Ciceri
 
PPTX
Js tacktalk team dev js testing performance
byАртем Захарченко
 
PDF
Expert JavaScript Programming
byYoshiki Shibukawa
 
Using RequireJS for Modular JavaScript Code
byThomas Lundström
 
JS Essence
byUladzimir Piatryka
 
Javascript best practices
byJayanga V. Liyanage
 
JS Basics
byJohn Fischer
 
"Javascript" por Tiago Rodrigues
byNúcleo de Electrónica e Informática da Universidade do Algarve
 
Choosing Javascript Libraries to Adopt for Development
byEdward Apostol
 
Server Side JavaScript - You ain't seen nothing yet
byTom Croucher
 
The Future of JavaScript (Ajax Exp '07)
byjeresig
 
Building a JavaScript Library
byjeresig
 
JavaScript Growing Up
byDavid Padbury
 
Module, AMD, RequireJS
by偉格 高
 
Going Offline with JS
bybrendankowitz
 
Tamarin and ECMAScript 4
byjeresig
 
DLW Europe - JavaScript Tooling
byFabian Jakobs
 
Better code in JavaScript
bynhm taveer hossain khan
 
Tamarin And Ecmascript 4
byelliando dias
 
JS - Basics
byJohn Fischer
 
Client side scripting
byEleonora Ciceri
 
Js tacktalk team dev js testing performance
byАртем Захарченко
 
Expert JavaScript Programming
byYoshiki Shibukawa
 

More from Mike Wilcox

PDF
Accessibility for Fun and Profit
byMike Wilcox
 
PDF
WTF R PWAs?
byMike Wilcox
 
PDF
Advanced React
byMike Wilcox
 
PDF
Webpack: What it is, What it does, Whether you need it
byMike Wilcox
 
PDF
Dangerous CSS
byMike Wilcox
 
PDF
Web Components v1
byMike Wilcox
 
PDF
Great Responsive-ability Web Design
byMike Wilcox
 
PDF
Professional JavaScript: AntiPatterns
byMike Wilcox
 
PDF
Model View Madness
byMike Wilcox
 
PDF
Hardcore JavaScript – Write it Right
byMike Wilcox
 
KEY
The Great Semicolon Debate
byMike Wilcox
 
KEY
Dojo & HTML5
byMike Wilcox
 
KEY
Webpage Design Basics for Non-Designers
byMike Wilcox
 
KEY
Why You Need a Front End Developer
byMike Wilcox
 
KEY
A Conversation About REST
byMike Wilcox
 
KEY
The Fight Over HTML5
byMike Wilcox
 
KEY
The Fight Over HTML5
byMike Wilcox
 
PPT
How to get a Job as a Front End Developer
byMike Wilcox
 
KEY
The History of HTML5
byMike Wilcox
 
KEY
Thats Not Flash?
byMike Wilcox
 
Accessibility for Fun and Profit
byMike Wilcox
 
WTF R PWAs?
byMike Wilcox
 
Advanced React
byMike Wilcox
 
Webpack: What it is, What it does, Whether you need it
byMike Wilcox
 
Dangerous CSS
byMike Wilcox
 
Web Components v1
byMike Wilcox
 
Great Responsive-ability Web Design
byMike Wilcox
 
Professional JavaScript: AntiPatterns
byMike Wilcox
 
Model View Madness
byMike Wilcox
 
Hardcore JavaScript – Write it Right
byMike Wilcox
 
The Great Semicolon Debate
byMike Wilcox
 
Dojo & HTML5
byMike Wilcox
 
Webpage Design Basics for Non-Designers
byMike Wilcox
 
Why You Need a Front End Developer
byMike Wilcox
 
A Conversation About REST
byMike Wilcox
 
The Fight Over HTML5
byMike Wilcox
 
The Fight Over HTML5
byMike Wilcox
 
How to get a Job as a Front End Developer
byMike Wilcox
 
The History of HTML5
byMike Wilcox
 
Thats Not Flash?
byMike Wilcox
 

Recently uploaded

PDF
How to Evaluate a High Performance Database
byScyllaDB
 
PPTX
Emancipatory Information Retrieval: Radically Reorienting Information Retriev...
byBhaskar Mitra
 
PDF
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
byTrustArc
 
PPTX
UiPath Autonomous Agents | Building and Orchestrating Agents End-to-End
byUiPathCommunity
 
PDF
HCSP-Presales-Campus Network Planning and Design V2.0
byVeronica916344
 
PPTX
Technology Consulting _ by Slidesgo.pptx
byfh82277
 
PDF
Day 4 - Access, Deployments, and Monitoring - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
PPTX
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
byUiPathCommunity
 
PDF
Day 5 - Red Team + Blue Team in the Cloud - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
PDF
Access Control 2025: From Security Silo to Software-Defined Ecosystem
byMemoori
 
PDF
CompTIA Cybersecurity Analyst (CySA+) CS0-003: Unit 5
byVICTOR MAESTRE RAMIREZ
 
PDF
Security Forum Sessions from Houston 2025 Event
byMark Simos
 
PDF
Workshop on Sustaining & Growing Open Source Communities - GAS2025
bySammy Fung
 
PDF
Day 3 - Data and Application Security - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
PDF
10 Things AI-First Apps Do Differently by iProgrammer Solutions
byiProgrammer Solutions Private Limited
 
PPTX
Gemini vs ChatGPT : Comparing Top AI Models
byDigicarrom
 
PPTX
How to make Ai agents using Google Gemini AI.pptx
bypkluffy111
 
PDF
100 Insights After the 200th Issue of NewMind AI Journal
byNewMind AI
 
PPTX
Building Agents in Microsoft Agent Framework.pptx
byUdaiappa Ramachandran
 
PDF
Internet_of_Things_IoT_for_Next_Generation_Smart_Systems_Utilizing.pdf
byRoshanSyed12
 
How to Evaluate a High Performance Database
byScyllaDB
 
Emancipatory Information Retrieval: Radically Reorienting Information Retriev...
byBhaskar Mitra
 
TrustArc Webinar - Looking Ahead: The 2026 Privacy Landscape
byTrustArc
 
UiPath Autonomous Agents | Building and Orchestrating Agents End-to-End
byUiPathCommunity
 
HCSP-Presales-Campus Network Planning and Design V2.0
byVeronica916344
 
Technology Consulting _ by Slidesgo.pptx
byfh82277
 
Day 4 - Access, Deployments, and Monitoring - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
Conversational Agents – Building Intelligent Assistants [Virtual Hands-on Wor...
byUiPathCommunity
 
Day 5 - Red Team + Blue Team in the Cloud - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
Access Control 2025: From Security Silo to Software-Defined Ecosystem
byMemoori
 
CompTIA Cybersecurity Analyst (CySA+) CS0-003: Unit 5
byVICTOR MAESTRE RAMIREZ
 
Security Forum Sessions from Houston 2025 Event
byMark Simos
 
Workshop on Sustaining & Growing Open Source Communities - GAS2025
bySammy Fung
 
Day 3 - Data and Application Security - 2nd Sight Lab Cloud Security Class
by2nd Sight Lab
 
10 Things AI-First Apps Do Differently by iProgrammer Solutions
byiProgrammer Solutions Private Limited
 
Gemini vs ChatGPT : Comparing Top AI Models
byDigicarrom
 
How to make Ai agents using Google Gemini AI.pptx
bypkluffy111
 
100 Insights After the 200th Issue of NewMind AI Journal
byNewMind AI
 
Building Agents in Microsoft Agent Framework.pptx
byUdaiappa Ramachandran
 
Internet_of_Things_IoT_for_Next_Generation_Smart_Systems_Utilizing.pdf
byRoshanSyed12
 

AMD - Why, What and How

  • 1.
    AMD - WHY,WHAT, AND HOW Mike Wilcox - January 2012 Tweets: @clubajax Blogs: clubajax.org
  • 2.
  • 3.
    The Problem Today’s complexWeb Apps have created the need for:
  • 4.
    The Problem Today’s complexWeb Apps have created the need for: Structure Some sort of framework, to aid in rapid development
  • 5.
    The Problem Today’s complexWeb Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code
  • 6.
    The Problem Today’s complexWeb Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins...
  • 7.
    The Problem Today’s complexWeb Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins... Dependencies (includes, requires, imports, what-ev)
  • 8.
    The Problem Today’s complexWeb Apps have created the need for: Structure Some sort of framework, to aid in rapid development Object orientation To “black box” complex code Modules and packages RE: The 2,500 best jQuery plugins... Dependencies (includes, requires, imports, what-ev) Reusable code Scope-isolated, clean API, portable Globals are bad!
  • 9.
  • 10.
    Single Files The“old fashioned way” to write JavaScript was to do it all in a single file.
  • 11.
    Single Files The“old fashioned way” to write JavaScript was to do it all in a single file. // define library ! var!noop = function(){ ! ! }, ! ! isEmpty = function(it){ ! ! ! for(var p in it){ ! ! ! ! return 0; ! ! ! } ! ! ! return 1; ! ! }, ! ! toString = {}.toString, ! ! isFunction = function(it){ ! ! ! return toString.call(it) == "[object Function]"; ! ! }, ! ! isString = function(it){ ! ! ! return toString.call(it) == "[object String]";
  • 12.
    Single Files ! ! ! ! ! ! ! ! ! computeMapProg = function(map, dest, packName){ ! ! dest.splice(0, dest.length); var p, i, item, reverseName = 0; The “old fashioned way” to write JavaScript was to do ! ! ! ! for(p in map){ ! ! ! ! ! dest.push([p, map[p]]); it all in a single file. ! ! ! ! ! if(map[p]==packName){ ! ! ! ! ! ! reverseName = p; ! ! ! ! ! } ! ! ! ! } ! ! ! ! dest.sort(function(lhs, rhs){ ! ! ! ! ! return rhs[0].length - lhs[0].length; ! ! ! ! }); ! ! ! ! for(i = 0; i < dest.length;){ ! ! ! ! ! item = dest[i++]; ! ! ! ! ! item[2] = new RegExp("^" + item[0].replace(/([.$?*|{} ()[]/+^])/g, function(c){ return "" + c; }) + "(/|$)"); ! ! ! ! ! item[3] = item[0].length + 1; ! ! ! ! } ! ! ! ! return reverseName; ! ! ! }, ! ! ! fixupPackageInfo = function(packageInfo, baseUrl){ ! ! ! ! // calculate the precise (name, baseUrl, main, mappings) for a package ! ! ! ! var name = packageInfo.name; ! ! ! ! if(!name){
  • 13.
    Single File -pros & cons
  • 14.
    Single File -pros & cons Pros Fewer resources means faster load times.
  • 15.
    Single File -pros & cons Pros Fewer resources means faster load times. No “build step” necessary.
  • 16.
    Single File -pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line #
  • 17.
    Single File -pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line # Code reusability is dirt poor. Copy and paste?
  • 18.
    Single File -pros & cons Pros Fewer resources means faster load times. No “build step” necessary. Cons Difficult to maintain and edit a file thousands of lines long. GOTO Line # Code reusability is dirt poor. Copy and paste? Makes team development near impossible. GITMERGETOOL
  • 19.
  • 20.
    Multiple Files Multiple fileswhich follow an object oriented or namespaced approach are easier to maintain because the brain more easily maps files to ideas.
  • 21.
    Multiple Files Multiple fileswhich follow an object oriented or namespaced approach are easier to maintain because the brain more easily maps files to ideas. [dom.js] [lang.js] library.dom = { library.lang = { // code // code } } [events.js] [string.js] library.events = library.string = { { // code // code } }
  • 22.
    Multi File -pros & cons
  • 23.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier.
  • 24.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects).
  • 25.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly.
  • 26.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page.
  • 27.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page. Lots of <script> tags. BLEAH.
  • 28.
    Multi File -pros & cons Pros One-to-one, file-to-class makes organization easier. The brain more easily maps files to concepts (objects). More team friendly. Cons The files (and server requests) will add up fast and that will slow down the page. Lots of <script> tags. BLEAH. The system to track all these files and their order is YOU.
  • 29.
    Web App with<script> tags
  • 30.
    Web App with<script> tags
  • 31.
    Web App with<script> tags
  • 32.
    Build solution for<script> tags
  • 33.
    Build solution for<script> tags Result can be fed into Google Closure Combiner, Dojo Shrinksafe, UglifyJS, etc, etc.
  • 34.
  • 35.
    Dependency Matters Scriptsload in this order [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
  • 36.
    Dependency Matters Scriptsload in this order A change is made to dom.js Adds events to node on create. [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
  • 37.
    Dependency Matters Scriptsload in this order A change is made to dom.js Adds events to node on create. [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] dom.js is trying to access library.lang = { // code } // code events.js but it’s not loaded } library.string = yet { // code }
  • 38.
    Dependency Management [dom.js] [events.js] library.dom = { // code [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code }
  • 39.
    Dependency Management [player.html] [dom.js] [events.js] library.dom = { // code [admin.html] [lang.js] library.events = } { [string.js] library.lang = { // code } // code } library.string = { // code } [test.html] Now script order needs to be changed in all your
  • 41.
    I thought Dojohad a build tool with dependency
  • 42.
  • 43.
    Dojo’s <1.7 Solution “provide”registers this page of code as “a class” (but actually just an object). dojo.provide(“dijit.Dialog”);
  • 44.
    Dojo’s <1.7 Solution “provide”registers this page of code as “a class” (but actually just an object). dojo.provide(“dijit.Dialog”); dojo.require(“dijit.form.Button”); “require” tells Dojo that the provided code depends upon the required code. Dojo guarantees that the required code is loaded before the provided code is executed.
  • 45.
  • 46.
    How Dojo <1.7Worked Script files were pulled in as text with XHR. -= XHR =- [dom.js] code code code require(‘event’) library.dom = { // code }
  • 47.
    How Dojo <1.7Worked Script files were pulled in as text with XHR. One at a time, each text file is eval’d into JavaScript. synchronously! -= XHR =- -= EVAL =- [dom.js] [dom.js] [dom.js] code code code code code code code code code require(‘event’) require(‘event’) require(‘event’) library.dom = { library.dom = { library.dom = { // code // code // code } } }
  • 48.
  • 49.
    Dojo <1.7 Problems XHR load has same-origin restrictions
  • 50.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed
  • 51.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers
  • 52.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow
  • 53.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR)
  • 54.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR) eval executes differently across browsers
  • 55.
    Dojo <1.7 Problems XHR load has same-origin restrictions Special, complex, XD loader was needed Eval’d code totally fubar’d syntax-error line numbers Synchronous XHR is very slow Some environments do not allow eval (like Adobe AIR) eval executes differently across browsers Developers are taught that eval is evil
  • 57.
  • 58.
  • 59.
    Async var Employee= require("Employee"); function Manager () { } Manager.prototype = new Employee(); [ ERROR ]
  • 60.
    Async varEmployee = require("Employee"); function Manager () { } Manager.prototype = new Employee(); [ ERROR ] The Employee code is loaded async, so it happens in the background while Manager is invoked, which means Employee is not ready and an error occurs.
  • 61.
  • 62.
    document.write write(‘<script src=”Store.js”/>’); write(‘<script src=”Employee.js” />’);
  • 63.
    document.write write(‘<script src=”Store.js”/>’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies
  • 64.
    document.write write(‘<script src=”Store.js”/>’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies Does not work after page load
  • 65.
    document.write write(‘<script src=”Store.js”/>’); write(‘<script src=”Employee.js” />’); No access to the script’s dependencies Does not work after page load Blocks page rendering
  • 66.
  • 67.
    appendChild(‘script’); head =document.getElementsByTagName('head')[0]; script = document.createElement('script'); script.src = url; head.appendChild(script); No access to the script’s dependencies
  • 68.
    appendChild(‘script’); head =document.getElementsByTagName('head')[0]; script = document.createElement('script'); script.src = url; head.appendChild(script); No access to the script’s dependencies Has same async issues
  • 70.
  • 71.
  • 72.
    Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later }
  • 73.
    Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later } Wrapping code in function allows the loader to control when invocation needs to occur
  • 74.
    Function Wrapping dependency dependency dependency code_for_loader_to_execute = function(){ return code_to_be_converted_to_module_later } Wrapping code in function allows the loader to control when invocation needs to occur All code can defer until after all dependencies are determined and loaded
  • 75.
  • 76.
    AMD’s Methods “define” registersthis page of code as “a class”. define();
  • 77.
    AMD’s Methods “define” registersthis page of code as “a class”. define(); require(); “require” loads in the requested modules and provides them in a callback function.
  • 78.
    Anatomy of AMD- define()
  • 79.
    Anatomy of AMD- define() define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
  • 80.
    Anatomy of AMD- define() One of two globals used in the spec define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
  • 81.
    Anatomy of AMD- define() One of two Dependencies list defined globals used in as an array in the first the spec argument define( [ “./depA”, “./depB” ], function(depA, depB){ var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
  • 82.
    Anatomy of AMD- define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; return myModule; } ); * There are other argument options, but these are the most common.
  • 83.
    Anatomy of AMD- define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments ); * There are other argument options, but these are the most common.
  • 84.
    Anatomy of AMD- define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments All of your module ); magic happens here, complete with scope isolation * There are other argument options, but these are the most common.
  • 85.
    Anatomy of AMD- define() One of two Dependencies list defined globals used in as an array in the first the spec argument The second define( [ argument is the “./depA”, Factory which is “./depB” consumed when ], function(depA, depB){ module is requested var myModule = {}; Dependencies return myModule; passed as factory’s } arguments All of your module ); magic happens here, complete with scope isolation Looks like a class, smells like a class... * There are other argument options, but these are the most common.
  • 86.
    Anatomy of AMD- require()
  • 87.
    Anatomy of AMD- require() require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
  • 88.
    Anatomy of AMD- require() The other global require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
  • 89.
    Anatomy of AMD- require() Modules, or “Imports” list The other global defined as an array in the first argument require( [ “library/depA”, “library/depB” ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
  • 90.
    Anatomy of AMD- require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); depB.someMore(); } ); * There are other argument options, but these are the most common.
  • 91.
    Anatomy of AMD- require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); * There are other argument options, but these are the most common.
  • 92.
    Anatomy of AMD- require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); Modules are ready to access here * There are other argument options, but these are the most common.
  • 93.
    Anatomy of AMD- require() Modules, or “Imports” list The other global defined as an array in the first argument require( Callback fires when [ modules are loaded “library/depA”, “library/depB” and ready ], function(depA, depB){ depA.doSomething(); Modules passed as depB.someMore(); callback’s } arguments ); Modules are ready to access here Looks like “define”! Simple! * There are other argument options, but these are the most common.
  • 94.
    Why is ASYNCfast anyway?
  • 95.
    Why is ASYNCfast anyway? In this context, “async” refers to allowing the browser to load the scripts natively. It can load many scripts at once, concurrently.
  • 96.
    Why is ASYNCfast anyway? The “sync” loader needed to block all other processes while a script was loaded.
  • 98.
  • 99.
  • 100.
    Plugins The bang! symbolrepresents a plugin that performs a special task. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget });
  • 101.
    Plugins The bang! symbolrepresents a plugin that performs a special task. domReady! is a common plugin that prevents the callback from firing until the DOM is in fact... ready. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget });
  • 102.
    Plugins The bang! symbolrepresents a plugin that performs a special task. domReady! is a common plugin that prevents the callback from firing until the DOM is in fact... ready. require(["dojo", "dojo/domReady!"], function(dojo){ ! doDomStuff(); }); define([ “dijit/Widget”, “dojo/text!myTemplate.html” ], function(Widget, template){ // build a widget }); text! knows that it is reading text or HTML and possibly applies transforms to it.
  • 103.
  • 104.
    Build Tools A “profile”is the description file the Dojo Builder uses. The AMD structure works well as individual files or as one combined file. var profile = { ! releaseDir:"../clubajax-deploy", ! packages:[ ! ! { ! ! ! name:"clubajax", ! ! ! location:"." ! ! },{ ! ! ! name:"plugin", ! ! ! location:"../plugin" ! ! } ! ], ! layers:{ ! ! "clubajax/layer":{ ! ! ! include:[ 'custom/main', 'plugin/main' ] ! ! } ! } };
  • 105.
  • 106.
    Packages A package.json filewill help describe your code, its external dependencies, and how it should be used. { "name": "clubajax.js", "description": "Club AJAX Base Library", "licenses": [{ "type": "AFLv2.1", "url": "http://dojo/LICENSE" }], "bugs": "", "keywords": [], "homepage": "http://clubajax.org/", "dependencies": {}, "dojoBuild": "clubajax.profile.js", "main": "./main"
  • 107.
    Packages A package.json filewill help describe your code, its external dependencies, and how it should be used. { "name": "clubajax.js", "description": "Club AJAX Base Library", "licenses": [{ "type": "AFLv2.1", "url": "http://dojo/LICENSE" }], "bugs": "", "keywords": [], "homepage": "http://clubajax.org/", "dependencies": {}, "dojoBuild": "clubajax.profile.js", "main": "./main" “dojoBuild” points to the profile, and “main” points to the master file that knows of all the files in the package.
  • 109.
  • 110.
  • 111.
    AMD Authors James Burke Original Dojo Loader author Developed RequireJS and spearheaded AMD
  • 112.
  • 113.
    AMD Authors Kevin Dangoor Authored blog post: “What Server Side JavaScript Needs” Founded CommonJS Expressed the need for JS modules and packages RequireJS based on CommonJS module spec
  • 114.
  • 115.
    AMD Authors Rawld Gill Wrote the Dojo 1.7 loader and Node.js build tool key contributor to AMD spec Authored all AMD plugins (text, i18n, domReady, ready) dojo bootstrap (kernel and base load) dojo's has.js implementation (enhanced from standard version)
  • 116.
  • 117.
    AMD Authors Kris Zyp Of course he helped. What is there that Kris Zyp DOESN’T do??
  • 118.
    AMD Libraries The followinglibraries are either AMD- compliant or AMD loaders jQuery 1.7 Dojo 1.7 MooTools 2.0 EmbedJS curl.js
  • 119.
    More AMD Info https://github.com/amdjs/amdjs-api/wiki/AMD http://www.commonjs.org/ http://www.commonjs.org/specs/ http://dojotoolkit.org/reference-guide/loader/ index.html#loader-index http://dojotoolkit.org/reference-guide/loader/amd.html#loader- amd http://arstechnica.com/web/news/2009/12/commonjs-effort- sets-javascript-on-path-for-world-domination.ars http://requirejs.org/docs/history.html http://www.commonjs.org/history/ https://groups.google.com/group/amd-implement?pli=1 ✴ Special credit to Rawld Gill of Alto Visio for his in depth explanations of Dojo Loader and Build Tool ✴ And a very special credit to James Burke - since most of the information in this presentation came from the RequireJS pages.
  • 120.

Editor's Notes