Workshop 2: JavaScript Design Patterns
-
Upload
visual-engineering -
Category
Software
-
view
449 -
download
2
Transcript of Workshop 2: JavaScript Design Patterns
![Page 1: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/1.jpg)
Javascript Design Patterns. AMD & commonJS.
RequireJS
Marc Torrent Vernetta
![Page 2: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/2.jpg)
Javascript Design Patterns
![Page 3: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/3.jpg)
A reusable solution that can be applied to commonly occurring problems
in software design -in our case- in writing JavaScript Web application.
What is a Pattern?
Templates for how we solve problems - ones which can be used in quite
a few different situations situations
Addy Osmani
![Page 4: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/4.jpg)
Three Main Benefits
1. Proven Solutions2. Easily Reused3. Expressive
NOT EXACT SOLUTIONS SUPPORT DEVELOPERS
![Page 5: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/5.jpg)
A Good Pattern
1. Solves a particular problem2. Not an obvious solution3. A proven described concept4. Describe a relationship
Display some recurring phenomenon:
❖ Fitness of purpose❖ Usefulness❖ Applicability
![Page 6: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/6.jpg)
Antipatterns
1. Polluting global namespace2. Strings to setTimeout and setInterval + eval()3. Modify the Object prototype (very bad!!)4. Javascript in an inline form5. Use of document.write
Knowledge for anti-patterns is critical for success !!!!
![Page 7: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/7.jpg)
Antipatterns
1. Polluting global namespace2. Strings to setTimeout and setInterval + eval()3. Modify the Object prototype (very bad!!)4. Javascript in an inline form5. Use of document.write
Knowledge for anti-patterns is critical for success !!!!
![Page 8: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/8.jpg)
Design Pattern Types
➢ Creational○ Factory Pattern○ Constructor Pattern○ Singleton Pattern○ Prototype Pattern
➢ Structural○ Module Pattern○ Adapter Pattern○ Decorator Pattern○ Façade Pattern○ Mixin Pattern○ Flyweight Pattern
➢ Behavioral○ Mediator Pattern○ Observer Pattern
- Classes
- Objects
![Page 9: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/9.jpg)
Creational Patterns
![Page 10: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/10.jpg)
Constructor Pattern
![Page 11: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/11.jpg)
Constructor Pattern - Prototype
![Page 12: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/12.jpg)
Prototype Pattern
![Page 13: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/13.jpg)
Sub-Classing
![Page 14: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/14.jpg)
Mixin Pattern
![Page 15: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/15.jpg)
Structural Patterns
![Page 16: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/16.jpg)
Module Pattern - Object Literal
![Page 17: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/17.jpg)
Module Pattern - IIFE
![Page 18: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/18.jpg)
Module Pattern - Revealing
![Page 19: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/19.jpg)
Behavioral Patterns
![Page 20: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/20.jpg)
Observer Pattern - I
SUBJECT STATE
OBSERVERS LIST
OBSERVER OBSERVER OBSERVER OBSERVER OBSERVER
N O T I F Y
CONCRETE SUBJECT
CONCRETEOBSERVER
UPDATEUPDATEUPDATEUPDATEUPDATE
![Page 21: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/21.jpg)
Observer Pattern - II
![Page 22: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/22.jpg)
Observer Pattern - III
![Page 23: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/23.jpg)
Observer Pattern - IV
![Page 24: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/24.jpg)
Observer Pattern - V
![Page 25: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/25.jpg)
Observer Pattern - VI
![Page 26: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/26.jpg)
Observer Pattern - VII
![Page 27: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/27.jpg)
Publish/Subscribe Pattern - I
PUBLISHER(SUBJECT)
SUBSCRIBER
EVENT AGGREGATOR
SUBSCRIBER SUBSCRIBER
![Page 28: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/28.jpg)
Publish/Subscribe Pattern II
![Page 29: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/29.jpg)
Publish/Subscribe Pattern III
![Page 30: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/30.jpg)
Publish/Subscribe Pattern IV
![Page 31: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/31.jpg)
![Page 32: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/32.jpg)
Mediator Pattern - I
SUBJECT
SUBSCRIBER
EVENT AGGREGATOR
SUBSCRIBER SUBSCRIBER
MEDIATOR
![Page 33: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/33.jpg)
Mediator Pattern - II
![Page 34: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/34.jpg)
Mediator Pattern - III
![Page 35: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/35.jpg)
Mediator Pattern - IV
![Page 36: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/36.jpg)
Mediator Pattern - V
![Page 37: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/37.jpg)
Modern Modular JavaScript Design Patterns
![Page 38: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/38.jpg)
Module A Module B Module C Module N…...
Application
- Modular Application- Loosely Coupled
- Dependency Control- Script Loader
➢ BROWSER:- Asynchronous
Module Definition (AMD)
- requireJS➢ SERVER:
- commonJS
Dependency Control
![Page 39: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/39.jpg)
AMD Modules
➢ Defining modules with dependencies to other modules.➢ The module and dependencies can be asynchronously
loaded.➢ Both modules are asynchronous and highly flexible by
nature➢ Removes the tight coupling between code and module
identity
![Page 40: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/40.jpg)
AMD Modules Advantages
● Provides a clear proposal for how to approach defining flexible modules.
● Significantly cleaner than the present global namespace and <script> tag solutions many of us rely on. There's a clean way to declare stand-alone modules and dependencies they may have.
● Module definitions are encapsulated, helping us to avoid pollution of the global namespace.
● Most AMD loaders support loading modules in the browser without a build process.
● Provides a "transport" approach for including multiple modules in a single file.
● It's possible to lazy load scripts if this is needed.
![Page 41: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/41.jpg)
AMD Modules - define vs require
define(
module_id /*optional*/,
[dependencies] /*optional*/,
definition function /*function for instantiating the
module or object*/
);
require(
[dependencies] /*required*/,
complete function /*function for instantiating the
dependecies*/
);
![Page 42: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/42.jpg)
AMD Modules - define vs require
define([“url_to_anonymous_module”, “named_module_id”],
function(ModuleA, ModuleB) {
function doCoolStuff(a) {
ModuleA.cool(a, ModuleB.getCool());
}
return {
cool: doCoolStuff
};
}
);
require([“myModule”], function(moduleC) {
var superCool = “super cool”;
moduleC.cool(superCool);
});
![Page 43: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/43.jpg)
requireJS
➢ Library for working with AMD modules. Asynchronous script loader and dependency manager.
➢ Easy naming definition with a json configuration. Prepare non AMD modules for other AMD modules as its dependency management stays untouched.
➢ Optimization tool for bundling modules in one or many optimized, uglified and minimized module.
➢ With plugin extension for loading non JS scripts, like CSS, JSON, JSONP, etc…
➢ commonJS wrapper for styling AMD module loading with commonJS syntax and reducing verbosity.
![Page 44: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/44.jpg)
requireJS and AMD
require([dependencies], function(depA, depB, ...){});
requirejs([dependencies], function(depA, depB, ...){});
define() function and module definition remains exactly the same
requirejs.config({
baseUrl: ‘path_to_where_scripts_are’,
paths: {
name_of_a_module: ‘relative_path_of_the_module’,
other_module_name: ‘relative_path_of_other_module’
},
shim: {
name_of_a_module: {
exports: ‘Foo’,
},
other_module_name: [“name_of_a_module”]
}
});
![Page 45: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/45.jpg)
requireJS and HTML
<html>
<head></head>
<body>
<script data-main="js/app.js"
src="js/require.js"></script>
<script type=”text/javascript”>
requirejs([“app”], function(app) {
app.start();
});
</script>
</body>
</html>
![Page 46: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/46.jpg)
commonJS modules
➢ Reusable piece of JavaScript which exports specific objects made available to any dependent code.
➢ Unlike AMD, there are typically no function wrappers around such modules.
➢ Two primary parts: a free variable named exports which contains the objects a module wishes to make available to other modules and a require function that modules can use to import the exports of other modules
➢ Only able to define objects which can be tedious to work with if we're trying to obtain constructors out of them
➢ Useful for Server side because it can use io, fs, system, etc..
![Page 47: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/47.jpg)
commonJS in depth
var libA = require(‘package/libA’),
libB = require(‘package/libB’);
function foo(){
libA.log( ‘hello world!’ );
}
exports.foo = foo;
exports.bar = function bar() {
libB.myFunc();
};
var foobar = require(‘foobar’);
foobar.foo();
foobar.bar();
![Page 48: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/48.jpg)
requireJS with commonJS style
define(function(require) {
var moduleA = require(‘moduleA’),
moduleB = require(‘moduleB’);
function doCoolStuff(a) {
moduleA.cool(a, moduleB.getCool());
}
return {
cool: doCoolStuff
};
}
);
![Page 49: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/49.jpg)
Library App with RequireJS & AMD
![Page 50: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/50.jpg)
![Page 51: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/51.jpg)
![Page 52: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/52.jpg)
![Page 53: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/53.jpg)
![Page 54: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/54.jpg)
![Page 55: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/55.jpg)
Thanks for your attention!Leave your questions on the comments section
![Page 56: Workshop 2: JavaScript Design Patterns](https://reader031.fdocuments.us/reader031/viewer/2022022202/587a16661a28abb4238b5413/html5/thumbnails/56.jpg)