Tweet
Tweet

Slide 1

Slide 1 text

Module, AMD, RequireJS othree @ JSDC 2012

Slide 2

Slide 2 text

Object

Slide 3

Slide 3 text

Object Oriented Programming

Slide 4

Slide 4 text

Why OOP • Maintainable & Scalable • Gathering related variables & methods

Slide 5

Slide 5 text

Object from OOP • Inheritance • Polymorphism • Encapsulation

Slide 6

Slide 6 text

Encapsulation • A language mechanism for restricting access to some of the object's components. http://en.wikipedia.org/wiki/Encapsulation_(object-oriented_programming)

Slide 7

Slide 7 text

Why Encapsulation • Protect variable from unwanted change

Slide 8

Slide 8 text

JavaScript is Prototype-based

Slide 9

Slide 9 text

Private Data in JavaScript

Slide 10

Slide 10 text

Naming Convention function Human(sgender) { //Private this._age = 1; this._gender = sgender || 'Male'; //Public this.growUp = function () { this._age++; }; }

Slide 11

Slide 11 text

Human _age _gender growUp Accessible Anywhere

Slide 12

Slide 12 text

Privileged Method function Human(sgender) { //Private var age = 1, gender = sgender || 'Male'; //Privileged Method this.growUp = function () { age++; }; } http://javascript.crockford.com/private.html

Slide 13

Slide 13 text

Human age gender growUp Accessible Anywhere

Slide 14

Slide 14 text

Module Pattern

Slide 15

Slide 15 text

Module Pattern function Human(sgender) { //Private var age = 1, gender = sgender || 'Male'; //Public return { growUp: function () { age++; } }; } http://yuiblog.com/blog/2007/06/12/module-pattern/

Slide 16

Slide 16 text

Accessible Anywhere exports Human age gender growUp

Slide 17

Slide 17 text

Advantage • Easy • Keep private data safe

Slide 18

Slide 18 text

Disadvantage • Hard to inherit

Slide 19

Slide 19 text

Large Application • Lots of modules • Complex dependency

Slide 20

Slide 20 text

Lots of Modules • One file per module • Lots of files: • Performance Issue • Async loading?

Slide 21

Slide 21 text

Complex Dependency • Load modules by order • Hard to know the order by head and hand

Slide 22

Slide 22 text

Solution? • Not hard to solve • But there is no standard API

Slide 23

Slide 23 text

CommonJS

Slide 24

Slide 24 text

CommonJS • by Kevin Dangoor • Volunteers and mailing list • Unify server side JavaScript API • Build JavaScript ecosystem • Not an official organization

Slide 25

Slide 25 text

CommonJS APIs • Binary • Filesystem • IO • ... • Modules

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

CommonJS Module • Modules/1.0 • NodeJS • Modules/AsynchronousDefinition • AMD

Slide 28

Slide 28 text

AMD

Slide 29

Slide 29 text

Asynchronous Module Definition define(id?, dependencies?, factory);

Slide 30

Slide 30 text

Example define( 'account', ['service', 'pubsub'], function (service, pubsub) { //do something //export public APIs return { signin: function () { /* ... */ }, signout: function () { /* ... */ }, getName: function () { /* ... */ }, setName: function () { /* ... */ } }; } );

Slide 31

Slide 31 text

Another Way (function () { //10000 lines of code exports = { signin: function () { /* ... */ }, signout: function () { /* ... */ } }; define('account', function () { return exports; }); }());

Slide 32

Slide 32 text

In jQuery if ( typeof define === "function" && define.amd && define.amd.jQuery ) { define( "jquery", [], function () { return jQuery; } ); }

Slide 33

Slide 33 text

RequireJS

Slide 34

Slide 34 text

RequireJS • AMD Implementation by James Burke • Async resource loader • 1.0.8 now, 2.0 under development

Slide 35

Slide 35 text

Usage

Slide 36

Slide 36 text

main.js require(["app"], function(app) { app.init(); });

Slide 37

Slide 37 text

app.js define(["lib/account", "lib/session"], function (account, session) { //do something return { init: function () { //init the application } }; } );

Slide 38

Slide 38 text

main.js account.js app.js session.js crypt.js xhr.js storage.js

Slide 39

Slide 39 text

Features • AMD • Path alias • Circular dependency • Plugins

Slide 40

Slide 40 text

Plugins • order • text • wrap, use • cs (CoffeeScript)

Slide 41

Slide 41 text

Advantages • No pollution to global scope • Everything is organized in module • Compile CoffeeScript on the fly • ...etc

Slide 42

Slide 42 text

Minefield • Module load fail: hard to debug • Wrong path • Use require function • Plugin error, ex: CoffeeScript syntax error

Slide 43

Slide 43 text

Still Problems • Lots of modules • Lots of files • Lots of requests • Low performance

Slide 44

Slide 44 text

r.js

Slide 45

Slide 45 text

r.js • Optimization tool • Pack all modules into one file • Minimize the JavaScript file

Slide 46

Slide 46 text

Usage node r.js -o build.js

Slide 47

Slide 47 text

build.js ({ appDir: "../", baseUrl: "scripts", dir: "../../appdirectory-build", modules: [ { name: "main" } ] })

Slide 48

Slide 48 text

main.js account.js app.js session.js crypt.js xhr.js storage.js

Slide 49

Slide 49 text

After Optimized • require.js are large: 86kb

Slide 50

Slide 50 text

almond.js

Slide 51

Slide 51 text

almond.js • Minimal AMD API implement • Same author

Slide 52

Slide 52 text

Advantages • Small: 9kb, 857 bytes minimized and gzipped • Stable: no change since 0.0.3

Slide 53

Slide 53 text

Disadvantages • No plugin support • Not a resource downloader • Lots of restriction • Different optimize concept

Slide 54

Slide 54 text

Usage node r.js -o baseUrl=. name=path/to/almond.js include=main out=main-built.js wrap=true

Slide 55

Slide 55 text

Tip • You can use r.js to optimize • And use almond.js to replace require.js

Slide 56

Slide 56 text

Slide 57

Slide 57 text

References • http://www.yuiblog.com/blog/2007/06/12/module-pattern/ • http://wiki.commonjs.org/wiki/Modules/1.1 • http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition • https://github.com/amdjs/amdjs-api/wiki/AMD • http://requirejs.org/ • https://github.com/jrburke/almond

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Questions Time

Slide 60

Slide 60 text

Q • I want to use Underscore and Backbone, but they don’t support RequireJS....

Slide 61

Slide 61 text

A • Do nothing • Use use/wrap plugin • Use modified version https://github.com/jrburke • Use another script tag to include them first

Slide 62

Slide 62 text

Slide 63

Slide 63 text

yepnope({ load: [ "undersocre+backbone.js", "almond.js", "main-optimized.js" ] });

Slide 64

Slide 64 text

Questions?

Slide 65

Slide 65 text

Thank You