Full-stack Development with IPT – Intellectual Products & Technologies

Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Object-Oriented JavaScript. ECMAScript 6.

JS Design Patterns. MV* Patterns.

Trayan Iliev

IPT – Intellectual Products & Technologies

e-mail: [email protected]
web: http://www.iproduct.org
Oracle®, Java™ and JavaScript™ are trademarks or registered trademarks of Oracle and/or its affiliates.
Microsoft .NET, Visual Studio and Visual Studio Code are trademarks of Microsoft Corporation.
Other names may be trademarks of their respective owners.

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 1
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Agenda
1. JavaScript™ history and main features
2. JavaScript™ datatypes
3. Functions in JavaScript™
4. Closures
5. Objects in JavaScript™
6. Using this
7. Object-oriented inheritance in JavaScript™
8. JavaScript™ design patterns
9. MV* patterns for building maintainable JS UI applications
10. EcmaScript 6 (Harmony, ES 2015) novelties
11.Bootstrapping an ES6 project using Webpack
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 2
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Where is The Code?

Full-stack Development with Node.js and React.js

code is available @GitHub:
https://github.com/iproduct/course-fullstack-react

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 3
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Brief History of JavaScript™

JavaScript™ created by Brendan Eich from
Netscape for less then 10 days!
Initially was called Mocha, later LiveScript –
Netscape Navigator 2.0 - 1995
December 1995 Netscape® и Sun®
agree to call the new language JavaScript™
“JS had to 'look like Java' only less so, be Java's dumb kid
brother or boy-hostage sidekick. Plus, I had to be done in ten
days or something worse than JS would have happened.”
B. E. (http://www.jwz.org/blog/2010/10/every-day-i-learn-something-new-and-stupid/#comment-1021)

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

Source: Wikipedia (http://en.wikipedia.org/wiki/File:BEich.jpg),
International License License: CC-SA Slide 4
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

The Language of Web

JavaScript™ success comes fast. Microsoft® create own
implementation called JScript to overcome trademark problems.
JScript was included in Internet Explorer 3.0, in August 1996.
In November 1996 Netscape announced their proposal to Ecma
International to standardize JavaScript → ECMAScript
JavaScript – most popular client-side (in the browser) web
programming language („de facto“ standard) and one of most
popular programming languages in general.
Highly efficient server-side platform called Node.js based on
Google V8 JS engine, compiles JS to executable code Just In
Time (JIT) during execution (used at the client-side also).
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 5
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

The Language of Big Contrasts

JavaScript – a language of big contrasts: from beginner web
designers (copy-paste) to professional developers of
sophisticated JS libraries and frameworks.
Douglas Crockford: “JavaScript is may be the only language
the people start to code in before learnig the language :)“
This was a reason for many to consider JavaScript as
„trimmed version of object-oriented programming language“
Popularity of AJAX (Asynchronous JavaScript and XML) and
shift towards dynamic (asynchronous) client side applications
returned JavaScript in the spotlight.

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 6
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript / ECMAScript Now

JS Reusable Design Patterns, modular component-oriented
software engineering, Test Driven Development (TDD) and
Continuous Integration (CI).
Model View Controller (Model-View-Presenter - MVP, Model-
View-ViewModel - MVVM – or genrally MV*) libraries and
application frameworks available → single page web and
mobile applications using standard components and widgets.
Januarry 2009 : CommonJS => to use of JS outside of browser
June 2015: ES6 (Harmony) → classes, lambdas, promises, ...
October 2012: Typescript → Type checking + @Decorators

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 7
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Object-Oriented JavaScript
Object-Oriented (OO) – object literals and constructor functions
Objects can have named properites
Ex.: MyObject.name = 'Scene 1';
MyObject ['num-elements'] = 5;
MyObject.protopype.toString = function() {
return “Name: “ + this.name + “: “ + this['num-elements'] }
Configurable object properties – e.g. read only get/set etc.
Ex.: Object.defineProperty( newObject, "someKey", {
value: "fine grained control on property's behavior",
writable: true, enumerable: true, configurable: true
});
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 8
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Property Getters and Setters

Ex.: function PositionLogger() {
var position = null, positionsLog = [];
Object.defineProperty(this, 'position', {
get: function() {
console.log('get position called');
return position;
},
set: function(val) {
position = val;
positionsLog.push({ val: position });
}
});
this.getLog = function() { return positionsLog; };
} Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 9
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Features
The state of objects could be changed using JS functions
stored in object's prototype, called methods.
Actually in JavaScript there were no real classes, - only objects
and constructor functions before ES6 (ES 2015, Harmony).
JS is dynamically typed language – new properties and
methods can be added runtime.
JS supports object inheritance using prototypes and mixins
(adding dynamically new properies and methods).
Prototypes are objects (which also can have their prototypes)
→ inhreritance = traversing prototype chain
Main resource: Introduction to OO JS YouTube video
https://www.youtube.com/watch?v=PMfcsYzj-9M
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 10
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Features

Supports for ... in operator for iterating object's properties,

including inherited ones from the prototype chain.
Provides a number of predefined datatypes such as:
Object, Number, String, Array, Function, Date etc.
Dynamically typed – variables are universal conatainers, no
variable type declaration.
Allows dynamic script evaluation, parsing and execution using
eval() – discouraged as a bad practice.

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 11
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Datatypes in JavaScript
Primitive datatypes:
boolean – values true и false
number – floating point numbers (no real integers in JS)
string – strings (no char type –> string of 1 character)
Abstract datatypes:
Object – predefined, used as default prototype for other objects
(defines some common properties and methods for all objects:
constructor, prototype; methods: toString(), valueOf(),
hasOwnProperty(), propertyIsEnumerable(), isPrototypeOf();)
Array – array of data (really dictionary type, resizable)
Function – function or object method (defines some common
properties: length, arguments, caller, callee, prototype)
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 12
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Datatypes in JavaScript
Special datatypes:
null – special values of object type that does not point
anywhere
undefined – a value of variable or argument that have not
been initialized
NaN – Not-a-Number – when the arithmetic operation should
return numeric value, but result is not valid number
Infinity – special numeric value designating infinity ∞
Operator typeOf
Example: typeOf myObject.toString //-->'function'
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 13
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Functional JavaScript
Functional language – functions are “first class citizens”
Functions can have own properties and methods, can be
assigned to variables, pass as arguments and returned as a
result of other function's execution.
Can be called by reference using operator ().
Functions can have embedded inner functions at arbitrary depth
All arguments and variables of outer function are accessible to
inner functions – even after call of outer function completes
Outer function = enclosing context (Scope) for inner functions →
Closure
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 14
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Closures
Example:
function countWithClosure() {
var count = 0;
return function() {
return count ++;
}
}
var count = countWithClosure(); <-- Function call – returns innner
function wich keeps reference to
count variable from the outer scope
console.log( count() ); <-- Prints 0;
console.log( count() ); <-- Prints 1;
console.log( count() ); <-- Prints 2;
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 15
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Default Values & RegEx

Functions can be called with different number of arguments.
It is possible to define default values – Example:
function Polygon(strokeColor, fillColor) {
this.strokeColor = strokeColor || "#000000";
this.fillColor = fillColor || "#ff0000";
this.points = [];
for (i=2;i < arguments.length; i++) {
this.points[i] = arguments[i];
}
Regullar expressions – Example: /а*/.match(str)

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 16
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Functions in JavaScript
Embedded functions – define their own scope scope - Ex.:
function getBoundingRectangle(pts) {
var points = pts || [];
Local variables
function minX() {
var x, min = Number.POSITIVE_INFINITY;
for(var i = 0; i < points.length; i++){ ...
x = points[i].x; return {
if( x < min){
x: minX(),
min = x;
Object literal y: minY(),
}
width: maxX() - minX(),
}
height: maxY() - minY()
return min;
}
}
}
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 17
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Functions in JavaScript
Inner functions define their own scopes:
function getBoundingRectangle(pts) {
var points = pts || []; Functional literal
var minX = function () {
var x, min = Number.POSITIVE_INFINITY;
for(i = 0; i < points.length; i++){
x = points[i].x;
if( x < min){ return {
min = x; x: minX,
} y: minY,
} width: function() {return maxX() - minX();},
return min; height: function() {return maxY() - minY();}
} }}
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 18
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Object Literals. Using this

Object literals – example:
var point1 = { x: 50, y: 100 }
var rectangle1 = { x: 200, y: 100, width: 300, height: 200 }
Using this calling a function /D. Crockford/:
Pattern „Method Call“:
var scene1 = { Referres to object and allows access
name: 'Scene 1', to its properties and methods
numElements: 5,
toString: function() {
return “Name: “ + this.name + “, Elements: “ + this['numElements'] }
}
console.log(scene1.toString()) // --> 'Name: Scene 1, Elements: 5'
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 19
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Accessing this in Inner Functions

Using this calling a function /D. Crockford/:
Pattern „Function Call“:
var scene1 = { It's necessary to use additional variable,
... because this points to global object (window)
log: function(str) { undefined in strict mode
var that = this;
var createMessage = function(message) {
return “Log for '“ + that.name +“' („ + Date() + “): “
+ message;
}
console.log( createMessage(str) );
}
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 20
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Creating Objects Using Constructors

Pattern „Constructor Call“:
function Shape(sx, sy, width, height, strokeColor, fillColor) {
this.x = sx || 0; this.y = sy || 0;
this.strokeColor = strokeColor || "#000000";
this.fillColor = fillColor || "#ff0000";
this.width = width || 0; this.height = height || 0;
}
Shape.prototype.toString = function() {
return "x: " + this.x + ", y: " + this.y + ", strokeColor: " +
this.strokeColor + ", fillColor: " + this.fillColor;
} When constructing object with new a hidden link is created: __proto__
or [[Prototype]] pointing to constructor's prototype property:
shape1 = new Shape(50, 100, 30, 30, „red“, „green“);
console.log(shape1.toString() );
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 21
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

„Classical“ Inheritance. Using call() & apply()

Pattern „Calling a function using special method“
Function.apply(newThis, newArgsArray) and
Function.call(newThis, newArg1, newArg2, …, newArgN):
function Point(x, y, color){
Shape.apply(this, [x, y, 1, 1, color, color]);
}
extend(Point, Shape);
function extend(Child, Parent) {
Child.prototype = new Parent;
Child.prototype.constructor = Child;
Child.prototype.supper = Parent.prototype;
}
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 22
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

„Classical“ Inheritance. Using call() & apply()

Point.prototype.toString = function() {
return "Point(" + this.supper.toString.apply(this,[]) + ")";
}
Point.prototype.draw = function(ctx) {
ctx.Style = this.strokeColor;
ctx.fillRect(this.x, this.y, 1, 1);
}

point1 = new Point(200,150, „blue“);

console.log(point1.toString() );

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 23
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Design Patterns

Dynamic loading of JS modules Command

Constructor (using prototypes) Facade
Singleton (literals, lazy instantiation) Factory
Module Mixin
Observer (publish/subscribe events) Decorator
Prototype ( Object.create() / Function Chaining
Object.clone() )
DRY (Don't Repeat Yourself)

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 24
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Examples Using JavaScript Design Patterns

Learning JavaScript Design Patterns

A book by Addy Osmani
Volume 1.6.2:
https://addyosmani.com/resources/
essentialjsdesignpatterns/book/

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 25
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Conclusions – ОО JavaScript Development

JavaScript™ provides everything needed for contemporary object-
oriented software development. JavaScript supports:
Data encapsualtion (separation of public and private parts) –
How?: Using design patterns Module or Revealing Module
Inheritance – before ES 6 there were no classes but several
choices for constructing new objects using object templates
(“pseudo-classical” using new, OR using functions, OR
Object.create(baseObject), OR Mixin)
Polimorphism supported – there are methods with the same
name and different implementations – duck typing

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 26
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

EcmaScript 6 – ES 2015, Harmony

[https://github.com/lukehoban/es6features]
A lot of new features: Modules + module loaders
arrows map + set + weakmap + weakset
classes proxies
enhanced object literals symbols
template strings subclassable built-ins
destructuring Promises
default + rest + spread math + number + string + array +
let + const object APIs
iterators + for..of binary and octal literals
Generators reflect api
unicode tail calls
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 27
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

ES6 Classes [http://es6-features.org/]

class Shape { class Rectangle extends Shape {
constructor (id, x, y) { constructor (id, x, y, width, height)
this.id = id {
this.move(x, y) super(id, x, y)
} this.width = width
move (x, y) { this.height = height
this.x = x }
this.y = y }
} class Circle extends Shape {
} constructor (id, x, y, radius) {
super(id, x, y)
this.radius = radius
}
International License
}
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
Slide 28
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Block Scope Vars: let [http://es6-features.org/]

for (let i = 0; i < a.length; i++) { let callbacks = []
let x = a[i] for (let i = 0; i <= 2; i++) {
… callbacks[i] =
} function () { return i * 2 }
for (let i = 0; i < b.length; i++) { }
let y = b[i]
… callbacks[0]() === 0
} callbacks[1]() === 2
callbacks[2]() === 4

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 29
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

ES6 Arrow Functions and this

ECMAScript 6:
this.nums.forEach((v) => {
if (v % 5 === 0)
this.fives.push(v)
})

ECMAScript 5:
var self = this;
this.nums.forEach(function (v) {
if (v % 5 === 0)
self.fives.push(v);
});

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

Slide 30
Source: http://wiki.commonjs.org/wiki/Modules/1.1
International License
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

ES6 Promises [http://es6-features.org/]

function msgAfterTimeout (msg, who, timeout) {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(`${msg} Hello ${who}!`), timeout)
})
}
msgAfterTimeout("", "Foo", 100).then((msg) =>
return msgAfterTimeout(msg, "Bar", 200)
).then((msg) => {
console.log(`done after 300ms:${msg}`)
})

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 31
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

ES6 Promises

Source: Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 32
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Combining ES6 Promises

function fetchAsync (url, timeout, onData, onError) { … }
fetchPromised = (url, timeout) => {
return new Promise((resolve, reject) => {
fetchAsync(url, timeout, resolve, reject)
})
}
Promise.all([
fetchPromised("http://backend/foo.txt", 500),
fetchPromised("http://backend/bar.txt", 500),
fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
let [ foo, bar, baz ] = data
console.log(`success: foo=${foo} bar=${bar} baz=${baz}`)
}, (err) =>Licensed
{ under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
Slide 33
console.log(`error: ${err}`)
International License

})
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Module Systems - AMD

Asynchronous module definition (AMD) – API for defining code
modules and their dependencies, loading them asynchronously,
on demand (lazy), dependencies managed, client-side
define("alpha", ["require", "exports", "beta"],
function (require, exports, beta) {
exports.verb = function() {
return beta.verb();
//OR
return require("beta").verb();
} });
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 34
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Module Systems - CommonJS

math.js:
exports.add = function() {
var sum = 0, i = 0, args = arguments, len = args.length;
while (i < len) {
sum += args[i++];
}
return sum;
};
increment.js:
var add = require('./math').add;
exports.increment = function(val) {
return add(val, 1);
};
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
Slide 35
Source: http://wiki.commonjs.org/wiki/Modules/1.1
International License
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

JavaScript Module Systems – ES6

// lib/math.js
export function sum (x, y) { return x + y }
export var pi = 3.141593

// someApp.js
import * as math from "lib/math"
console.log("2π = " + math.sum(math.pi, math.pi))

// otherApp.js
import { sum, pi } from "lib/math"
console.log("2π = " + sum(pi, pi))

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

Slide 36
Source: http://wiki.commonjs.org/wiki/Modules/1.1
International License
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

TypeScript
[http://www.typescriptlang.org/]
Typescript → since October 2012, Anders Hejlsberg (lead
architect of C# and creator of Delphi and Turbo Pascal)
Targets large scale client-side and mobile applications by
compile time type checking + @Decorators -> Microsoft, Google
TypeScript is strictly superset of JavaScript, so any JS is valid TS

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 37

Source: Google Trends comparison

Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

EcmaScript 6 Compatibility
[http://kangax.github.io/compat-table/es6/]

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 38
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

MVC Comes in Different Flavors

What is the difference between

following patterns:
Model-View-Controller (MVC)
Model-View-ViewModel (MVVM)
Model-View-Presenter (MVP)
http://csl.ensm-douai.fr/noury/uploads/20/ModelViewController.mp3

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 39
 Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

MVC Comes in Different Flavors - 2

MVC

MVVM

MVP
Sources:https://en.wikipedia.org/wiki/Model_View_ViewModel#/media/File:MVVMPattern.png,
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
https://en.wikipedia.org/wiki/Model%E2%80%93view
International License Slide 40
%E2%80%93presenter#/media/File:Model_View_Presenter_GUI_Design_Pattern.png
License: CC BY-SA 3.0, Authors:Ugaya40, Daniel.Cardenas
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Web MVC Interactions Sequence Diagram

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 41
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Developing Sinagle Page Apps (SPA) in 3 steps

1) Setting up a build system – npm, webpack, gulp are common
choices, babel, typescript, JSX, CSS preprocessors (SASS,
SCSS, LESS), jasmine, karma, protractor, Yeoman/ Slush, live
servers
2) Designing front-end architecture components – views & layouts
+ view models (presentation data models) + presentation logic
(event handling, messaging) + routing paths (essential for SPA)
Better to use component model to boost productivity and
maintainability.
3) End-to-end application design – front-end: wireframes → views,
data entities & data streams → service API and models design,
sitemap → router config
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 42
BG OUG Meeting – Pravetz IPT – Intellectual Products & Technologies
November 20, 2015 Trayan Iliev, http://www.iproduct.org/

Webpack Project Bootstraping

SurviveJS – Webpack tutorial:

http://survivejs.com/webpack/introduction/

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0

Unported License Slide 43
BG OUG Meeting – Pravetz IPT – Intellectual Products & Technologies
November 20, 2015 Trayan Iliev, http://www.iproduct.org/

Webpack Demo Structure

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivs 3.0

Unported License Slide 44
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Resources
Crockford, D., JavaScript: The Good Parts. O'Reilly, 2008.
Douglas Crockford: JavaScript: The Good Parts video at
YouTube – http://www.youtube.com/watch?v=_DKkVvOt6dk
Douglas Crockford: JavaScript: The Good Parts presentation at
http://crockford.com/onjs/2.pptx
Koss, M., Object Oriented Programming in JavaScript –
http://mckoss.com/jscript/object.htm
Osmani, A., Essential JavaScript Design Patterns for Beginners
http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Fielding's REST blog – http://roy.gbiv.com/untangled/2008/rest-
apis-must-be-hypertext-driven
Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License Slide 45
Full-stack Development with IPT – Intellectual Products & Technologies
Node.js and React.js Trayan Iliev, http://www.iproduct.org/

Thanks for Your Attention!

Questions?

Licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0

International License Slide 46