Rockstar Developer by Ei - Maung

Rockstar Developer
Fairway Web
10x Programmer

[ rsdbook.com ]
Copyright 2016, Ei Maung, Fairway Technology.
License - CC-BY-NC-SA
This document, Rockstar Developer by Ei Maung is licensed under a Creative Commons

Attribution-NonCommercial-ShareAlike 3.0 Unported License.
This document is free to share, copy, distribute and transmit. And, also allow to remix or
adapt to this document. But, you must attribute the work in the manner specified by the
author or licensor (but not in any way that suggests that they endorse you or your use of
the work). And, you may not use this work for commercial purposes. If you alter,
transform, or build upon this work, you may distribute the resulting work only under the
same or similar license to this one.
For any reuse or distribution, you must make clear to others the license terms of this work.
THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW.

ANY USE OF THE WORK OTHER THAN AS AUTHORIZED UNDER THIS LICENSE
OR COPYRIGHT LAW IS PROHIBITED -
http://creativecommons.org/licenses/by-nc-sa/3.0/legalcode
Rockstar Developer 2

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Key Concepts
() Development Processes Management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Test Driven Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() SOLID Design Principles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Service Oriented Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Project Management
() Version Control System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Issue Tracking System . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Team Collaboration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Development Wrokflow Automation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Modern Development Stack

() BackboneJS (Client-side MVC) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() NodeJS (Server-side JavaScript) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() MongoDB (NoSQL Database) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() ExpressJS (REST Framework) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Building an Issue Tracking System

() Building Back-end Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Building Client (HTML Templates) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Building Client (Web App) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Building Client (Hybrid Mobile App) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Deployment and Scaling

() Deployment with Docker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Load Balancing with Nginx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

() MongoDB Replication and Sharded Cluster. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
() Common Server Architectures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Programming
()

Program-
ming MCC
Programming Low Level Programming

Low Level
Low Level
High Level

()
Software Development Language BASIC, Pascal ,
COBOL, C, C+, VB, Standalone, Client-Server, Three-Tier, Web
Sun Microsystem John Gage () "Network is the computer"
Cloud Computing Mobile Internet
of Things

Monitor Keyboard, Mouse CPU

Software Development


Background Theory

Managing Director (Enterprise Solutions)
Vice President 2 (MCPA)
Rockstar Developer

Rockstar
Software Developer
Rockstar
(Theory) (Tools)
TDD, SOLID, Database Scaling Server Architecture

Development MEAN Stack
Docker
Container Developer
Project Management

Developer
()

CEO (Zwenexsys International Limited)


Rockstar Developer
Professional Web Developer Web Standards, jQuery, HTML5
PHP, MySQL, MVC, Web Application Security Web Developer
Ubuntu Linux
Web Developer Software Developer Linux Operating System
Ubuntu

Code
Project Management
NodeJS, MongoDB Software Development Server Architecture

Web Development
Business Solution, Web App, Mobile App, Game Software
Software Web Technology
Software
Web Technology Backend
Web Developer
Mobile App Developer Business Solution Developer Software Engineer

Software Development Web Development

Command Line
Tool Command Ubuntu Linux
Professional Web Developer
Ubuntu Linux
Professional Web Developer Ubuntu Linux
Download
Professional Web Developer pwdbook.com

Ubuntu Linux u4ubook.com

10x Programmer
Programmer
Programmer
Any fool can write code that a computer can understand. Good programmers
write code that humans can understand. Martin Fowler
Programmer Programmer
Code Code

Bug Free Program

Bug

Error

Code Bug

Programmer
( )
Bus Factor

Software Project Bus Factor
Software Project
Programmer
Code Programmer

10x Programmer Programmer

Programmer 10x Programmer

Code
Code Maintain

Programmer Programmer
Code
Programmer Code
Code Code

Code Programmer
Code by coincidence

Programmer " "

Project Deadline
" " Technical
Debt

Code
Bug

Code

Code
Accidents of implementation
Programmer

Programmer
Code
Bug
" Project
"

Code Code

Bug
Project Bug Fix
Code
Code
Code Language
Process
Management, Source Code Management, Design Principles Design Architecture Software
Engineering
10x
Programmer Code
Scalable 10x
Programmer Rockstar Developer
10x Programmer
Rockstar Developer
()
Key Concepts

Software Project
Rockstar Developer () Development Processes Management 14
( ) Development Processes Management
"...

"
"

"
" "
"
"
"

"
"
"
"

"
"

"
"

"
"

"
Software Project Software

User Customer

Software Solution

Software
Software Developer

Software

((.) Common Project Management Problem
Source projectcartoon.com
Solution
Sense

Software Customer
User Feedback
Business Solution Software

Web App, Mobile App Software

Feedback
Rockstar Developer
Software
User Feedback Development Process
1.1 Stages of Software Development

Software Product Code Solution Idea
Design Concept
Unit Testing, Integration Testing
Support
Software Product
1. Business Model Creation

2. Requirements Analysis
3. Data Collection
4. System Design
5. UI Prototype
6. Implementation / Coding
7. Testing
8. Continuous Integration Plan
9. Deployment / Integration
10. Technical Support
Software Development Process Plan, Design, Code, Test ()

Development Practice
- Test
Software
Test Driven Development (TDD) Coding
Unit Level, Function Level Test

Software Product Business Model

Business Model
Cost Structure Revenue Stream
Distribution Channel Software Development
Software Software Value
Software Business Model
Business Model
Business Model Canvas (.)
Software Developer Business Model

Software Business Model -
Business Model (Monthly Subscription Fee) Payment Model
Software
Business Model Software Development Process
Business Model Software
((.) Business Model Canvas

Business Model Requirements Specification

Software Feature
Performance, Security Non-Functional
Specification
() Team Collaboration
Data Collection

Data
Data Structure Model
Specification Data Model System Design

Code Structure MVC Multi-Tire Design Architecture
Service-Oriented Architecture Communication Protocol

REST Protocol Authentication Authorization
Access Control Strategy Performance Memcached
Scalability Vertical Scaling Horizontal Scaling

User Interface Prototype Prototype Design Tool

Wire-framing Tool
Coding
Prototype
System Design
Coding Coding Standards,

Coding Convention, Coding Design Principle, Best Practices Code Quality
Coding Structure Pattern MVC
Professional Web Developer () Practice
SOLID Principle () SOLID Design Principles
Software
Test Method Unit Testing
Unit Function
Integration Testing
Unit
Specification System Testing
Acceptance Testing Software Development Process
Unit Testing () Test Driven Development
Software Product

Software

Business Model Requirements

Source Code Management System Build
Automation Virtualization Source Code
Management System () Build Automation ()
Virtualization Docker ()
Software Solution
Server
Production Environment
Setup Load Balancer Setup
Database Replication Server Architecture
() Common Server Architectures
Technical Support Solution

Training Manual Documentation
Report

Policy
Issue Tracking System ()
Software Team System Analysis, Software Engineer, Programmer, Designer, Front-end

Developer, Back-end Developer, System Administrator, Tester Role

Team
Process Management Model

1.2 Waterfall Model

Waterfall Model
Development Process Management Software
Development
- Requirements Specification
Requirements Specification
System Design
Design
Coding Coding
Product Testing

( (.) - Waterfall Model
Source Wikipedia

Junior Developer Team
Lead Developer Project Manager
Requirements Specification System Design Junior Developer
Spec Design Coding
Specification
User Specification
Software Product
Requirements Specification
System Design
Coding
Product
Specification System Design

Waterfall Model
Requirement Specification
Specification
Product Innovative
Product - Product

Product Specification

User Product
Domain Knowledge

Product Vision Software
Specification Waterfall Model

Waterfall Model Software

Junior Developer
Waterfall Model Junior

Flexible Code Waterfall Model
Specification Design Coding Junior Developer
Focus

1.3 Iterative Development

Waterfall Model Processes
Management Method Iterative Development, Incremental Development, Extreme
Programming, Rapid Application Development, Feature Driven Development
Agile Development

Agile Development

1. Adaptive Planning

Plan
2. Evolutionary Development Product

3. Early Delivery Product

Product
4. Continuous Improvement Software

5. Rapid and Flexible Response to Change Requirement

Product
Agile Development
(Principle)
Processes Management
Agile Development () Agile Method () Agile Process Management

Iterative Development Agile

Project Scope

Resource Estimate

Iterative Development Inception
Non-Functional Requirement Software

Maintainability, Security, Perfor-
mance, Scalability
Architecture Foundation
Specification Function Requirement
Architecture Requirement
Functional Elaboration
Architecture
Product

Prototype Coding User
Feedback Specification Code Software
Development Process Software Product
Feature
Construction

Feature Feature
User Feedback
Transition

Iterative Development Product
Feature Incremental Development
( (.) - Iterative Development
Source Wikipedia
Iterative Development
Product Waterfall Model Risk
SCRUM
Project Management () Team Collaboration

Iterative Development Team Developer

Developer Flexible
Plan, Requirement Design Developer Flexible

Modular
Maintainable Code Extensible
Code Unit
Testing Continues Integration
Developer

Conclusion
Development Process Management

Waterfall Model Planning
Requirement Analysis System Design
Iterative Development Planning
Development Plan
Waterfall Model Development Process


(.) - Timeline of Iterative Development
Source: Wikipedia
Inception Business Model Requirement Specification

Coding Testing

Elaboration Architecture Design Coding Testing
Construction Coding Business Model,
Requirement Design
Feedback

Risk Planning
Coding Product
Agile Method Plan

Plan Plan Flexible
Software Development Project Plan, Design,

Implementation, Test

Waterfall Model Iterative Development
Waterfall Model
Specification Design
Waterfall Model
Requirement Waterfall Model
Iterative Development Agile Method Waterfall

Software Project Development Process

Tool

Manual
Professional Web Developer Course

HTML5, PHP/MySQL, jQuery/Ajax, Mobile Web

()
http://eimaung.com/courses
Rockstar Developer () Test Driven Development 27
( ) Test Driven Development
Project Presentation ()
Customer

Key Point
Delivery Route

Mobile App Delivery Route Maps
... Map

Perfect Size
Font-Size: 9pt Font-Size: 11pt
Impression Out
...
"
Order
Delivery Rout "
" Route "
" Mobile App App Sync

Delivery Route Mobile Device Map "
" "
" . .. Sync Button ... ... ... "
" Internet Connection Data Sync

"
""
"

"
"
"
"... "
""
" ...
"
Software Developer Project

Code Code Base

Code
Developer
()

()
Software Technical Debt

Code
Technical Debt Code Refactor
Refactor Code () Code

Quality Code
Code Code
Principle D.R.Y Decoupling

Professional Web Developer () Model-View-Cotroller
D.R.Y (Don't Repeat Yourself)

Code Code Duplication
Principle Code Duplication

Function
() Component

Decoupling
Function () Component
Function
Function Function
Function
Function Function Function
Refactor Code Duplicate Tightly Couple

Function Code Structure
Refactor Technical Debt Refactor
Refactor
Project Code
Technical Debt

Code Test Method

2.1 Software Testing

Software Test

Specification System Test Acceptance Test Test
Method Code Test Unit Test,
Integration Test, Regression Test Method
Unit Test Function () Component Test

Unit
Integration Test Function

-

Regression Test
-

System Test Software Runtime Error

Specification
Acceptance Test

Code Quality Unit Test Unit

Test
Software Product Specification

Code

Unit Test Code
Quality
2.2 Test Codes

Unit Test Test Code
Test Code Software

Code Test Code
Debug Log
Code Code Code

Code
Pseudo-Code
Code

- Warning Message
Function
Function Function JavaScript
Code
Pseudo-code
1. function getTemp() {
2. return getTempFromServer("/path/to/api");
3. }
4.
5. function testTemp() {
6. var temp = getTemp();
7. if(temp.degc > 32) print("Warning: High Temperature");
8. }
getTemp() Function
testTemp()
Function Temperature 32 Degree
Warning Message testTemp() Function Evaluate

getTemp() Function
testTemp() Function
Debug Log

Pseudo-code
5. function testTemp() {
6. var temp = getTemp();
7. console.log("Temprature: " + temp.degc);
8. if(temp.degc > 32) print("Warning: High Temperature");
9. }
() console.log temp Console
((.) - Console Log in Firebug Console
testTemp() Function Evaluate ( .) temp

Variable null getTemp() Function
Code
Debug Log Test Code
Test Code Stub Mock

Function Fake Function Stub Mock
Stub Function Function
Return Value Function Mock Stub
Function Code

Pseudo-code
1. function getTempStub() {
2. console.log("Working with stub: getTemp()");
3. return {
4. degc: 24,
5. degf: 45
6. }
7. }
8.
9. function getTempMock(degc) {
10. console.log("Working with mock: getTemp()");
11. return {
12. degc: degc,
13. degf: Math.round((degc * (5/9) + 32))
14. }
15. }
16.
17. function getTemp() {
18. return getTempFromServer("/path/to/api");
19. }
getTemp() Function Function Function Server

Request Function
getTemp() Function

getTempStub()
Stub Function getTempStub() Function

getTemp() getTemp() Function
getTemp()
Function getTempStub() Function

getTempMock() Function
getTemp() Function
getTempStub()

Degree
Celsius getTemp() Function Object Object
Degree Celsius Return Value
getTempStub() Return Value

getTempMock()
Stub Mock Function

Function Model Function
getTemp()
Return
Value
getTempStub() Function getTemp() Return Value
getTempStub() getTemp()
Function
getTempMock() Function getTemp() Function
Stub Mock Function Model
Stub Mock
Remote Data Source Remote Data Source
Server Request
Function Database
Function GPS Fingerprint External
Input Device
2.3 Unit Testing

Unit Testing Function (Unit )
Function Test Function
- "just now", "3 hours ago", "1 week
ago" Format Function
JavaScript
1. function prettyDate(now, time) {

2. var date = new Date(time || ""),
3. diff = (((new Date(now)).getTime() - date.getTime()) / 1000),
4. day_diff = Math.floor(diff / 86400);
5.
6. return day_diff == 0 && (
7. diff < 60 && "just now" ||
8. diff < 120 && "1 minute ago" ||
9. diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
10. diff < 7200 && "1 hour ago" ||
11. diff < 86400 && Math.floor( diff / 3600 ) + " hours ago"
12. ) ||
13. day_diff == 1 && "Yesterday" ||
14. day_diff < 7 && day_diff + " days ago" ||
15. day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
16. }
Function
now time
Test
Function
JavaScript
1. function prettyDateTest(then, expected) {

2. var result = prettyDate("2014/09/10 22:25:00", then);
3. if (result !== expected) {
4. console.log("Fail: Expected " + expected + ", but was " + result);
5. } else {
6. console.log("Pass: Expected " + expected + ", and was " + result);
7. }
8. }
prettyDate() Function

JavaScript
1. prettyDateTest("2014/09/10 22:24:30", "just now");

2. prettyDateTest("2014/09/10 22:23:30", "1 minute ago");
3. prettyDateTest("2014/09/10 21:23:30", "1 hour ago");
4. prettyDateTest("2014/09/09 22:23:30", "Yesterday");
5. prettyDateTest("2014/09/08 22:23:30", "2 days ago");
6. prettyDateTest("2013/09/08 22:23:30", false);
prettyDateTest() Function Parameter "just

now" "1 minute ago"

(.)
( (.) - Unit Test Function: All Pass

JavaScript
5. prettyDateTest("2014/09/08 22:23:30", "2 day ago");
2 day ago prettyDate() Function 2

days ago
(.) - Unit Test Function: One Fail
Function Unit Test Function

Code Test Code
Test Framework
2.4 Test Frameworks

Test Framework Test Function Unit Test

Condition Test
Test Result
Result Formatter
QUnit JavaScript Unit Testing Framework

Framework
Test Framework

Language Project Test Framework
QUnit jQuery John Resig jQuery, jQueryUI

JavaScript Project Test Framework QUnit jQuery
CDN Download
Version QUnit 1.15.0

JavaScript Source Code Test Result Format
CSS Style Link
http://code.jquery.com/qunit/qunit-1.15.0.js
http://code.jquery.com/qunit/qunit-1.15.0.css
HTML Document QUnit

JavaScript File CSS Style File
HTML
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>QUnit Test</title>
6. <link rel="stylesheet" href="css/qunit.css">
7. </head>
8. <body>
9. <div id="qunit"></div>
10.
11. <script src="js/qunit.js"></script>
12. <script src="js/app.js"></script>
13. <script src="js/tests.js"></script>
14. </body>
15. </html>
() <div> Element id qunit

QUnit Test Result <div> () CSS Style
() QUnit JavaScript QUnit
Test Code Code
() app.js Code
() tests.js Test Code

prettyDate() Function Unit

Test prettyDateTest() Function
QUnit Test Code

QUnit test() Function Test Code test() Function

Parameter Test Name Test Case
Function QUnit ok(), equal(), deepEqual(), notEqual(),
notDeepEqual() Function
ok() true true
Test Pass
Test Fail equal() notEqual() Function
deepEqual()
notDeepEqual() equal(), notEqual()
Object deepEqual() notDeepEqual()
Function Test Code
QUnit tests.js
JavaScript
1. QUnit.test("Prettydate Basics", function( assert ) {

2. var now = "2014/09/10 22:25:00";
3. assert.equal(prettyDate(now, "2014/09/10 22:24:30"), "just now");
4. assert.equal(prettyDate(now, "2014/09/10 22:23:30"), "1 minute ago");
5. assert.equal(prettyDate(now, "2014/09/10 21:23:30"), "1 hour ago");
6. assert.equal(prettyDate(now, "2014/09/09 22:23:30"), "Yesterday");
7. assert.equal(prettyDate(now, "2014/09/08 22:23:30"), "2 day ago");
8. assert.equal(prettyDate(now, "2013/09/08 22:23:30"), false);
9. });
equal() prettyDate() Function

QUnit
( (.) - QUnit - Test Result - One Failed

Fail Fail
2 day ago
2 days ago

Test Pass (.)

Pass Fail

( (.) - QUnit - Test Result - All Pass

Test () ()
Test Fail
expect() Function
JavaScript
1. QUnit.test("Prettydate Basics", function( assert ) {

2. expect(6);
3. var now = "2014/09/10 22:25:00";
4. assert.equal(prettyDate(now, "2014/09/10 22:24:30"), "just now");
5. assert.equal(prettyDate(now, "2014/09/10 22:23:30"), "1 minute ago");
6. assert.equal(prettyDate(now, "2014/09/10 21:23:30"), "1 hour ago");
7. assert.equal(prettyDate(now, "2014/09/09 22:23:30"), "Yesterday");
8. assert.equal(prettyDate(now, "2014/09/08 22:23:30"), "2 days ago");
9. });
( (.) - QUnit - Test Result - Expect Failed
() () Test Fail
Test Function QUnit Function

Side-Effect
- Database Record Function
Function Record Database Side-Effect

Record Record
Test
Side-Effect QUnit Module, Setup Teardown

QUnit Test Code Module

QUnit.module() Test Code
Module Name
JavaScript
1. QUnit.module( "Module A" );

2. QUnit.test("Test One", function( assert ) {
3. //
4. });
5. QUnit.test("Test Two", function( assert ) {
6. //
6. });
7.
8. QUnit.module( "Module B" );
9. QUnit.test("Test Three", function( assert ) {
10. //
11. });
12. QUnit.test("Test Four", function( assert ) {
13. //
14. });
Test One Test Two Module A Test Three Test

Four Module B Module Setup
Teardown setup

Test QUnit teardown
Test -
Database Record Function
Pseudo-code
1. QUnit.module( "Module A", {

2. setup: function() {
3. records.add(98, dummy);
4. records.add(99, dummy);
5. },
6. teardown: function() {
7. records.reset();
8. }
9. });
10.
11. QUnit.test("Database Test", function( assert ) {
12. var total = records.count();
13. assert.equal(record.remove([98, 99]).count(), total - 2);
14. });
setup Database Dummy Data Record

Test Record
Dummy Record
Remove Database Record Test
teardown Auto-ID Populate
Test Auto-ID Test
Code Side-Effect
QUnit qunitjs.com
2.5 Test Driven Development

TDD
Test Driven Development Code Concept
Code Test Code Practice
Test Code Design Function Model
-
Code Test Code
JavaScript
1. QUnit.test("Sort by distance test", function( assert ) {

2. var list = {"A": 12, "B": 32, "C": 8};
3. assert.deepEqual(sortByDistance(list), [
4. ["C", 8], ["A", 12], ["B", 32]
5. ]);
6. });
Test Fail sortByDistance() Function

Code
Test Code

Code
JavaScript
1. function sortByDistance(list) {
2. var result = [];
3. for(x in list){
4. result.push([x, list[x]])
5. }
6. result.sort(function(a,b){ return a[1] - b[1] });
7. return result.reverse();
8. }
Function Test Code Fail Function

Test Code
Test Pass
Function Test Pass
Function
- sort()
Function sortByDistance()
Test Code
Function TDD Approach Test Code

Test Fail Code Quality
( (.) - TDD Workflow
(.) Test Code Function

Test Code Run
Refactoring Test Code Run
Function Function
Test Code Run Function Unit Module Deploy
Test Code Run

Function

Test Code Test Driven Development
Test First Approach

Test Code
Code Maintainability
Function
Test Code Run
Function
Test Function

Function
Test Refactoring

Code Refactoring
Code
TDD Approach
Developer Code
Project
Conclusion
Ruby on Rails

Web Application Framework David Heinemeier
Hansson () "TDD is dead. Long live testing."
Developer Ruby on
Rails TDD Framework TDD
Developer
DHH
Programmer
Unit Test
Maintainable Quality Code

Test Driven Approach Quality Code
TDD Code
Developer
TDD Online Article TDD Best Practice

Unit Test Test Method TDD

Test Method Unit Test
Unit Test Code

Code Quality TDD Rockstar Developer

Code
Code Design Principle

Rockstar Developer Course

Project Management, Web Service, Server Architecture
NodeJS

()
Rockstar Developer () SOLID Design Principles 46
( ) SOLID Design Principles
Test Driven Development Quality Code

Maintainable Code
SOLID Design Principle
SOLID
1. Single Responsibility Principle

2. Open/Close Principle
3. Liskov Substitution Principle
4. Interface Segregation Principle
5. Dependency Inversion Principle
Object-Oriented Programming Object-Oriented Design Principle
3.1 Object-Oriented Programming

Object-Oriented Programming Syntax Concept

Software Product
Extensible Maintainable
Structured Programming ()
Imperative Programming
Data Instruction Set Object-
oriented Programming Data Instruction Set
() Object Object

Object-oriented Programming ()
1. Object
2. Information Hiding
3. Inheritance
4. Interface
5. Polymorphism
Object
Object
Data
Function
Object
Object
Object

Function

Data Function Object
Type Subtype Object Type Subtype Object Hierarchy
Object Object Hierarchy Programming Language

Class Class
Object Object
Data Function Specification
Code
Pseudo-Code

Class
Pseudo-code
1. class Square
2. {
3. var width = 5;
4. var height = 5;
5.
6. function setSize(size) {
7. width = size;
8. height = size;
9. }
10.
11. function getArea() {
12. return width * height;
13. }
14. }
Class Object Object width height Data

setSize() getArea() Function
Object Data Object Property Function Object Method
Object Language new Keyword

Class Object
Pseudo-code
1. var block = new Square();

2. var box = new Square();
block box Square Object Object width,

height block Object width, height
box Object width, height Class
Object

Class Object Constructor

Constructor Object Function
Class
Pseudo-code
1. class Square
2. {
3. var width;
4. var height;
5.
6. function Square(size) {
7. width = size;
8. height = size;
9. }
10.
11. function setSize(size) {
12. width = size;
13. height = size;
14. }
15.
16. function getArea() {
17. return width * height;
18. }
19. }
Language Class Name Function Constructor

() Square() Function Class Object
Constructor Function
Pseudo-code
1. var block = new Square(5);

2. var box = new Square(10);
block Object width, height 5 box Object width,

height 10 Class
Constructor Parameter Object Property Initial Value
Data (Property) Function (Method)
Object Object
Object-oriented Programming
Information Hiding
Object Data Function Data Function
Object -
Object

Object

Inlet Valve Outlet
Valve / Piston

Object Object Data Function
Information Hiding Information hiding Encapsulation
Information Hiding Object

Flexible

Auto
Manual

Information Hiding
Language Public, Private, Protected, Static
Access Control Modifier Language Access Control

Pseudo-code
1. class Engine
2. {
3. public var kilo;
4. private var pistons = 4;
5. private var valves = 12;
6.
7. public function dirve() {
8. kilo++;
9. }
10.
11. public function check() {
12. if( dirtyOil() )
13. print "Please change engine oil!";
14. }
15.
16. private function dirtyOil() {
17. if(kilo > 3000) return true;
18. return false;
19. }
10. }
Engine Class kilo, pistons valves Data Property

pistons valves private

Function dirtyOil() Function

private Function
private Data Function Class
check() Function dirtyOil() Function
Engine Class Object

Pseudo-code
1. var v6 = new Engine();

2. v6.drive();
3. v6.check();
v6 Object public Function drive() check()

Function dirtyOil() Function private
Data Function Access Control
Modifier Information Hiding
Access
Control Data Function Default Modifier
- PHP Programming Language Default Modifier public
Access Control Data Function public
protected, package public Access Control Modifier

Language static Access Control Modifier
Function Data static
Function Data Object
Object static

Pseudo-code
1. class Math
2. {
3. static var PI = 3.1416;
4. static function round(value) {
5. return parseInt(value);
6. }
7. }
Math Class PI round() static Object

Pseudo-code
1. print Math.PI;
2. print Math.round(4.2);
PI, round() Data Function Object

static Access Control Modifier

Inheritance
Inheritance
Object Class Object Class Data
Function Inheritance

Object
Object
Hierarchy
( (.) - Object Hierarchy
Object Object
Inherit Object Data Function

Object Object
Object Object Data Function
Child Object Parent Object Data Function

Parent Object Data Function
Pseudo-code
1. class Animal
2. {
3. var legs = 4;
4.
5. function eat() {
6. ...
7. }
8. }
9.
10. class Bird extends Animal
11. {
12. var legs = 2;
13. var wings = true;
14. }
15.
16. class Dog extends Animal
17. {
18. function bark() {
19. ...
20. }
21. }
Animal Class legs

Data eat()
Function
Animal Class Bird Class Dog Class extends Keyword Inherit
Bird Dog Class Animal Class legs eat()
Bird Class legs wings

Dog Class bark()
Function
Dog Object legs Data eat(), bark()

Function
Inheritance Single Inheritance Multiple Inheritance Single Inheritance

Object Class Object Class
Multiple Inheritance Class Object

Class Object Java, Ruby Language
Multiple Inheritance Single Inheritance C++ Python
Language Multiple Inheritance Language
Multiple Inheritance "Deadly diamond of death"

( (.) - Deadly Diamond of Death
(.)

Object
Multiple Inheritance

Pseudo-code
1. class Animal
2. {
3. function giveBirth() {
4. ...
5. }
6. }
7.
8. class Bird extends Animal
9. {
10. var legs = 2;
11. var wings = true;
13. layEggs();
14. }
15. }
16.
17. class Horse extends Animal
18. {
19. var legs = 4;
21. birthLive();
22. }
23. }
24.
25. class FlyingHorse extends Bird, Horse
26. {
27. ...
28. }
29.
30. var pegasus = new FlyingHorse();
31. pegasus.giveBirth();
Animal Class giveBirth() Function Bird Horse Class

giveBirth() Function

FlyingHorse Class Bird Horse Inherit
() FlyingHorse Class Object pegasus giveBirth()
Bird Horse Class
giveBirth() Function Bird giveBirth()
Horse giveBirth()
Deadly diamond of death
Multiple Inheritance Language

Perl, Python Language extends
"" Class Deadly diamond

Priority Class Function
Language Inherit Syntax -

Java Class final Class Inherit
Class Inherit Parent Class/Object
Data Function Child Class
Interface
Text Box, Password Box Email Box Input Box
Input Box Size
Property Input Box

Input Box Click Keyboard Input Box

Text Box Password Box
Star Text Box
Password Box Password Box Text Box

Interface
Object Text Box Password Box
Text Box
Object Password Box Object

Object Text Box Password Box
Code Design
Interface
Object
Interface Protocol () Contract Code

Pseudo-code
1. interface InputBox
2. {
3. function setValue(val);
4. function showValue();
5. function resize(width, height);
6. }
7.
8. class TextBox implement InputBox
9. {
10. var value;
11. function setValue(val) {
12. value = val;
13. }
14. function showValue() {
15. print value;
16. }
17. function resize(width, height) {
18. ...
19. }
20. }
21.
22. class PasswordBox implement InputBox
23. {
24. var value;
25. function setValue(val) {
26. value = val;
27. }
28. function showValue() {
29. for(var i=0; i < value.length; i++) {
30. print "*";
31. }
32. }
33. function resize(width, height) {
34. ...
35. }
46. }
() InputBox Interface setValue(),

showValue() resize()
Function Function

Interface
Function Function Signature
Function
Parameter
Interface Object Interface Function

Function Signature Interface
Interface Object
TextBox PasswordBox
Class Input Box Interface Class
setValue(), showValue() resize()

Function
Test Driven Development Stub Mock

Interface Object Mock Object
Object Mock Object
Interface Object
Object Mock Object
Polymorphism
Polymorphism
Object Function

Static Polymorphism Dynamic Polymorphism Static
Polymorphism
Function Overload Dynamic
Polymorphism
Inheritance Interface
Pseudo-code
1. class Shape
2. {
3. function area(r) {
4. return 3.14 * r * r;
5. }
6.
7. function area(x, y) {
8. return x * y;
9. }
10.
11. function area(x, y, z) {
12. return x * y * z;
13. }
14. }
Shape Class Parameter area() Function

Function Overload Parameter
(Function Signature) Function
Pseudo-code
1. var item = new Shape();

2. item.area(2); // => 12.56
3. item.area(2, 2); // => 4
4. item.area(2, 2, 2); // => 8
Function Signature
Static
Polymorphism Dynamic Polymorphism Interface

Pseudo-code
1. interface Animal
2. {
3. function move();
4. }
5.
6. class Dog implement Animal
7. {
8. function move() {
9. print "Dog walk and run";
10. }
11. }
12.
13. class Bird implement Animal
14. {
15. function move() {
16. print "Bird fly";
17. }
18. }
Animal Interface Dog Bird

Class
Interface
move() Function Implement
Dog move() Function Bird move() Function
Animal Interface Object move() Function
Object move() Function
Pseudo-code
1. var milo = new Dog();

2. var jay = new Bird();
3.
4. milo.move(); // => Dog walk and run
5. jay.move(); // => Bird fly
Interface Implement Class Inheritance

Function Dynamic
Polymorphism
Object-oriented Programming Extensible

Maintainable Class Object
Information Hiding,
Inheritance, Interface Polymorphism
Extensible Maintainable Object-oriented
3.2 OOP in JavaScript

JavaScript Programming Language Object-oriented OOP Language
OOP Language
OOP Language Object Class JavaScript
Class Object
Object Class OOP Language Classical OOP
JavaScript Prototype-based OOP
JavaScript ECMAScript 6 (ES6) Class

NodeJS JavaScript Run-time Web Browser
Class JavaScript Code

Classical OOP Class Class Object

Object Design Object
Prototype-based OOP Object
Data Function
Object Design
Classical OOP JavaScript
Prototype-based OOP
Creating Objects
JavaScript Object JSON
JSON
Classical OOP Class Object
Constructor Object
JavaScript Function Object Constructor

JavaScript
1. function Person() {}
Person Function
Function Object
JavaScript
1. var alice = new Person();

2. var bob = new Person();
alice bob Data Function Object

Person Object Constructor Data Function
JavaScript
1. Person.prototype.fullName = "Jame Doe";

2. Person.prototype.sayName = function() {
3. console.log("Hello, I am " + this.fullName);
4. }
prototype Attribute Object Constructor Data Function

Object Constructor

JavaScript
1. function Person(name) {
2. this.fullName = name;
3. this.sayName = function() {
5. }
6. }
Function this Keyword Data Function

Person Object sayName() Function

JavaScript
1. var jame = new Person('Jame Doe');

2. jame.sayName(); // => Hello, I am Jame Doe
Information Hiding
JavaScript Public, Private Access Control Modifier Information Hiding
Object Data
Function Constructor this Data
Function this Constructor
Private Data Function
JavaScript
4. sayHello(this.fullName);
5. }
6.
7. function sayHello(name) {
8. console.log("Hello, I am " + name);
9. }
10. }
11.
12. var foo = new Person("James");
13. foo.sayName(); // => Hello, I am James
14. foo.sayHello(); // => TypeError: foo.sayHello is not a function
Person Constructor sayHello() Function Constructor

Private Function ()
Error Information Hiding
JavaScript
Inheritance
JavaScript Object Constructor Prototype Inheritance

JavaScript
1. function Person() {};

2. Person.prototype.fullName = "Jame Doe";
3. function Student() {};
4. Student.prototype = Object.create(Person.prototype);
() Person Prototype Build-in Method Object.create()

Student Prototype Person
Data Function Student Prototype
Object Constructor Data Function
Inherit
JavaScript
5. };
6. }
7.
8. function Student(name, major) {
9. Person.call(this, name);
10.
11. this.major = major;
12. this.sayMajor = function() {
13. console.log("I learn " + this.major);
14. }
15. }
16.
17. foo = new Student("Jame", "Computer Sciences");
28. foo.sayName(); // => Hello, I am Jame
29. foo.sayMajor(); // => I learn Computer Sciences
() Person.call() JavaScript
Function Object Person Object Constructor
Object call() Function Person
Function Object
Build-in Method
Student Constructor Person.call() Student Constructor

Object Person Constructor
call() Function this

Person Constructor this Person this
Student this Person
Constructor this Student this
Person Student
Inheritance Polymorphism

Interface
JavaScript Interface
Interface

Object
Static Type Language Interface
Object JavaScript Dynamic Type
Language Object

JavaScript
1. function Student() {
2. this.sayHello = function() {
3. console.log("Hello, I'm a student");
4. }
5. }
6.
7. function Worker() {
8. this.sayHello = function() {
9. console.log("Hello, I'm a worker");
10. }
11. }
12.
13. function greet(person) {
14. person.sayHello();
15. }
16.
17. var alice = new Student();
18. var bob = new Worker();
19.
20. greet(alice); // => Hello, I'm a student
21. greet(bob); // => Hello, I'm a worker
greet() Function
Object Student Object
Worker Object Object Interface

Object sayHello() Function Data Function

3.3 SOLID
SOLID Principles Principles
OOP
Code
SOLID Code Design
SOLID
Principle of OOD (Object Oriented Design)
Uncle Bob
Robert C.
Martin
Software
Single Responsibility Principle

SOLID S Single Responsibility Principle

" Object "
Object Data Function

Object

Data Function
Pseudo-code

2. this.name = name;
4. this.signRollCall = function() { this.rollCall++ } ;
5.
6. this.displayInfo = function() {
7. return "<b>" + this.name + "</b>" +
8. ": <i>" + this.major + "</i>";
9. }
10. }
Student Constructor
Object name major Assign
signRollCall() rollCall

displayInfo() Function name major HTML Format

Single Responsibility Student Object
name major Format

Constructor

Pseudo-code

2. this.name = name;
4. this.signRollCall = function() { this.rollCall++ }
5. }
6.
7. function ViewFormat() {
8. this.displayStudentInfo = function(student) {
9. return "<b>" + student.name + "</b>" +
10. ": <i>" + student.major + "</i>";
11. }
12. }
HTML Format displayStudent

Info() ViewFormat
Constructor Student

Format
ViewFormat
Format ViewFormat
Student
XMLFormat
Format
Student
Implement
Single Responsibility Principle
Code Design

Open/Close Principle
SOLID O Open/Closed Principle
" Object "
Open to extension, closed to modification

Object Bug Fix
Requirement

Data
Function Data Function

Pseudo-code
1. function Order(items) {
2. this.items = items;
3. this.amount = function() {
4. var total = 0;
5. for(item in this.items) {
6. total += item.value;
7. }
8. return total;
9. }
10. }
Item amount() Function

Pseudo-code
3. this.amount = function(currency) {
4. var total = 0;
7. }
8.
9. if(currency == "MMK")
10. return total * getExchangeRate();
11. else
12. return total;
13. }
14. }
amount() Function currency Parameter currency MMK

Function Open/Closed Principle

Pseudo-code
3. this.amount = function() {
4. var total = 0;
7. }
8. return total;
9. }
10.
11. this.kyatAmount = function() {
12. var total = this.amount();
13. return total * getExchangeRate();
14. }
15. }
amount() Function kyatAmount() Function

Kyat Amount amount() Function kyatAmount() Function

Open/Closed Principle SOLID Code

Requirement

Open/Closed Principle

Liskov Substitution Principle

SOLID L Liskov Substitution Principle
" Inherit
Sub-Class Class "
Principle Barbara Liskov Liskov

Substitution Principle Class Inherit
Class Data Function Class Data
Function
Class
Liskov Substitution Principle
Sub-Class Class Data Function

Class
Class Object
Sub-Class
Object Sub-Class
Class

Liskov Substitution Principle Square Class
Pseudo-code
1. function Rectangle () {
2. this.setWidth = function(width) {
3. this.width = width;
4. }
5. this.setHeight = function(height) {
6. this.height = height;
7. }
8. this.area = function() {
9. return this.width * this.height;
10. }
11. }
12.
13. function Square() {
14. Rectangle.call(this);
15. this.setWidth = function(width) {
16. this.width = width;
17. this.height = width;
18. }
19. this.setHeight = this.setWidth;
20. }
Square Constructor Rectangle

Square
width height setWidth() Function width height
setHeight() Function
setWidth()
Liskov Substitution Principle Rectangle Object
Square Object Rectangle
Width Height
Bug
Interface Segregation Principle

SOLID I Interface Segregation Principle
" Interface
Interface "
3 Pin Head, 2 Pin Head, USB 2.0 Port, USB 3.0 Port Power Outlet
Interface Single Responsibility Principle
Power Outlet
Port
Support Interface USB Power Outlet
Interface Outlet
Outlet Short Circuit Outlet
Interface Segregation Principle Client (Object )

Interface Interface

Interface OOP Language Interface Design

JavaScript Interface Language Object

Interface Segregation
Pseudo-code
1. function Car() {
2. this.engine = function() { ... }
3. this.break = function() { ... }
4. this.playRadio = function() { ... }
5. this.ejectCD = function() { ... }
6. }
Car Constructor engine(), break()

Audio
Pseudo-code
1. function SpeedControl() {
2. this.engine = function() { ... }
3. this.break = function() { ... }
4. }
5. function AudioControl() {
6. this.playRadio = function() { ... }
7. this.ejectCD = function() { ... }
8. }
9.
10. function Car() {
11. this.speed = new SpeedControl();
12. this.audio = new AudioControl();
13. }
SpeedControl AudioControl
Interface Interface Car
Constructor SpeedControl AudioControl
Maintain Audio

Client Interface
Interface


Dependency Inversion Principle

SOLID D Dependency Inversion Principle
" Object Object "
(Higher Level) (Lower Level)

Code
Pseudo-code
1. function PDF() {
2. this.read = function() {
3. // parse and read PDF file
4. }
5. }
6.
7. function Reader() {
8. this.book = new PDF();
9. this.read = this.book.read();
10. }
PDF Object Reader PDF

Object Object Reader read() Function
Object PDF read()

Object Reader Object PDF

Reader PDF File
PDF
Dependency Inversion
Principle
Pseudo-code
1. function PDF() {
3. // parse and read PDF file
4. }
5. }
6.
7. function Epub() {
9. // parse and read epub file
10. }
11. }
12.
13. function Reader(book) {
14. this.book = book;
15. this.read = this.book.read();
16. }
PDF Epub
Low Level Object Reader Hight Level Object
Reader PDF Epub read() Function
PDF Epub
Reader Object PDF Epub Object

Object read() Function Reader PDF
Epub File Format Object Dependency
Inversion Flexible
Pseudo-code
1. var pdf = new PDF();

2. var PDFReader = new Reader(pdf);
3.
4. var epub = new Epub();
5. var EpubReader = new Reader(epub);
Interface Language Dependency Inversion

Interface
Object Object Abstraction
Interface Dependency Inversion


Object Object Detail
Dependency Inversion Principle
Conclusion
Code OOP, SOLID
Code
Code

Reusable Code

Reusable Service
Professional Web Developer ()

Web Standard, jQuery, PHP, MySQL, Ajax, CMS, MVC,
HTML5, Mobile Web, Web Application Security

Download
http://pwdbook.com
Rockstar Developer () Service Oriented Architecture 74
( ) Service Oriented Architecture
SOA Service Oriented Architecture

Software Solution
Software Package
Software
Software Solution
- Business Solution
Customer Supplier Order
Payment Stock

Software Solution
Modular Design Modular Design

Module Solution
Solution Customer, Supplier Stock
Solution Stock, Order, Payment
( (.) - Modular Design
Modular Design SOA Modular Design Module SOA

Service
Software

User Service

User Software
Machine to Machine Software
Modular Design Solution Module
SOA Service

Service Solution
SOA () Service Provider (Server), Service
Consumer (Client) Interface (Protocol)
Service Provide Server

Service Consumer Client
Server

SOA Service Service Server Service
Client Service Server Client
Interface Protocol Service
Communication Standard Server

Client Interface

( (.) - Service Oriented Architecture
4.1 Service Layers

Software Solution SOA Service
Service
Service Layer
(.)

Utility Services
Service Layer Utility Service Database
Service File Read/Write File System
Service User Action Event Log Logging Service
Hardware Resource Service Data Format
Encoding Service
Service
Utility Service Server Application

Agnostic Application Agnostic
Project
Project Application Foundation Service
Core Services
Software Solution Common Logic Key Logic
Service Core Service Customer Management Service, Supplier
Management Service, Stock Management Service, Order Management Service, Payment Service
Solution Service
Core Service Utility Service

Application Agnostic

Solution Service
Solution Service Core Service Client
Server
Core Service Customer Management Service Customer

Utility Service Database Service
Service Report Service, Account
Service Client Service
Core Service Utility Service Client Service
Service

Client Services
Services User Service Client Service

Service Invoice Service
Invoice Document Client
Service Invoice Service Core Service Payment
Service Tax Calculation, Currency Conversion
Invoice File Utility Service File System

Service

( (.) - Service Layers
SOA Solution Service Layers

SOA
Architecture Design Concept
Solution Requirement Specification
SOA Solution Service Layer Service

4.2 Service Types

SOA Solution Design

Service
User Interface Services User Interface Service User

Service Input Data Request
Event Service
Service Layer Client Layer Service
Service User
User Interface Service
Policy Services User Authentication, Authorization Role Management

Policy Service Access Right Service
User ID, Password User Role
Policy Service
Process Services Process Service Controller Service UI

Service Data Service Process Service
Process Service Policy Service
Policy Policy
Process Service
UI Service Policy
Policy UI Service
Process Service
Connector Services SOA Solution Service

Location Network Service
Connector Service Service Location Resolve
Connector Service
Service Location Flexible Service Infrastructure
Infrastructure Service Infrastructure Service Application Specific

Utility Service Service CPU Process
RAM Service Resource
Service Performance Cache

Service
Archive Service
Infrastructure Service
Data Access Services File System I/O Service Database Service Data Access Service
File Read/Write File Format
Data Encode/Decode
Data Model Data Relationship Index
File Data Utility Service Data Access Service
Information Services Information Service

Service
Logic
Service Reporting Service Information Service
Information Structure
Service
Monitor Services Monitor Service Service

Service Monitor Service Service
Service
Bottleneck

Service Service Improve
Monitor Service
Solution

Service
Service
Logging Service Monitor Service
Development Services Service

Simulate
Service Service

Debug Service Service

Test Service Service Implementation Detail Directory
Service Development Service Service
Directory Policy Service
Publishing Service
Development Service Development Service Solution

Service
Development Tool
Service
Service
Application Service Application Service
Solution
Business Solution Customer, Supplier, Client, Payment, Order, Stock Service
Social Collaboration Solution Real-time Messaging, Group
Messaging, Contact List Service Requirement
Service
4.3 Why SOA

Software Solution SOA
Service Project Reusable
Project Data Access Service
Infrastructure Service Development Service Utility Layer Service
Software Project
One Cores, Multiple Clients

Windows, Linux, Mac Desktop Platform Cross-platform
App
Software

Desktop Tablet, Smart Phone Mobile Device
Smart Watch, Smart Glass Wearable Device
Device Device
Cross-platform Cross-
device

SOA
Software
Utility Layer Core Layer
Key Service UI Service Device

Platform Device
App
Device UI Service Core Service

HTTP
SOAP Communication Protocol Interface

Development Productivity
SOA Development Productivity
Software Solution
Solution

Developer
Service Developer
Service
Service
Interface
Service Developer

Language Platform
Infrastructure Service Performance
C/C++, Go Language Monitor Service Real-time
concurrency
NodeJS
Application Service Business Component
Java, .Net
Developer
Development Productivity
Efficiency
Scalability
SOA Service
Deploy Network
Data Access Service Application Service
Monitor Service Monitor
Service Processing Power Data Store Data
Access Service Storage Capacity
Service Setting Hardware
Infrastructure
Service
Service Oriented Business Model

Software Product Business Model SOA
Solution Business Model Product
Service Business Model
Service Interface Service
Solution Service

Service
Service Business Model

Service

Business Model Service
Service Oriented Business Model

Web Technology
4.4 Web Services

Service Interface SOAP, XML-
RPC, REST Interface Interface
Interface HTTP Protocol
HTTP Web Technology HTTP Interface
Service Web Service
Service HTTP Interface "Service
Web Service "

Web Service
REST JSON
Representational State Transfer (REST)

REST Representational State Transfer Interface

REST
World Wide Web Consortium HTTP
HTTP REST HTTP
Interface REST

HTTP Professional
Web Developer Professional Web Developer
() ()
REST

Stateless Service

Stateless HTTP Stateless Protocol

Stateless Service

Service Design
Cachable Service Cache

Server Service

Server Service
Cache
Client Service
Cache

Uniform Interface Service

Identification (ID) ID

Web Technology
URL Web Resource

URL Resource Client Service URL
ID
ID
Web Technology URL

URL Service URL
() REST Service

ID Design ID
Uniform Interface

Code on Demand Service Data

REST

Service Function Function Service
Service Data
Code Service Code Service
Design
Service
Service Service Function
Code Server
Service Code Client Service Code Client Service
Server Service Code Code
Web Technology Client-
side Scripting JavaScript Code Exchange
Data Format Server Service Data

Data Format Data Format
Data Format
Server Service
Client Service Data Format

Data Format JSON, XML YAML Data Format
Programming Language
Client Service Data Format

Consistency Format
XML-RPC, SOAP Interface
XML Data Format
Code on Demand
Web Service
Code Exchange Standard JavaScript
JSON
JavaScript Object Notation (JSON)

JSON () JavaScript Object Notation
JavaScript Object
JavaScript Object
Object Constructor
JavaScript
1. function Person() {
2. this.fullName = "James Doe";
3. this.age = 32;
4. this.walk = function() {
5. console.log(this.fullName + " is walking.");
6. }
7. }
8.
9. var james = new Person();
10. james.walk(); // => James Doe is walking.
Person() Constructor james

Object
Object JSON
JavaScript
1. var james = {
2. fullName: "James Doe",
3. age: 32,
4. walk: function() {
6. }
7. }
8.
9. james.walk(); // =>James Doe is walking
Constructor Object JSON Object

JSON
Hash Array Array
Index Comma Index
Property Index Key Value Colon Key
Value JavaScript Data Type
Number, String, Boolean Array, Function, Object null
JavaScript
1. var james = {
2. fullName: "James Doe",
3. age: 32,
4. walk: function() {
6. },
7. address: {
8. street: "52, Main Road",
9. city: "Yangon",
10. },
11. phones: [
12. "123 456 789",
13. "987 654 321"
14. ],
15. children: null
16. }
17.
18. james.address.city; // => Yangon
19. james.phones[0]; // => 987 654 321
JSON JavaScript Programming Language

Programming Language Language Independent
Data Format Web Service
Client-side Language JavaScript
XML Service
Data Exchange Format
Data Exchange Data JSON JavaScript Object JSON

Data JSON Function Regular Expression
JavaScript Object JSON Property Function
Regular Expression
REST Web Service JSON Data Exchange Format HTTP

Interface Service REST

Stateless, Cachable, Uniform Interface HTTP

Service Design
Design Language
Client Service JavaScript Core Service

Utility Service
Interface HTTP
Conclusion
Software Development 3-Tires Architecture, Modular Design, Layered System, Model-View-
Controller Architecture

Software Solution

Service Oriented Architecture

Internet
Web Technology Software
Design Architecture
()
Project Management
Code
Manual
Code
Code Manual

Ubuntu Linux ()
Ubuntu Linux Installation System
Configuration Development Environment

http://u4ubook.com
Rockstar Developer () Version Control System 89
( ) Version Control System
" . .. Demo "
".. "
" "
" Code "
"... Demo
"
"...
"
" Version Share

Folder Version "
"Share Folder project-latest, project-update, project-final,

project-stable, project-update-final, project-real-latest
"
"project-latest . .. project-real-latest
Version
"
Version Control System Software Team

Software Project
Requirement Code
Bug


Version
Code

Version

Version Source Code Copy

Manual

Version Control System (VCS) Version Control System Revision Control
System Source Code Management System (SCM)
Version Control System Version Branch

- Code Base Free Version, Pro Version Branch

(.) - Branching in VCS
(.) v1, v2, v3 Version

Version Code Base Version
Project Code Base Branch
Code Base VCS

Trunk
master
VCS master Branch

master master Code Base
Branch
Branch
Branch
Code master Code Base Development Branch
Development Branch

Version
Development Branch master Code Base
Merge

(.) v1, v2, v3 Version v1-free, v1.1-free

Version master Code Base

Version Branch v1.1-dev, v2.1-dev Version
Branch Branch
master Code Base Merge

VCS master Branch Version

Version
Code Base VCS

Developer Code Developer
Code Manual

VCS
VCS Version
Tool VCS
Source Code Management System (SCM) Version Source Code

( (.) - Centralized VCS Workflow
Centralize Source Code Server

(.) Team Developer Developer
Central Server Central Server
Code Base Developer
5.1 VCS Terminologies

Version Control System
Function Operation
VCS
revision/version Source Code

version () revision
branch Software Project Source Code

Code Base branch

master Code Base branch

branch master Code Base master Code Base

fork fork branch Code Base Code Base

Project
master/trunk branch
Code Base master branch () trunk

merge branch Code Base master () branch

branch Developer
merge
commit/checkin Code Version

commit () checkin

change/diff Code commit Version

change () diff
Code Code

delta compression Version Code Base

diff delta
compression

change list/patch Open Source Project fork

Version Project

change list () patch
patch Project

Project
repository Version Branch Code Base

repository
checkout Central Source Server Update Version () Version

Local Machine
checkout
VCS
branch
checkout

working copy Central Source Server checkout Local Machine

Version working copy

clone clone Central Server repository Local Machine

checkout checkout Version
clone Version branch repository
conflict Local Copy

Central
Server Server Version
Code Server Version Code
conflict VCS Server
conflict
conflict
resolve
head HEAD commit, Version Keyword
tag/label commit Version

Version tag () label
Version Version 0.1.0 tag
Version
5.2 Centralized VCS vs. Distributed VCS

Version Control System Centralized Version
Control System Decentralized Version Control System ()
Distributed Version Control System
Centralized VCS Source Code Repository Central Server Developer

Local Machine Working Copy
Branch
Version Central Server Developer Version
Commit Update Source Code Central Server
Version Central Server
Distributed VCS Central Server Local Machine

Repository Developer Repository
Repository Clone Team Repository
Original
Repository (.)
(.) - Distributed VCS Workflow
Version Commit
Original Repository
Local Repository Code
Version Version

Distributed VCS Version Branch

Network Communication Local Machine
Repository
Server Source Code
Distributed VCS
5.3 Git
Git Linux Kernel Linus Torvalds ()
Distributed VCS Open Source Software VCS
Linus Torvalds Linux Kernel Developer BitKeeper DVCS
Linux Kernel
BitKeeper Open Source Software Propitia-

tory Software Linux Kernel Developer

Bitkeeper Linux Kernel
Developer
Linux Kernel Source Code VCS

Linux Kernel Development Linus Torvalds BitKeeper Distributed

VCS
Centralize VCS
VCS
Git
1. Distributed VCS
2.
3. Data

Git Installer http://git-scm.com/downloads Linux, Mac, Windows OS

Ubuntu Linux Install

$ sudo apt-get install git-core
Windows Official Installer msysgit

Package
msysgit Git Git Bash, Windows Explorer Integration
Installer
msysgit
Download
http://msysgit.github.io/
Install
Git Command Line Graphical User
Interface UI Client Command

Line Command Line

Command Command
Operating System Install Git
Version, File Permission

Configuration
Git Install Email
Configuration Global Config Local Config
Configuration Git Repository
Setting Global Config Repository
Setting Local Config
Configuration Setting

Configuration OS Install

Setting
git config
Command Email Global
Config Command
$ git config --global user.name "John Doe"

$ git config --global user.email "me@johndoe.com"
Global Config Setting --global Option

--global Option Local Config
user.name Email user.email

$ git config --global user.name # => John Doe

Git user.name user.email Setting Website

http://git-scm.com/docs/git-config
Initializing a Repository
Git Version Source Code Directory Git
Repository git init Command

$ git init
Initialized empty Git repository in /path/to/dir/.git/
git init Run .git Empty Repository Source

Code Directory Message
( (.) - Inside .git Directory
.git Directory (.) Version

Branch .git Directory
Linux Unix-like OS Dot

File Directory Hidden File

File Manager Terminal
Hidden File .git Directory
.git Directory objects hooks Git Version

objects Directory Encrypt objects
Directory Hash Value hooks Shell Script
- Version Commit

Branch Merge

Shell Script hooks
config Local Configuration File Text

Editor
Config
[core]
repositoryformatversion = 0
filemode = true
bare = false
logallrefupdates = true
Git
Configuration Setting
HEAD
Branch
Version Commit
HEAD Branch Version
Version Branch .git

Directory
Git Command Run Source Code Directory Run .git
Directory Run
Recording and Managing Versions

git init Initialize Git Repository Source Code Directory
Code Compile
Code Version
Version Directory Index
Git Repository
$ touch index.html style.css script.js
touch Command File touch Command

index.html, style.css script.js
() git status Command Run

$ git status
On branch master
Initial commit
Untracked files:
(use "git add <file>..." to include in what will be committed)
index.html
script.js
style.css
nothing added to commit but untracked files present (use "git add" to track)
git status Repository

Message Version
Index Untracked files git add Command
Track

git add index.html, git add script.js Index

Index git add . Dot
Directory
$ git add .
$ git status
On branch master
Initial commit
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: index.html

new file: script.js
new file: style.css
git add . Index git status Run Version

()
Index () Version git commit Command

(Comment)
Version

$ git commit -m "First commit"
[master (root-commit) 11bf458] First commit

3 files changed, 0 insertions(+), 0 deletions(-)
create mode 100644 index.html
create mode 100644 script.js
create mode 100644 style.css
git commit Command Run -m Option Comment

Git
Comment
index.html git status Run
$ echo 'Hello, world!' > index.html

$ git status
On branch master
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: index.html
no changes added to commit (use "git add" and/or "git commit -a")
index.html echo Command 'Hello, world!'

index.html echo

git status index.html

Message git add
Index git commit -a
Commit
Index
git add Commit add

-a Option
$ git commit -am "Updated index.html"
[master f76103d] Updated index.html

1 file changed, 1 insertion(+)
git commit Run -a Option -m Option -am

Git () Code Line
Commit

Version git log Command Version
$ git log
commit f76103d35ad7b2a2641bf16d1baf6de27a5981cf
Author: Ei Maung <eimg@fairwayweb.com>
Date: Tue Mar 17 15:42:02 2015 +0630
Updated index.html
commit 11bf458a3a3cc45e65e5c20e16c59d92d66038e7
Author: Ei Maung <eimg@fairwayweb.com>
Date: Tue Mar 17 12:48:56 2015 +0630
First commit
git log Command Version Version

() Commit Hash Commit Hash
Version
ID Version Commit Hash
Log Commit Hash Commit Commit Commit
Comment git log
--pretty Option
$ git log --pretty=oneline
f76103d35ad7b2a2641bf16d1baf6de27a5981cf Updated index.html

11bf458a3a3cc45e65e5c20e16c59d92d66038e7 First commit
--pretty=oneline
Log
Commit online Format
$ git log --pretty=format:"%h - %an, %ar : %s"
f76103d - Ei Maung, 17 minutes ago : Updated index.html

11bf458 - Ei Maung, 3 hours ago : First commit
%h Placeholder Short Commit Hash

Commit Hash ()
() %an Author Name, %ar
Author Date Relative %s Commit Comment Subject Version
Short Commit Hash
Version Short Commit Hash 11bg458

$ git checkout 11bf458
Note: checking out '11bf458'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b new_branch_name
HEAD is now at 11bf458... First commit
Git Commit Hash 11bf485

Commit Branch
git checkout -b

Commit Tag
$ git tag v1
Commit 11bf485 v1 Tag
Version git checkout master Run

git checkout master Version git log Run
$ git checkout master

$ git log --pretty=format:'%h %s %d'
f76103d Updated index.html (HEAD, master)

11bf458 First commit (tag: v1)
%d Placeholder Reference Name Commit 11bf458 v1

Tag
Commit
$ git checkout v1
Note: checking out 'v1'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.
If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:
git checkout -b new_branch_name
HEAD is now at 11bf458... First commit
Commit Tag Tag

git tag Command -d Option

$ git tag -d v1
$ git log --pretty=format:'%h %s %d'
f76103d Updated index.html (HEAD, master)

11bf458 First commit
-d Option Commit Commit Reference

Tag
Working with Branch

VCS Branch
Git
Branch git branch Command
$ git branch
* master
Branch git branch Run master

Version Branch
$ git branch dev

$ git branch
dev
* master
git branch dev dev

Branch Git dev Branch
git branch Run
dev master Branch master
Asterisk (*) master Branch

dev Branch git checkout
$ git checkout dev
Switched to branch 'dev'
$ git branch
* dev
master
Branch Branch
Short Cut
$ git checkout -b beta
Switched to a new branch 'beta'
$ git branch
* beta
dev
master
beta Branch
Branch git branch -d Option
$ git branch -d dev
Deleted branch dev (was f76103d).
Branch Commit Branch

$ git checkout beta

$ echo 'body { margin: 0 }' > style.css
$ git commit -am "Updated style.css"
[beta d731a7f] Updated style.css

d731a7fcdd7dd5a478e2532e1d254a0c69184176 Updated style.css

beta Branch style.css Commit

Log
Version master Branch Log
Version

$ git log pretty=oneline

Source Code Repository Branch

Branch Version
Branch
git merge

Switched to branch 'master'
$ git merge beta
Updating f76103d..d731a7f / Fast-forward

style.css | 1 +
master Branch git merge beta Run beta Branch Version

master Branch master Branch Log
Version


Merge Conflicts
Branch Merge Conflict Merge
Branch
master
Branch script.js Commit
$ echo 'var app = {}' > script.js

$ git commit -am "Updated script.js in master"
[master 281e6f3] Updated script.js in master

beta Branch script.js Commit

$ git checkout beta
Switched to branch 'beta'
$ echo 'var app = []' > script.js

$ git commit -am "Updated script.js in beta"
[beta 9147870] Updated script.js in beta

master Branch beta Merge Conflict
$ git merge beta
Auto-merging script.js
CONFLICT (content): Merge conflict in script.js
Automatic merge failed; fix conflicts and then commit the result.
script.js master beta Git

script.js
<<<<<<< HEAD
var app = {}
=======
var app = []
>>>>>>> beta
Conflict
master script.js Code beta script.js
Code Code
Commit Conflict Resolve
$ git commit -am "Merge with conflict resolve"
[master 08582cf] Merge with conflict resolve
Log
08582cf9e218e12b74ff24711692ba2efea936dd Merge with conflict resolve

91478702aebe0fe49d667316b11c6fe4bc50062f Updated script.js in beta
281e6f362f37beb9384bf0ebf15605f81f21582e Updated script.js in master
master script.js Commit Version, beta script.js Commit

Version Conflict Resolve Commit
Version

Clone Repository
Repository git clone git clone
Repository Network Repository
git clone Repository

$ git clone path/to/repository new_repo

$ git clone smb://192.168.1.100/repository new_repo
$ git clone ssh://server/path/to/repository new_repo
$ git clone https://github.com/user/repository new_repo
git clone Repository Repository

git clone
Repository

$ cd ~
$ git clone /opt/lampp/htdocs/project
Cloning into 'project'...

done.
$ ls project
index.html script.js style.css
git clone Repository Home Directory

project Directory

index.html, script.js style.css

Repository git log Run
Version
$ cd project

git branch Run master Branch

Branch Reference
Branch
git checkout
$ git branch
* master
$ git branch -a
* master
remotes/origin/HEAD -> origin/master
remotes/origin/beta
remotes/origin/master
$ git checkout beta
Branch beta set up to track remote branch beta from origin.

Switched to a new branch 'beta'
$ git branch
* beta
master
git branch Run

master
git branch -a Option Run
Repository Branch

git checkout beta Branch git
branch Run beta Branch Branch
Repository Branch Repository
git pull Command
$ cd /opt/lampp/htdocs/project
$ touch app.js
$ git add app.js
$ git commit -m "Added app.js"
[master 81f48dc] Added app.js

1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 app.js
$ git log --pretty=oneline -3
81f48dc2faddcd42b0c479f53db522b64dd146ec Added app.js

Repository Commit
Log
Commit git log -3 Option
Commit () -3
Clone Repository Log Repository

Commit Clone
Commit
$ cd ~/project

git pull Repository Update
$ git pull origin master
remote: Counting objects: 1, done.

remote: Total 1 (delta 0), reused 0 (delta 0)
Unpacking objects: 100% (1/1), done.
From /opt/lampp/htdocs/project
* branch master -> FETCH_HEAD
08582cf..81f48dc master -> origin/master
Updating 08582cf..81f48dc
Fast-forward
app.js | 0
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 app.js
git pull origin master origin

master Branch master Branch Update
Branch
master
Branch
Repository Update git fetch

git fetch Update Clone
Repository git merge git pull Update
git pull
git fetch
git merge
Update Log Clone Repository Repository

Commit
81f48dc2faddcd42b0c479f53db522b64dd146ec Added app.js

git pull origin origin

git
Command Repository
git clone Repository Git Clone
Repository origin Repository
git remote Command Run Repository

$ git remote
origin
origin origin
git remote show origin Run
$ git remote show origin
* remote origin
Fetch URL: /opt/lampp/htdocs/project
Push URL: /opt/lampp/htdocs/project
origin /opt/lampp/htdocs/project Repository
Git Repository Remote

Open Source Project Open Source Project
Team A Team B Maintain
Team A Repository Team B Repository Git Remote
Team A Repository Update Team B Repository Update

Git Remote git remote add

$ git remote add teamb /var/www/project

$ git remote
teamb
origin
git remote add teamb

Remote git
remote Run Remote
teamb
Update
$ git pull teamb master
origin Update
Remote git remote remove
$ git remote remove teamb

$ git remote
origin
git remote remove teamb git remote Run origin

Centralize Repository
Git Repository Centralize Repository Developer
Working Directory Version Branch
Bare Repository () Bare
Repository Directory git
init --bare Option Bare Repository
$ mkdir rockstar && cd rockstar

$ git init --bare
Initialized empty Git repository in /opt/lampp/htdocs/rockstar

rockstar Directory Directory git init --bare

Run rockstar Directory Git Bare Repository
Repository Git Repository .git Directory
objects, hooks, branches, config, HEAD Directory

rockstar Source Code Version
Repository Source
Code Version

Bare Repository Clone --bare Option

$ cd ~
$ git clone --bare /opt/lampp/htdocs/project
Cloning into bare repository 'project.git'...

done.
Source Code Version Repository Bare Repository

Git Repository project
project.git Bare Repository Clone
Git Repository Directory .get
Git Repository
Git Repository Directory
Bare Repository Centralize Repository Project Access
Developer Network Share

Share Server
SSH HTTP
SSH Server HTTP Server Setup

Project Code Centralize

Repository Bare Repository Clone Clone

Repository Clone
$ git clone /opt/lampp/htdocs/rockstar
Cloning into 'rockstar'...

warning: You appear to have cloned an empty repository.
done.
Repository Git Waring

Clone Local Repository Source Code Directory
Code Version Commit

Clone Git Repository git remote add Centralize Repository

$ git init
Initialized empty Git repository in /home/eimg/rockstar/.git/
$ git remote add origin /opt/lampp/htdocs/rockstar
Local Repository Version Centralize Repository

git push
$ git push origin master
Counting objects: 3, done.

Writing objects: 100% (3/3), 228 bytes | 0 bytes/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To /opt/lampp/htdocs/rockstar
* [new branch] master -> master
git pull origin Remote master

Branch git push Version
Centralize Repository Developer Centralize
Repository Update
Update Version
! [rejected] master -> master (fetch first)
error: failed to push some refs to '/opt/lampp/htdocs/rockstar'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
Version
Centralize Repository Update Update
git pull
remote: Counting objects: 4, done.

remote: Compressing objects: 100% (2/2), done.
Unpacking objects: 100% (3/3), done.
From /opt/lampp/htdocs/rockstar
* branch master -> FETCH_HEAD
6a05a77..b7ab351 master -> origin/master
Merge made by the 'recursive' strategy.
LICENSE | 1 +
create mode 100644 LICENSE
git pull Centralize Repository Update Local Version

Centralize Repository Version Git Merge
Conflict Branch Merge Local
Centralize Repository Version
Merge Conflict Conflict
Conflict
Commit
Update Local Version Update Centralize Repository


Counting objects: 7, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (4/4), done.
Writing objects: 100% (5/5), 604 bytes | 0 bytes/s, done.
Total 5 (delta 0), reused 0 (delta 0)
b7ab351..72044c5 master -> master
Bare Repository Push

Repository
Clone Repository Update Pull

Update Centralize Repository
Bare Repository Centralize Repository
Other
Git
Commit
Commit --amend Option
$ git commit --amend -am "Commit comment"
Commit --amend Option Commit

Commit
Commit git reset

Commit Hash ID Log Commit ID
$ git log --pretty=format:"%h %s"
72044c5 Merge branch 'master' of /opt/lampp/htdocs/rockstar

9e4b188 Added index.html
b7ab351 Added LICENSE
6a05a77 Added README
$ git reset --hard b7ab351
HEAD is now at b7ab351 Added LICENSE
$ git log --pretty=format:"%h %s"
b7ab351 Added LICENSE

6a05a77 Added README
Commit () git reset --hard b7ab351

Version b7ab351 b7ab351
Commit Source Code Loss

Windows, Mac, Linux Operating System

Line Ending Carriage Return (CR)
Line Ending Line Feed (LF)
(CRLF) Developer Linux
Source Code Developer Windows Line Ending
Git Source Code
OS Line Ending
Windows Setting
$ git config --global core.autocrlf true

$ git config --global core.safecrlf true
Mac Linux
$ git config --global core.autocrlf input

$ git config --global core.safecrlf true
Git Line Ending Convert

OS Line Ending Windows Setting
autocrlf true Commit Line Ending LF Commit
Checkout Windows Line Ending CRLF
Checkout Mac Linux autocrlf input
Checkout Line Ending Conversion Commit Line Ending Conversion
safecrlf true Setting Line Ending Conversion

Source Code Integrity
safecrlf Source Code Convert
Commit
Indention Code Indent

Tab Indent Space Indent
Tab Space
Developer Indent Space
Developer Code Indent Space Tab
Space Indent Git
Default Tab Space Commit
Git Setting Coding
Standard
Git Command Line User Interface TortoiseGit, Giggle, Tower

UI Software
Git GUI Software
http://git-scm.com/downloads/guis
( (.) - Git Tower Git GUI Software on Mac
Git Repository Centralize Server

Setup
Github (github.com) BitBucket (bitbucket.org) Source Code Hosting
Service Service
Centralize Server Setup
Software Versioning
Software Version
Commit Version
Commit Hash Version
Commit Version Git Tag
Github Tom Preston-Werner Semantic

Versioning
Version

Version (.)
( (.) - Semantic Version Number
Software Version 0.1.0

Software

Version
0.1.1, 0.1.2, 0.1.3 PATCH
Version 0.2.0
0.2.0
0.2.1, 0.2.2, 0.2.3
0.3.0, 0.3.2, 0.3.2, 0.4.0, 0.4.1

MINOR Version MINOR Version
PATCH Version

MAJOR Version
1.0.0
1.0.0-pre-alpha

1.0.0-alpha User
1.0.0-beta pre-alpha, alpha
beta PRE-RELEASE PATCH
1.0.0-beta.1, 1.0.0-beta.2

1.0.0-rc
rc Release Candidate
Release

1.0.0-rc PRE-
RELEASE Version 1.0.0
1.0.0 1.0.1, 1.0.2 Release

1.1.0, 1.2.0 Release
1.1.0-beta, 1.2.0-rc PRE RELEASE

() Software 2.0.0
MAJOR Version
Commit Hash () Software Build

Unique ID () Release
Version +

Version 2.5.1-rc.2+72044c5, 1.4.3+20150318
Software Version
- Flash MX, Photoshop CS, Windows XP
Windows 2000, Ubuntu 14.04 Internal Version
Java7
Internal Version Java 1.7 Version

Conclusion
Software Project Team
Version Control System Centralize Code
Base Project VCS
Version Control System Centralize Code Base

Code Loss Branch
Code Base Version

Software Project
VCS Git VCS

Subversion (Centralize), Mercurial (Distributed), Bazaar (Distributed)
VCS
Joel Spolsky "The Joel Test: 12 Steps to

Better Code"
() Software Team
() "Do you use source control?"
Source Code Software Team
Performance
The Joel Test Issue

Tracking System

Bug
Bug
Software



()
Rockstar Developer () Issue Tracking System 124
( ) Issue Tracking System
StackOverflow Software Developer Q&A Platform

Joel Spolsky

Software Development Team ()
1. Do you use source control?

Source Control (VCS)
2. Can you make a build in one step?

Build
3. Do you make daily builds?

Build
4. Do you have a bug database?

Bug Database

5. Do you fix bugs before writing new code?

Code Bug
6. Do you have an up-to-date schedule?

Up-to-date Schedule
7. Do you have a spec?

Specification
8. Do programmers have quiet working conditions?

Programmer
9. Do you use the best tools money can buy?

Development Tool
10. Do you have testers?

Tester

11. Do new candidates write code during their interview?

Code

12. Do you do hallway usability testing?

Hallway Usability Testing

Team

Software Development Team
() Source Control
() One-step Build () Workflow Automation

() Daily Build Version Control System

Developer Code
Developer

Daily Build Project Build
VCS Commit

Build Continues Integration
() Bug Database
() Fix Bugs Before Writing New Code

()
Bug


Productivity
() Up-to-date Schedule () Software Project

Release Schedule
Requirement Release Schedule

Bug
Bug
Bug Software Release
Up-to-date Schedule Software

() Spec Software Project

Specification
Software Specification Release
Schedule Software
Spec
()
Spec

() Working Condition

Developer Private
Office
Developer
Software Developer
Working Condition

() Best Tools
IDE

Commercial Database System

Tool
() Tester
() Test
Method Tester System Test
Software Specification

Tester Software Quality Quality
Assurance Engineer Joel Spolsky Team
Developer Tester

() Interview Team Developer

Developer

Degree
Programming Logic Team
Developer Code

() Hallway Usability Testing

Hallway

Software
Software Hallway

Software Usable
Feedback Software
Usability
Article () Article

http://www.joelonsoftware.com/articles/fog0000000043.html
6.1 Bug Database

Joel Spolsky () () Bug Database Software
Bug Bug
Developer
Tester Bug Developer
Tester
Release
Bug
Software Bug
Bug
Bug Developer
Bug
Minor Bug

Bug Release

Bug
Software Developer
Bug Developer But
Developer Centralize Database

Developer Manager, Tester User Bug
Bug Developer Bug Database Bug Report
Bug Database
Bug Database Bug Field ()
1. Steps to reproduce Bug

2. Expected behavior
()
3. Buggy behavior ()
4. Assigned person
5. Status
Bug Bug
Reproducing Steps
Bug
Bug

Bug
Expected behavior Buggy behavior
Expected "Mobile Phone Category
Mobile Phone " Bug "Mobile Phone Category
Laptop "
Laptop Mobile Phone
Related Item Mobile Phone Laptop

Bug

Feature
Bug Bug Assigned Person

Bug
Team Leader Assigned Person

Team Leader Developer
Assigned
Bug
Team Leader Assigned
Bug Bug
Status Bug
Bug Behavior

Status
Feature
() Bug Database
Bug Screenshot
Bug Bug
Bug OS Version, Browser Version
Software Version Developer
Bug Category
Bug Priority
Bug Database Tool Project

Text File
Spreadsheet Column Color-Code

Bugzilla, Trac, RedMine, MantisBT Bug Tracking System

Bug Database
Tool
Bug Reporting Best Practices

Bug Database Bug
- "Reproducing Steps " "Bug
Bug "
Bug Database
Bug Report
Team Project

Bug
Status Fixed
Software
( Hardware Software
) Status Won't Fix
Bug Reproduction Steps ()

Status Not Repro
Reproduce
Reproduce
Bug Bug
Bug Bug Status

Duplicate
Bug Feature Bug

Bug Status By
Design
Bug Status

Bug
Bug
Software Version Version 0.1.9 Bug

Bug Database

Version 0.1.10
Version Bug Report Version
Bug Database Developer Email

Bug
Developer Bug Database Bug
Bug

Team Bug Database
Database
Bug
Bug
Bug Developer
Bug Database
Developer Bug Bug Database

Bug Developer Assign Assign

Email Notify
Bug Database Developer
Bug Tracking System

Bug Database Bug Report Feature Request

Project Manager Software

()
Bug Database
Developer Assign
Bug Database
Bug
Developer Job Assignment List
6.2 Bug Database vs. Issue Tracking System

Bug Tracking System (Bug Database) Issue Tracking System
Bug Database Bug Issue Tracking
System Bug Software Issue
Issue Tracking System Bug Database

Bug Database Software Team Project Manager, Developer Tester

Issue Tracking System User Management Level
Marketing Staff
Bug Database
Issue
Assign

Issue Tracking System Bug Database

Issue Tracking System Ticket Management System () Customer Relationship Management

(CRM) System
Software
User Customer Issue
Technician
Workflow
Software Project
Bug Feature Customer Support Request
Bug Database Issue Tracking System

Project Manager "Search Result Bookmark

Meeting
"
Team Leader "

Developer
Search Result Bookmark
"
Developer " Newsletter

Search Result Bookmark "
Project Manager "Newsletter Minor Feature

Search Result Bookmark Team Leader
Minor, Major "
Team Leader "Major, Minor Feature List Email Developer

"
Developer "
Email "
Team Leader " "
Developer " ...

Email Spam Folder "
Project Manager " Management

Demo Meeting
"
Software Project

Specification
Specification
Software Feature
Feature Issue
Tracking System
6.3 Standard Issue Tracking System Features

Issuer Tracking System

User and Role Management Issuer Tracking System Developer Tester

Manager Marketing Staff Customer
Role Management
Lead Developer Issue Assign
Customer Read Only Access QA
Engineer Issues Role
User Role
Policy
Issuer Tracking System User Role
Project Management Issue Tracking System Project

Project Issue Tracking System
Project Issue Tracking System

( (.) - Example Issue Report Form
Issue Management Issue Tracking System Bug Report

Feature Request Issue Priority

Assign (.)
Issue Report Form Project
Issue Project
Form Field Issue Category

UI Bug, Text Typo, API Bug, Feature Request Issue
Issue Category Category Management
Issue Tracking

Issue Severity Level Priority Level Issue

Issue Assign Issue
Reproduction Steps Screenshot
(.) Issue Issue

Severity Priority Issue
Category Severity Level Status
Sorting Category
Status Filter
Issue Management

( (.) - Example Issues List
Log & Notification Issue Assign

Log Assign Assign
Notify Issue
Notify
( (.) - Example Issue Detail
(.) Issue Detail View

Issue
Log
Issue Tracking System

System

VCS Integration Issue Tracking System Version Control System
Issue Source Code

Issue Commit ID
Duplicate Bug Detection Bug Report Bug

Duplicate
Issue Tracking System Duplicate Bug Detect

Custom Fields Management Bug Database ()

Project Field
Issue

Project Issue
Field

Time Tracking and Progress Issue Due Date

Due Date Issue Calendar
Progress Percentage
Issue
Issue
Chart Graph

File Management Issue Document Screenshot

File Manager

Knowledge Base Bug Report

Issue
Procedure Solution
Knowledge Base
Discussion Issue Assign Issue

Team Leader Issue
Comment, Forum

Issue Tracking System Project Management
System Issue
Project
Project Management System
Software Team Bug

Software Bug Database Issue
Tracking System Project Management System

Team

Conclusion
Software Team Issue Tracking System
Issue Issue
Issue
Issue
Issue
Time Management Release Schedule Management
Developer Tester Project Development

Issue Tracking
System Software Progress Developer

Customer Issue Direction

Feedback Software
Project Requirement
Software Product Software Team



NodeJS

()
Rockstar Developer () Team Collaboration 140
( ) Team Collaboration
() Agile Principle Agile Principle Software Project

()
1. Adaptive Planning

Plan
2. Evolutionary Development Product

3. Early Delivery Product
Product
4. Continuous Improvement
5. Rapid and Flexible Response to Change Requirement
Product

Software Project Team
Specification

Specification Agile
Adaptive Planning Flexible Response to Change
Up-to-date Specification Spec

Team
Evolutionary Development, Early Delivery Continues Improvement

Software
Feature ()
() Software
Feature Software Release
Developer

Collaboration Teamwork
Agile Principle Software Project Collaboration Agile
Principle

Issue Tracking System Team Collaboration

Tool Team Collaboration

Agile Software Team
1. Software Project Project Manager () Product Owner

Functional Specification
2. Specification Project Schedule

3. Specification User Story Product Backlog
4. Iteration Sprint Planning Meeting Sprint Backlog

5. Development Team Sprint Backlog User Story
Implementation Detail Task List
6. Sprint Backlog Task List
Code
Code Quality Code Review Pair
Programming
7. Bug Feature Request Issue Tracking
System
8. Project Manager () Product Owner Issue Tracking System Bug
Feature Request Specification Schedule Update
9. Up-to-date Schedule Product Backlog
10. () Iteration
Functional Specification, Project Schedule, User Story, Product Backlog,

Sprint Planning Meeting, Sprint Backlog, Task List, Code Review, Pair Programming

7.1 Specification
Team Collaboration Specification
Spec Specification
() Spec
Software Function Specification

Implementation Detail Spec

Spec Developer Software Spec

Tester Software
Spec Software Customer
Manager Tester
Spec
Software Code
Software Spec

Function Specification
Software Documentation Documentation
Spec End-user
Documentation
Function Spec
Overview Spec Software Feature

Overview
" Software Bug Feature Bug Database Software Team

Software Developer, Tester Manager Account

Bug category Bug
Priority Status
"
Scenarios Spec User Story Software

User
-
"Project Manager
Username/Password Login

Dashboard Project Project
Project Issue Status Filter Option
Assigned Assign
Issue "
User Role Feature User Story

User Story Login Authentication
Dashboard

Multiple Project
Issue List, Issue Filter Issue
Status
User Story

Spec

Non Goals Spec ""

Spec

"Internet Explorer Version 8 Version Support "

Software

Screen Flow Screen Flow Diagram Spec Home Screen Register

Screen, Screen Register Button
Screen, Login Login Screen User Interface Screen
Diagram
Screen by Screen Detail Screen

"Login Screen Login Username/Password Form Password

Account Recover
Remember Me Option
Account Register Page
"
"Dashboard Project Open Issue Logout
Account Password Setting

"
Screen
User Interface Prototype
Todo Todo
Developer ()
Expert " "

Up-to-date Spec
Requirement
Update
Team Developer Manager Tester

Admin Staff Marketing User Software Feature
Meeting
Spec

7.2 Project Scheduling

Software Team ()
Up-to-date Schedule Requirement
Software Project Release Schedule
Requirement Schedule

Project Schedule Specification
User Story Specification User
Story Schedule
The Gantt Chart

Project Schedule The Gantt Chart Bar Chart
Task Project Progress

( (.) - Example Gantt Chart in Spreadsheet
(.) Spreadsheet Project Plan The Gantt Chart

Chart Task, Assigned To Progress
Percentage
Task Bar
Progress Bar
Task Issue Module Development
Testing Task
Project Deadline Up-to-date Schedule

Development Team Management Customer Marketing

Chart
Microsoft Excel LibreOffice Calc Spreadsheet Software Gantt Chart Project

Schedule Gantt Chart
Project Management Software Software

User Story () Task List Project Schedule Update
( (.) - Example Project Scheudle on Team Gantt
(.) Team Gantt

Project Management Software
List Update Project
Schedule Update List
Up-to-date Project Schedule
http://teamgantt.com/
Software Project Task User Story Feature

Task Schedule
Specification User Story
7.3 SCRUM and Backlog

SCRUM () Iterative Development Model Team
Colloboration SCRUM SCRUM Team

SCRUM Team Product Owner, SCRUM
Master Development Team
Product Owner
Stakeholder (Customer, Higher Management) Product

Stakeholder
Product Owner
Stakeholder
Development Team Team Project
Manager Project Manager Developer

Feature (User Story) Feature

Development Team Software Team

Development Team Product Owner
SCRUM Master Self-
organized Team
SCRUM Master Development Team SCRUM Practice

()

SCRUM Practice
SCRUM Meeting SCRUM Training
Developer
Sprint
SCRUM Sprint Iterative Development Model
Software

Sprint
()

Team
() ()
() ()
Sprint Team Sprint Meeting Sprint

Meeting Sprint Backlog Sprint Backlog

Feature
Backlog Feature Sprint
Feature Feature
Release
Feature Sprint
Sprint Review Meeting

Sprint
Sprint Iterative Development Model

Sprint () Spike Tracer Bullet Sprint

Feature Develop
Spike
Sprint
Sprint Feature
Code Quality Tracer Bullet Code
Refactoring Sprint

Sprint Spike Tracer Bullet

Sprint Planning Meeting

Sprint Sprint Planning Meeting Meeting
Sprint Sprint
Planning Meeting Sprint

Meeting Feature
Sprint Backlog Implementation Plan
Development Team
Daily SCRUM Meeting

Sprint
Daily SCRUM Meeting
() Meeting

Meeting SCRUM Master Meeting Coordinate
Daily SCRUM Meeting () Sprint Planning Meeting

()
Sprint Review Meeting

Sprint Sprint
Review Meeting Sprint Review Meeting ()
Feature Review
Feature Demo
Sprint Developer
Sprint
Sprint
Product Backlog and Sprint Backlog

Product Backlog
Software User
Story Sprint Backlog Sprint
Sprint Feature (User Story) Product Backlog
Product Backlog Product Owner Product Owner Product

Backlog User Story Priority Product Backlog
User Story Specification User Story
Spec User Story Backlog

SCRUM Team User Story

Team User Story Backlog
User Story Product Owner
Backlog User Story

Feature
Request Bug Report Technical Work Research Task
Technical Work "Server Update "

Research Task " "
Product User Story Backlog
Sprint Planning Meeting Development Team

User Story Product Backlog
Sprint Backlog Sprint Sprint Backlog User
Story Sprint

Sprint Backlog User Story
Product Owner Developer
Task Board
Backlog Task Task Board Task Board
Column White Borad Sprint Board
( (.) - Simplest Task Board
Source Wikipedia
(.) White Board ToDo, Doing Done Column ()

Task ToDo Column Sticky Note
Sprint
Sprint User Story ToDo Column
Category User Story Sticky Note
User Story
User Story Stick Note ToDo Doing
User Story Stick Note Done Column
Sprint Board User Story User Story
User Story Overview
Board Sprint Board Column

() Stories, ToDo, Doing, Testing, Done
(.) Stories Column Product Backlog Product

User Story Stories Column ToDo Column Sprint Backlog
Sprint User Story Stories ToDo
Doing User Story Testing
User Story Testing
Done Column
( (.) - A Sprint Board Example on Trello
Trello
Online Tool Software
White Board User Story Screenshot
Attach User Story Checklist (Task List)
Sticky Note User Story Label
User Story Comment
White Board - Board

Trello

http://trello.com/
SCRUM Kanban

SCRUM Development Focus Process Management Kanban
Business Operation
Process Management
Task Board Kanban Development
Specification Data Analyst Deployment
Software Development Work-flow Task Board
Kanban Sprint Column Task

Doing Column User Story ()
Doing Column User Story

Iterative Development Continues Development
SCRUM Agile Development Model Kanban Lean Development

Model SCRUM Kanban Scrumban
Agile Method Extreme Programming (XP)

7.4 Task List

Issue Tracking System Bug Database Feature List
Feature List Software Features
Feature List
Feature

Bug
Bug
Bug
Task List Task List Feature ()

Bug Implementation Detail

Task List Google Keep, Evernote, Remember The Milk Task List Manager
Text Text
Text Task List
Source Code Code Base Pull () Clone
Source Code Task List Task
List Source Code Task List Version Control
Text Task List

Plain Text
Design:
# TODO
[-] Two column layout for issue detail page
Main contents such as category, subject and etc. should be in left column.
[-] Issue list table design
Issue list table should highlight priority and severity
Coding:
# TODO
[-] Issue form validation @today
category, subject, reproduction steps, severity and priority are mandatory
[-] SQL Injection filter in issue submission @due (15-03-28)
[-] Issue log in issue details
# DONE
[+] Issue list Sorting (15-03-27 23:35)
# CANCELLED
[x] Issue delete on issue detail (15-03-27 23:46)
Testing:
# TODO
[-] Desktop cross browser test
We will only support IE 9 and above.
Task List Task Design, Coding,

Testing Category

Category TODO, DONE CANCELLED () TODO

Task DONE Task
CANCELLED
Task TODO Task DONE

()

Task
Task CANCELLED

Task @today Tag

Task @due
Tag
Task
Text Editor
() IDE Syntax Highlight
IDE () Text
Editor Task Management

( (.) - PlainTasks - Task List Manager in Sublime Text 3
(.) PlainTasks Sublime Text 3 Package

PlainTasks Text Task List Icon Format
Task List Manage
Feature
Task Keyboard Shortcut Ctrl + D

https://github.com/aziz/PlainTasks
Code Comment TODO

Task List
Text Editor IDE (.) TodoReview

Source Code Task
Task List
Generate Sublime Text 3 Package
( (.) - TodoReview - Task List Extractor in Sublime Text 3
Source Code TODO: NOTE: FIXME: CHANGE: Keyword Comment

TodoReview Code Base Scan Task Task
List
https://github.com/jonathandelgado/SublimeTodoReview
Sublime Text 3 Text Editor () IDE

IDE Build-in IDE Extension ()
Plugin () Package
7.5 Code Review

Team Collaboration Code Review
Developer Software Project Functional Feature
Security, Performance Non-function

Software Project Code Performance

Security Performance

Code Review

Code Review Developer Code Developer

Deprecated Syntax
Database Connection Resource Code
Structure
Developer Code Review
Code
Code Quality Knowledge Transfer Developer

Developer Code Review Session
Code
Quality Code Review Developer Code
Code Quality
Objective
Code Review () Formal Review, Light Review Pair Programming

Formal Review
Code Print
Fagan Inspection Formal
Code Review Meeting Review

Code Review Procedure Light Review

Code Light
Review Code Review Tool Code Review Tool

Code
Static Code Analysis JavaScript
JSLint, JSHint Code Quality Tool Closure Compiler Code Analysis Tool

Pair Programming
Pair Programming
Agile Development Extreme Programming
Programmer
Code Review
Code Driver Review Navigator
Navigator

Code Driver

Code
Navigator

Code Quality
Pair Programming

Pair Programming
Developer Level
Driver Driver

Developer

Pair

Conclusion
Collaboration Team

Remote Team SCRUM Pair Programming
Project
Management Software Team
Issue Tracking Task List

Agile Team

1. Software Project Project Manager () Product Owner

Functional Specification
2. Specification Project Schedule

3. Specification User Story Product Backlog
4. Iteration Sprint Planning Meeting Sprint Backlog

5. Development Team Sprint Backlog User Story
Implementation Detail Task List
6. Sprint Backlog Task List
Code
Code Quality Code Review Pair
Programming
7. Bug Feature Request Issue Tracking
System
8. Project Manager () Product Owner Issue Tracking System Bug
Feature Request Specification Schedule Update
9. Up-to-date Schedule Product Backlog
10. () Iteration
Software Project
Development Workflow
Automation
Automate
Manual


Download
http://pwdbook.com
Rockstar Developer () Development Workflow Automation 160
( ) Development Workflow Automation
Software Project Code Developer

()
1. Scaffolding
2. Package Management
3. Build
4. Deployment
8.1 Scaffolding
Software Project

Directory Structure Source Code

Web Page Structure

WebPage
css
responsive.css
style.css
img
logo.png
js
app.js
jquery.js
index.html
Directory Structure Code Structure

HTML Document Structure
HTML
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Document Title</title>
6. <link rel="stylesheet" href="css/style.css">
7. </head>
8. <body>
9.
10. <script src="js/jquery.js"></script>
11. <script src="js/app.js"></script>
12. </body>
13. </html>
CSS Normalize Style
CSS
1. html, body {
2. margin: 0;
3. padding: 0;
4. }
5.
6. article, aside, details, figcaption, figure, footer,
7. header, hgroup, main, menu, nav, section, summary {
8. display: block;
9. }
10.
11. a:active, a:hover {
12. outline: 0;
13. }
14.
15. img {
16. border: 0;
17. }
18.
19. table {
20. border-collapse: collapse;
21. border-spacing: 0;
22. }
Directory Structure Code Structure Scaffolding

Project Scaffolding
Boilerplate Code
Boilerplate Code Code Source Code

Project
Directory Structure Code Structure
Boilerplate Code Web
Development Boilerplate HTML5 Boilerplate Google
Web Starter Kit
HTML5 Boilerplate html5boilerplate.com Download Download

Archive Extract Directory Structure
HTML5-boilerplate
css
main.css
normalize.css
img
js
vendor
jquery-1.11.2.min.js
modernizr-2.8.3.min.js
main.js
plugins.js
.htaccess
.gitignore
404.html
favicon.ico
index.html
Web App Project Directory Structure Code

Web App Project normalize.css, jQuery,
Modernizr Library .htaccess, .gitignore Setting
index.html
HTML
1. <!doctype html>
2. <html class="no-js" lang="">
3. <head>
4. <meta charset="utf-8">
5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
6. <title></title>
7. <meta name="viewport" content="width=device-width, initial-scale=1">
8.
9. <link rel="stylesheet" href="css/normalize.css">
10. <link rel="stylesheet" href="css/main.css">
11. <script src="js/vendor/modernizr-2.8.3.min.js"></script>
12. </head>
13. <body>
14. 
17.
18. <p>Hello world! This is HTML5 Boilerplate.</p>
19.
20. <script src="//ajax.googleapis.com/ajax/libs/jquery.min.js"></script>
21. <script>window.jQuery || document.write('<script
src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
22. <script src="js/plugins.js"></script>
23. <script src="js/main.js"></script>
24.
25. <script>
26. (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
27. e=o.createElement(i);r=o.getElementsByTagName(i)[0];
28. e.src='//www.google-analytics.com/analytics.js';
29. r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
30. ga('create','UA-XXXXX-X','auto');ga('send','pageview');
31 </script>
32. </body>
33. </html>
Web App Code Structure

Code () Mobile Device
Viewport Meta Element ()
Internet Explorer 8 Browser Browser Upgrade
Message () ()
jQuery Library Google CDN jQuery
Local jQuery () ()
Google Analytic Tracking Code Web App
Project Code
index.html .htaccess Application Performance

Apache Setting plugin.js
Console
Browser console.log Test Code
Error Code Boilerplate

Web App Project Directory Structure
HTML5 Boilerplate Download
Google Web Starter Kit developers.google.com/web/starter-kit/ Download

Archive Extract
web-starter-kit
app
fonts
images
scripts
main.js
styles
components
_h5bp.scss
main.scss
basic.html
favicon.ico
index.html
manifest.json
manifest.webapp
gulpfile.js
package.json
Web Starter Kit HTML5 Boilerplate Mobile Device

Responsive Design
Performance
Google Page Speed
App
Build-in Server CSS Component
Web App HTML5 Boilerplate
Mobile Device Web Starter Kit
Boilerplate Software Project Tool

Boilerplate Website Download
Command Run Boilerplate
Scaffold Generator () Code Generator
Code Generator Project Boilerplate

Code Directory Structure
Code
MVC Pattern Project
Model
View Controller

Code Generator
Database Table CRUD

MVC CRUD Professional Web Developer

() ()
Ruby on Rails, CakePHP, Django, Symfony, ASP.NET MVC, ExpressJS Framework Scaffold
Generator Generator Boilerplate
MVC Structure CRUD

Modern Web App Yeomen
Scaffold Generator
Yeomen Boilerplate Code
Generator
8.2 Yeomen
Yeomen NodeJS Scaffold Generator JavaScript Web App
Code Generator Project
Yeomen NodeJS NodeJS Installer nodejs.org
Download Windows, Mac, Linux OS Installer
Ubuntu Linux Download Install

$ sudo apt-get install nodejs nodejs-legacy
NodeJS NPM NodeJS Package Manager NPM
NodeJS Software Package Install Update

Software Yeoman NodeJS
Software Package NPM Yeoman Install

$ sudo npm install -g yo
NPM Command Line Tool Terminal () Windows Command Line

Ubuntu Linux sudo Command Windows
sudo sudo Ubuntu
Linux ()
npm install yo
NPM Yeoman Scaffold Generator Download Install
Install Directory Install
Directory
NodeJS Global Directory Install -g Option
-g Option NPM Yeoman NodeJS Global Directory
Install Install

Command
Command Operating System, Install
Tool Version File Permission

Error Message Instruction

Scaffold Generator Development Workflow

Auto-mate Package Manager Build Tool

Tool Install
$ sudo npm install -g yo bower grunt-cli
yo, bower grunt-cli Tool Install

Bower
Grunt Yeoman
Yeoman App Boilerplate Generate
Generator
Install Generator yeoman.io/generators
Generator Install
$ sudo npm install -g generator-webapp generator-backbone
Web App Generator BackboneJS App Generator Install

Generator
Install Yeoman Boilerplate Generate

yo Command Run
$ yo
? 'Allo Ei! What would you like to do? (Use arrow keys)
Run a generator
Backbone
Webapp
Mocha

Update your generators
Install a generator
(Move up and down to reveal more choices)
yo Command Install
Generator
Generator Generate Webapp Enter
Make sure you are in the directory you want to scaffold into.
This generator can also be run with: yo webapp
_-----_
| | .--------------------------.
|--(o)--| | Welcome to Yeoman, |
`--------- | ladies and gentlemen! |
( _U`_ ) '--------------------------'
/___A___\
| ~ |
__'.___.'__
` | Y `
Out of the box I include HTML5 Boilerplate, jQuery, and a Gruntfile.js to

build your app.
? What more would you like? (Press <space> to select)
Bootstrap
Sass
Modernizr
Message Source Code Project Directory

Project Directory
Project Directory cd Command
Web App Boilerplate Generate

yo webapp Command
Generate
Message Web App
HTML5 Boilerplate, jQuery Setting Gruntfile.js
Library
Bootstrap, Sass Modernizr ()
Bootstrap CSS Framework Modernizr JavaScript Library Enter

Yeoman

? What more would you like? Bootstrap, Modernizr

create Gruntfile.js
create package.json
create .gitignore
create .gitattributes
create .bowerrc
create bower.json
create .jshintrc
create app/styles/main.css
create app/favicon.ico
create app/robots.txt
create app/index.html
create app/scripts/main.js
invoke mocha
bower install npm install Command Run

I'm all done. Running bower install & npm install for you to install the
required
dependencies. If this fails, try running the command yourself.
create test/bower.json
create test/.bowerrc
create test/spec/test.js
create test/index.html
bower chai#~1.8.0 cached git://github.com/chaijs/chai.git#1.8.1
bower chai#~1.8.0 validate 1.8.1 against git://github.com/chaijs/chai.git
...
Boilerplate
Library Download Keyboard Ctrl+C
bower install npm install Command Run

Code Base Structure

webapp
app
images
scripts
main.js
styles
main.css
favicon.ico
index.html
robots.txt
test
bower.json
.gitignore
Gruntfile.js

HTML5 Boilerplate Boilerplate Website

Download yo webapp Web App
Boilerplate App Generate

$ yo backbone
$ yo angular
$ yo php
$ yo wordpress
$ yo laravel
$ yo django
$ yo firefox-os
Generate
Generator Install

Yeoman Scaffolding Automate Generator

Generator Generator
Generator yo generator
$ sudo npm install -g generator-generator

$ yo generator
_-----_
| | .--------------------------.
|--(o)--| | Create your own Yeoman |
`--------- | generator with |
( _U`_ ) | superpowers! |
/___A___\ '--------------------------'
| ~ |
__'.___.'__
` | Y `
? Would you mind telling me your username on GitHub? eimg

? What's the base name of your generator? tinymvc
create package.json
create app/index.js

yo generator GitHub Account Generator GitHub

Account eimg Generator tinymvc
Directory Structure
generator-tinymvc
app
templates
index.js
node_modules
test
test-app.js
.gitignore
.jshintrc
package.json

generator-tinymvc
Generator Boilerplate
Structure app Directory index.js
app Directory Source Code Template index.js
Generator Script app/template Directory index.html
css/style.css Directory Structure
generator-tinymvc
app
templates
css
style.css
index.html

index.js
node_modules
test
test-app.js
.gitignore
.jshintrc
package.json

index.js Code
JavaScript
1. var yeoman = require('yeoman-generator');

2.
3. module.exports = yeoman.generators.Base.extend({
4. writing: {
5. app: function () {
6. this.fs.copy(
7. this.templatePath('css/style.css'),
8. this.destinationPath('css/style.css')
9. );
10. this.fs.copy(
11. this.templatePath('index.html'),
12. this.destinationPath('index.html')
13. );
14. }
15. }
16. });
NodeJS require(), module.exports Code

() NodeJS
Generator Run app/template css/style.css index.html
Generator
Generator NPM Package Install

$ cd generator-tinymvc
$ sudo npm link
/usr/lib/node_modules/generator-tinymvc -> /home/eimg/generator-tinymvc
npm link Command Generator Directory Symbolic Link (Shortcut) NodeJS Package
Directory generator-tinymvc
NodeJS Package Yeoman Generator
$ yo tinymvc
create css/style.css
create index.html
tinymvc Generator App Boilerplate

Structure
tinymvc
css
style.css
index.html
css/style.css index.html
Source Code Boilerplate
Yeoman Generator

http://yeoman.io/authoring/
8.3 Package Management

Package Software Component () Library

Package App

Package
Package Package
jQuery UI jQuery
BackboneJS jQuery UnderscoreJS Package
Dependency

Package Package Author Website Download

Package Download
Archive Extract Source Code Project Code Base
Package Manager Package

Package Manager Install Package Update Version

Update Version Download

Package Dependency jQuery UI Install
Dependency jQuery BackboneJS
jQuery
jQuery Dependency Version
jQuery UI 1.11 jQuery 2.0
jQuery 1.7 Version
Package Manager
Node Package Manager (NPM) Package Manager NodeJS

Package Install Update
Package Install () Update npm install Command

$ sudo npm install -g ionic
npm Install Package Dependency

Package Package Author Website
Download

Install
Package npm list Command
$ npm list -g
/usr/lib
generator-generator@0.6.1
chalk@1.0.0
ansi-styles@2.0.1
escape-string-regexp@1.0.3
has-ansi@1.0.3
ansi-regex@1.1.1
get-stdin@4.0.1
strip-ansi@2.0.1
ansi-regex@1.1.1
supports-color@1.3.1
github@0.2.3
lodash@2.4.1
npm-name@1.0.4
Package Uninstall npm rm () npm uninstall
$ sudo npm uninstall -g generator-tinymvc
unbuild generator-tinymvc@0.0.0
Package Install Update Dependency

Package Manager

8.4 Bower
NPM NodeJS Package Manager NodeJS
Package Web App Package Bower
Package Manager Yeoman Install
Bower
Install Install
$ sudo npm install -g bower
Package Install bower install

$ bower install jquery
bower jquery#* not-cached git://github.com/jquery/jquery.git#*

bower jquery#* resolve git://github.com/jquery/jquery.git#*
bower jquery#* download https://github.com/jquery/2.1.3.tar.gz
bower jquery#* progress received 0.1MB
bower jquery#* progress received 0.2MB

bower jquery#~2.1.3 install jquery#2.1.3
jquery#2.1.3 bower_components/jquery
Bower Install Package bower_components

Directory
jQuery Install Install
Directory Structure
myapp
bower_components
jquery
bower.json
dist
jquery.js
jquery.min.js
jquery.min.map
MIT-LICENSE.txt
src
css
style.css
index.html
bower_components Directory jQuery Source Code

Minified
Version Download
Bower Package
http://bower.io/search/
Bower Bower Package Git Repository Website URL

Install GitHub Host Git Repo Install
$ bower install eimg/jquery-voter

bower jquery-voter#* resolved git://github.com/eimg/jquery-voter.git
bower jquery-voter#* install jquery-voter
jquery-voter#143a070c8a bower_components/jquery-voter
GitHub Handle
GitHub Username/Git Repo Name GitHub
Website Package Install
Package URL
Install
$ bower install http://eimaung.com/u4urc/.vimrc

bower .vimrc#* install .vimrc#e-tag:1206bc
.vimrc#e-tag:1206bc-5b bower_components/.vimrc
Bower Package bower init Command

Directory
bower install Package Install
$ mkdir mypackage && cd mypackage

$ bower install jquery bootstrap

bower jquery#>= 1.9.1 install jquery#2.1.3
bower bootstrap#~3.3.4 install bootstrap#3.3.4
jquery#2.1.3 bower_components/jquery
bootstrap#3.3.4 bower_components/bootstrap
jquery#2.1.3
Directory Structure
mypackage
bower_components
bootstrap
bower.json
dist
fonts
js
jquery
bower.json
dist
src
bower_components bootstrap jquery

Component
App
app.js
index.html

Directory Structure
mypackage
bower_components
bootstrap
bower.json
dist
fonts
js
jquery
bower.json
dist
src
app.js
index.html
App jQuery Bootstrap Package App App

Bower Package bower.json
Package
Information bower init Run

$ bower init
? name: mypackage
? version: 0.1.0
? description: Bower package test
? main file: app.js
? authors: Ei Maung <eimg@fairwayweb.com>
? set currently installed components as dependencies?: Yes
{
name: 'mypackage',
version: '0.1.0',
authors: [
'Ei Maung <eimg@fairwayweb.com>'
],
description: 'Bower package test',
main: 'app.js',
keywords: [
'test'
],
dependencies: {
bootstrap: '~3.3.4',
"jquery": '~2.1.3'
}
}
bower init Package Version, Author Bower

Package
() Semantic Versioning
Version Semantic Version
Version

name
1. Package Unique Name

2. a to z 0 to 9 Dash Dot

3. Dash Dot ( my--package )
4. ()
main file Package Source Code () Array

Install Package Dependency Yes
Install jQeury Bootstrap Dependency
bower.json
JSON Code JSON Code

bower init Package Information Install Package

Dependency --save Option Install

$ bower install underscore --save
--save Option Install Package Dependency

bower.json dependencies Section
JSON
"dependencies": {
"bootstrap": "~3.3.4",
"jquery": "~2.1.3" ,
"underscore": "~1.8.2"
}
Package Bootstrap 3.3.4, jQuery 2.1.3 UnderscoreJS 1.8.2

Dependency Dependency Package Version
Range >=1.2.9 1.2.9
>1.2.9 <2.0.0 1.2.9 2.0.0 bower.json
Option
https://github.com/bower/bower.json-spec
Bower Package bower install Command Install

Register Register
Bower Package Git Repo
Semantic Version Git Commit Tag
$ git init && git add .

$ git commit -m "Initial commit"
$ git tag 0.1.0
Git Repo Version Tag Package

Publish GitHub GitHub Git Repo Publish
github.com GitHub

Instruction
Register bower register Command
$ bower register mypackage https://github.com/eimg/mypackage.git
mypackage
Package

Git
Repo
Bower Package Registration
Package Register
Package Register Unique Name Register
bower install
bower install Package Install bower.json

Dependency Install
Package Install Bootstrap, jQuery UnderscoreJS Bower
Install
Project Package Bower App

Bower Package
8.5 Build
Software Project Development Production
Software Development Stage Error Message

Error Message
Production Stage Error Message

Fatal Error Warning Notice

User Dummy Data

Development Stage
Production Stage
Development Stage Function
Debug Log Production Stage Debug Log

Unit Test Test Code Development Stage
Test Code Run Production Stage Run

Development Stage Compile
Production Stage Compile
Development Stage Code Setting

Production Stage Software
Setting
Build
Development Code Production
Software Build

Build
Build Process Project
Web App Build
1. Run tests
2. Compile preprocessor
3. Generate static template
4. Lint JavaScript
5. Minify JavaScript, CSS and HTML
6. Concatenate JavaScript and CSS
7. Optimize Images
8. Create distribution package
Project Production Test Pass Build

Unit Test Test Code Run Project
CoffeeScript, LESS Preprocessor Compiler
JavaScript CSS Code Template Language
Static HTML Template Generate
JavaScript Code Quality Code Analysis Tool Lint
JavaScript, CSS HTML Size Minify HTTP Request

Minify JavaScript CSS Concatenate
HTTP Request Performance Optimization
Image Size Optimize
Package
() Software Team ()
Build () Build
Build
Build
Build
Manual
Automate
8.6 Grunt
Grunt Automate

Task Runner Tool NodeJS Tool
Yeoman Install Install
Install

$ sudo npm install -g grunt-cli
Grunt Project Directory package.json

Gruntfile.js
package.json bower.json Package
Information Bower Package Manager Package
Information bower.json NPM Package Manager package.json
Package Information package.json npm
init Command package.json Dependency Grunt
Grunt Plugin package.json
JSON
1. {
2. "name": "my-project-name",
3. "version": "0.1.0",
4. "devDependencies": {
5. "grunt": "~0.4.5"
6. }
7. }
my-project-name devDependencies
grunt 0.4.5 Dependency Build
Task Plugin
Plugin Install
JavaScript Code Minify Grunt Plugin Install
$ sudo npm install grunt-contrib-uglify --save-dev
--save-dev Option package.json devDependencies grunt-contrib-

uglify package.json

JSON
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.5.0"
}
Gruntfile.js Grunt Plugin Configuration Build

Task Gruntfile.js
JavaScript
1. module.exports = function(grunt) {
2.
3. grunt.initConfig({
4. uglify: {
5. build: {
6. files: {
7. 'js/app.min.js': ['js/mobile.js', 'js/app.js']
8. }
9. }
10. }
11. });
12.
13. grunt.loadNpmTasks('grunt-contrib-uglify');
14. grunt.registerTask('default', ['uglify']);
15.
16. };
() js/mobile.js js/app.js Minify

js/app.min.js package.json
Gruntfile.js Grunt Build

Source Code Directory Structure
my-project
js
app.js
mobile.js
node_modules
grunt
grunt-contrib-uglify
Gruntfile.js
package.json
js Directory app.js mobile.js Script Build

grunt Command Run
$ grunt
Running "uglify:build" (uglify) task

>> 1 file created.
Done, without errors.
grunt Command Gruntfile.js Configuration app.js

mobile.js Minify app.min.js
Generate
my-project
js
app.js
app.min.js
mobile.js
node_modules
grunt
grunt-contrib-uglify
Gruntfile.js
package.json
Source Code Directory Structure js Directory app.min.js

Output
Test Code Run JavaScript Code Lint Image Optimize

Build Gruntfile.js
Project Build
grunt Command Run
Grunt Plugin
http://gruntjs.com/plugins
Yeoman Project Scaffold Yeoman Build Configuration

Gruntfile.js yo webapp
Command Web App Boilerplate Scaffold
Gruntfile.js Build Process
Configure

(.) Yeomen, Bower Grunt Common Workflow

( (.) - Web App Development Workflow with Yeoman, Bower and Grunt
Source yeoman.io
yo Command App Boilerplate yo

Bower Package Gruntfile.js
Package bower
install Code App
grunt serve Command Run Build Test Code Run

grunt test Command Test Code Run Configuration
yo Build grunt
Command Run JavaScript Lint
Minify Image Optimize
Build Result dist
Directory grunt Command Run
dist Directory
Build Result Develop
App Production Version

8.7 Deployment
Software Deploy
Software
Software Deploy
Software Infrastructure
Server, Network System Requirement Infrastructure
Architecture Design
Enterprise IT Architecture
Software Software
Consumer Software
Build User

Distribution Method App Store
Website Download Software
API Back-end Server Environment

Server Environment Cloud Service Provider

Production Server Setup
Deployment & Distribution

Business Process Business Decision

Business Decision Developer

Server Network Environment Configure Build
Production Server Publish
Server Network Environment Configure

sysadmin
System Administrator
Full-stack Developer
Software Server
Environment Configure Developer Server
Environment Configuration Developer

()
Setup
Server Environment Build Software
Publish FTP Software Build
Software Production Server Copy

.) Software
Connection
.) Deploy
Version 0.1.0 Deploy

Version 0.1.1 Deploy 0.1.0
0.1.1 Software

.)
Compress Compression Algorithm
Size 200% 400% Deployment
Compress Server Copy Compress
Copy Decompress
.) Manual Deploy

Deploy Source Code
Deploy

Production Server
Local Code Base
Production Version Development Version

Deployment Build
Software Server

Git Workflow
.) Production Server git init --bare Git Repo
.) Local Git Repo Remote Production Server Git Repo
$ git remote add prod git://path/to/production/repo
.) Local Code Base Build

dist Directory dist Directory git
push Production Server Code Base Push dist
Directory Push Git Sub Tree Git Plugin
https://github.com/apenwarr/git-subtree
.) Git Sub Tree Install Git Sub

Tree Install dist Directory Production Server Push

$ git subtree push --prefix dist prod master
--prefix Option Push

Directory dist
Code Base Push dist Directory Push

Deployment git subtree push Build

Software Server Git Compress
Push Software

Production Server Local Code Base git
subtree push Run
8.8 Continues Integration

Development Workflow Automation
Continues Integration (CI) Continues Integration

Build Daily Build VCS Commit Build


Commit Build
Developer Code

Commit
Commit
Developer
Commit
Build
Software Production Ready

Build Code Production Code
Commit Build

Production

Agile Extreme Programming (XP) Continues Integration

Travis CI (travis-ci.org), BuildBot (buildbot.net), Hudson CI (hudson-ci.org) Tool
CI Tool
Build Configuration Setup Configuration

Software Environment Information
Compiler, Compiler Version, Component Package
Build Production Environment
Build Environment Setup Build Build
Environment Build Script Compiler Version
Package Build Environment Setup
Travis CI Build
Configuration
YAML
# File Name: .travis.yml
language: node_js
node_js:
- 0.10
- 0.8
- 0.6
services:
- mongodb
before_script:
- npm install
- bower install
script: npm test

notifications:
email:
- "james@gmail.com"
- "john@gmail.com"
Travis CI Build Configuration YAML Markup Build

Enviro-nment NodeJS 0.10, 0.8 0.6 Version Setup
Setup
MongoDB Build Script Run npm
install bower install Run Build Script npm
test Gruntfile.js Build Script
NPM Configuration package.json
JSON
// File Name: package.json
scripts {
"test": "grunt"
}
Source Code Repo Commit Code Base Setup

Build Script Run
Travis CI Github Web Hook Github Host

Repo Commit
Github Travis CI Travis CI Build
Environment Build Script Run Commit
Build Script Run Fail Developer Error Log

Pass Build Result Production Environment
Deployment

( (.) - Travis CI - Build Status
(.) Build Fail Travis CI

Build Pass Amazon AWS, Google Cloud Storage, Heroku, Engine Yard, Appfog
Cloud Service Deploy
Git
Push Deploy
Build Configuration
YAML
# File Name: .travis.yml
after_success:
- git remote add deploy git:/path/to/repo/
- git push deploy
VCS Commit
Build Deploy
Continuous Integration

Conclusion
Tool Web App Project
Tool Software Project Language,
Framework Scaffolding, Package Management, Build Tool CI Tool

Ruby on Rails, Django, ASP.NET MVC, Laravel, Synfony, CakePHP Framework Scaffolding
Java Project Spring Roo Tool

Scaffolding NetBeans, Eclipse, Visual Studio IDE
Scaffold Code Generation

Plugin
Extension

Package Manager Microsoft .NET NuGet, PHP Composer Pear,

Python pip, Ruby Gem Bundler, Java Maven
Build Tool Ruby Rake, Java Apache Ant, .Net NAnt
MSBuild, PHP Phing, Python SCons Paver Tool
Command Line Tool
IDE
() Rockstar Developer Workflow Automation Tool

()
Modern Development Stack

Code

Code Structure Architecture
Ubuntu Linux ()

http://u4ubook.com
Rockstar Developer () BackboneJS (Client-Side MVC) 193
( ) BackboneJS (Client-Side MVC)
() Service Oriented Architecture (SOA) Software

Mobile Device
Mobile Software Application One Core /
Multiple Clients App
Core Logic Service Device
App
UI Service

Web Browse Web App App Interface Client

Client Web Application
Server Core Logic Process

Data UI Template
Server Client Browser User Input
Server
Service Server
JavaScript
User Interface

Web App Server

Service
Server Core Service

Server
JavaScript User Interface
Language Client Service
Programming Language JavaScript
App UI UI Data
Software Development Maintenance Data

UI
Data UI Maintain

MVC Model-View-Controller Design Pattern MVC

BackboneJS JavaScript Code MVC Pattern MVC

Framework MVC Model-View-Controller
Model Data View
User Interface Controller User Input
Code Data Model
UI Model Code View
User Input Code
Model View Controller
BackboneJS MVC
Model-View-Collection Data
Model UI View
Collection
Model Model Collection Controller

User Event
View
9.1 Getting BackboneJS

BackbonJS backbonejs.org Download Yeoman
Generate

( (.) - BackboneJS Website - backbonejs.org

BackboneJS Model Collection UnderscoreJS JavaScript Library

DOM Manipulation jQuery
Underscore jQuery Backbone Dependency Yeoman
Generator Backbone App Boilerplate Generate Dependency
Yeoman Backbone Generator Install
Install
$ sudo npm install -g generator-backbone
Backbone Generator Install Backbone App Boilerplate

$ mkdir bbApp && cd bbApp

$ yo backbone
Directory Structure
bbApp
app
bower_components
backbone
jquery
lodash
modernizr
underscore
images
scripts
vendor
main.js
styles
main.css
404.html
favicon.ico
index.html
node_modules
test
bower.json
Gruntfile.js
package.json
bower_components Directory backbone, jquery, underscore Dep-

endency bower_components

lodash
Underscore Underscore
Library
App Boilerplate Directory bbApp Directory grunt serve Command Run

App Web Browser
( (.) - Previewing App
Yeoman Scaffold Generate Web Server

Browser Sync
NodeJS Package Setup
App Browser
Development
Code Code

9.2 Backbone Model

Model Data Data Function Object
Backbone JavaScript Model Object
JavaScript
1. var Issue = {
2. data: {
3. subject: "Drop down menu not working",
4. reproduce: " ... ",
5. priority: 3,
6. status: 1
7. },
8. changeStatus: function(value) {
9. this.data.status = value;
10. }
11. }
Issue Object data changeStatus()

Data Function JavaScript Model Object
Backbone Model Model

Backbone Model Constructor
JavaScript
1. var Issue = Backbone.Model.extend({

2.
3. defaults: function() {
4. return {
5. subject: "",
6. reproduce: "",
7. priority: 2,
8. status: 1
9. };
10. },
11.
13. this.save({status: value});
14. }
15.
16. });
Backbone Model Constructor Backbone.Model.extend()

Issue Model Constructor Constructor
Model Object Model Object
Constructor defaults Property
Model Object
Issue Model Constructor Model
Object
JavaScript
1. var issueOne = new Issue();

2.
3. var issueTwo = new Issue({
4. subject: "Dropdown menu not working",
5. priority: 3,
6. status: 1
7. });
issueOne Model Object

Constructor defaults issueTwo
subject, priority, status
defaults
Model Object Backbone Function

Property Object Backbone Model Object
Function Property
get() Model Data
JavaScript
issueTwo.get("priority"); // => 3
set() Model Data
JavaScript
issueTwo.set({priority: 2, status: 1});

issueTwo.get("priority"); // => 2
escape() get() XSS Filter
JavaScript
issueTwo.set({detail: "<script>alert(1)</script>"});
issueTwo.escape("detail"); // => <script>alert(1)</script>
has() Model Data
JavaScript
issueTwo.has("assignTo"); // => false
unset() Model Data
JavaScript
issueTwo.unset("subject");
clear() Model Data
id Model Object Unique ID ID Data

id Attribute

idAttribute Model Data Model ID
JavaScript

2. idAttribute: "issueID",
3. defaults: {
4. subject: "",
5. status: 1
6. }
7. });
8.
9. var issueThree = new Issue({ issueID: '001', status: 2 });
10. console.log(issueThree.id); // => 001
issueThree Model Object issueID: '001'

Model Constructor idAttribute: "issueID"
issueID: '001' Backbone Model
ID issueThree.id 001
Model Object Data get() Function

issueThree.get("status") ID Model Data Model Property
get() Function issueThree.id
cid Model Object Backbone Temporary ID

cid Property ID Unique ID
cid
JavaScript
console.log(issueTwo.cid); // => c1
toJSON() Model Data JSON Object Function

JavaScript
issueTwo.toJSON();
// => { subject: "Dropdown menu not working", priority: 3, status: 1 }
fetch() Server Model Object Update

Server
URL Model Collection
URL Request Method GET
save() Server Model Object

Server URL Model Collection URL
Request Method Server POST
PUT
destroy() Server Model Object

Server
URL Model Collection
URL Request Method DELETE
sync() Server Request Method Model Object

create,
read, update, delete Option Request Method
validate() Default save() Function

Backbone validate() Function
validate() Function Model Object Data
validateError validate() Function return Error Message

Error Message Property

isValid() validate() Function Run
url() Model Object URL collection.url/id

Format
Model Collection URL Model ID

parse() Server JSON String JSON Object save()

Function fetch() Function Run parse() Function
clone() Model Object
isNew() Model Object Server Object

ID ID Model Server
Model
hasChanged() save() Model Object

changedAttributes() save()
Data
previous() Model Object set() save()

previousAttributes() Model Object set() save()

Backbone Model Function Property

9.3 Backbone Collection

Collection Model Model Object Array Object Array
JavaScript Backbone Collection
Backbone.
Collection.extend() Collection Constructor
Option Option
model url
JavaScript
1. var IssueList = Backbone.Collection.extend({

2. url: 'http://localhost/api/'
3. model: Issue
4. });
Model Data Database Backbone url
Server
model
Collection Model Collection
Model Object JavaScript Array Backbone
model Model Object
Collection Constructor Backbone Collection

JavaScript
var Issues = new IssueList();
Backbone Collection Object

Function Property
toJSON() Collection Model JSON Array
add() Model () Model Array Collection

JavaScript
Issues.add([issueOne, issueTwo]);
remove() Model Collection
reset() Collection Model Model
set() reset()
Model Model Model
Model Model
Model Update Model

get() Collection Model Model id cid

JavaScript
Issues.get("c1");
at() Collection Model Model ID

Model Index
JavaScript
Issues.at(2);
push() Model Collection add()
pop() Collection Model remove()
unshift() Collection Model add()
shift() Collection Model remove()
slice() Collection Index Index

Model ()
JavaScript
var topFive = Issues.slice(0, 5);
length Collection Model
comparator Collection Model Object Sorting Model

Property
JavaScript
Issues.comparator = "priority";
comparator priority Model Object priority

Sorting
sort() Model Object Collection Model Object Sorting

pluck() Model Object Property Array
JavaScript
Issues.pluck("subject");
Model Object subject Array
where() Filter Model Object
JavaScript
Issues.where({status: 2});
Model Object status: 2 Object
findWhere() where() findWhere() Object

Object
parse() Model parse() Server

Server Object String JSON Object
clone() Collection
fetch() URL
Server Model

set() Function Collection Update
GET Request Method
create() Model Model Collection

URL Server
POST Request Method
sync() Model sync() Server Collection

create, read, update, delete
Request Method
Function Property UnderscoreJS Array Function Collection
Underscore Function
each() Collection Loop each()
JavaScript
Issues.each(function(model) {
console.log( model.get("subject") );
});
map() each() Collection Loop map()

Function Array
JavaScript
var subjectList = Issues.map(function(model) {

return model.get("subject");
});
Collection Loop Model subject Array
find() Collection Loop Condition Model Object

JavaScript
var result = Issues.find(function(model) {

return model.get("subject") == "Dropdown menu not working";
});
Collection Model subject Dropdown menu not working

Model Object
filter() find() find() Condition Model Object

filter() Model Object Array

JavaScript
var result = Issues.filter(function(model) {

return model.get("status") == 2;
});
Collection status 2 Model Array
reject() filter() Condition Model Object

every() Collection Model Object Condition

JavaScript
var result = Issues.every(function(model) {

return model.get("status") == 4;
});
Collection Model Object status 4 true
some() Collection Model Object Condition true
shuffle() Collection Model Object Random
toArray() Collection Model Array
first() Collection Model
last() Collection Model
isEmpty() Collection Model
Backbone Collection Database Table

Collection Model Table Record RDBMS Table
Record SQL Command Backbone Collection Model
Function
9.4 Backbone View

Backbone View
Optional Backbone View jQuery ()
JavaScript UI Library Template Engine User Interface
jQuery Backbone Collection
JavaScript

2. defaults: {
3. subject: "",
4. status: 1
5. }
6. });
7.
9. model: Issue
10. });
11.
12. var Issues = new IssueList();
13.
14. var issueOne = new Issue({ subject: "Issue One", status: 1 });
15. var issueTwo = new Issue({ subject: "Issue Two", status: 1 });
16. var issueThree = new Issue({ subject: "Issue Three", status: 1 });
17.
18. Issues.add([ issueOne, issueTwo, issueThree ]);
19.
20. Issues.each(function(model) {
21. $("ul").append("<li>" + model.get("subject") + "</li>");
22. });

() Issue Model Constructor
() IssueList Collection Constructor ()
IssueList Constructor Issues Collection Object
( ) Issue Constructor Model Object
Model Object add() Function ()
Issues Collection () Issues
each() Loop Model subject jQuery List UI
Backbone
View
Backbone.View.extend() Backbone View Constructor
JavaScript
1. var IssueView = Backbone.View.extend({

2. tagName: "li",
3.
4. events: {
5. "click .new": "addNew"
6. },
7.
8. initialize: function() {
9. this.listenTo(this.model, 'change', this.render);
10. },
11.
12. render: function() {
13. this.$el.html(this.model.get("status"));
14. return this;
15. },
16.
17. addNew: function() {
18. ...
19. }
20. });
tagName Property View Template HTML Element

Name events Property Event List
() Class new
Element Click addNew() Function

View Constructor View Object

initialize Property () listenTo()
Function Model render() Function
Model View

listenTo() Function Parameter ()

Model () Collection this.model
View Model Model ()
Collection Parameter Event
change Event
Parameter Event Function
Issues Collection Model
Function
JavaScript
this.listenTo(Issues, 'add', this.doSomething());
render() Function View Element HTML Content Model subject

$el View Element Select

jQuery DOM Function () html()
Function Backbone Function jQuery Function
Backbone View jQuery Function jQuery
Backbone View Model

View

View Event
Backbone View
Function
el tagName View HTML Element Name

HTML Element el
Property
JavaScript
var IssueView = Backbone.View.extend({

el: "#list"
});
ID #list HTML Element View Element
$el tagName () el View Element jQuery Selector

Select

attributes View Element HTML Attribute Property

JavaScript

el: "#list",
attributes: {class: 'issue', title: 'click to edit'}
});
$(selector) View Element Element Select
JavaScript

render: function() {
this.$('.subject').html(this.model.get('subject"));
}
});
View Element Class .subject Element Select

events View Element User Event Function

"event element": "function"
Format event
jQuery Event element jQuery Selector
Function
JavaScript

el: "#list",
events: {
"click .new": addNew,
"focus input": getUpdate,
"change #form select": updateStatus
},
addNew: function() { },
getUpdate: function() { },
updateStatus: function() { }
});
render() Default

remove() View
View Function template() Function

Backbone Function Underscore Function Format

HTML String
JavaScript
var template = _.template("<li><%= subject %> (<%= status %>)</li>");

template({ subject: "Dropdown menu not work", status: 2 });
// => <li>Dropdown menu not work (2)</li>
_.template (Underscore Dot Template) HTML Template Function

HTML Template Output <%= %> Template
Tag JavaScript Code Template <%
%>
Template Function Run Data HTML
Template Data
9.5 Backbone Events

Backbone Model Collection

Function
Event
JavaScript

2. defaults: {
3. subject: "",
4. status: 2
5. },
7. this.on("change", function() { console.log("I've changed") });
8. }
9. });
10.
11. var issueOne = new Issue();
12. issueOne.set({status: "Dropdown menu not working"});
// => I've changed
Model Constructor initialize on() Function Model

Function change

change Event
add Model Collection Event

remove Model Collection Event
reset Collection Model Reset Event
sort Collection Sorting Event
change Model Event
change:attribute change:status Model status
Event
destroy Model Event
request Server Event
sync Server
Event
error Server Event
invalid Model Validation Event
all Event Event
Event on() Function

Event
Event Function
Run trigger() Function
JavaScript
IssueOne.trigger("change");
Event Function Function listenTo() Model ()

Collection () View Event
View listenTo() Model
View render() Function Run
change Event add, remove, reset, destroy
Event
Backbone Model, Collection, View Event

Router backbonejs.org
9.6 Example Backbone App

() Backbone Issue Tracking System Web Client

Issue
Issue App
Backbone App Boilerplate Generate
$ mkdir bbApp && cd bbApp

$ yo backbone
Yeoman Bootstrap, RequireJS Library Install

CSS Bootstrap CSS Framework
Install Backbone
Install Install

$ bower install bootstrap
Backbone, jQuery, Underscore Bootstrap Boilerplate App

Code
Issue List Table HTML
HTML
1. <table class="table" id="list">

2. <tr>
3. <th>Subjecct</th>
4. <th>Priority</th>
5. <th>Severity</th>
6. <th>Assigned To</th>
7. <th>Status</th>
8. <th>#</th>
9. </tr>
10. </table>
11.
12. <button class="btn btn-primary" data-toggle="modal" data-target="#new">
13. <span class="glyphicon glyphicon-plus"></span> New Issue
14. </button>
#list ID <table> Element Row

Content Issue
New Issue Form
<button> Element Bootstrap Modal Dialog

New Issue Form Dialog Box Dialog Box ID
#new data-target Attribute Bootstrap CSS Framework
()
ID #new
New Issue Form
HTML
1. <div class="modal fade" id="new">

2. <div class="modal-dialog">
3. <div class="modal-content">
4.
5. <div class="modal-header">
6. <button type="button" class="close" data-dismiss="modal">
7. <span aria-hidden="true">×</span>
8. </button>
9. <h4 class="modal-title">New Issue</h4>
10. </div>
11.
12. <div class="modal-body">
13.
14. <div class="form-group">
15. <input class="form-control" type="text"
id="subject" placeholder="Subject">
16. </div>
17.
19. <select class="form-control" id="priority">
20. <option value="-1">-- Priority --</option>
21. <option value="0">Normal</option>
22. <option value="1">Important</option>
23. <option value="2">Critical</option>
24. </select>
25. </div>
26.
28. <select class="form-control" id="severity">
29. <option value="-1">-- Severity --</option>
30. <option value="0">Minor</option>
31. <option value="1">Major</option>
32. <option value="2">Crash</option>
33. </select>
34. </div>
35.
37. <input type="text" class="form-control"
id="assigned-to" placeholder="Assigned To">
38. </div>
39.
41. <select class="form-control" id="status">
42. <option value="-1">-- Status --</option>
43. <option value="0">Assigned</option>
44. <option value="1">WIP</option>
45. <option value="2">Done</option>
46. <option value="3">Close</option>
47. </select>
48. </div>
49.
50. </div>
51.
52. <div class="modal-footer">
53. <button class="btn btn-primary" id="submit">Submit Issue</button>
54. </div>
55.
56. </div>
57. </div>
58. </div>
Bootstrap Modal Dialog .modal, .modal-dialog, .modal-content,

.modal -header, .modal-body, .modal-footer Element

HTML
Structure
#subject, #priority,
#severity, #assigned-to #status Input Element Input Element
<button> Element #submit ID
Bootstrap Structure #new Button Modal Dialog Box
#new Button data-target Attribute Structure
ID #list Issue List Table
Issue Form HTML Issue
Template Structure
Template
1. <script type="text/x-template" id="row">

2. <td><%= subject %></td>
3. <td><%= config.priority[priority] %></td>
4. <td><%= config.severity[severity] %></td>
5. <td><%= assignedTo %></td>
6. <td>
7. <select class='form-control input-sm change-status'>
8. <% _.each(config.status, function(v, i) { %>
9. <% if(i == status) { %>
10. <option value='<%= i %>' selected><%= v %></option>
11. <% } else { %>
12. <option value='<%= i %>'><%= v %></option>
13. <% } %>
14. <% }) %>
15. </select>
16. </td>
17. <td>
18. <a href='#' class='del'>
19. <span class='glyphicon glyphicon-remove'></span>
20. </a>
21. </td>
22. </script>
Structure type text/x-template <script> Element

<script> Element type text/javascript
type text/x-template
Browser type
JavaScript HTML

JavaScript User
Template Structure Template
Data Underscore Template Function HTML Output
Template Structure <td> Element subject, priority, severity,

assignedTo, status Variable
priority severity Model 0, 1, 2

Priority: 1, Severity: 2
0, 1, 2
config Object 0
Minor, 1 Major config Object
Global Variable
JavaScript
1. var config = {
2. priority: ['Normal', 'Important', 'Urgent'],
3. severity: ['Minor', 'Major', 'Crash'],
4. status: ['Assigned', 'Doing', 'Done', 'Close']
5. };
Template Structure () config.status Loop

<select> Element <option>
User Issue Status Select Box
status Variable <option>
<option> selected Attribute () Condition
Underscore Template Variable <%= %> Template Element
JavaScript Code <% %> Template Element
<td> .del Class Element
Issue Element
App HTML Structure Issue List Table

Issue Form Issue Template
JavaScript Code Issue
Model Constructor
JavaScript

2. defaults: {
3. subject: 'Issue summary',
4. priority: 1,
5. severity: 1,
6. assignedTo: 'none',
7. status: 1
8. },
9.
11. this.save({status: value});
12. }
13. });
Model Default Data subject, priority, severity, assignedTo status

status changeStatus() Function
Collection Constructor
JavaScript

2. url: '#',
3. model: Issue
4. });
5.
6. var Issues = new IssueList();
Collection Constructor url # Sign Server

URL model
Issue Constructor Issues
Collection Object ()
Issue List Table Issue View Constructor
JavaScript
1. var IssueView = Backbone.View.extend({

2. tagName: 'tr',
3.
4. events: {
5. 'change .change-status': 'changeStatus',
6. 'click .del': 'delSelf'
7. },
8.
9. template: _.template( $('#row').html() ),
10.
12. this.listenTo(this.model, 'change', this.render),
13. this.listenTo(this.model, 'destroy', this.remove)
14. },
15.
17. var modelData = this.model.toJSON();
18. modelData.config = config;
19.
20. this.$el.html( this.template(modelData) );
21. return this;
22. },
23.
24. changeStatus: function() {
25. this.model.changeStatus( this.$('.change-status').val() );
26. },
27.
28. delSelf: function() {
29. this.model.destroy();
30. }
31. });
Issue <tr> Element tagName tr

Event Status Select Box changeStatus() Function
() View Model
changeStatus() Function View
MVC View User Interface
Logic Model
View Object Model Object
JavaScript
var issueOne = new Issue();

var view = new IssueView({model: issueOne});
this.model View Model Object
Event .del delSelf() Function

() delSelf() Function this.model
() template Property Template

Underscore Template Function
() initialize
Function listenTo() Model change render() Function
Run
Model destroy remove() Function Run

remove() jQuery remove() Function View Object

Object jQuery Function
Backbone remove() Function jQuery
remove() Function View Element DOM Structure
change render() Function
() render() Function render() Template

(.)
( (.) - Backbone View Structure
template Property Underscore Template this.template

Template Data this.model.toJSON()

HTML Structure
View Constructor Code ()

config Model JSON Object
Template Model Data config Template
Code subject, priority, severity Model Data
config App View Constructor
JavaScript
1. var AppView = Backbone.View.extend({

2. el: 'body',
3.
4. events: {
5. 'click #submit': 'addIssue'
6. },
7.
9. this.listenTo(Issues, 'add', this.addRow);

10. },
11.
12. addIssue: function() {
13. var newIssue = new Issue({
14. subject: $('#subject').val(),
15. priority: $('#priority').val(),
16. severity: $('#severity').val(),
17. assignedTo: $('#assigned-to').val(),
18. status: $('#status').val()
19. });
20.
21. Issues.add(newIssue);
22. },
23.
24. addRow: function(issue) {
25. var view = new IssueView({ model: issue });
26. $('#list').append( view.render().el );
27.
28. $('#subject, #assigned-to').val('');
29. $('#priority, #severity, #status').val(0);
30. $('#new').modal('hide');
31. }
32. });
View Element App View

<body> Element tagName Property ()
el Property body Event Form Dialog Box #submit
Button addIssue() Function #new Button
Form Dialog Box Bootstrap
() addIssue() Function Form Input

Issue Model
Issues Collection add ()
listenTo() Issues Collection Model addRow() Function
() addRow() Function
IssueView Object jQuery append() Function
#list Table
#new Form Dialog Box Input

#submit Issues Collection Model
Model IssueView #list

IssueView Status Select Box Status Model Status

.del
Model
Issue
Issue Table
Issue Status
Issue
App
App AppView Object

1. $(function() {
2. new AppView();
3. });
grunt serve Command App Run (.)

New Issue Button Issue
(.) - Example Backbone App - Issue List
Code HTML Document jQuery, Underscore, Backbone, Bootstrap

Library JavaScript CSS

Code

https://github.com/eimg/backbone-example/archive/master.zip
() User Registration Server

Issue Management System
Conclusion
Backbone
JavaScript MVC Framework
Backbone AngularJS
Framework
Framework

Angular Opinionated Framework Opinionated Framework Code

Framework Code Maintenance
Backbone Opinionated Framework MVC Pattern

JavaScript Code Foundation
Framework Code

Developer
Opinionated Framework Code

Code

Opinionated Framework
Framework
Developer SOLID,
MVC, TDD 10x Programmer
Code
JavaScript MVC Angular
Backbone AngularJS, EmberJS, KnockoutJS
JavaScript MVC
Backbone DocumentCloud, Hulu, Wordpress, Foursquare, Bitbucket, Disqus, Delicious, Khan

Academy, Basecamp, Airbnb, Pandora, Trello App
Scalable Proven Framework
Rockstar Developer Modern Development Stack

CPU Instruction
Input/Output Device


()
Rockstar Developer () NodeJS (Server-side JavaScript) 224
( ) NodeJS (Server-side JavaScript)
JavaScript Web Browser Client-side Script Language

Client-side JavaScript
Document Object Model (DOM) API HTML Element Interactive User
Interface XMLHttpRequest (XHR) API Server UI Client
HTML5 Media API, Web Storage API, Web
Socket API, File API, History API, Web GL API App Development JavaScript
API JavaScript

Ryan Dahl System Engineer NodeJS
JavaScript Client-side Scripting Language General
Purpose Programing Language Web Application
Application
Development Platform NodeJS Web Application
Server-side Web Developer
Server-side Client-side JavaScript
Server-side Language Client-side
Language NodeJS Client-
side Server-side JavaScript
Language

NodeJS Server-side NodeJS

Event Driven/Non-blocking IO Model Platform
Real-time Network App Data
I/O Heavy App
NodeJS (Server-side
JavaScript) Server-side
Web App App
Back-end Server Socket Server

NodeJS Ryan Dahl

Joyent
Cloud
NodeJS Open Source
Sponsor Joyent
NodeJS Version 0.12.2 Version 1.0 Major Release

NodeJS Microsoft, Paypal,
Yahoo, SAP NodeJS ()
Yeoman, Bower, Grunt NodeJS
NodeJS Project Ryan Dahl Timothy J.

Fontaine
Joyent Project
Project Decision

Fedor Indutny NodeJS Project io.js
Fork
NodeJS io.js Code Base Project
NodeJS V8 JavaScript Engine V8

Google Google Chrome Browser JavaScript
Engine
( (.) - NodeJS official Website - nodejs.org

NodeJS Community

NodeJS io.js NodeJS Major Version
NodeJS 4.0 Joyent Samsaung
Samsaung
NodeJS Version 6.2.2
10.1 Non-blocking I/O

I/O Input/Output Hard drive
I/O Database Table I/O
Server I/O
Finger Print, GPS, Accelerometer, Gyroscope Sensor Device
I/O Instruction Processes
I/O Process
Serialize Processes I/O

Size Instruction
() CPU
Process I/O Non-blocking I/O

Asynchronous I/O
Concurrency
Non-blocking I/O
Inter-process Communication
Run Operating System Memory Space System
Resource Process Instruction
Process Non-blocking I/O

Process
Memory I/O Process Process
Process

Process I/O
Process Process
I/O Process
Memory Memory Space Reference

Process Memory
Process
Inter-process Communication (IPC) Non-blocking I/O
IPC
Message Passing, Message Queue, Socket, Memory Mapped File
IPC

Non-blocking I/O
Time Sharing Thread
Thread
Process Instruction

Process Process Non-blocking
I/O
Thread Process
IPC

Implement
Language Platform Thread API

( (.) - Time Sharing Threads
Source Wikipedia
(.) Time Sharing Thread Process

Thread Instruction
Thread #2 Thread #1 Thread #1
Thread #2
Process
Time Sharing Thread
I/O Thread Instruction
Thread Thread
Thread
Hang
Resource Thread

NodeJS Non-blocking I/O

Callback
I/O Process
Process I/O
IPC I/O Process
Process
NodeJS I/O
Process I/O

Callback Function I/O

Callback Function Process
I/O

PHP
$data = file("bigfile.csv");
print_r($data);
// other processes
PHP Code file() Function bigfile.csv

Process
Process
JavaScript
1. var fs = require("fs");
2.
3. fs.readFile("bigfile.csv", "utf8", function(err, data) {
4. console.log(data)
5. });
6.
7. // other processes
NodeJS Code fs.readFile() Function bigfile.csv

Process
fs.readFile() Parameter
Callback Function
File Content

Callback Function Non-blocking I/O

Thread
Process
Thread
Resource Consumption Process Request
Network
10.2 Event Driven Architecture

Web App Graphical User Interface (GUI)
Event Driven Programing
Button Click

Image Load
Menu Mouse
UI Action Programing
Event Driven Architecture

Event Driven Programming

Event
User Interface Event

BackboneJS add, remove, reset, sort, error

Event
NodeJS
Custom Event Event

Pseudo-code
issue.on('assigned', function() {
// send notification to assignee
});
issue.on('done', function() {
// send notification to submitter
});
issue.on('close', function() {
// archive issue
});
UI Event onClick, onKeyPress, onMouseMove

assigned, done, close Event

10.3 Running JavaScript with NodeJS

() Yeoman Tool NodeJS NodeJS Install
Install nodejs.org Installer Download
Ubuntu Download
Install
$ sudo apt-get install nodejs nodejs-legacy
Install node Command NodeJS Console
Command Code
Command Code
NodeJS Console JavaScript Code
$ node
> console.log("Hello, World!");
Hello, World!
undefined
> function area(r) {

... var pi = 3.14;
... return pi * r * r;
... }
undefined
> area(8)
200.96
NodeJS Console JavaScript Code Run -e -p Option

$ node -e 'console.log("Hello, World")'
Hello, World
-e Option Evaluate -p Evaluate and Print

JavaScript Code Run
$ node script.js [args]
[args] script.js Run Arguments

Arguments NodeJS process.args
Object

script.js
JavaScript
console.log(process.args)
process.args script.js
Arguments Run
$ node script.js yo bower grunt
[ 'node', '/home/eimg/script.js', 'yo', 'bower', 'grunt' ]
yo, bower grunt Argument Run process.args

yo, bower grunt Array
node Path
Index process.args
Index
JavaScript
console.log(process.args.slice(2))
script.js
$ node script.js yo bower grunt
[ 'yo', 'bower', 'grunt' ]
script.js Run User Input

Command Argument Command Line NodeJS
Yeoman, Bower, Grunt Tool
Command Line
10.4 Debugging in NodeJS

JavaScript Debug node Command debug Argument
$ node debug script.js
NodeJS Debug Console () Debug

Code Break Point debugger Statement

JavaScript
1. var pi = 3.14;
2. function area(r) {
3. var a = pi * r * r;
4. debugger;
5. return a;
6. }
7.
8. console.log( area(8) );
9. console.log( area(12) );
() debugger Statement Node Debug

Break Code node debug Run
$ node debug script.js
< debugger listening on port 5858

connecting... ok
break in script.js:1
1 var pi = 3.14;
2 function area(r) {
3 var a = pi * r * r;
debug>
() Debug Console
cont () c Command
debug> c
3 var a = pi * r * r;
4 debugger;
5 return a;
6 }
debug>
debugger ()
repl Command JavaScript Code Run
Debug Console repl Console Variable

debug> repl
Press Ctrl + C to leave debug repl
> a
200.96
debug>
Variable a a
200.96 repl Console Debug Console
Ctrl+C Debug Console Break
Function Debug out () o
Command
debug> o
6 }
7
8 console.log( area(8) );
10
debug>
Function ()
next () n Command
debug> n
< 200.96
7
10
11 });
debug>
() n Command Debug
Function
step () s Command
debug> s
break in node.js:205
203 startup.globalConsole = function() {
204 global.__defineGetter__('console', function() {
205 return NativeModule.require('console');
206 });
207 };
debug>
() console.log() Function s Command

NodeJS console.log() Function

out () o Command

debug> o
7
10
11 });
debug>
()
cont () c
debug> c
3 var a = pi * r * r;
4 debugger;
5 return a;
6 }
debug>
area() Function area()

Function area() Function debugger Statement
debugger Statement repl Console
Variable a
debug> repl
Press Ctrl + C to leave debug repl
> a
452.15999999999997
debug> c
< 452.15999999999997
program terminated
debug>
a 452.159
Debug Mode
c Command

program terminated Message
Debug Console Command
cont, c
next, n
step, s Step In Platform Debug Step In
Function

out, o Step Out
Platform Debug Step Out
Function
Debug
pause

Debug Console help Command Command

Command Line Debug Node Inspector Package
NPM Install

$ npm install -g node-inspector
Node Inspector
Chromium Browser Dev Tool Firebug, Chrome Dev
Tool Debug Tool
Node Inspector JavaScript Code Debug
node-debug
Command
$ node-debug script.js
debugger listening on port 5858
Node Inspector is now available from http://127.0.0.1:8080/debug?port=5858
Debugging `script.js`
Node Inspector script.js Chrome Dev Tool

node-debug Command Message 127.0.0.1:8080/debug?
port=5858
URL Google Chrome () Chromium Browser Node Inspector UI
( (.) - Node Inspector

(.) script.js Node Inspector Debug

Continue, Step Into, Step Over, Step Out, Pause Debug Command Button
debugger Statement Break
Break Point Line Number Break Point
Variable Mouse
Side-bar Variable Function
Function NodeJS
Build-in Debug
Command Line UI

10.5 NodeJS Module

NodeJS
JavaScript JavaScript Language Feature

() JavaScript OOP Language
Feature Professional Web Developer () NodeJS
NodeJS
Module
JavaScript Code JavaScript Code

Client-side JavaScript JavaScript Module HTML
<script> Element JavaScript ()
JavaScript HTML Document
HTML
<script src="circle.js"></script>
<script src="square.js"></script>
<script src="area.js"></script>
CommonJS, RequireJS
NodeJS JavaScript Code JavaScript Module
require() Function

JavaScript
var http = require("http");

var express = require("express");
var measure = require("./circle.js");
require() Function NodeJS Build-in Module Module

NPM Install
Package
JavaScript Path NodeJS Module

JavaScript
1. exports.circle = function (r) {

2. var pi = 3.14;
3. return pi * r * r;
4. }
5.
6. exports.square = function (w, h) {
7. return w * h;
8. }
()
JavaScript
1. module.exports = {
2. circle: function (r) {
3. var pi = 3.14;
4. return pi * r * r;
5. },
6.
7. square: function (w, h) {
8. return w * h;
9. }
10. }
exports Object Function Property module

.exports Object Function Property
require() Function
Pseudo-code
var require = function(path) {

// load module or package or path
return module.exports;
}
require() Function Module () Package ()

module.exports Object return require()
Function Variable
JavaScript
var area = require("./area.js");

console.log( area.circle(8) ); // => 200.96
console.log( area.square(2, 4) ); // => 8
area.js Module area Variable area.js

Module
area
10.6 NodeJS Build-in Modules

NodeJS Command Line Back-end Service Network
Module Module
() File System Module Web Server
HTTP Module
File System Module

File System Module require() Function
JavaScript
var fs = require("fs");
File System Object fs Object File System Module
Function
fs.exists() Callback
JavaScript
fs.exists("path/to/file", function(result) {
if(result) console.log("File exists!");
});
fs.rename() Parameter
Callback
JavaScript
fs.rename("old.csv", "new.csv", function() {

console.log("Done renaming file.");
});
fs.unlink() Callback Function Parameter

fs.readdir() Directory Sub-directory

Array Callback Parameter
JavaScript
fs.readdir("path/to/dir", function(err, files) {

console.log(files);
});
fs.mkdir() Directory Directory

Callback Function Parameter
fs.rmdir() Directory Directory

Callback Function Parameter
fs.readFile() Content Content Callback

Parameter
JavaScript
fs.readFile("users.csv", "utf8", function(err, data) {

console.log(data);
});
Parameter Encoding utf8

Read
Encoding Encoding

fs.writeFile() () Content
Content Callback Function

JavaScript
fs.writeFile("fruites.csv", "This is file content.", function() {

console.log("Done saving data to file.");
});
fs.appendFile() Content
writeFile() Content Callback Function
writeFile() Content appendFile()
File System Function Synchronous

fs.renameSync(), fs.chmodSync(), fs.unlinkSync() Sync
Function
JavaScript
var data = fs.readFileSync("users.csv");

console.log(data);
File System Module Path Module

require()
JavaScript
var path = require("path");
Path Module Function
path.dirname() Path Directory
JavaScript
path.dirname("/path/to/file.csv"); // => /path/to
path.basename() Path
JavaScript
path.basename("/path/to/file.csv"); // => file.csv

path.basename("/path/to/file.csv", ".csv"); // => file
path.extname() Path Extension

JavaScript
path.extname("/path/to/file.csv"); // => .csv

path.extname("/path/to/file.csv.gz"); // => .gz
path.parse() Path Object
JavaScript
path.parse("/path/to/file.csv");
{
root: "/",
dir: "/path/to",
base: "file.csv",
ext: ".csv",
name: "file"
}
path.format() Object Path
JavaScript
path.format({
root: "/",
dir: "/path/to",
base: "file.csv",
ext: ".csv",
name: "file"
});
// => /path/to/file.csv
Function

File System Module
Path Module
https://nodejs.org/api/fs.html
https://nodejs.org/api/path.html
HTTP Module
NodeJS HTTP Module HTTP Server HTTP Client
NodeJS HTTP Web Server

HTTP Web Client HTTP Server
JavaScript
1. var http = require("http");

2.
3. http.createServer(function(req, res) {
4. res.writeHead(200, { "Content-Type": "text/html" });
5. res.write("Hello, World!");
6. res.end();
7. }).listen(8080);
HTTP Server http.createServer() Function

Request createServer() Callback Function
Parameter Response
Parameter Request req Object
Response res Object
HTTP Response Response Header Response Body

() res.writeHead() Function Response Header
Parameter Status Code Parameter Header
Option Status Code 200 OK Response Header
Option content-type: text/html Response
Header Status Code, HTTP Version, Content Type, Content Size, Encoding, Modified Date
Content Type
Option
Response Header Response Body res.write() Function

Request HTTP Server Hello, World!

Response Body Response Header Body
res.end() Function Run Response
Server Request Client
Server
http.listen() Function listen() Function
Server Port 8080
HTTP Server Code node Command Run HTTP Server Port
8080 Web Browser localhost:8080 Request
Hello, World!
Response Body
NodeJS HTTP Module Low Level Module

Request
HTTP Protocol
NodeJS HTTP Module HTTP

Request URI Path HTML Document Response

HTTP Server
JavaScript
1. var http = require("http");

2. var fs = require("fs");
3. var docroot = "/path/to/docroot";
4.
5. http.createServer(function(req, res) {
6.
7. var path = docroot + req.url;
8. var result = fs.existsSync(path);
9.
10. if (result) {
11. var body = fs.readFileSync(path, "utf8");
12. res.writeHead(200, { "Content-Type": "text/html" });
13. res.write(body);
14. } else {
15. res.writeHead(404);
16. res.write("404 Not found");
17. };
18.
19. res.end();
20. }).listen(8080);
21.
22. console.log("HTTP server running at port 8080...");
() Request URL Document Root Directory Path

() fs.existsSync()
Response Body Content 404 Not found
Request URL HTML Document Web
Server Code
Permission Directory Index

Package
Connect Serve Static
Package Static Web Server
NPM Install
$ sudo npm install -g connect serve-static

Install Static Web Server
JavaScript
var connect = require('connect');

var serveStatic = require('serve-static');
connect().use(serveStatic("/path/to/docroot")).listen(8080);
HTTP Module Connect Package HTTP Server

serveStacic() Function Parameter Directory
Document Root NodeJS Web Server
NodeJS HTTP Server Request http.get() Request

URL Callback Function Server Response
Callback Parameter jQuery $.get() Function

JavaScript
1. http.get("http://www.example.com/", function(res) {
2. res.setEncoding("utf8");
3. res.on("data", function (chunk) {
4. console.log(chunk);
5. });
6. });
Server Response res Variable Callback Function

Response
Header res.headers Property Response Status Code
res.statusCode() Function Response Body
() res.on('data') Event Callback Function
http.get() Function Request Method GET
Request Method Request http.request()
JavaScript
1. var options = {
2. hostname: "www.example.com",
3. port: 80,
4. path: "/api",
5. method: "POST"
6. };
7.
8. var req = http.request(options, function(res) {

9. res.setEncoding("utf8");
10. res.on("data", function (chunk) {
11. console.log(chunk);
12. });
13. });
14.
15. req.on("error", function(e) {
16. console.log(e.message);
17. });
18.
19. req.write("foo=bar");
20. req.end();
http.request() Request Option Callback Function Option

Request Header hostname,
port, path, method Request Header Option

Request Query String ()
req.write() Function Request req.end()
Function Run Request Server Request
http.get() Function req.end()
Run http.request()
req.end()
HTTP Module URL Module Query String Module

URL Module parse() format() Function
parse() Function URL Object
JavaScript
var url = require("url");

url.parse("http://example.com:8080/foo/bar.html");
{ protocol: 'http:',
slashes: true,
auth: null,
host: 'example.com:8080',
port: '8080',
hostname: 'example.com',
hash: '#two',
search: '?q=keywords',
query: 'q=keywords',
pathname: '/foo/bar.html',
path: '/foo/bar.html?q=keywords',
href: 'http://example.com:8080/foo/bar.html?q=keywords#two' }
format() Function Object URL
JavaScript
url.format({
protocol: 'http',
hostname:'example.com',
port: 8080,
pathname: '/foo/bar.html'
});
'http://example.com:8080/foo/bar.html'
Query String Module Global Scope require()

querystring Object querystring.stringify()
Function Object Query String
JavaScript
querystring.stringify({ foo: 'bar', baz: ['qux', 'quux'] });
'foo=bar&baz=qux&baz=quux'
querystring.parse() Function Query String Object
JavaScript
querystring.parse('foo=bar&baz=qux&baz=quux')
{ foo: 'bar', baz: ['qux', 'quux'] }
Other Build-in Modules

NodeJS Build-in Module
Crypto Hash, Encryption, Description

Module Hash Encryption Algorithm
String MD5 () SHA1 Hash Summary
JavaScript
var crypto = require('crypto');
var md5 = crypto.createHash('md5').update('Apple').digest("hex");

// 9f6290f4436e5a2351f12e03b6433c3c
var sha1 = crypto.createHash('sha1').update('Apple').digest("hex");

// 476432a3e85a0aa21c23f5abd2975a89b6820d63
Apple Hash Summary Text
DNS OS Domain Name Resolution Module Domain Name

IP address
JavaScript
var dns = require('dns');
dns.lookup('www.example.com', function (err, addresses) {

console.log('addresses: ' + addresses);
});
// addresses: 93.184.216.34
Net Client-server Model Network Module

Net Module Server
JavaScript
1. var net = require('net');

2.
3. var server = net.createServer(function(conn) {
4. console.log('Client connected');
5.
6. conn.on('end', function() {
7. console.log('Client disconnected');
8. });
9.
10. conn.write('Hello!\n');
11. conn.pipe(conn);
12. });
13.
14. server.listen(8124, function() {
15. console.log('Server started');
16. });
HTTP Module createServer() Server Client

Callback Function
Client write() Function

() conn.pipe(conn) Client

Client Client Server
HTTP Module Server
listen() Function Port
Net Module Client
JavaScript
1. var net = require('net');

2.
3. var client = net.connect({ port: 8124 }, function() {
4. console.log('connected to server!');
5. client.write('Hi!\n');
6. });
7.
8. client.on('data', function(data) {
9. console.log(data.toString());
10. client.end();
11. });
12.
13. client.on('end', function() {
14. console.log('Disconnected from server');
15. });
connect() Function Server Connect

Port Option Server
write() Function () data Event
Server
Function
HTTP Pull Protocol HTTP Client HTTP Server

Client Request Server
Client Request Server Response Net Module
Network Client Server
Client
Server Full Duplex
OS CPU Usage, Memory Usage, Server Uptime, Hostname Operating System

OS Module
Punycode Unicode Character ASCII Character Punycode ASCII

Character Unicode
JavaScript
var punycode = require("punycode");

punycode.encode(""); // => nid
punycode.decode("nid"); // =>
Util isArray(), isRegExp(), isDate() Validation Function Module

format() Function inherits() Function
format() Function String Format
JavaScript
var util = require('util');

var id = 1, err = "Error", date = "2015-04-15";
util.format("ID: %d, Msg: %s, Date: %s", id, err, date);
// => ID: 1, Msg: Error, Date: 2015-04-15
String Placeholder format() Function

%d Placeholder Text %s
Place-holder Variable String
+ Operator
console.log() Function
format() Placeholder
JavaScript
console.log("ID: %d, Msg: %s, Date: %s", id, err, date);
// => ID: 1, Msg: Error, Date: 2015-04-15
inheirts() Function Object Constructor Inheritance
JavaScript
var Person = function() {};

var User = function() {};
uril.inherits(User, Person);
User Constructor Person Constructor Inherit
Zlib Compress/Decompress Compress Gzip,

Deflate Method Deflate Method Content
Compress

JavaScript
var zlib = require("zlib");

var input = "Hello, World!";
zlib.deflate(input, function(err, buffer) {

console.log( buffer.toString('base64') );
});
// eJzzSM3JyddRCM8vyklRBAAfngRq
Deflate Gzip zlib.gzip() Compress

Content Decompress zlib.unzip()
JavaScript
var buffer = new Buffer("eJzzSM3JyddRCM8vyklRBAAfngRq", "base64");
zlib.unzip(buffer, function(err, buffer) {

console.log(buffer.toString());
});
// Hello, World!
Unzip Compression Method Detect

Decompress Method
Build-in Module Buffer, Process, Stream, Readline Performance Optimization

Low Level Module Build-in Module
https://nodejs.org/api/
Third-party Modules
Build-in Module Third-party Module NPM Install
MySQL Database NodeJS
Node MySQL Module NPM Install

$ npm install mysql
-g Option Install Command Run Package

Global Package Install require() Module
Local Module Project Directory Install

Project
Module Install MySQL

JavaScript
1. var mysql = require('mysql');

2.
3. var conn = mysql.createConnection({
4. host: 'localhost',
5. user: 'root',
6. password: '' ,
7. database: 'dbname'
8. });
9.
10. conn.connect();
11.
12. conn.query('SELECT * FROM table', function(err, rows) {
13. console.log(rows.length);
14. });
15.
16. conn.end();
mysql.createConnect() Function Connection

Host Name, User Name, Password, Database Name
Connection Object connect() Function MySQL Server
Database Query
()
query() Function Query SELECT Query Rows
Callback Function Parameter Query INSERT,
UPDATE, DELETE Query Result Object Callback Function Parameter

JavaScript
conn.query('INSERT INTO table (value, value)', function(err, result) {

console.log(result.insertId);
});
conn.query('DELETE FROM table WHERE id = 123', function (err, result) {

console.log(result.affectedRows);
})
MySQL Professional Web Developer () Node MySQL

https://www.npmjs.com/package/mysql
Database MongoDB
Third-party Module Module ExpressJS,
Grunt, Bower, Yeoman, Cordova, LESS, CoffeeScript, Jade, Karma Module
Yeoman, Bower Grunt () ExpressJS
() Cordova
LESS CSS Pre-processor Coffee Script JavaScript Pre-processor

Jade HTML Template System HTML/CSS/
JavaScript Pre-processor
Pre-processor
Code
Karma Test Runner () TDD Qunit Test

Framework Karma Qunit Test Framework
Qunit () Test Framework Test Run Test Runner

Third-party Module Module Author Module

Author Documentation Third-party Module NPM
Package npmjs.org
10.7 Custom Events

NodeJS Custom Event Event Module EventEmitter

Event Client
Radio Station Service
JavaScript
1. var util = require('util');

2. var EventEmitter = require('events').EventEmitter;
3.
4. var Radio = function(station) {
5. var self = this;
6.
7. setTimeout(function() {
8. self.emit('start', station);
9. }, 0);
10.
12. self.emit('next', station);
13. }, 5000);
14.
16. self.emit('close', station);
17. }, 10000);
18. };
19.
20. util.inherits(Radio, EventEmitter);
21. module.exports = Radio;
() Radio Constructor Constructor Object

start Event Emit ()
setTimeout() Timeout 0 Object

() () next Event Emit

() () close Event Emit

this.emit()
Event
() util.inherits() Radio Constructor EventEmitter Inherit
Inherit
Radio Object emit() Function
Module
JavaScript
1. var Radio = require('./radio.js');

2.
3. var station = {
4. name: 'City FM Radio',
5. };
6.
7. var radio = new Radio(station);
8.
9. radio.on('start', function(s) {
10. console.log('%s "%s" STARTED', new Date(), s.name);
11. });
12.
13. radio.on('next', function(s) {
14. console.log('%s "%s" NEXT SONG', new Date(), s.name);
15. });
16.
17. radio.on('close', function(s) {
18. console.log('%s "%s" CLOSED', new Date(), s.name);
19. });
() radio Object Radio Constructor

() start Event Function
() () next close Event Function
Custom Event Code
Event Function s Variable Event Emit

Server Module
Custom Event Event
Event Emit

App
$ node app.js
Thu Apr 16 2015 02:09:52 GMT+0630 (MMT) "City FM Radio" STARTED

Thu Apr 16 2015 02:09:57 GMT+0630 (MMT) "City FM Radio" NEXT SONG
Thu Apr 16 2015 02:10:02 GMT+0630 (MMT) "City FM Radio" CLOSED
radio Object on() Function Event Function

Radio Constructor on()
Function on() Function EventEmitter
Function on() once() Function
on() Function Event once() Function Event

Event Emitter NodeJS Event

Architecture
Conclusion
NodeJS () JavaScript
Back-end Client-side Programing

JavaScript JavaScript Developer
Language
NodeJS
Non-blocking I/O
App Non-blocking I/O
Thread Process
App

Even Driven Architecture Architecture

Responsive Real-time Network App NodeJS NodeJS
I/O Heavy App JSON API Back-end Real-time App

App JSON API Back-end App

Common Practice Client Server
Real-time
App
NodeJS Rockstar Developer

Data
Database Terabyte
Data


NodeJS

()
Rockstar Developer () MongoDB (NoSQL Database) 258
( ) MongoDB (NoSQL Database)
MongoDB Document-oriented, NoSQL Database Open Source

NoSQL Database Database
MongoDB BSON
JSON Data
Format Administration Shell JavaScript
Ajax, HTML5, NodeJS Software Development
JavaScript Database
11.1 NoSQL
Relational Database Management System (RDBMS) MySQL, Oracle, MSSQL Database
() Data Model
Schema Data Data Structure

( (.) - Database Schema RDBMS
Source thoughtworks.com
(.) RDBMS Orders,

Customers, Credit Cards Table Table
Data Structure Customers Table Customer
Name, Address, Phone Order Lines Table Item Name,
Category, Price Table
Data Set SQL JOIN Statement
Structure Relationship Design
Structure
RDBMS ACID Compliance ACID

Atomicity, Consistency, Isolation Durability
Transaction Rollback

Foreign Key Relationship

Locking
Access

RDBMS Database
Data
RDBMS

Scalability
Software Distributed Software

App
Database
Database 500GB Storage Capacity Server Setup

500GB Storage Capacity
Server Hard Drive Vertical Scaling

Vertical Scaling
Database Network Cluster Deploy

Capacity
Server Cluster Server Node
Horizontal Scaling Scalable Database

Horizontal Scale
RDBMS Cluster Replication

Storage
Capacity Performance
RDBMS Cluster Deploy
RDBMS

Record Node
Table Relationship
Relationship Structure Node

Scale
Release
App
Infrastructural
Scale Up
Scale Up
Down

Scale Down Scale Up / Scale Down
Cloud Visualization Database

Network Cluster Deploy RDBMS

NoSQL Database Scalability

Horizontal Scale
NoSQL
Database
Relationship
( (.) - NoSQL Data Set
Source couchbase.com
(.) NoSQL Data

RDBMS Data RDBMS User Info
Table Address Info Table
User Table
User Zip Id User

Zip
Id Address Info NoSQL

User

Data Duplicate Storage
NoSQL Database Cluster Deploy

Storage
Relationship
Process
Node
Scalability Load Balancing

Build-in Node Fail
Node Build-in
RDBMS
Setup
Unstructured Data

Software Data

Software Data
User Desktop User Data
Mobile User Third-party Service
Data Service Data
Structure Data User Input Data
Error Log Traffic Statistics Usage Behavior User Location Data
Software Data

Data Schema

( (.) - Data Evolution
Source couchbase.com
(.) Unstructured Data Structured

Data Software Unstructured Data
Database Unstructured Data

Structure Relationship
RDBMS Unstructured Data
Web App Mobile App

Software Software
()

Database Data Structure
Data Structure

Data
Data Structure

Data Structure

Structure Relationship Iterative Development

Requirement Specification Agile
Iterative Development, SCRUM

Coding

Data Structure
Requirement Specification Coding Spec
Iterative Development Data Structure

Coding
Data Structure
NoSQL Database NoSQL Database Data

RDBMS SQL Query Developer
Object-oriented API
11.2 Types of NoSQL Database

NoSQL Database ()
Key-Value Store,
Column Families Store,
Document Store
Graph Database
Key-Value Store Hasg Array

NoSQL Key
Key
Redis
SET foo bar
foo Key bar

Redis
GET foo // => bar
Code List Array Data Storage

Programing Language Array Function
Key-Value Store API
Key-Value Store Memory

File System

Performance
File System Memory
Cache App State Data
Traffic Statistic Data Usage Behavior Data
Key-Value Store Redis, DynamoDB Raik
Column Families Store RDBMS Table RDBMS Table

Table Structure Column Row
Column Families Store Column
Row
Row Row Column

( (.) Column Families Store
Column Families Store Cassandra Hbase
Cassandra Column Families Store Row Data

Row

Document Store Table Row Document

Document
Structure
JSON, BSON, XML Format
( (.) Document Store
Document Store Key-Value Store Key-Value Store

Value Document Store Value Key-Value
Document
Document Store MongoDB CouchDB
Key-Value Store Key Value

Key Key Key-
Value Store Value Value Document
Store Key Value
Document Store Content App
App Content App MongoDB Document
Store NoSQL Database
Graph Database Graph Theory

Database Graph Node, Property Edge
Node Record Set
Node
Property Edge
Property Node
Content Edge Node Node
( (.) - Graph Database
(.) BigCo
Node
Address, Product, Service Property Anna

Node Node Email, Position, Marital Status Property
Anna Node Employee Edge Edge
BigCo Employee Edge Employee Since
Relationship Unidirectional Relationship
Graph
Anna BigCo Employee
Martin Pramod Node Friend Edge

Bidirectional Relationship
Edge
Martin Friend
Edge Pramod Pramod Friend Edge Martin
Graph Database Node Content

Property Edge RDBMS Table Relationship
RDBMS Relationship Table Graph Database
Node Relationship
Graph Database App

Social Network Account Friend
Follower Follow

Social Network App Graph Database App
Graph Database Noe4J
11.3 MongoDB
MongoDB Document Store NoSQL Database Client-Server
Database Server Client Software
MongoDB Installer Version
mongodb.org Download Installer mongod, mongo, mongoexport,
mongoimport, mongodump, mongorestore Command Line Tool
mongod MongoDB Server Administration Tool mongo MongoDB Server

Data Client Tool Mongo Shell
Mongo Shell Mozilla JavaScript Engine SpiderMonkey JavaScript Engine
Mongo Shell
NodeJS Console
JavaScript Console
Command Mongo Shell

MongoDB Version

MongoDB 2.4.9 MongoDB Version
Shell
Ubuntu MongoDB Install

$ sudo apt-get install mongodb
Ubuntu Official Repository MongoDB Version

Version mongodb.org Download
MongoDB Version 3.0.2 Ubuntu 14.04

Repository MongoDB Version 2.4.9
Ubuntu apt-get MongoDB Install Install Ubuntu MongoDB

Server apt-get Install Manual Install
Install MongoDB Server
$ sudo service mongod start
Ubuntu MongoDB Version Manual Install

Installation Instruction

http://docs.mongodb.org/manual/tutorial/install-mongodb-on-ubuntu/
Windows Installation Instruction

http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/
Install MongoDB Server Run mongo Command Mongo Shell

Mongo Shell help Command Run
Command
$ mongo
MongoDB shell version: 2.4.9

connecting to: test
> help
db.help() help on db methods

db.mycoll.help() help on collection methods
sh.help() sharding helpers
rs.help() replica set helpers
help admin administrative help
help connect connecting to a db help
help keys key shortcuts
help misc misc things to know
help mr mapreduce
show dbs show database names

show collections show collections in current database
show users show users in current database
show profile show most recent system.profile

MongoDB Database Server Database show dbs Command

Database Database use Command
> show dbs
local 0.078125GB
> use mydb
switched to db mydb
> db
mydb
> show dbs
local 0.078125GB
> db.users.insert({"name": "John Doe"});

> show dbs
local 0.078125GB
mydb 0.203125GB
>
show dbs Database

local Database use mydb Command mydb
Database mydb Database Mongo Shell
mydb Database use
Command Database Database

db Command Database db
Command Run mydb
show dbs Database

mydb
Database
Document insert() Function Document
db.users. insert() Database mydb
users Collection Document
Document Content {"name": "John Doe"}
RDBMS Record Table MongoDB Document Collection

Document show dbs Run Database mydb

MongoDB Document BSON Format BSON

Format JSON Data Type JSON
JavaScript JavaScript Number Data Type
BSON Integer
Data Type Double Data Type Data
Type Date Byte Array Date Unix Timestamps Byte
Array Binary Data
Database db.dropDatabase()
> db.dropDatabase()
{ "dropped" : "mydb", "ok" : 1 }
>
11.4 CRUD Operations in MongoDB

RDBMS Record Table
MongoDB Document
Collection db.createCollection() Collection

> use mydb
switched to db mydb
> db.createCollection("issues")
{ "ok" : 1 }
> show collections
issues
system.indexes
>
mydb Database issues Collection

Collection Document
> db.users.insert({name: "John Doe"})

> show collections
issues
system.indexes
users
>
users Collection db.users.insert()

users Collection Document MongoDB
users Collection show collections
Collection users
Collection drop() Function
> db.users.drop()
true
> show collections
issues
system.indexes
>
Collection Document insert() Function

insert()

> db.issues.insert({
... subject: "Dropdown menu not working",
... priority: {
... value: 2,
... label: "Important"
... },
... severity: {
... value: 1,
... label: "Minor"
... },
... assignedTo: {
... name: "John Doe",
... userId: 1
... },
... status: {
... value: 1,
... label: "Assigned"
... }
... })
>
issues Collection Document

priority
value: 2 label: "Import" RDBMS
priority: 2
2 Label Priority Table JOIN
Relationship Priority 2 Label
Important Document
Array
> db.users.insert([
... { name: "John Doe", role: "Admin" },
... { name: "James Smith", role: "Tester" }
... ])
>
Document find()
> db.users.find()
{ "_id" : ObjectId("55350aea459cc324c59cf1aa"), "name" : "John Doe", "role" :

"Admin" }
{ "_id" : ObjectId("55350aea459cc324c59cf1ab"), "name" : "James Smith", "role"
: "Tester" }
>
Document _id Attribute

Document _id Attribute Document
_id MongoDB Auto Generate
Generate _id Unique MongoDB
Formate
4 bytes Timestamps
3 bytes Machine ID
2 bytes Process ID
3 bytes Auto-Increment Counter
_id () 12 bytes Hexadecimal String Document

_id Primary Key MongoDB
Generate ID ID Document
_id Attribute Unique
find() _id ObjectId() Function

ObjectId() Function ID Timestamps
Sorting Timestamps

> db.users.find()

"Admin" }
: "Tester" }
> ObjectId("55350aea459cc324c59cf1aa").getTimestamp()
ISODate("2015-04-20T14:19:22Z")
> ObjectId("55350aea459cc324c59cf1aa").str
55350aea459cc324c59cf1aa
>
ObjectId() Function getTimestamp() ID

str Attribute ID String
Collection Document save()
> db.users.find()

"Admin" }
: "Tester" }
> db.users.save({
... _id : ObjectId("55350aea459cc324c59cf1aa"),
... name: "John Doe",
... role: "Developer"})
> db.users.find()

"Developer" }
: "Tester" }
>
User John Doe role Admin Developer save() Function

save() Function _id ID Document Update

find() Function Format pretty()

> db.users.find().pretty()
{
"_id" : ObjectId("55350aea459cc324c59cf1aa"),
"name" : "John Doe",
"role" : "Developer"
}
{
"_id" : ObjectId("55350aea459cc324c59cf1ab"),
"name" : "James Smith",
"role" : "Tester"
}
>
find() Function Query - users Collection

role: "Tester"
> db.users.find({ role: "Tester" } )
Nested Object Document

insert() Document priority, status
Object Nested Object
Query
Status Nested Object Value 1 Document Query
> db.issues.find({ "status.value": 1 })
AND Query
> db.issues.find({ "status.value": 1, "severity.value": 3 })
OR Query
> db.issues.find({
... $or: [
... { "status.value": 1 },
... { "severity.value": 3 }
... ]
... });
>
Greater Than, Less Than Comparison
> db.issue.find({
... "status.value": { $gt: 1 }
... })
>
$gt Greater Than status.value 1 Document

$gt $lt, $gte, $lte, $ne
$gte Greater Than or Equal $ne Not Equal
RDBMS LIKE Statement Filter Regular Expression
> db.issues.find({ subject: /menu/ })
subject Attribute menu

Document
Regular Expression
Filter Regular Express find() Function

RDBMS SELECT Query Field List find() Function Query

Document Attribute
> db.users.find({}, { name: 1 })
{ "_id" : ObjectId("5537b3036831dbd2140f548e"), "name" : "John Doe" }

{ "_id" : ObjectId("5537ba0b6831dbd2140f548f"), "name" : "James Smith" }
>
find() Function Parameter Attribute List

Attribute 1 _id Field List

find() Function Document limit()

Function
> db.users.find().limit(2)
limit(2) find() Function Document ()

RDBMS Offset Index
MongoDB skip() Function
> db.users.find().skip(5).limit(10)
users Collection Document ()

() () find() Function
Sorting sort() Function
> db.issues.find().sort({ priority: 1, status: 1 })
issues Collection Document priority

priority Document status
1 -1
Collection Document remove() Function

Document Query users Collection
role: "Tester" Document
> db.users.remove({ role: "Tester" })
Query Document
> db.users.remove({ role: "Tester"}, 1);
remove() Query Run Document
save() Function Document Overwrite

Overwrite update()
> db.users.update(
... { role: "Developer" },
... { $set: { role: "Programmer" } }
... { multi: true }
... )
>
role: "Developer" Document role: "Programmer"

Update update() Function Parameter ()
Query Value Set
Option Query Document Update

Update multi: true Option false
RDBMS SQL Query Create, Read, Update, Delete (CRUD)

MongoDB insert(), find(), update(), remove() Function

CRUD
11.5 Indexing in MongoDB

RDBMS Read Performance Index
MongoDB Index createIndex() Function

> db.issues.createIndex({ status: 1 })
issues Collection Index Index Attribute

status status Query Document
Index Performance
Index Option
> db.issues.createIndex({ _id: 1 }, {

... name: "PrimaryKey",
... unique: true,
... sparse: true
})
>
name Option Index Name Index Name

MongoDB Index Name Generate
unique Option true Index Unique Index
Index
Attribute Document Collection
Document Index sparse Option true
Index dropIndex() Function

Index Name () Index
Attribute
> db.issues.dropIndex("PrimaryKey")
> db.issues.dropIndex({ status: 1 })
Index dropIndexes()
Index getIndexes()
> db.issues.getIndexes()
MySQL MyISAM Storage Engine Text Search Full-text Index

MongoDB Text Index
Text Index Index
Search Engine Noise Stop Words
Stemming Stemming

wait waiting, waited, waits
Text Index
> db.issues.createIndex({ subject: "text" })
Index 1 Text Index text

Text Index { "ok": 0, "errmsg": "text search not enabled" } Error Message
Text Index
Enable
> db.adminCommand({ setParameter: "*", textSearchEnabled: true })
{ "was" : false, "ok" : 1 }
Text Search Enable Text Index Text Index

runCommand()
> db.issues.runCommand("text", { search: "menu" })
{
"queryDebugString" : "menu||||||",
"language" : "english",
"results" : [
{
"score" : 0.6666666666666666,
"obj" : {
"_id" : ObjectId("553508f5459cc324c59cf1a9"),
"subject" : "Dropdown menu not working",
"priority" : {
"value" : 2,
"label" : "Important"
},
"assignedTo" : {
"name" : "John Doe",
"id" : 1
},
"status" : {
"value" : 1,
"label" : "Assigned"
}
}
}
],
"stats" : {
"nscanned" : 1,
"nscannedObjects" : 0,
"n" : 1,
"nfound" : 1,
"timeMicros" : 197
},
"ok" : 1
}
>
runCommand() Function menu

Keyword Text Index
menu Keyword Document result score
score Relevant Value Keyword
Document Relevant
score
Sorting Relevant Search Result
RDBMS Index, Unique Index Full Text Index MongoDB
11.6 Access Control in MongoDB

MongoDB Authentication
Credential Default MongoDB Access Control
Access Control admin User

> use admin
switched to db admin
> db.addUser("root", "root")
{
"user" : "root",
"readOnly" : false,
"pwd" : "2a8025f0885adad5a8ce0044070032b3",
"_id" : ObjectId("5536899f1d331f653a28893e")
}
>
admin Database db.addUser() Admin User

Account Username: root Password: root

Access Control /etc/mongodb.conf

auth=true
Setting MongoDB Restart
$ sudo service mongodb restart
Mongo Shell Access Control Error
> use admin
> show collections
Wed Apr 22 00:11:07.267 error: {

"$err" : "not authorized for query on admin.system.namespaces",
"code" : 16550
} at src/mongo/shell/query.js:128
>
Username, Password
db.auth() Function Authenticate

> db.auth("root", "root")
> show collections
system.indexes
system.users
Admin User User Account Database

> use mydb
switched to db mydb
> db.addUser("user", "user")
{
"user" : "user",
"readOnly" : false,
"pwd" : "fa26a506aa0f786a447bbd6d1caaa8b5",
"_id" : ObjectId("55368c6c3e0d2164a31a2ec8")
}
>
Admin User Database User

Database
> use admin
> db.auth("user", "user")
Error: 18 { code: 18, ok: 0.0, errmsg: "auth fails" }

0
>
mydb Database User admin Database Authenticate

auth fails Error Data Access
Readonly User Account addUser() Function
Parameter true
> db.addUser("user", "user", true)
{
"user" : "user",
"readOnly" : 1,
"pwd" : "fa26a506aa0f786a447bbd6d1caaa8b5",
"_id" : ObjectId("55368d46d3bc6702df267302")
}
>
Readonly User
> use mydb
switched to db mydb
> db.auth("user", "user)

> show collections
issues
system.indexes
system.users
users
> db.createCollection('comments')
{ "ok" : 0, "errmsg" : "unauthorized" }
>
Access Control
MongoDB Version 2.4 MongoDB
Version 2.6 Access Control addUser()
Function User Account Role
createUser() Function Access Control
http://docs.mongodb.org/manual/tutorial/add-user-to-database/
11.7 MongoDB Backup and Restore

MongoDB Database mongodump Tool Backup
-
$ mongodump -d mydb -o /path/to/output
-d Option Backup Database -o Option Backup

Directory -d Option Database Database
Backup -o Option Output Directory
Command Run Directory Backup
Database Access Control Username, Password

auth fails Error Message Username -u Option Password -p Option

$ mongodump -u username -p password -d mydb -o /path/to/output
Collection Backup -c Option

$ mongodump -d mydb -c issues -o /path/to/output
mydb Database issues Collection Backup
mongodump Backup
Restore mongorestore
Backup Directory Run
Director Run Backup Access Control

$ mongorestore /path/to/backup -u username -p password
Restore Collection Drop Restore

--drop Option Collection Database -d Option

$ mongorestore /path/to/backup -d mydb --drop
Backup Collection mydb Database Restore

mydb Database Collection Collection Drop
Restore
Backup mongoexport mongodump

Binary Data Backup mongoexport JSON () CSV
Backup
$ mongoexport -d mydb -c issues -o export.json
mydb Database issues Collection JSON Format Export

-o Option export.json
-o Option Terminal Output CSV
Format
--csv Option Export
$ mongoexport -d mydb -c issues -f "subject,status" --csv -o

export.csv
Export
Field List -f Option Access
Control Username, Password -u, -p Option

mongoexport
Backup Restore
mongoimport

$ mongoimport -d mydb -c issues < export.json
mydb Database issues Collection export.json

Restore mongorestore Collection Drop
--drop Option
11.8 MongoDB Administration Tool

MongoDB Command Line Admin Tool
Admin Tool

http://docs.mongodb.org/ecosystem/tools/administration-interfaces/
Robomongo
Admin Tool
Robomongo Windows, Linux, Mac Platform Tool
robomongo.org Installer Download
Robomongo Install Connection Setting File

Connect Menu
Connection Setting Manager
( (.) - Robomongo - Connection Manager
Right Click Add Connection Dialog Box

Connection Name Address localhost Port
27017 Database Access Control
Username, Password

Connection Connect
( (.) - Robomongo - Main Interface

(.) Database Explorer View Explorer

Database Database Explorer Connection Right
Click Create Database Collection
Database Right Click
Collection Document
Document Tree View, Table View, Document View View
Toolbar Button View
( (.) - Robomongo - Document Editor
Document Create, Read, Update, Delete Document Right Click

Document Document

() Database Explorer Collection Right Click Insert Document
Robomongo Document Editor Document
Command Line Mongo Shell
Index Collection Index Folder Right Click

Robomongo Mongo Shell Mongo
Shell Robomongo
Shell Command Tab Bar Right Click New Shell

Mongo Shell Robomono Shell Window
(.) Auto-complete

Shell Command Run Ctrl+R Run Tab

Right Click Re-execute Query Run
( (.) - Robomongo - Auto-Complete in Shell
Mongo Shell Command Line Admin Tool

NoSQL Database
Scale MongoDB Scale

Replication, Shard ()
MongoDB Admin Tool Database Collection
Replication Shard Admin Tool
Admin Tool
11.9 Using MongoDB with NodeJS

MongoDB NodeJS Official JavaScript Driver Install
$ npm install mongodb
Official Driver Mongo Shell Command mongojs
NPM Package
Mongo Shell
mongojs Official Driver mongojs
mongojs Install
$ npm install mongojs
Project NPM Package Local Module Project Director Install

mongojs Install Local
Module Install mongojs MongoDB
JavaScript
1. var mongojs = require("mongojs");

2. var db = mongojs('mydb', ['issues', 'users']);
3.
4. db.users.find(function(err, data) {
5. console.log(data);
6. db.close();
7. });
() mongojs MongoDB Server mydb Database

Collection Array
issues users Collection
db
Mongo Shell Command () users
Collection Document db.users.find() MongoDB
users Collection Document Callback Function data Variable
Array
() db.close() MongoDB Server

Database
Connection
Database Access Control
()
JavaScript
var db = mongojs('username:password@localhost/mydb', ['issues', 'users']);
Username, Password MongoDB
Create, Read, Update, Delete Mongo Shell

find() Function Query
JavaScript
1. db.issues.find({ status: { $gt: 2 } }, function(err, data) {

2. console.log(data);
3. db.close();
4. });
status 2 Document Query

Document
JavaScript
1. db.users.insert({
2. name: "Ei Maung",
3. role: "Developer"
4. }, function() {
5. db.close();
6. });
Document
JavaScript
1. db.users.remove({
2. _id: mongojs.ObjectId("5537b76a292e04f67d2af4c1")
3. }, function() {
4. db.close();
5. });
ObjectId() Function mongojs

Document Update
JavaScript
1. db.users.update(
2. { role: "Admin" },
3. { $set: { role: "Developer" } },
4. { multi: true },
5. function() {
6. db.close();
7. }
8. );
Callback Function Mongo Shell

Index runCommand()
Text Index
JavaScript
1. db.issues.createIndex({ subject: "text" }, {}, function() {

2. db.close();
3. });
Text Index
JavaScript
1. db.issues.runCommand("text", { search: "menu" }, function(err, result) {

2. console.log(result);
3. db.close();
4. });
NodeJS Event Driven, Non-blocking I/O

MongoDB Scalability
Database App

RDBMS ORM Library NodeJS

mongoose
ODM Module Relational Database
ORM ODM
ORM mongoose
mongoose
mongoosejs.com
Conclusion
RDBMS NoSQL Database
RDBMS ACID Compliance
NoSQL Not Only SQL
RDBMS RDBMS
Software
RDBMS NoSQL Database
RDBMS Cache
Real-time Data, State Data Unstructured Data NoSQL Database
Software Project Database

ACID Compliance Scalability

Software (
Finical Solution) RDBMS
Software ( Communication App) NoSQL
Database
MongoDB Replication Sharded Cluster

()
Framework
Opinionated Framework
Framework
Unopinionated Framework


Download
http://pwdbook.com
Rockstar Developer () ExpressJS (REST Framework) 294
( ) ExpressJS (REST Framework)
ExpressJS NodeJS REST Framework Full-scaled App

Development Framework
REST API Service

Routing, Request/Response Handling
Unopinionated Framework
() Service Oriented Architecture (SOA) HTTP REST

Protocol
REST Web Service HTTP
() NodeJS NodeJS HTTP Module Low Level Module

ExpressJS NodeJS HTTP Module Function

12.1 Simple ExpressJS App

ExpressJS NodeJS Module NPM Install

$ npm install express
Install ExpressJS listen(), get() res.send() Function

Web Service
Code Code

listen() Function Web Server Run get() Function Client Request

send() Function Client Response
JavaScript
1. var express = require("express");

2. var app = express();
3.
4. var server = app.listen(3000, function(){
5. console.log("ExpressJS server running on port 3000");
6.
7. app.get('/', function(req, res){
8. res.send("Home Page");
9. });
10.
11. app.get('/about', function(req, res){
12. res.send("About Us Page");
13. });
14. });
() listen() Function Port 3000 Web Server Run

() get() Function URI Request
res.send() Home Page Text Response Respond
() /about URI About Us Page Text
Response Code server.js Run
$ node server.js
ExpressJS server running on port 3000
Web Browser localhost:3000 Home Page

Response
localhost:3000/about About Us Page
Response
URI Request Method Response

get() Function GET Request Method
POST, PUT, DELETE Request Method get() post(),
put(), delete() Function
Text Response Response

res.send() res.sendFile()
JavaScript

3.
6.
8. res.sendFile( __dirname + "/index.html" );
9. });
10.
12. res.sendFile( __dirname + "/about.html" );
13. });
14. });
URI Request
index.html Response
/about URI Request
about.html Response
__dirname Constant Directory Absolute Path
res.sendFile() Static Response

Dynamic Template Response res.render() Function
res.render() Function Jade, Ejs, Handlebar JavaScript Template Engine
Ejs Ejs Template Engine
Install
$ npm install ejs
Code
JavaScript

3.
4. app.set('views', './views');
5. app.engine('html', require('ejs').renderFile);
6.
9.
11. res.render("index.html");
12. });
13.
15. res.render("about.html", { greeting: "Hello, World!" });
16. });
17. });
() app.set() Function HTML Template Directory

HTML Template views Directory
() app.engine() Function html Extension
Ejs Template Engine
() res.render() Function
about.html Response Response
JSON Object
Ejs
() BackboneJS
Underscore Template JavaScript Code HTML
<% %> Tag Output
<%= %> Tag
about.html
Template
<h1>About Us</h1>
<p><%= greeting %></p>
localhost:3000/about Request about.html Response

HTML
<h1>About Us</h1>
<p>Hello, World!</p>
greeting Variable Hello, World! Ejs
Text Static Dynamic Template Response App

User Interface Template

ExpressJS BackboneJS UI Client
ExpressJS UI Client
Service
BackboneJS ExpressJS
App ()
res.send(), res.sendFile() res.render() Response Function

res.download(), res.json(), res.jsonp()

res.download() Function res.sendFile() Response
Client Download res.json()
res.jsonp() Function send() Text Response
Response Content-Type Header JSON
12.1 Routing
REST API Web Service
HTTP Request Method URL
ExpressJS Routing
Function
App URL Structure
Request Method URL Purpose
GET users/ User
GET users/123 User 123
POST users/ User
PUT users/123 User 123
DELETE users/ User
DELETE users/123 User 123
ExpressJS
URL Structure
JavaScript
app.get("/users", function(req, res) {

console.log("Getting user list");
});
app.get("/users/:id", function(req, res) {

var userId = req.params.id;
console.log("Getting user %s", userId);
});
app.post("/users", function(req, res) {

console.log("Creating a new user");
});
app.put("/users/:id", function(req, res) {

console.log("Updating user %s", userId);
});
app.delete("/users", function(req, res) {

console.log("Removing all users");
});
app.delete("/users/:id", function(req, res) {

console.log("Removing user %s", userId);
});
/users URL GET Method Request app.get("/users") Callback Function

/users URL POST Method Request app.post("/users")
Callback Function Request Method
REST API Web Service ExpressJS
:id URL Parameter :id

Parameter URL Pattern
JavaScript
app.get("/users/:name/:id", function(req, res) {

var name = req.params.name;
var id = req.params.id;
});
users/john/profile/123 URL name

john id 123
Method Method Request
all() Function
JavaScript
app.all("/users", function(req, res) {

console.log("Request received");
next();
});
all() Function next() Function

URL get(), post() Function

URL Method route()

Function
JavaScript
app.route("users/")
.get(function(req, res) {
console.log("Getting user list");
})
.delete(function(req, res) {
console.log("Removing all users");
});
App Routing Pattern Router

Constructor home-router.js

JavaScript

2. var router = express.Router();
3.
4. router.get("/", function(req, res) {
5. res.send("Home");
6. });
7.
8. router.get("/about", function(req, res) {
9. res.send("About Us");
10. });
11.
12. module.exports = router;
user-router.js
JavaScript

3.
4. router.get("/", function(req, res) {
5. res.send("User List");
6. });
7.
8. router.get("/:id", function(req, res) {
9. var id = req.params.id;
10. res.send("View user %s", id);
11. });
12.
Home Sub App Route Pattern User Sub App Route Pattern
App Router Sub App
JavaScript

2. var homeRouter = require("./home-router.js");
3. var userRouter = require("./user-router.js");
5.
6. app.use("/home", homeRouter);
7. app.use("/users", userRouter);
8.
11. });
() /home homeRouter Sub App

() /users userRouter Sub App

/home URL home-router.js Sub App /users
URL user-router.js Sub App
URL /home/about About Us Response URL /users/123
Viewing user 123 Response
12.2 Serving Statistic Files

NodeJS HTTP Module Request
Path
Static HTML Response
NodeJS connect serveStatic
NPM Module
ExpressJS URL Path
Static Response Static Web Server

JavaScript

3.
4. app.use(express.static("static"));
5.
8. });
express.static() Function HTML Directory

localhost:3000/about.html Request ExpressJS static Director
about.html
Response
Static Server
Sub App ()

JavaScript
app.use('/static', express.static('static'));
ExpressJS /static
URL Static Server

12.3 Request Handling

Web Service Request Request
Query String Request Data Cookie ExpressJS
Version Request Data

Version Query String Build-in
Module
Request Query String Data ExpressJS req.query Property JSON

Object
Query String Data
req.query
JavaScript

3.
4. var server = app.listen(3000, function() {
6.
7. app.get("/", function(req, res) {
8. res.send(req.query);
9. });
10. });
// URL => http://localhost:3000/?foo=apple&bar=orange

// Result => {foo: "apple", bar: "orange"}
Request Form Data body-parser

Module
body-parser Install
$ npm install body-parser
body-parser req.body
Property Form Data JSON Object

JavaScript
1. var express = require('express');

2. var parser = require('body-parser');
4.
5. app.use(parser.urlencoded({ extended: true }));
6.
7. app.post('/', function (req, res) {
8. res.send(req.body);
9. });
() app.use() Function body-parser urlencoded() Function

Form Data Object NodeJS Build-in
querystring Module extended: false Parameter Third-party
Module qs extended: true Parameter
Request Data Form Data JSON Data

Request Body Form Data JSON Data
Request Body JSON Data req.body
()
JavaScript
1. var express = require('express');

2. var parser = require('body-parser');
4.
5. app.use(parser.json());
7.
8. app.post('/', function (req, res) {
9. res.send(req.body);
10. });
Request multer Module

NPM Install
$ npm install multer
() multer Module
Request Directory Location

JavaScript

2. var multer = require("multer");
4.
5. app.use(multer({ dest: './upload/'}));
6.
8.
9. app.post("/", function(req, res) {
10. res.send(req.files);
11. });
12.
13. });
Request upload Directory

ExpressJS req.files Property
Information
req.files Property

JSON
{
"name": {
"fieldname": "file",
"originalname": "express.js",
"name": "4f4ac9f6ed1ba0e8515f6144a6efb183.js",
"encoding": "7bit",
"mimetype": "application/javascript",
"path": "upload/4f4ac9f6ed1ba0e8515f6144a6efb183.js",
"extension": "js",
"size": 471,
"truncated": false,
"buffer": null
}
}
Path, Size, Type

req.files
Professional Web Developer () PHP Request Data Upload File

Language PHP ExpressJS HTTP

PHP Request Data $_GET, $_POST Variable
ExpressJS
req.body PHP Request Information
$_FILES Variable
ExpressJS req.files

PHP Request Cookie Data $_COOKIE Variable

ExpressJS req.cookies

cookie-parser Module cookie-parser
Install

$ npm install cookie-parser
Code
JavaScript

2. var cookie = require("cookie-parser");
4.
5. app.use(cookie());
6.
8.
10. res.send(req.cookies);
11. });
12.
13. });
cookie-parser app.use() ()
ExpressJS Request Cookie Data
req.cookies JSON Object
Session Data Request Data ExpressJS

Session Data req.session Property express-session
Module express-session Install

$ npm install express-session
Session Code
JavaScript

2. var session = require("express-session");
4.
5. app.use(session({
6. secret: 'secret'
7. }));
8.
11.
13. if(req.session.view) {
14. req.session.view += 1;
15. } else {
16. req.session.view = 1;
17. }
18.
19. res.send(req.session);
20. });
21.
22. });
app.use() express-session secret Option

Value
express-session
Secret Value Session Data Encrypt
() req.session.view 1
Request view Session
req.session Session Data Session

Session ExpressJS Session Data Memory

Production Request
Memory Session Data Memory Leak
Development Memory
Redis MongoDB Database Session Data

PHP Session Data
connect-redis, connect-mongo, session-file-store Module

https://github.com/expressjs/session
Request Property
req.ip
req.xhr ExpressJS req.ip Property Request Client IP
Address Request Ajax Request req.xhr
true
12.4 Response Handling

Response res.send(), res.sendFile(),
res.render(), res.download(), res.json(), res.jsonp() Function
Response Header Function

res.send() res.sendFile() Function Response Body Function

res.status()
JavaScript
res.status(200).send("Response Body");
res.status(404).sendFile("/path/to/not-found.png");
Response Body Status Code

Response Body Status Code
res.sendStatus() res.sendStatus() Status Code
Status Message Response Body

JavaScript
res.sendStatus(200); // Response Body => OK

res.sendStatus(403); // Response Body => Forbidden
res.sendStatus(600); // Response Body => 600
Status Code Response Body Code

Response Header res.set() Function
JavaScript
res.set({
'Content-Type': 'text/plain',
'Content-Length': '123'
});
Response Header res.append()
JavaScript
res.append('Content-Encoding', 'gzip');
Respond Download Content-Disposition: attachment

Header Content-Disposition Header
res.attachment() Response Path
Parameter
JavaScript
res.attachment('path/to/logo.png');
// => Content-Disposition: attachment; filename="logo.png"

// => Content-Type: image/png
res.attachment() Content-Disposition Header Content-Type Header

Content-Type Header
res.type()
JavaScript
res.type('html'); // => Content-Type: text/html

res.type('json'); // => Content-Type: application/json
Cookie Response Header Cookie

res.cookie() Cookie Name, Value Expire Time
JavaScript
res.cookie('foo', 'Apple', { expires: new Date().now() + 3600 });

res.cookie('bar', 'Orange', { maxAge: 3600 });
Expire Time expires () maxAge Option

Cookie ()
Cookie res.clearCookie() Cookie

Parameter
JavaScript
res.clearCookie("foo");
Redirect URL
Redirect res.redirect()
JavaScript
app.get("/about", function(req, res) {

res.redirect("/home/about-us");
});
/about URL
Request /home/about-us
Redirect
12.5 CRUD Service Example

ExpressJS Full-scaled Framework MVC Pattern Database Abstraction
Validation Helper
Build-in
NPM Module MongoDB

Database MongoDB Module
Module
mongojs
Module MongoDB Database Create, Read, Update, Delete (CRUD)

Web Service
Project Directory express, body-parser mongojs

Install
$ npm install express body-parser mongojs
Directory Structure
myApp
node_modules
body-parser
express
mongojs
static
about.html
contact.html
index.html
api.js
index.js
node_modules Directory NPM Install

Module static
Directory Static HTML Project Root Folder api.js
index.js

index.js App api.js
Database CRUD
Sub App
api.js MongoDB CRUD
JavaScript

4.
5. var db = mongojs('username:password@localhost/mydb', ['users']);
6.
7. router.get("/users", function(req, res) {
8. db.users.find(function(err, users) {
9. res.status(200).json(users);
10. });
11. });
12.
13. router.post("/users", function(req, res) {
14. db.users.insert(req.body, function(err, result) {
15. res.status(200).send(result._id);
16. });
17. });
18.
19. router.get("/users/:id", function(req, res) {
20. var id = req.params.id;
21. db.users.find({ _id: mongojs.ObjectId(id) }, function(err, user) {
22. if(user) res.status(200).json(user);
23. else res.status(404).json({msg: "Not Found"});
24. });
25. });
26.
27. router.put("/users/:id", function(req, res) {
28. var id = mongojs.ObjectId(req.params.id);
29. var data = req.body;
30.
31. data._id = id;

32.
33. db.users.save(data, function(err, result){
34. res.status(200).send(result.nModified);
35. });
36. });
37.
38. router.delete("/users/:id", function(req, res) {
39. var id = mongojs.ObjectId(req.params.id);
40.
41. db.users.remove({ _id: id }, function(err, result) {
42. res.status(200).send(result.nRemoved);
43. });
44. });
45.
Request Handler ()
GET /users (User )

POST /users (User )
GET /users/:id (:id User )
PUT /users/:id (:id User )
DELETE /users/:id (:id User )
index.js
JavaScript

2. var parser = require("body-parser");
3. var api = require("./api.js");
5.
7.
8. app.use(express.static("./static"));
9. app.use("/api", api);
10.
13. });
() api.js require()
() App static Directory

() api.js /api Sub App
App
Request
GET localhost:3000/ static/index.html

GET localhost:3000/about.html static/about.html
GET localhost:3000/contact.html static/contact.html
GET localhost:3000/api/users api.js GET /users Handler
GET localhost:3000/api/users/:id api.js GET /users/:id Handler
PUT localhost:3000/api/users/:id api.js PUT /users/:id Handler
Code API URL
GET /api/users (User )

POST /api/users (User )
GET /api/users/:id (:id User )
PUT /api/users/:id (:id User )
DELETE /api/users/:id (:id User )
GET Request URL POST, PUT, DELETE Request

URL Request Client
App API

Client App cURL Command Line Tool
cURL HTTP Client Client App
cURL cURL Ubuntu Install
$ sudo apt-get install curl
Windows Installer Download
http://curl.haxx.se/download.html
cURL Install API URL
$ curl -X GET http://localhost:3000/api/users
[{"_id":"553b7f726ab0b99f0664b180","name":"Jonh Doe","role":"Developer"},
{"_id":"553b7f7f6ab0b99f0664b181","name":"Jame Smith","role":"Tester"}]
/api/users URL GET Method Request /api/users GET

Method Request
Handler
7. router.get("/users", function(req, res) {

8. db.users.find(function(err, users) {
9. res.status(200).json(users);
10. });
11. });
db.users.find() users Collection Document res.json()

users Collection Document JSON Array

$ curl -X POST http://localhost:3000/api/users -d

"name=Bob&role=Tester"
"553bd0d215349a0864c5df60"
/api/users POST Method Request name=Bob&role=Tester

Data
/api/users POST Request

Handler
13. router.post("/users", function(req, res) {

14. db.users.insert(req.body, function(err, result) {
15. res.status(200).send(result._id);
16. });
17. });
db.users.insert() req.body Data users Collection

Generated ID res.send() Response

Generated ID
/api/users GET Request Document
$ curl -X GET http://localhost:3000/api/users
{"_id":"553b7f7f6ab0b99f0664b181","name":"Jame Smith","role":"Tester"},
{"name":"Bob","role":"Tester","_id":"553bd0d215349a0864c5df60"}]
GET /api/users/:id
$ curl -X GET http://localhost:3000/api/users/553bd0d215349a0864c5df60
[{"name":"Bob","role":"Tester","_id":"553bd0d215349a0864c5df60"}]
/api/users/:id GET Request :id Document

PUT
$ curl -X PUT http://localhost:3000/api/users/553bd0d215349a0864c5df60

-d "name=Alice&role=Tester"
$ curl -X GET http://localhost:3000/api/users/553bd0d215349a0864c5df60
[{"name":"Alice","role":"Tester","_id":"553bd0d215349a0864c5df60"}]
PUT Method Bob User Alice Update

DELETE Method
$ curl -X DELETE http://localhost:3000/api/users/553bd0d215349a0864c5df60
$ curl -X GET http://localhost:3000/api/users/
{"_id":"553b7f7f6ab0b99f0664b181","name":"Jame Smith","role":"Tester"}]
/api/users/:id DELETE Method Request

Document
/api/users GET Request
Document
cURL Web Service

12.6 ExpressJS Generator

ExpressJS App Module Directory Structure Code Structure
Boilerplate Generate express-generator Scaffold
Generator NPM Install

$ sudo npm install -g express-generator
Install express Command ExpressJS Boilerplate Generate

$ express myApp
create : myApp
create : myApp/package.json
create : myApp/myApp.js

install dependencies:
$ cd myApp && npm install
run the myApp:

$ DEBUG=myApp:* ./bin/www

Generate App Director npm install Command Run NPM

Dependency Package Install
Directory Structure
myApp
bin
www
node_modules
body-parser
cookie-parser
debug
express
jade
morgan
serve-favicon
public
images
javascripts
stylesheets
style.css
routes
index.js
users.js
views
error.jade
index.jade
layout.jade
app.js
package.json
body-parser, cookie-parser Module

Template Engine jade Template
Engine jade ejs -e Option
$ express -e myApp
-e Option express-generator jade ejs Template Engine

express-generator () Yeoman ExpressJS App

Boilerplate Generate
$ sudo npm install -g generator-express

$ yo express
Yeoman Generator express-generator

Boilerplate Bower Config Grunt Config

Conclusion
Web Application Development Development Stack

LAMP Stack Linux OS, Apache Web Server, MySQL Database, PHP
Development Environment
Professional Web Developer Ubuntu Linux LAMP Stack
Covered
JavaScript
MEAN Development Stack LAMP Stack
MEAN
MongoDB, ExpressJS, AngularJS NodeJS
Develop-ment Stack
() MEAN Stack

AngularJS BackboneJS
MEAN Stack Modern Development Stack
BackboneJS, NodeJS, MongoDB ExpressJS JavaScript
Development Stack
()
Building an Issue Tracking System

User Experience User Interface
Authentication
Proven Component
Ubuntu Linux ()

http://u4ubook.com
Rockstar Developer () Building Back-end Service 319
( ) Building Back-end Service
BackboneJS, NodeJS, ExpressJS MongoDB


() Service-oriented Architecture (SOA) Software

Service
Issue Tracking System Back-end
Service Client App Code
ExpressJS MongoDB Back-end Service
Code
Code
Code
Code

Download
https://github.com/eimg/issues-api/archive/master.zip
13.1 Scaffolding
issues-api
(
) Directory
Directory Package NPM Install
$ mkdir issues-api && cd issues-api

$ npm install express \
mongojs \
express-session \
body-parser \
cookie-parser \
express-validator
passport \
passport-local
npm install Package () Install

ExpressJS MongoDB
express mongojs Package Install express-
session, body-parser cookie-parser User Request
Cookie, Session User Request
Validation express-validator User
Authentication Authorization PassportJS Framework
passport passport-local
Package

Package Directory Structure
issues-api
node_modules
body-parser
cookie-parser
express
express-session
express-validator
mongojs
passport
passport-local
Structure
issues-api
app.js
auth.js
config.js
node_modules
routes
issues.js
users.js
app.js, auth.js config.js Project Root Directory issues.js

users.js routes Directory
13.2 Basic Config config.js

config.js
JavaScript
1. exports.role = [
2. "User",
3. "Tester",
4. "Developer",
5. "Manager"
6. ];
7.
8. exports.status = [
9. "New",
10. "Assigned",
11. "Doing",
12. "Done",
13. "Closed"
14. ];
15.
16. exports.type = [
17. "Bug",
18. "Feature",
19. "Other"
20. ];
21.
22. exports.priority = [
23. "Low",
24. "High",
25. "Urgent"
26. ];
role, status, type priority exports Object Property

() NodeJS Module
Code module.exports () exports Object
Function Property
13.3 Authentication and Authorization Strategies auth.js

PassportJS Authentication
auth.js
JavaScript

2. var crypto = require('crypto');
3. var passport = require("passport");
4. var LocalStrategy = require("passport-local").Strategy;
5.
6. var db = mongojs('mydb', ['users', 'issues']);
7.
8. passport.serializeUser(function(user, done) {
9. done(null, user);
10. });
11.
12. passport.deserializeUser(function(user, done) {
13. done(null, user);
14. });
15.
16. // Authentication strategy
17. passport.use(new LocalStrategy(
18. function(username, password, done) {
19. var pwdHash = crypto.createHash('sha1').update(password).digest("hex");
20.
21. db.users.findOne({
22. loginId: username,
23. password: pwdHash
24. }, function(err, data) {
25. if(data)
26. return done(null, data);
27. else
28. return done(null, false);
29. });
30. }
31. ));
32.
33. exports.login = function() {
34. return passport.authenticate("local");
35. }
36.
37. exports.ensureAuth = function() {
38. return function(req, res, next) {
39. if(req.isAuthenticated())
40. next()
41. else res.sendStatus(401);
42. }
43. }
App API Authentication Authentication Strategy
Point to Point API Service

HTTP Basic Authentication
Point to Point
Client Server Third-party Service

HTTP Basic Authentication Request Access Control Credential

Username Password Request Credential Access
HTTP Stateless
Request Credential Request
Credential Service Credential Access
API Service

Authentication Strategy Session Based Authentication Model

Local Strategy
Access Control Credential
Authentication Token Session
Access Credential Session Token
Access Web App Strategy
API Key () Token Strategy
HTTP Basic Authentication HTTP Basic Authentication Username

Password Access Control Credential Generate API Key
() Random Token Access Control Credential
Access Control Credential
Credential Service Random Token
Service Access Credential Request Token
Access

Token Random Generate

Random User Information Token
Encrypt JSON Web Tokens
Token Random User Information Token User
Information Authorization
Token User Information
Encrypt
OAuth2 Protocol Strategy Service

Client Authentication Provider
Access Service A Access
Service B OAuth2 Web App
Login Account Facebook Account Login

Web App Authentication
Service Facebook
Web Client Service

Session Local Strategy
() () passport passport-local Package
Local Strategy Strategy
Passport Strategy Package
Username Password Database Record (Document)

User Session
Authorize () mydb MongoDB Database
mongojs
MongoDB Database Username,
Password Protect

JavaScript
6. var db = mongojs('username:password@localhost/mydb', ['users', 'issues']);
username password Database Username Password

Connection String users issues Collection

() passport.serializeUser() Function
Function JSON User Data Session Text
() passport.deserializeUser() Session
User Data JSON
User Data JSON Session Text
Function Serialize Deserialize
Callback Function
Serialize/Deserialize
done() Function
() passport.use() Local Strategy

Strategy Definition
Strategy Definition Username, Password User
db.users.find() User done() Function
User Data User done() Function
false return
Password SHA1 Hash

Password
SHA1 Hash
Strategy Authentication Authorization

Authentication () login() Function
Function passport
.authenticate() Function Strategy

local Request Username, Password
Credential () Local Strategy
Credential User Data Session
PassportJS Passport Local
Strategy Definition
PassportJS
Authorization () ensureAuth()
Function
Request Login Access Function
Login Session User Data
PassportJS
req.isAuthenticated() Function Authenticated User
Authenticated User
Next Route
next() Function Authenticated User 401 Status Code
Authentication Authorization
User
Role Authorization auth.js

JavaScript
45. exports.ensureSuper = function() {

47. if (req.isAuthenticated() && req.user.role === 3)
48. next();
49. else
50. res.sendStatus(401);
51. }
52. };
53.
54. exports.ensureRole = function(role) {
56. if (req.isAuthenticated() && req.user.role >= role)
57. next();
58. else
60. }
61. };
62.
63. exports.ensureOwner = function() {
65. if (req.isAuthenticated() && (req.user._id == req.params.id ||
66. req.user.role === 3))
67. next();
68. else
70. }
71. };
72.
73. exports.ensureAssignee = function() {
75. var iid = req.params.id;
76. db.issues.findOne({ _id: mongojs.ObjectId(iid) }, function(err,data){
77. if(err) {
79. } else {
80. if (req.isAuthenticated() &&
81. (req.user._id.str==(data.assignedTo && data.assignedTo.str) ||
83. next();
84. else
86. }
87. });
88. }
89. };
90.
91. exports.ensureSubmitter = function() {
94. db.issues.findOne({ _id: mongojs.ObjectId(iid) }, function(err,data){
95. if(err) {
97. } else {
98. if (req.isAuthenticated() && (req.user._id == data.submittedBy ||
100. next();
101. else
103. }
104. });
105. }
106. };
PassportJS Session User Data

req.user Property ()
req.user ensureSuper() Function
User Authenticated User role 3
config.js Role User, Tester, Developer,
Manager Manager Index 3
ensureSuper() Manager Level User Access

() ensureRole() Function Function

Access Right Role
ensureRole(2) User Role Level 2 Access
Manager Level 3 Access
ensureRole(2) User Role Level 2 User ()
Manager Level User Access
() ensureOwner() Function Function

Access User Information Authenticated
User Information User
Information Manager Level User
Information
Access User ID Session
Authenticated User ID Owner
() ensureAssignee() Function
Issue Status Manager Assign
User Status
Issue Assigned To
Authenticated User ID Assign User
Issue Assigned To Database
Database
() ensureSubmitter() ensureAssignee()
Issue

Authorization Authentication
13.4 User Router routes/users.js

User Login, Register Create, Read, Update, Delete routes/users.js

JavaScript

2. var crypto = require('crypto');
4. var validator = require('express-validator');
6.
7. var auth = require("../auth");
8. var config = require("../config");
9.
10. var db = mongojs('mydb', ['users']);
11.
12. router.post("/login", auth.login(), function(req, res) {
13. if(req.user) res.status(200).json(req.user);
15. });
16.
17. router.delete("/logout", function(req, res) {
18. // req.logout();
19. req.session.destroy();
20. res.status(200).json({"logout": "done"});
21. });
22.
23. router.get("/verify", auth.ensureAuth(), function(req, res) {
24. res.status(200).json(req.user);
25. });

() express-validator
Request Data Validate Package
() () config.js auth.js
.js Extension .js Extension

Login
() /login URI POST Route
auth.js login() Function
auth.login() Route Function auth.login()
Username, Password Session User Data
Route Function req.user 200 Status Code
User Data Response 401 Response
() Logout /logout URI DELETE Route

Logout req.logout() Function
Session
Session req.session.destory()
Authenticated User /verify URI GET Route

()
Route auth.js ensureAuth() Function
ensureAuth() Login Session next() Function
Route Function 200 OK Response

Login Session 401 Status Code
User
JavaScript
26. router.post("/", auth.ensureSuper(), function(req, res) {

27. // Validation
28. req.checkBody('fullName', 'Invalid Full Name').notEmpty();
29. req.checkBody('loginId', 'Invalid Login ID').isAlphanumeric();
30. req.checkBody('email', 'Invalid Email Address').isEmail();
31. req.checkBody('role', 'Invalid Role').isInt();
32. req.checkBody('password', 'Password required 6 characters').isLength(6);
33.
34. var errors = req.validationErrors();
35. if(errors) {
36. res.status(400).json(errors);
37. return false;
38. }
39.
40. req.body.password = crypto.createHash('sha1')
41. .update(req.body.password)
42. .digest("hex");
43. req.body.roleLabel = config.role[req.body.role];
44.
45. db.users.insert(req.body, function(err, data) {
46. if(err) res.status(500).json(err);
47. else res.status(200).json(data);
48. });
49. });
User / URL POST Rout User

Manager Role ensureSuper() Function
Manager Route 401 Status Code
User
() () Validation express-validator
req.checkBody() Function Request Body Validate
req.checkBody()
checkBody() Function Field Error Message
isEmpty() fullName Invalid Full

Name Error Message
loginId Alpha-Numeric email

isEmail() Email Format role isInt() Integer
password isLength(6) ()

express-validator

() req.validation
Errors() Function Error Error 400 Status Code Error
Message Response
Database Password SHA1 Hash

role User, Developer, Manager roleLable req.body
() Database users
Collection User
User User User Role

JavaScript
51. // Get all users

52. router.get("/", auth.ensureAuth(), function(req, res) {
53. db.users.find({}, function(err, data) {
54. res.status(200).json(data);
55. });
56. });
57.
58. // Get user roles
59. router.get("/roles", auth.ensureAuth(), function(req, res) {
60. res.status(200).json(config.role);
61. });
62.
63. // Get one user
64. router.get("/:id", auth.ensureAuth(), function(req, res) {
65. var uid = req.params.id;
66.
67. // Validation
68. req.checkParams("id", "Invalid User ID").isMongoId();
70. if(errors) {
72. return false;
73. }
74.
75. db.users.findOne({_id: mongojs.ObjectId(uid)}, function(err, data) {
76. if(data) res.status(200).json(data);
78. });
79. });
80.
81. // Update a user
82. router.put("/:id", auth.ensureOwner(), function(req, res) {
84.
85. // Validation
87. req.checkBody('fullName', 'Invalid Full Name').isLength(3);
88. req.checkBody('loginId', 'Invalid Login ID').isAlphanumeric();
89. req.checkBody('email', 'Invalid Email Address').isEmail();
90. req.checkBody('role', 'Invalid Role').isInt();
91.
93. if(errors) {
95. return false;
96. }
97.
98. var newData = {
99. fullName: req.body.fullName,
100. loginId: req.body.loginId,
101. email: req.body.email,
102. role: req.body.role,
103. roleLabel: config.role[req.body.role]
104. };
105.
106. if(req.body.password) {
107. var pwdHash = crypto.createHash('sha1')
108. .update(req.body.password)
109. .digest("hex");
110. newData.password = pwdHash;
111. }
112.
113. db.users.update(
114. { _id: mongojs.ObjectId(uid) },
115. { $set: newData },
116. { multi: false },
117. function(err, data) {
120. }
121. );
123. });
124.
125. router.delete("/:id", auth.ensureSuper(), function(req, res) {
127.
128. // Validation
131. if(errors) {
133. return false;

134. }
135.
136. db.users.remove({_id: mongojs.ObjectId(uid)}, function(err, data) {
139. });
140. });
141.
Code Create, Read, Update, Delete

Code
() express-validate req.checkParams() URL Parameter
Validation Validation Function isMongoId()
URL Parameter id MongoDB ID Format
Route Pattern
Method Route Description Access Control
POST /login User Login
DELETE /logout User Logout
GET /verify Authenticated User
POST / User Manager Only
GET / User Authenticated User Only
GET /roles User Role Authenticated User Only
GET /:id User Data Authenticated User Only
PUT /:id User Data Update Account Owner & Manager
DELETE /:id User Manager Only

13.5 Issues Router routes/issues.js

Issue Code routes/issues.js

JavaScript

5.
6. var auth = require("../auth");
7. var config = require("../config");
8.
9. var db = mongojs('mydb', ['issues']);
10.
11. // Get all issues
12. router.get("/", auth.ensureAuth(), function(req, res) {
13. db.issues.find({}, function(err, data) {
14. res.status(200).json(data);
15. });
16. });
17.
18. // Get one issue
19. router.get("/:id", auth.ensureAuth(), function(req, res) {
21.
22. // Validation
23. req.checkParams("id", "Invalid Issue ID").isMongoId();
25. if(errors) {
27. return false;
28. }
29.
30. db.issues.findOne({_id: mongojs.ObjectId(iid)}, function(err, data) {
33. });
34. });
35.
36. // Create a new issue
37. router.post("/", auth.ensureRole(1), function(req, res) {
38. // Validation
39. req.checkBody('summary', 'Invalid Summary').notEmpty();
40. req.checkBody('priority', 'Invalid Priority').isInt();
41. req.checkBody('type', 'Invalid Type').isInt();
42.
44. if(errors) {
46. return false;
47. }
48.
49. var newIssue = {
51. summary: req.body.summary,
52. detail: req.body.detail,
53. priority: req.body.priority,

54. type: req.body.type,
55. typeLabel: config.type[req.body.type],
56. priorityLabel: config.priority[req.body.priority],
57. status: 0,
58. statusLabel: config.status[0],
59. assignedTo: null,
60. assignedToLabel: null,
61. submittedAt: new Date(),
62. submittedBy: mongojs.ObjectId(req.user._id),
63. submittedByLabel: req.user.fullName
64. }
65.
66. db.issues.insert(newIssue, function(err, data) {
69. });
70. });
71.
72. // Update an issue
73. router.put("/:id", auth.ensureRole(1), function(req, res) {
75.
76. // Validation
78. req.checkBody("summary", "Invalid Summary").notEmpty();
79.
81. if(errors) {
83. return false;
84. }
85.
86. var newData = {
87. summary: req.body.summary,
88. detail: req.body.detail,
89. modifiedAt: new Date()
90. };
91.
92. db.issues.update(
93. { _id: mongojs.ObjectId(iid) },
99. }
100. );
101. });
102.
103. // Delete an issue
104. router.delete("/:id", auth.ensureSubmitter(), function(req, res) {
106.
107. // Validation
110. if(errors) {
112. return false;

113. }
114.
115. db.issues.remove({_id: mongojs.ObjectId(iid)}, function(err, data) {
118. });
119. });
issues Collection Create, Read, Update, Delete

Issue Status, Priority Assignment

JavaScript
120. // Update issue type

121. router.patch("/type/:id", auth.ensureRole(1), function(req, res) {
124.
125. // Validation
127. req.checkBody("type", "Invalid Type").isInt();
128.
130. if(errors) {
132. return false;
133. }
134.
135. var newData = {
136. type: req.body.type,
137. typeLabel: config.type[req.body.type],
139. };
140.
148. }
149. );
150. });
151.
152. // Update issue priority
153. router.patch("/priority/:id", auth.ensureRole(2), function(req, res) {
155.
156. // Validation
158. req.checkBody("priority", "Invalid Priority").isInt();
159.

161. if(errors) {
163. return false;
164. }
165.
167. priority: req.body.priority,
168. priorityLabel: config.priority[req.body.priority],
170. };
171.
179. }
180. );
181. });
182.
183. // Update issue assign to
184. router.patch("/assign/:id", auth.ensureSuper(), function(req, res) {
186.
187. // Validation
189. req.checkBody("assignedTo", "Invalid User ID").isMongoId();
190. req.checkBody("assignedToLabel", "Invalid User Name").notEmpty();
191.
193. if(errors) {
195. return false;
196. }
197.
199. assignedTo: req.body.assignedTo,
200. assignedToLabel: req.body.assignedToLabel,
201. status: 1,
204. };
205.
213. }
214. );
215. });
216.
217. // Update issue status
218. router.patch("/status/:id", auth.ensureAssignee(), function(req, res) {

220.
221. // Validation
223. req.checkBody("status", "Invalid Status").isInt();
224.
226. if(errors) {
228. return false;
229. }
230.
232. status: req.body.status,
233. statusLabel: config.status[req.body.status],
235. };
236.
244. }
245. );
246. });
247.
248. // Close an issue
249. router.patch("/close/:id", auth.ensureSuper(), function(req, res) {
251.
252. // Validation
254.
256. if(errors) {
258. return false;
259. }
260.
262. status: 4,
265. };
266.
274. }
275. );
276. });
PATCH Request Method

PUT Request Method

HTTP PUT
Record Set Record Set
PUT Record Set
PATCH Request Method
Issue Priority Status Issue
PATCH Request
Method
Issue Comment
JavaScript
277. // Comments
278. router.post("/comments", auth.ensureAuth(), function(req, res) {
279. req.checkBody('issueId', 'Invalid Issue ID').isMongoId();
280. req.checkBody('authorId', 'Invalid Author ID').isMongoId();
281. req.checkBody('authorName', 'Invalid Author Name').notEmpty();
282. req.checkBody('comment', 'Invalid Comment Body').notEmpty();
283.
285. if(errors) {
287. return false;
288. }
289.
290. db.issues.findOne({
291. _id: mongojs.ObjectId(req.body.issueId)
293. if(data) {
294. var comments = data.comments || [];
295. var comment = {
296. comment: req.body.comment,
297. authorId: req.body.authorId,
298. authorName: req.body.authorName,
299. submittedAt: new Date()
300. }
301.
302. comments.push(comment);
303.
305. { _id: mongojs.ObjectId(req.body.issueId) },
306. { $set: { comments: comments } },
311. }
312. );
313. }
314. else {
316. }
317. });
318. });
319.
320. router.delete("/comments", auth.ensureAuth(), function(req, res) {
321. req.checkBody('issueId', 'Invalid Issue ID').isMongoId();
322. req.checkBody('commentId', 'Invalid Comment ID').isInt();
323.
325. if(errors) {
327. return false;
328. }
329.
330. db.issues.findOne({
331. _id: mongojs.ObjectId(req.body.issueId)
333. if(data) {
334. var comments = data.comments || [];
335. comments.splice(req.body.commentId, 1);;
336.
338. { _id: mongojs.ObjectId(req.body.issueId) },
339. { $set: { comments: comments } },
344. }
345. );
346. }
347. else {
349. }
350. });
351. });
Comment Collection Issue

Comment Comment Collection
issue comment Collection Relationship
MongoDB NoSQL Relationship
Issue Issue
Comment Comment
Comment
Issue Comment
Issue Router
Issue Status, Priority Type Route

JavaScript
352. // Get statuses

353. router.get("/statuses", auth.ensureAuth(), function(req, res) {
354. res.status(200).json(config.status);
355. });
356.
357. // Get priorities
358. router.get("/priorities", auth.ensureAuth(), function(req, res) {
359. res.status(200).json(config.priority);
360. });
361.
362. // Get types
363. router.get("/types", auth.ensureAuth(), function(req, res) {
364. res.status(200).json(config.type);
365. });
367.
Route Pattern
Method URI Description Access Control
GET / Issue Authenticated User Only
GET /:id Issue Data Authenticated User Only
POST / Issue Tester & Above
PUT /:id Issue Data Tester & Above
DELETE /:id Issue Submitter & Manager
PATCH /type/:id Issue Type Tester & Above
PATCH /priority/:id Issue Priority Developer & Above
PATCH /assign/:id Issue Manager Only
PATCH /status/:id Issue Status Assignee & Manager
PATCH /close/:id Issue Status Closed Manager Only
POST /comments Comment Authenticated User Only
DELETE /comments Comment Authenticated User Only
GET /statuses Issue Status Authenticated User Only
GET /priorities Issue Priority Authenticated User Only
GET /types Issue Type Authenticated User Only


Main App
13.6 Main App app.js

app.js
JavaScript

3. var cookieParser = require("cookie-parser");
4. var bodyParser = require("body-parser");
5.
6. var issues = require("./routes/issues");
7. var users = require("./routes/users");
8.
10.
11. var passport = require("passport");
12.
13. app.use(require('express-session')({
14. secret: 'secret',
15. resave: false,
16. saveUninitialized: false
17. }));
18.
19. app.use(passport.initialize());
20. app.use(passport.session());
21.
22. app.use(bodyParser.json());
23. app.use(bodyParser.urlencoded({
24. extended: true
25. }));
26. app.use(cookieParser());
27.
28. app.use(validator());
29.
30. app.use(function(req, res, next) {
31. res.set("Access-Control-Allow-Origin", "http://localhost:8080/");
32. res.set("Access-Control-Allow-Credentials", "true");
33. res.set("Access-Control-Allow-Methods",
34. "GET, POST, PUT, DELETE, PATCH, OPTIONS");
35. res.set("Access-Control-Allow-Headers", "X-CSRF-Token, X-Requested-With,
36. Accept, Accept-Version, Content-Length, Content-MD5,
37. Content-Type, Date, X-Api-Version");
38. next();
39. });
40.
41. app.use(express.static("./static"));
42. app.use("/api/issues", issues);
43. app.use("/api/users", users);
44.
45. app.listen(3000, function() {
46. console.log("API server running at port 3000");
47. });
require() app.use()
Package
() Static File Server
Static Response ./static
Directory () ()
Issue Router User Router Sub-App
/api/issues /api/users API URL
() app.use() Default Response Header

ExpressJS Server Response Header
Web Client example.com API Service api.example.com Host

Browser Cross-Origin Policy
Web Browser example.com Web App api.example.com
Ajax Request Cross-Origin
Resource Sharing (CORS) CORS Server
Response Header Access-Control-Allow-Origin Header Cross-
Origin Request
() Access-Control-Allow-Origin http://localhost:8080
Server localhost:8080 Cross-Origin Request
Web Client example.com
http://example.com Client
Cross-Origin Request *
JavaScript
res.set("Access-Control-Allow-Origin", "*");
() Access-Control-Allow-Credentials true

Cross-Origin Request Cookie
Header
Cross-Origin Request Cookie
Access-Control-Allow-Credentials true Access-

Control-Allow-Origin Origin Domain Name *
Code Access-Control-Allow-Origin
* http://localhost:8080

Access-Control-Allow-Credentials true Access-Control-Allow-Origin *

() Access-Control-Allow-Methods Header Cross-Origin Request

Request Method Request Method
*
() Access-Control-Allow-Headers Cross-Origin Request

Header API Server

Header Header *

CORS

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Issue Tracking System API Service

13.7 Testing the API

Service User Account mydb Database
users Collection User Account
Password Hash Node Generate
$ node
> var crypto = require("crypto");
> var password =
crypto.createHash("sha1").update("123456").digest("hex");
> console.log(password);
7c4a8d09ca3762af61e59520943dc26494f8941b
123456
SHA1 Hash Generate
Mongo Shell Manager Account
$ mongo
> use mydb;
switched to db mydb
> db.users.insert({
... fullName: "John Doe",
... loginId: "manager",
... email: "john@example.com",
... role: 3,
... password: "7c4a8d09ca3762af61e59520943dc26494f8941b"
... });
> db.users.find().pretty();
{
"_id" : ObjectId("55b703a9d2141ae9733ac0eb"),
"fullName" : "John Doe",
"loginId" : "manager",
"email" : "john@example.com",
"role" : 3,
"password" : "7c4a8d09ca3762af61e59520943dc26494f8941b"
}
loginId manager password 123456 User Account

Issue Tracking System API Server Run
$ node app.js
API server running at port 3000

Service Port 3000 CURL
Verify
$ curl -X GET localhost:3000/api/users/verify
Unauthorized%
/users/verify Request 401 Unauthorized

Login
$ curl -X POST localhost:3000/api/users/login -d

"username=manager&password=123456"
{"_id":"55b70503d2141ae9733ac0ec","fullName":"John
Doe","loginId":"manager","email":"john@example.com","role":3,"password":"7c4a8
d09ca3762af61e59520943dc26494f8941b"}%
$ curl -X GET localhost:3000/api/users/verify
Unauthorized%
/users/login POST Request Username, Password User

Data API Server Response /users/verify
Unauthorized Login Success
User Data Session CURL Session ID
Session ID Cookie Login
$ curl -X POST localhost:3000/api/users/login \

-d "username=manager&password=123456" -c cookie.txt
d09ca3762af61e59520943dc26494f8941b"}%
-c Option Session ID cookie.txt

Request Username, Password Cookie
-b Option
$ curl -X GET localhost:3000/api/users/verify -b cookie.txt
d09ca3762af61e59520943dc26494f8941b"}%
/users/verify Request -b Option Cookie

Authorized Authorized User Response

User
$ curl -X GET localhost:3000/api/users -b cookie.txt
[{"_id":"55b70503d2141ae9733ac0ec","fullName":"John
d09ca3762af61e59520943dc26494f8941b"}]%
User

$ curl -X POST localhost:3000/api/users -b cookie.txt
[{"param":"fullName","msg":"Invalid Full Name"},

{"param":"loginId","msg":"Invalid Login ID"},{"param":"email","msg":"Invalid
Email Address"},{"param":"role","msg":"Invalid Role"},
{"param":"password","msg":"Password should have at least 6 characters"}]%
express-validate fullName, loginId, email

Request

$ curl -X POST localhost:3000/api/users \

-d "fullName=Bob&loginId=bob&email=bob@gmail.com&role=2&password=123456" \
-b cookie.txt
{"fullName":"Bob","loginId":"bob","email":"bob@gmail.com","role":"2","password
":"7c4a8d09ca3762af61e59520943dc26494f8941b","roleLabel":"Developer","_id":"55
b70b342468830b671da93b"}%
User
Response
User Bob Role 2

Developer Role User Bob Login Manager Delete
$ curl -X POST localhost:3000/api/users/login \

-d "username=bob&password=123456" -c cookie.txt
b70b342468830b671da93b"}%
$ curl -X GET localhost:3000/api/users -b cookie.txt
[{"_id":"55b70503d2141ae9733ac0ec","fullName":"John
d09ca3762af61e59520943dc26494f8941b"},
b70b342468830b671da93b"}]%
$ curl -X DELETE localhost:3000/api/users/55b70503d2141ae9733ac0ec -b

cookie.txt
Unauthorized%
Bob Login Manager Account DELETE Request

Unauthorized Rout
Code

https://github.com/eimg/issues-api/archive/master.zip
Conclusion
REST API HTTP Request Method HTTP Status Code
Back-end Service URL
Routing Session Based Authentication
Compression Cache

Response Plain Text Compress
Response Cache Content Cache Cache
Content Cache Cache-Control Header Response

Back-end Service

API Version
Service Client
Service

Client
Service
Client
Request
Server Resource Client
Client
Request Client Request
Client Developer API Documentation

Production

Maintainable Code


()
Rockstar Developer () Building Clients (HTML Templates) 350
( ) Building Clients (HTML Templates)
Issue Tracking System Back-end Service Back-end Service

Client App BackboneJS Web
Client App BackboneJS
Bootstrap DataTable
14.1 Bootstrap 3
Bootstrap CSS Framework Device Screen Size
Layout Responsive Layout

CSS Style JavaScript Component Framework
Version Version 3.2.0
Bootstrap bower install getbootstrap.com Download

Bootstrap Style Components
Client App Bootstrap Style
Component getbootstrap.com
Document HTML/CSS JavaScript/jQuery

Layout
Bootstrap Layout Bootstrap Column
() Layout Layout Structure
HTML
1. <div class="container">
2. <div class="row">
3. <div class="col-md-12"></div>
4. </div>
8. </div>
9. </div>
Layout Row .row Class .row .container ()

.container-fluid .container Size Fixed-
width Element .container-fluid
Screen Size Fluid-
width Element
Bootstrap Screen Size () Extra-Small Screen, Small

Screen, Medium Screen Large Screen Extra-Small Screen Smart
Phone Screen Size
Small Screen Tablet Screen Size
Medium
Screen Desktop/Laptop Screen Size Large Screen Big Screen TV
.container Fixed-width Size Desktop/Laptop Width 970px Screen Size

Container Smart Phone Screen Width Auto
.container-fluid Screen Size Width Auto

Fixed-Width Layout
.container Fluid-Width Layout .container-fluid Screen
Size Bootstrap
.row Column
Layout
Row Size () Column Row
() Column ()
Column
Column Layout
Column Size Layout
( (.) - Bootstrap Layout
Column .col-md-[n] Format

md Medium Device Small Screen Device sm
Extra Small Screen Device xs Large Screen Device
lg
HTML
1. <div class="container">
4. </div>
6. <div class="col-md-8 col-sm-6 col-xs-12"></div>
7. <div class="col-md-4 col-sm-6 col-xs-12"></div>
8. </div>
9. </div>
Row Column col-md-8 Medium Device

()
col-sm-6 Small Screen Device ()
col-xs-12 Extra Small Screen ()
Column Screen Size
Responsive Column
Responsive Layout Bootstrap
Styles
Bootstrap Basic Element h1-h6, p, a Element
Default
Style Element Bootstrap Style
Class Table Element Bootstrap Style
.table Class
HTML
1. <table class="table">
2. <tr>
3. <th> </th>
4. <th> </th>
5. </tr>
6. <tr>
7. <td> </td>
8. <td> </td>
9. </tr>
10. </table>

( (.) - Bootstrap Style Table
Table Border .table-bordered Row

Zebra Stripping .table-striped
HTML
1. <table class="table table-bordered table-striped">

2. <tr>
3. <th> </th>
4. <th> </th>
5. </tr>
6. <tr>
7. <td> </td>
8. <td> </td>
9. </tr>
10. </table>
Input, Select, Textarea Form Element Bootstrap Style .form-

control Input Element Label Element
.form-group Element
HTML
2. <label for="email">Email address</label>
3. <input type="email" class="form-control" id="email">
4. </div>
Button () Link Bootstrap Button .btn Class

.btn .btn-default, .btn-primary, .btn-success, .btn-info, .btn-
warning, .btn-danger Class Button
Link .btn-link
( (.) - Bootstrap Style Buttons

Button .btn-group Class

Element
Element .text-primary, .text-success,

.text-info, .text-warning, .text-danger Bootstrap Text Color
Text .text-muted
Element Background Color Bootstrap Color .bg-

primary, .bg-success, .bg-info
Style .pull-left .pull-right Element
(float: right ) .pull-right
.pull-left Drop-down Arrow ()
HTML
<span class="caret"></span>
Element Screen Size Screen

Size Class Element
.hidden-xs
Element Extra Small Device
Class .hidden-sm, .hidden-md .hidden-lg

Element Screen Size Extra Small Device

.visible-xs-* Element
Extra Small Device Screen Size
Responsive Style Class
( (.) - Bootstrap Responsive Helper Classes
Components
Bootstrap Component Icon Icon
Image Bootstrap Icon
Button Add Icon
HTML
1. <button class="btn btn-default">

2. <span class="glyphicon glyphicon-plus-sign"></span>
3. Add User
4. </button>
Icon <span> Element .glyphicon Class

Icon Type .glyphicon-plus-sign
Plus Icon getbootstrap.com/components
Icon
Component Drop-down Menu Bootstrap

Style Drop-down Menu
HTML
1. <div class="dropdown">
2. <button class="btn btn-default" data-toggle="dropdown">
3. Dropdown <span class="caret"></span>
4. </button>
5. <ul class="dropdown-menu">
6. <li> ... </li>
7. <li> ... </li>
8. </ul>
9. </div>
Drop-down Trigger Link () Button .dorpdown-menu Class

<ul> Element Element Trigger Link ()
Button data-toggle Attribute dorpdown Bootstrap Style Drop-down Menu
<li> Element Divider ()
Element .divider Drop-down Menu
Bootstrap jQuery
jQuery Component Navigation Menu Bar

HTML
1. <nav class="navbar navbar-default">

2. <div class="container-fluid">
3. <div class="navbar-header">
4. <a class="navbar-brand" href="#">Brand</a>
5. </div>
6.
7. <ul class="nav navbar-nav">
8. <li class="active"><a href="#">Link</a></li>
9. <li><a href="#">Link</a></li>
10. </ul>
11.
12. </div>
13. </nav>
Navigation Bar .navbar .navbar-default Class Menu Item

.nav .navbar-nav Class <ul> Element
Brand Name Menu Bar .navbar-header
Element .navbar-brand Element Menu Item
Item .active Class
Drop-down Menu Button Form Element Navbar

Menu .pull-right Class
Navbar Light Color Dark Color
.navbar-inverse .navbar-default
Tag Label .label Class .label-

success, .label-info, .label-warning, .label-danger
HTML
1. <span class="label label-default">Default</span>

2. <span class="label label-primary">Primary</span>
3. <span class="label label-success">Success</span>
4. <span class="label label-info">Info</span>
5. <span class="label label-warning">Warning</span>
6. <span class="label label-danger">Danger</span>
Menu Item () Item Count Notification

Badge
HTML
<a href="#">Inbox <span class="badge">42</span></a>

Error Message () Information .alert
HTML
<div class="alert alert-success">...</div>
.alert-success .alert-info, .alert-warning, .alert-danger Class

Component Component
Panel
HTML
1. <div class="panel panel-primary">

2. <div class="panel-header">Panel Title</div>
3. <div class="panel-body">Panel Content</div>
4. </div>
.panel .panel-primary .panel-

primary .panel-success, .panel-info, .panel-warning, .panel-danger
Panel .panel-header, .panel-body .panel-
footer Element
Issue Tracking System Client App

14.2 jQuery DataTables

DataTables jQuery Plugin HTML Table Sorting, Filter, Paging

Data Grid bower install
datatables.net Download
( (.) - DataTables Example
(.) Data Grid DataTables

JavaScript
$("table").dataTables();
Data Grid Table Select dataTables() Function

DataTables datatables.net

Sorting Sorting
() DataTables

Issue Status New, Assigned, Doing, Done,
Close Sorting Assigned, Close,
Doing, Done, New A-Z
New (0),
Assigned (1), Doing (2)
DataTables order-value
Attribute
HTML
1. <table>
2. <tr><td order-value="1">Assigned</td></tr>
3. <tr><td order-value="4">Close</td></tr>
4. <tr><td order-value="0">New</td></tr>
5. <tr><td order-value="3">Done</td></tr>
6. <tr><td order-value="2">Doing</td></tr>
7. </table>
Table Assigned, Close, New, Done, Doing

Sorting DataTables order-value

Device
Responsive Table Design
DataTables Bootstrap Library Style
DataTables Bootstrap Table Style Screen
Size
DataTables Bootstrap 3 Plugin DataTables Responsive
Plugin
DataTables Bootstrap - https://datatables.net/examples/styling/bootstrap.html

DataTables Responsive - https://datatables.net/extensions/responsive/
( (.) - DataTables Responsive Example

Plugin DataTables Bootstrap Style

Screen Size (.) Table Column
Button Screen Size
Device Data Grid
Code
Code
Code

Download
https://github.com/eimg/issues-backbone/archive/master.zip
14.3 Directory Structure for Web Client

Web Client
Directory Structure HTML Template
Directory issues-backbone ()
Package Bower
$ mkdir issues-backbone && cd issues-backbone

$ bower install backbone jquery underscore bootstrap datatables
datatables-responsive datatables-bootstrap3 bootstrap3-wysiwyg jquery-
validate moment
Backbone, jQuery, Undersocre, Bootstrap, DataTables, DataTables Responsive

Plugin, DataTables Bootstrap Plugin Library Rich Text Editor
Bootstrap3 Wysiwyg, Form Validation jQuery

Validate Format MomentJS
Directory Structure
issues-backbone
bower_components
backbone
bootstrap
bootstrap3-wysiwyg
datatables
datatables-bootstrap3
datatables-responsive
jquery
jquery-validate
moment
underscore
issues-backbone
app.js
index.html
issues.js
users.js
bower_components
templates
issue-detail.html
issue-edit.html
issue.html
issue-list.html
issue-new.html
login.html
nav.html
user-edit.html
user.html
user-list.html
user-new.html
user-profile.html
views
appView.js
issueDetailView.js
issueEditView.js
issueListView.js
issueNewView.js
loginView.js
navView.js
userEditView.js
userListView.js
userNewView.js
userProfileView.js
app.js Client App Function issues.js

users.js Model Collection index.html
Main Template Script Style views
Directory
Backbone View templates Directory
View HTML Template
Template Model-View-Collection
14.4 Issue Detail Template templates/issue-detail.html

Issue Template Issue
Template templates/issue-detail.html
Template
2. <div class="col-md-8 col-sm-12 col-xs-12">
3. <div class="panel
4. <% if(priority == 0) { %>
5. panel-info
6. <% } else if (priority == 1) { %>
7. panel-warning
8. <% } else { %>
9. panel-danger
10. <% } %>
11. issue-detail">
12. <div class="panel-heading">
13. <h2>
14. <% if(type == 0) { %>
15. <span class="glyphicon glyphicon-fire"></span>
16. <% } else if (type == 1) { %>
17. <span class="glyphicon glyphicon-heart-empty"></span>
18. <% } else { %>
19. <span class="glyphicon glyphicon-asterisk"></span>
20. <% } %>
21. <%= summary %>
22. <span class="pull-right small">#<%= _id %></span>
23. </h2>
24. </div>
25. <div class="panel-body">
26. <%= detail %>
27. </div>
28. <div class="panel-footer clearfix">
29. <span class="text-muted"><%= moment(submittedAt).fromNow() %></span>
30. <div class="btn-group pull-right">
31. <button class="btn btn-default btn-sm" id="close-issue">
32. <span class="glyphicon glyphicon-ok text-success"></span>
33. Close
34. </button>
35. <button class="btn btn-default btn-sm" id="edit-issue">
36. <span class="glyphicon glyphicon-edit text-info"></span>
37. Edit
38. </button>
39. <button class="btn btn-default btn-sm" id="delete-issue">
40. <span class="glyphicon glyphicon-trash text-danger"></span>
41. Remove
42. </button>
43. </div>
44. </div>
45. </div>
46.
47. <hr>
48. <% if(typeof comments !== "undefined") { %>
49. <% _.each(comments, function(comment, id) { %>
50.
51. <div class="panel panel-default small comment">

53. <span class="glyphicon glyphicon-comment"></span>
54. <b class="text-primary"><%= comment.authorName %></b>
55. <time class="text-muted">
56. <%= moment(comment.submittedAt).fromNow() %>
57. </time>
58.
59. <a href="#" title="" class="pull-right
60. text-danger
61. delete-comment"
62. data-index="<%= id %>">
63. <span class="glyphicon glyphicon-remove"></span>
64. </a>
65.
66. <span class="pull-right text-muted">#<%= id %></span>
67. </div>
69. <p>
70. <%= comment.comment %>
71. </p>
72. </div>
73. </div>
74. <% }) %>
75. <% } %>
76.
77. <div class="comment-form">
79. <label>Comment</label>
80. <textarea class="form-control"
81. placeholder="Comment" id="comment"></textarea>
82. </div>
84. <button type="submit" class="btn btn-default" id="post-comment">
85. <span class="glyphicon glyphicon-comment"></span>
86. Add Comment
87. </button>
88. </div>
89. </div>
90. </div>
91.
92. <div class="col-md-4 col-sm-12 col-xs-12 sidebar">
93. <div class="btn-group btn-breadcrumb">
94. <a href="#" class="btn btn-danger">
95. <% if(type == 0) { %>
97. <% } else if (type == 1) { %>
99. <% } else { %>
101. <% } %>
102. </a>
103. <a href="#" class="btn btn-danger">Type</a>
104.
105. <a href="#" class="btn btn-default" data-toggle="dropdown">
106. <%= typeLabel %> <span class="caret"></span>
107. </a>
108. <ul class="dropdown-menu dropdown-menu-right">
109. <% _.each(app.issueType, function(label, type) { %>
110. <li>
111. <a href="#" class="change-type" data-value="<%= type %>">

112. <%= label %>
113. </a>
114. </li>
115. <% }) %>
116. </ul>
117. </div>
118.
119.
121. <a href="#" class="btn btn-warning">
123. <span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
124. </a>
125. <a href="#" class="btn btn-warning">Priority</a>
127. <%= priorityLabel %> <span class="caret"></span>
128. </a>
130. <% _.each(app.issuePriority, function(label, priority) { %>
131. <li>
132. <a href="#" class="change-priority"
133. data-value="<%= priority %>"><%= label %></a>
134. </li>
135. <% }) %>
136. </ul>
137. </div>
138.
139. <hr>
140.
142. <a href="#" class="btn btn-success">
143. <span class="glyphicon glyphicon-user"></span>
144. </a>
145. <a href="#" class="btn btn-success">Assign</a>
147. <%= assignedToLabel %> <span class="caret"></span>
148. </a>
150. <% _.each(users, function(user, id) { %>
151. <li>
152. <a href="#" class="change-assign"
153. data-value="<%= user._id %>"><%= user.fullName %></a>
154. </li>
155. <% }) %>
156. </ul>
157. </div>
158.
160. <a href="#" class="btn btn-info">
161. <span class="glyphicon glyphicon-arrow-right"></span>
162. </a>
163. <a href="#" class="btn btn-info">Status</a>
165. <%= statusLabel %> <span class="caret"></span>
166. </a>
168. <% _.each(app.issueStatus, function(label, status) { %>
169. <li>
170. <a href="#" class="change-status" data-value="<%= status %>">
171. <%= label %></a>

172. </li>
173. <% }) %>
174. </ul>
175. </div>
176.
177. <hr>
178.
179. <div class="alert text-muted meta">
180. <p>
181. Submitted date: <b>
182. <%= moment(submittedAt).format("DD-MM-YYYY h-mm-ss a") %>
183. </b>
184. </p>
185. <p>Last modified: <b>
186. <% if(typeof modifiedAt !== 'undefined') { %>
187. <%= moment(modifiedAt).format("DD-MM-YYYY h-mm-ss a") %>
188. <% } %>
189. </b></p>
190. <p>Submitted by: <b>
191. <% var submitter = app.userList.get({ _id: submittedBy }) %>
192. <%= submitter.get("fullName") %>
193. </b></p>
194. </div>
195. </div>
196. </div>
HTML Structure Library

Template Page
Backbone View Template
Backbone View (.)
( (.) - Issue Detail Template

Column Layout Column Bootstrap Panel Issue Summary

Detail Panel .panel-info, .panel-warning,
.panel-danger Issue Priority ()

Issue Summary Icon Issue Type

() Panel Footer .btn-group Close, Edit, Delete
Button
Main Panel Panel Comment ()

Comment Textarea Button
Column Issue Type, Priority, Assigned To Status

Bootstrap Dropdown Column
Medium Screen 8-4 Small Screen Extra-Small Screen 12
Column Layout Screen Size
Responsive Layout
14.5 Issue Edit Template templates/issue-edit.html

Issue Form
templates/issue-edit.html
Template
1. <form action="#" id="issue-edit-form">

2. <div class="alert alert-info">
3. Issue ID: <b><%= _id %></b>
4. </div>
6. <label for="">Summary *</label>
8. placeholder="Summary" id="summary" value="<%= summary %>">
9. </div>
10.
12. <label for="">Detail / Steps to Reproduce</label>
13. <div class="form-control editor"
14. placeholder="Detail / Step to reproduce" id="detail">
15. <%= detail %></div>
16. </div>
17.
18. <button type="submit" class="btn btn-primary btn-lg" id="update-issue">
19. <span class="glyphicon glyphicon-edit"></span>
20. Update
21. </button>
22. <button class="btn btn-link" id="close-edit">Cancel</button>
23. </form>
24.
25. <script>
26. $(function() {
27. $('.editor').wysihtml5({
28. toolbar: {
29. "font-styles": false,
30. "emphasis": true,
31. "lists": true,
32. "html": false,
33. "link": true,
34. "image": false,
35. "color": false,
36. "blockquote": false,
37. "size": "sm"
38. }
39. });
40. });
41. </script>
View

( (.) - Issue Edit Template
Template Column Issue Summary, Issue Detail

Form Input
Wysihtml5 Plugin Issue Detail
Textarea Rich Text Editor
14.6 Issue List Templates templates/issue-list.html, issue.html

Issue List Template Issue List Table Template Issue List Item
Table Row Template Issue List Table Template templates/issue-list.html

Template
1. <table id="issue-list-table"
2. class="table table-bordered" cellspacing="0" width="100%">
3. <thead>
4. <tr>
5. <th>#</th>
6. <th width="50%">Summary</th>
7. <th>Type</th>
8. <th>Assigned To</th>
9. <th>Priority</th>
10. <th>Status</th>
11. </tr>
12. </thead>
13.
14. <tbody>
15.
16. </tbody>
17. </table>
18.
19. <script>
20. $(function() {
21. $("#issue-list-table").dataTable({
22. responsive: true
23. });
24. });
25. </script>
Table Template DataTables

Table Data Grid Issue
List Item Table Row Template templates/issue.html
Template
1. <td><%= index %></td>

2. <td>
3. <% if (status == 4) { %>
4. <a href="#" data-id="<%= _id %>" class="issue-summary">
5. <del><%= summary %></del></a>
6. <% } else { %>
7. <a href="#" data-id="<%= _id %>" class="issue-summary">
8. <%= summary %></a>
9. <% } %>
10. </td>
11. <td data-order="<%= type %>">
12. <% if(type == 0) { %>
14. <% } else if (type == 1) { %>

16. <% } else { %>
18. <% } %>
19. <%= typeLabel %>
20. </td>
21. <td><%= assignedToLabel %></td>
22. <td data-order="<%= priority %>"><%= priorityLabel%></td>
23. <td data-order="<%= status %>">
24. <% if(status == 0) { %>
25. <span class="label label-danger"><%= statusLabel %></span>
26. <% } else if (status == 1) { %>
27. <span class="label label-warning"><%= statusLabel %></span>
28. <% } else if (status == 2) { %>
29. <span class="label label-info"><%= statusLabel %></span>
30. <% } else if (status == 3) { %>
31. <span class="label label-success"><%= statusLabel %></span>
32. <% } else if (status == 4) { %>
33. <span class="label label-default"><%= statusLabel %></span>
34. <% } %>
35. </td>
Issue Type Icon Issue Status

Label Tag Template View

( (.) - Issue List Template
DataTables Sorting, Paging Filter

Issue List Table
Bootstrap Table Style
14.7 New Issue Template templates/issue-new.html

Issue Form Template
templates/issue-new.html
Template
1. <form action="#" id="new-issue-form">

3. <label for="">Summary *</label>
5. placeholder="Summary" id="summary">
6. </div>
7.
9. <label for="">Detail / Steps to Reproduce</label>
10. <div class="form-control editor" id="detail"></div>
11. </div>
12.
14. <label for="">Category</label>
15. <select class="form-control" id="type">
16. <% _.each(types, function(type, val) { %>
17. <option value="<%= val %>"><%= type %></option>
18. <% }); %>
19. </select>
20. </div>
21.
23. <label for="">Priority</label>
24. <select class="form-control" id="priority">
25. <% _.each(priorities, function(type, val) { %>
26. <option value="<%= val %>"><%= type %></option>
27. <% }); %>
28. </select>
29. </div>
30.
31. <button type="submit" class="btn btn-primary btn-lg" id="add-button">
33. Add Issue
34. </button>
35. </form>
36.
37. <script>
38. $(function() {
39. $('.editor').wysihtml5({
40. toolbar: {
41. "font-styles": false,
42. "emphasis": true,
43. "lists": true,
44. "html": false,
45. "link": true,
46. "image": false,
47. "color": false,
48. "blockquote": false,
49. "size": "sm"
51. }
52. });
53. });
54. </script>
Issue Summary, Issue Detail Issue Priority Form Template

Issue Edit Issue Detail Textarea Rich Text Editor
14.8 Login Form Template templates/login.html

Template Login Form teamplates/
login.html
Template
1. <form action="#" id="login-form">

2. <div class="alert alert-warning" id="login-alert"
3. style="display: none">
4. <span class="glyphicon glyphicon-warning-sign"></span>
5. Login ID or Password incorrect
6. </div>
7.
9. <label for="login-id">Login ID</label>
10. <input type="text" class="form-control" placeholder="Login ID"
11. id="login-id">
12. </div>
13. <div class="form-group" placeholder="Email">
14. <label for="password">Password</label>
15. <input type="password" class="form-control" id="password"
16. placeholder="Password">
17. </div>
18.
19. <button type="submit" class="btn btn-primary btn-lg" id="login">
20. Login
21. <span class="glyphicon glyphicon-log-in"></span>
22. </button>
23. </form>
LoginID Password Form Template Login Error

Bootstrap Style Alert Box
14.9 Navigation Menu Template templates/nav.html

Navigation Menu Template templates/
nav.html
Template
1. <div class="container-fluid">
2. <div class="navbar-header">
3. <button type="button" class="navbar-toggle"
4. data-toggle="collapse" data-target=".navbar-collapse">
5. <span class="icon-bar"></span>
8. </button>
9. <a class="navbar-brand" href="#">Issue Tracking System</a>
10. </div>
11. <div class="navbar-collapse collapse">
12. <% if(auth) { %>
13. <ul class="nav navbar-nav">
14. <li class="active">
15. <a href="#/issues" id="issue-list">
16. All Issues <span class="badge"><%= issueCount %></span>
17. </a>
18. </li>
19. <li><a href="#" id="my-issues">My Issues <span class="badge">
20. <%= myIssues %></span></a></li>
21. <li>
22. <a href="#" id="new-issue">
23. <span class="text-primary glyphicon glyphicon-plus"></span>
24. New Issue
25. </a>
26. </li>
27. </ul>
28. <ul class="nav navbar-nav navbar-right">
29. <li><a href="#/users" id="user-list">Users</a></li>
30. <li><a href="#" id="profile"><%= userName %></a></li>
31. <li><a href="#" id="logout">Logout</a></li>
32. </ul>
33. <% } %>
34. </div>
35. </div>
Navbar Issue Tracking System

Brand Name Navbar
Menu Menu All Issues, My Issues New Issue
Button Menu User List, User Profile Logout Button
Menu Item Authenticated User
Navbar Button Responsive

Navbar Menu
Screen Menu Menu Navbar Toggle Button
Button Menu Screen Size Device

Menu
( (.) - Navbar Template
14.10 User Edit Template templates/user-edit.html

User Password User Edit Template
templates/user-edit.html
Template
1. <h2>Edit User</h2>
2.
3. <form action="#" id="edit-user-form">
5. <label for="">Full Name *</label>
7. placeholder="Full Name" id="full-name" value="<%= fullName %>">
8. </div>
10. <label for="">Login ID *</label>
12. placeholder="Login ID" id="login-id" value="<%= loginId %>">
13. <span class="help-block">No space, small letters</span>
14. </div>
16. <label for="">Email *</label>
17. <input type="email" class="form-control" id="email"
18. placeholder="Email" value="<%= email %>">
19. </div>
21. <label for="">Role *</label>
22. <select class="form-control" id="role">
23. <% _.each(app.userRole, function(name, value) { %>
24. <option value="<%= value %>"
25. <%= value == role ? 'selected' : '' %>><%= name %></option>
26. <% }) %>
27. </select>
28. </div>
30. <label for="">Password (twice)</label>
32. <div class="col-md-6">
33. <input type="password" class="form-control"
34. placeholder="Password" id="password">
35. <span class="help-block">Leave blank if you don't
36. want to change password</span>
37. </div>
40. placeholder="Password Again" id="password-again">
41. </div>
42. </div>
43. </div>
44.
45. <button type="submit" class="btn btn-primary btn-lg" id="update-user">
46. <span class="glyphicon glyphicon-check"></span>
47. Update User
48. </button>
49. </form>
User Full Name, Login ID, Email, Role Password Form Template
14.11 User List Templates templates/user-list.html, user.html

User List Template Issue List User List
Table Template User Row Template templates/user-list.html
Template
1. <div class="table-responsive">
2. <table id="issue-list" class="table table-bordered"
3. cellspacing="0" width="100%">
4. <thead>
5. <tr>
6. <th>#</th>
7. <th>Full Name</th>
8. <th>Login ID</th>
9. <th>Email</th>
10. <th>Role</th>
11. <th width="160">Manage</th>
12. </tr>
13. </thead>
14.
15. <tbody>
16.
17. </tbody>
18. </table>
19. </div>
20.
21. <button class="btn btn-primary" id="new-user">
23. New User
24. </button>
Table
templates/
user.html
Template
1. <td><%= index %></td>

2. <td><a href="#" class="username"><%= fullName %></a></td>
3. <td><%= loginId %></td>
4. <td><%= email %></td>
5. <td><%= roleLabel %></td>
6. <td>
7. <a href="#" class="btn btn-default btn-xs edit-user">
8. <span class="glyphicon glyphicon-edit"></span>
9. Edit
10. </a> -
11. <a href="#" class="btn btn-danger btn-xs delete-user">
12. <span class="glyphicon glyphicon-trash"></span>
13. Remove
14. </a>
15. </td>
Table Row Template Full Name, Login ID, Email

14.12 User New Template templates/user-new.html

User New User Form Template
templates/user-new.html
Template
1. <h2>New User</h2>
2.
3. <form action="#" id="new-user-form">
5. <label for="">Full Name *</label>
7. placeholder="Full Name" id="full-name">
8. </div>
10. <label for="">Login ID *</label>
12. placeholder="Login ID" id="login-id">
13. <span class="help-block">No space, small letters</span>
14. </div>
16. <label for="">Email *</label>
17. <input type="email" class="form-control" id="email"
18. placeholder="Email">
19. </div>
21. <label for="">Role *</label>
22. <select class="form-control" id="role">
23. <% _.each(app.userRole, function(name, value) { %>
24. <option value="<%= value %>"><%= name %></option>
25. <% }) %>
26. </select>
27. </div>
29. <label for="">Password (twice) *</label>
33. placeholder="Password" id="password">
34. </div>
37. placeholder="Password Again" id="password-again">
38. </div>
39. </div>
40. </div>
41.
42. <button type="submit" class="btn btn-primary btn-lg" id="add-user">
44. Add User
45. </button>
46. </form>
User Edit Full Name, Login ID, Email, Role Password Form Template
14.13 User Profile Template templates/user-profile.html

Template User Profile
Template templates/user-profile.html
Template
2. <div class="col-md-8 col-sm-12 col-xs-12">
3. <div class="panel panel-info issue-detail">
5. <h2><span class="glyphicon glyphicon-user"></span>
6. <%= fullName %></h2>
7. </div>
9. <div class="form-horizontal" role="form">
11. <label class="col-sm-2 control-label">Login ID</label>
12. <div class="col-sm-10">
13. <p class="form-control-static"><%= loginId %></p>
14. </div>
15. </div>
17. <label class="col-sm-2 control-label">Email</label>
18. <div class="col-sm-10">
19. <p class="form-control-static"><%= email %></p>
20. </div>
21. </div>
22. </div>
23. </div>
24. <div class="panel-footer clearfix">
25. <div class="btn-group pull-right">
26. <button class="btn btn-default btn-sm" id="edit-user">
27. <span class="glyphicon glyphicon-edit text-info"></span>
28. Edit
29. </button>
30. </div>
31. </div>
32. </div>
33. </div>
34.
35. <div class="col-md-4 col-sm-12 col-xs-12 sidebar">
37. <a href="#" class="btn btn-info">
38. <span class="glyphicon glyphicon-star"></span></a>
39. <a href="#" class="btn btn-info">Role</a>
40.
41. <a href="#" class="btn btn-default"><%= roleLabel %></a>
42. <span></span>
43. </div>
44.
46. <a href="#" class="btn btn-warning">
47. <span class="glyphicon glyphicon-plus-sign"></span></a>
48. <a href="#" class="btn btn-warning">Issue Submitted</a>
49.
50. <a href="#" class="btn btn-default">
51. <%= submitCount %>
52. </a>
53. <span></span>
54. </div>
55.
57. <a href="#" class="btn btn-danger">
58. <span class="glyphicon glyphicon-tasks"></span></a>
59. <a href="#" class="btn btn-danger">Issue Assigned</a>
60.
61. <a href="#" class="btn btn-default">
62. <%= assignCount %>
63. </a>
64. <span></span>
65. </div>
66. </div>
67. </div>
Two Column Layout View

(.)
( (.) - User Profile Template
User Personal Information User Role

User Issue User Issue

Template BackboneJS Code

()
() Code Structure
Code

NodeJS

()
Rockstar Developer () Building Clients (Web App) 381
( ) Building Clients (Web App)
Issue Tracking System Client App Directory Structure Template

Backbone Model-View-Collection
JavaScript Code
Code Code
Code
Download
https://github.com/eimg/issues- backbone/archive/master.zip
App Login, Logout Helper Function

app.js
JavaScript
1. var app = {
2. host: "http://localhost:3000/api",
3.
4. api: function(path) {
5. return app.host + path;
6. },
7.
8. templateCache: {},
9.
10. loadTemplates: function(names, callback) {
11. var that = this;
12. var load = function(index) {
13. var name = names[index];
14. console.log('Loading template: ' + name);
15. $.get('templates/' + name + '.html?cache=false', function(data) {
16. that.templateCache[name] = data;
17. index++;
18. if (index < names.length) {
19. load(index);
20. } else {
21. callback();
22. }
23. });
24. }
25.
26. load(0);
27. },
28.
29. hookTemplate: function(name, data) {
30. var tmpl = _.template(this.templateCache[name]);
31. return tmpl(data);
32. },
33.
34. login: function(user, pass, ok, notok) {
35. $.ajax({
36. type: "post",
37. url: this.api("/users/login"),
38. data: {
39. username: user,
40. password: pass
41. },
42. statusCode: {
43. 400: notok,
44. 401: notok,
45. 200: ok
46. }
47. });
48. },
49.
50. logout: function(callback) {
51. $.ajax({
52. type: "delete",
53. url: this.api("/users/logout"),
54. complete: callback
55. });
56.
57. localStorage.removeItem("user");
58. },
59.
60. verify: function(ok, notok) {
61. $.ajax({
62. url: this.api("/users/verify"),
63. statusCode: {
64. 401: notok,
65. 200: ok
66. }
67. });
68. },
69.
70. saveUserInfo: function(user) {
71. localStorage.setItem("user", JSON.stringify(user));
72. },
73.
74. getUserInfo: function() {
75. return JSON.parse(localStorage.getItem("user"));
76. },
77.
78. issueType: [],
79. issuePriority: [],
80. issueStatus: [],
81. userRole: [],
82.
83. loadIssueTypes: function() {
85. $.ajax({
86. url: this.api("/issues/types"),
87. success: function(data) {
88. that.issueType = data;
89. }
90. });
91. },
92.
93. loadIssuePriorities: function() {
95. $.ajax({
96. url: this.api("/issues/priorities"),
98. that.issuePriority = data;
99. }
100. });
101. },
102.
103. loadIssueStatuses: function() {
105. $.ajax({
106. url: this.api("/issues/statuses"),
108. that.issueStatus = data;
109. }
110. });
111. },
112.
113. loadUserRoles: function() {
115. $.ajax({
116. url: this.api("/users/roles"),
118. that.userRole = data;
119. }
120. });
121. },
123.
124. init: function() {
125. this.loadTemplates(['nav', 'login', 'issue-list',
126. 'issue', 'issue-new', 'issue-detail', 'issue-edit',
127. 'user-list', 'user', 'user-profile', 'user-edit', 'user-new'
128. ], function() {
129. new appView();
130. });
131. }
132. }
133.
134. $.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
135. options.crossDomain = {
136. crossDomain: true
137. };
138.
139. options.xhrFields = {
140. withCredentials: true
141. };
142. });
() API Server Location host Property ()

URI API Server Location api() Function
() templateCache
Property
() loadTemplates() Function Template
template Cache Property ()
hookTemplate() Function Data Template UnderscoreJS Template
Function Compile
login(), logout(), verify() Function API Server

Login, Logout Verify Request Login API Server
User Data User Data HTML5 LocalStorage
saveUserInfo() getUserInfo()

() loadIssueTypes(), loadIssuePriorities(),
loadIssueStatuses() loadUserRoles() Function
Function API Server Request Issue Types, Priorities,
Statuses User Roles Property

app Object () init() Function load

Templates() Function Template Template
appView() Object App
App
app.init()
Client App Back-end API Service Cross-Domain Request CORS

Header Request

Header jQuery Ajax Options
crossDomain: true withCredentials: true jQuery

CORS Header Options Ajax Request

$.ajaxPrefilter()
$.ajaxPrefilter() Options jQuery Ajax Request
() $.ajaxPrefilter()
Function
15.1 Issue Model and Collection issues.js

issues.js Issue Model Collection
JavaScript
1. app.issueModel = Backbone.Model.extend({
2. urlRoot: app.api("/issues"),
3. defaults: {
4. "assignedTo" : null,
5. "detail" : null,
6. "priority" : 0,
7. "priorityLabel" : "Low",
8. "status" : 0,
9. "statusLabel" : "New",
10. "summary" : null,
11. "type" : 0,
12. "typeLabel" : "Bug"
13. },
14.
15. idAttribute: "_id"
16. });
17.
18. app.issueCollection = Backbone.Collection.extend({
19. model: app.issueModel,
20. url: app.api("/issues")
21. });
22.
23. app.issueList = new app.issueCollection();
issueModel app Object Property

() issueCollection () Collection Object
app Object Property Namespace
issueModel, issueList Variable

issueModel URL Root app.api() Function http://localhost:3000/api/issues

Model save(), destroy()

BackboneJS Data Sync Request http://localhost:3000/api/issues
Model ID Property _id

ID Issue MongoDB Database _id
Model ID
() issueCollection URL
app.api() Function Collection

fetch(), remove() Data Sync Request
http://localhost:3000/api/issues
15.2 User Model and Collection users.js

users.js User Model Collection
JavaScript
1. app.userModel = Backbone.Model.extend({
2. urlRoot: app.api("/users"),
3. idAttribute: "_id"
4. });
5.
6. app.userCollection = Backbone.Collection.extend({
7. model: app.userModel,
8. url: app.api("/users")
9. });
10.
11. app.userList = new app.userCollection();
Model Collection Back-end Server http://localhost:3000/api/users

Model Collection View
15.3 Navigation Menu View views/navView.js

Navigation Menu View Navigation View
Static HTML Main Template
Navigation Menu Issue Count
Backbone View
views/navView.js
JavaScript
1. var navView = Backbone.View.extend({

2. tagName: "div",
3. className: "navbar navbar-default",
4.
5. events: {
6. "click #new-issue": "showNewIssueForm",
7. "click #issue-list": "showIssueList",
8. "click #my-issues": "showMyIssues",
9. "click #user-list": "showUserList",
10. "click #profile": "showProfile",
11. "click #logout": "logout"

12. },
13.
15. var user = app.getUserInfo();
16. if( user ) {
17. var myIssues = app.issueList.where({
18. assignedTo: user._id
19. });
20.
21. var data = {
22. auth: true,
23. userName: user.fullName,
24. issueCount: app.issueList.length,
25. myIssues: myIssues.length
26. };
27. } else {
28. data = {
29. auth: false
30. }
31. }
32.
33. this.$el.html( app.hookTemplate("nav", data) );
34. return this;
35. },
36.
37. showNewIssueForm: function(e) {
38. $(".nav li").removeClass('active');
39. $(e.currentTarget).parent().addClass('active');
40.
41. var form = new issueNewView();
42. $("#main").html( form.render().el );
43. },
44.
45. showIssueList: function(e) {
48.
49. var list = new issueListView();
50. $("#main").html( list.render().el );
51. },
52.
53. showMyIssues: function(e) {
56.
57. var list = new myIssueListView();
59. },
60.
61. showUserList: function(e) {
64.
65. var users = new userListView();
66. $("#main").html( users.render().el );
67. },
68.
69. showProfile: function(e) {

72.
73. var user = new app.userModel(app.getUserInfo());
74. var profile = new userProfileView({ model: user });
75. $("#main").html( profile.render().el );
76. },
77.
78. logout: function() {
80. app.logout(function() {
81. var login = new loginView();
82. $("#main").html( login.render().el );
83.
84. that.render();
85. });
86. }
87. });
View Menu Item Main Content

View All Issue Menu
Main Content Issue List View
Users Menu User List View
Backbone Router Router

URL Pattern
Main Content View URL
#/issue-list Issue List View URL #/user-list
User List View
Backbone Router Menu Item Link
Link View
Backbone Router Router Navigation View
Event Menu Item Main Content View Event

() render() app.getUserInfo() User

Information Login User Information
User Information Nav View Data auth: true
Navigation Menu Template auth: true Menu Item
tempates/nav.html
Menu User Name, Issue Count, My Issue Count

Data User Name app.getUserInfo()
Issue Count Issue Collection Length My Issue Count
Issue Collection Issue Assigned To Field User ID Filter
Filter
()
View Function Main View Render

View
() showIssueList()
jQuery Menu Item .active Class Menu Item
.active Class issueListView() Object
Object render() Function el (Element) #main
app.hook() Function #main
Main Content View
index.html Element

15.4 Login View views/loginView.js

Login Form Login View
JavaScript
1. var loginView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "submit #login-form": "login"
6. },
7.
9. //
10. },
11.
13. this.$el.html( app.hookTemplate("login") );
14. return this;
15. },
16.
17. login: function() {
18. var loginId = $("#login-id").val();
19. var password = $("#password").val();
20.
21. app.login(loginId, password, function(user) {
22.
23. app.saveUserInfo(user);
24.
25. app.issueList.fetch({
26. success: function() {
29.
30. var nav = new navView();
31. $("#nav").html( nav.render().el );
32.
33. app.userList.fetch();
34. app.loadIssueTypes();
35. app.loadIssuePriorities();
36. app.loadIssueStatuses();
37. app.loadUserRoles();
38. }
39. });
40.
41. }, function() {
42. $("#login-alert").show();
43. });
44.
45. return false;
46. }
47. });
Login View Login Form Login

() render() Function app.hook() Function
Login Template Login Form ()
Event Login Button login() Function
login() Function Form Login ID Password

app.login() Login Login Success app
.saveUserInfo() User Information app.issueList Collection
fetch() Run API Server Issue List issueList
Collection URL localhost:3000/api/issues/ fetch() Function
Run Backbone localhost:3000/api/issues/ GET Request
API Server api/issues URI GET Request Issue List
API Server Issue List Backbone
Issue List Collection
Server Issue List Request Format

Collection Collection fetch()
Function Run Server List Collection
Backbone
Issue List Nav View #nav Element Render Issue List View
#main Element Render Issue Type, Priority, Status
User List, User Role Load Property
Login Success Data

Data Login Fail Template
#login-alert
15.5 Issue List View views/issueListView.js

Issue List View
JavaScript
1. var issueListView = Backbone.View.extend({

2. tagName: "div",
3.
5. //
6. },
7.
9. this.$el.html( app.hookTemplate("issue-list") );
10.
12. app.issueList.each(function(issue) {
13. var view = new issueView({ model: issue });
14. $("tbody", that.$el).append( view.render().el );
15. });
16.
17. return this;
18. }
19. });
20.
21. var myIssueListView = Backbone.View.extend({
22. tagName: "div",
23.
25. //
26. },
27.
29. this.$el.html( app.hookTemplate("issue-list") );
30.
32. var issues = app.issueList.where({
33. assignedTo: app.getUserInfo()._id
34. });
35.
36. _.each(issues, function(issue) {
37. var view = new issueView({ model: issue });
39. });
40.
41. return this;
42. }
43. });
44.
45. var issueView = Backbone.View.extend({
46. tagName: "tr",
47.
48. events: {
49. "click .issue-summary": "viewDetail"
50. },
51.

53. //
54. },
55.
57. var index = app.issueList.indexOf(this.model);
58. this.model.set("index", index + 1);
59.
60. this.$el.html( app.hookTemplate("issue", this.model.toJSON() ) );
61. return this;
62. },
63.
64. viewDetail: function(e) {
65. var detail = new issueDetailView({model: this.model});
66. $("#main").html( detail.render().el );
67. }
68. });
View () Issue List Table View, My Issue List Table View Table
Row Issue View
() Issue View app.hookTemplate()

Issue Template Render
Event Issue Summary
Issue Detail View
Issue List View My Issue List View Issue List Collection Loop
Table Issue View Row
Issue List View Issue List Collection My Issue List View Login
User ID Issue Assigned To Field Issue
15.6 Issue Detail View views/issueDetailView.js

Issue Summary
Issue Detail View
JavaScript
1. var issueDetailView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "click #delete-issue": "deleteIssue",
6. "click #close-issue": "closeIssue",
7. "click #edit-issue": "editIssue",
8. "click .change-type": "changeType",
9. "click .change-priority": "changePriority",
10. "click .change-assign": "changeAssign",
11. "click .change-status": "changeStatus",

12. "click #post-comment": "postComment",
13. "click .delete-comment": "deleteComment"
14. },
15.
17. //
18. },
19.
21. this.model.set("users", app.userList.toJSON());
22. this.$el.html(app.hookTemplate("issue-detail",this.model.toJSON()));
23. return this;
24. },
25.
26. deleteIssue: function() {
27. var urlRoot = this.model.urlRoot;
28. var id = this.model.id;
29. this.model.url = function() {
30. return urlRoot + "/" + id;
31. };
32.
33. this.model.destroy({
34. wait: true,
38. }
39. });
40. },
41.
42. closeIssue: function() {
46. return urlRoot + "/status/" + id;
47. };
48.
49. this.model.save({
51. status: 4,
52. statusLabel: app.issueStatus[4]
53. }, {
54. patch: true,
55. wait: true,
59. }
60. });
61. },
62.
63. editIssue: function() {
64. var edit = new issueEditView({ model: this.model });
65. $("#main").html( edit.render().el );
66. },
67.
68. changeType: function(e) {
69. var type = $(e.currentTarget).data("value");

73.
75. return urlRoot + "/type/" + id;
76. };
77.
79. type: type,
80. typeLabel: app.issueType[type]
81. }, {
82. patch: true,
83. wait: true,
85. var detail = new issueDetailView({ model: that.model });
87. }
88. });
89. },
90.
91. changePriority: function(e) {
92. var priority = $(e.currentTarget).data("value");
96.
98. return urlRoot + "/priority/" + id;
99. };
100.
102. priority: priority,
103. priorityLabel: app.issuePriority[priority]
104. }, {
105. patch: true,
106. wait: true,
110. }
111. });
112. },
113.
114. changeStatus: function(e) {
115. var status = $(e.currentTarget).data("value");
119.
121. return urlRoot + "/status/" + id;
123. };
124.
126. status: status,
127. statusLabel: app.issueStatus[status]
128. }, {
129. patch: true,
130. wait: true,

134. }
135. });
136. },
137.
138. changeAssign: function(e) {
139. var assign = $(e.currentTarget).data("value");
140. var label = $(e.currentTarget).html();
141.
145.
147. return urlRoot + "/assign/" + id;
148. };
149.
151. assignedTo: assign,
152. assignedToLabel: label
153. }, {
154. patch: true,
155. wait: true,
159. }
160. });
161. },
162.
163. postComment: function() {
164. var comment = $("#comment").val();
165. if(!comment) return;
166.
167. var user = app.getUserInfo();
168. var authorId = user._id;
169. var authorName = user.fullName;
170.
171. var newComment = {
172. comment: comment,
173. authorId: authorId,
174. authorName: authorName,
175. submittedAt: new Date(),
176. issueId: this.model.id
177. }
178.
179. var comments = this.model.get("comments") || [];
180. comments.push(newComment);
181.
184. $.post(urlRoot + "/comments", newComment, function() {
187. });
188. },
189.
190. deleteComment: function(e) {

191. var index = $(e.currentTarget).data("index");
192.
193. var comments = this.model.get("comments") || [];
194. comments.splice(index, 1);
195. this.model.set("comments", comments);
196.
199. $.ajax({
200. type: "delete",
201. url: urlRoot + "/comments",
202. data: {
203. issueId: that.model.id,
204. commentId: index
205. },
206. complete: function() {
209. }
210. });
211. }
212. });
View Issue Delete
Issue Close Issue Status, Priority, Assigned To

Comments

() deleteIssue() Issue Model Model URL

URL Structure
Default URL Model URL
Issue Delete URL localhost:3000/api/issues/:id
Issue Status URL localhost:3000/api/issues/status/:id
Action URL Pattern URL Pattern

Delete
Model destroy() Function Run Destroy
Function Model Server DELETE Request
destroy() Function Run Model Client-side
Server-side
() wait: true
Backbone Model Server-side Success Respond
Model Client-side Server-side
Server-side
Backbone Client-side wait: true
() closeIssue() Issue
Close Server API URL localhost:3000/api/issues/status/:id
URL Pattern status
Model save() Function Run
save() Function Model Server POST Request

Model Model PUT Request
Model Model ID Attribute (_id) Model
ID Attribute Server Model ID Attribute
save() Function Run Model _id Model Backbone PUT

Request Server Client-side Model
Server-side
API Server Status PUT Request

PATCH Backbone Request Method PATCH
() patch: true

Code
15.7 App View views/appView.js

Main App View views/appView.js
JavaScript
1. var appView = Backbone.View.extend({

2. el: "#app",
3.
5. this.render();
6. },
7.
11.
12. app.verify(function() {
13. app.issueList.fetch({
17.
20.
21. app.userList.fetch();
22. app.loadIssueTypes();
23. app.loadIssuePriorities();
24. app.loadIssueStatuses();
25. app.loadUserRoles();
26. }
27. });
28. }, function() {
29. var login = new loginView();
30. $("#main").html( login.render().el );
31. });
32. }
33. });
View Element Main Template index.html #app

Element initialize() Function render()
Function
View View Object
render() Function
render() Function app.verify() User Authenticated User

Authenticated User Issue List View Authenticated
User Login View
15.8 Main Template index.html

View App
View
View Main Template index.html

HTML
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <title>Issue Tracking System</title>
6. <link rel="stylesheet" href="bower_components/bootstrap/dist/
css/bootstrap.min.css">
7. <link rel="stylesheet" href="bower_components/bootstrap3-wysiwyg/dist/
bootstrap3-wysihtml5.min.css">
8. <link rel="stylesheet" href="css/style.css">
9. </head>
10. <body>
11. <div class="container" id="app">
12. <div id="nav">
13.
14. </div>
15. <div id="main">
16.
17. </div>
18. </div>
19.
20. <script src="bower_components/jquery/dist/jquery.min.js"></script>
21. <script src="bower_components/bootstrap/dist/js/
bootstrap.min.js"></script>
22. <script src="bower_components/bootstrap3-wysiwyg/dist/
bootstrap3-wysihtml5.all.min.js"></script>
23. <script src="bower_components/DataTables/media/js/
jquery.dataTables.min.js"></script>
24. <script src="bower_components/datatables-responsive/js/
dataTables.responsive.js"></script>
25.
26. <script src="bower_components/underscore/underscore-min.js"></script>
27. <script src="bower_components/backbone/backbone-min.js"></script>
28.
29. <script src="bower_components/moment/min/moment.min.js"></script>
30.
31. <script src="app.js"></script>
32. <script src="issues.js"></script>
33. <script src="users.js"></script>
34.
35. <script src="views/appView.js"></script>
36. <script src="views/navView.js"></script>
37. <script src="views/loginView.js"></script>
38. <script src="views/issueListView.js"></script>
39. <script src="views/issueNewView.js"></script>
40. <script src="views/issueDetailView.js"></script>
41. <script src="views/issueEditView.js"></script>
42. <script src="views/userListView.js"></script>
43. <script src="views/userProfileView.js"></script>
44. <script src="views/userEditView.js"></script>
45. <script src="views/userNewView.js"></script>
46.
47. <script>
48. app.init();
49. </script>
50. </body>
51. </html>
App Library View Model,

Collection #app Element
#nav Element #main Element
#nav Element Nav View Render
#main Element Main
Content View
() app.init() Function App app.js

app.init() Template Load App View

App
Client Web Server Run http-server NPM
Package Install Project Directory http-server Command Run

$ sudo npm install -g http-server

$ http-server
Starting up http-server, serving ./ on: http://0.0.0.0:8080

Hit CTRL-C to stop the server
http-server Default Port Port 8080

Browser localhost:8080 Client App
Login View Login Issue
List View
App
() Back-end Service
Service Run Back-end Service
Client Run localhost:8080 Access-Control-Allow-Origin Cross-domain
Request

View
Code
Code
15.9 New Issue View views/issueNewView.js

Issue New Form View Form Submit

Issue Model Model Issue List Collection
() listenTo() Issue List Collection Issue
Show Issue List

1. var issueNewView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "submit #new-issue-form": "create"
6. },
7.
9. this.listenTo(app.issueList, 'add', this.showIssueList);
10. },
11.
13. var data = {
14. priorities: app.issuePriority,
15. types: app.issueType
16. };
17.
18. this.$el.html( app.hookTemplate("issue-new", data) );
19. return this;
20. },
21.
22. create: function() {
23. var summaryInput = $("#summary");
24. if(!summaryInput.val()) {
25. summaryInput.parent().addClass('has-error');
26. summaryInput.focus();
27. return false;
28. }
29.
30. var summary = summaryInput.val();
31. var detail = $("#detail").html();
32. var type = $("#type").val();
33. var priority = $("#priority").val();
34.
35. var model = new app.issueModel({
36. "detail" : detail,
37. "summary" : summary,
38. "type" : type,
39. "typeLabel" : app.issueType[type],
40. "priority" : priority,
41. "priorityLabel" : app.issuePriority[priority]
42. });
43.
44. model.save(null, {
45. wait: true,
46. success: function(res) {
47. app.issueList.add(res);
48. }
49. });
50.
51. return false;
52. },
53.
54. showIssueList: function(data) {
57. }
58. });
15.10 Edit Issue View views/issueEditView.js

Issue Summary Detail Edit Form View Issue
Form Issue Summary Detail
Priority, Status, Assigned To

Issue Detail
1. var issueEditView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "submit #issue-edit-form": "updateIssue",
6. "click #close-edit": "showIssueDetail"
7. },
8.
10. //
11. },
12.
14. this.$el.html( app.hookTemplate("issue-edit", this.model.toJSON()));
15. return this;
16. },
17.
18. updateIssue: function() {
19. var summaryInput = $("#summary");
20. if(!summaryInput.val()) {
21. summaryInput.parent().addClass('has-error');
22. summaryInput.focus();
23. return false;
24. }
25.
26. var summary = summaryInput.val();
27. var detail = $("#detail").html();
28.
31. "detail" : detail,
32. "summary" : summary
33. }, {
34. wait: true,
36. that.showIssueDetail();
37. }
38. });
39.
40. return false;
41. },
42.
43. showIssueDetail: function(data) {
44. var detail = new issueDetailView({ model: this.model });
46. }
47. });
15.11 User List View views/userListView.js

User View Delete
List
User
User Delete Button
JavaScript
1. var userView = Backbone.View.extend({

2. tagName: "tr",
3.
4. events: {
5. "click .username": "viewProfile",
6. "click .edit-user": "editUser",
7. "click .delete-user": "deleteUser"
8. },
9.
11. var index = app.userList.indexOf(this.model);
12. this.model.set("index", index + 1);
13.
14. this.$el.html( app.hookTemplate("user", this.model.toJSON()) );
15. return this;
16. },
17.
18. viewProfile: function() {
19. var profile = new userProfileView({ model: this.model });
20. $("#main").html( profile.render().el );
21. },
22.
23. editUser: function() {
24. var user = new userEditView({ model: this.model });
25. $("#main").html( user.render().el );
26. },
27.
28. deleteUser: function() {
29. this.model.destroy({
30. wait: true,
32. var users = new userListView();
33. $("#main").html( users.render().el );
34. }
35. });
36. }
37. });
38.
39. var userListView = Backbone.View.extend({
40. tagName: "div",
41.
42. events: {
43. "click #new-user": "newUser"
44. },
45.
47. this.$el.html( app.hookTemplate("user-list") );
48.
50. app.userList.each(function(user) {
51. var view = new userView({ model: user });
53. });
54.
55. return this;
56. },
57.
58. newUser: function() {
59. var view = new userNewView();
60. $("#main").html( view.render().el );
61. }
62. });
15.12 User New View views/userNewView.js

User Form View New Issue View

Form Form

Form Validation
Form
Validate
Model
BackboneJS validate() Function Model
Validation View
Model
JavaScript
1. var userNewView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "submit #new-user-form": "create"
6. },
7.
9. this.listenTo(app.userList, 'add', this.showUserList);
10. },
11.
13. this.$el.html( app.hookTemplate("user-new") );
14. return this;
15. },
16.
17. create: function() {
18. var fullName = $("#full-name").val();
20. var email = $("#email").val();
21. var role = $("#role").val();
23.
24. var err = 0;
25. if(!fullName) {
26. err++;
27. $("#full-name").parent().addClass('has-error');
28. }
29.
30. if(!loginId) {
31. err++;
32. $("#login-id").parent().addClass('has-error');
33. }
34.
35. if(!email) {
36. err++;
37. $("#email").parent().addClass('has-error');
38. }
39.
40. if(!password) {
41. err++;
42. $("#password").parent().addClass('has-error');
43. }
44.
45. if(password != $("#password-again").val()) {
46. err++;
47. $("#password").parent().addClass('has-error');
48. $("#password-again").parent().addClass('has-error');
49. }
50.
51. if(err) return false;
52.
53. var model = new app.userModel({
54. "fullName" : fullName,
55. "loginId" : loginId,
56. "email" : email,
57. "role" : role,
58. "password" : password
59. });
60.
61. model.save(null, {
62. wait: true,
64. app.userList.add(res);
65. }
66. });
67.
68. return false;
69. },
70.
71. showUserList: function() {
72. var list = new userListView();
74. }
75. });
15.13 User Edit View views/userEditView.js

User Password Form View
Password Form Form
Password Form

JavaScript
1. var userEditView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "submit #edit-user-form": "updateUser"
6. },
7.
9. //
10. },
11.
13. this.$el.html( app.hookTemplate("user-edit", this.model.toJSON()) );
14. return this;
15. },
16.
17. updateUser: function() {
18. var fullName = $("#full-name").val();
20. var email = $("#email").val();
21. var role = $("#role").val();
23.
24. var err = 0;
25. if(!fullName) {
26. err++;
27. $("#full-name").parent().addClass('has-error');
28. }
29.
30. if(!loginId) {
31. err++;
32. $("#login-id").parent().addClass('has-error');
33. }
34.
35. if(!email) {
36. err++;
37. $("#email").parent().addClass('has-error');
38. }
39.
40. if(err) return false;
41.
44. "fullName" : fullName,
45. "loginId" : loginId,
46. "email" : email,
47. "role" : role,
48. "roleLabel" : app.userRole[role],
49. "password": password
50. }, {
51. wait: true,
53. that.showUserList();
54. }
55. });
56.
57. return false;
58. },
59.
60. showUserList: function() {
61. var list = new userListView();
63. }
64. });
15.14 User Profile View views/userProfileView.js

User Profile View User Email
User Issue User Assigned
Issue
JavaScript
1. var userProfileView = Backbone.View.extend({

2. tagName: "div",
3.
4. events: {
5. "click #edit-user": "userEdit"
6. },
7.
9. //
10. },
11.
14. this.model.set("submitCount", app.issueList.where({
15. "submittedBy": that.model.id
16. }).length);
17.
18. this.model.set("assignCount", app.issueList.where({
19. "assignedTo": that.model.id
20. }).length);
21.
22. this.$el.html(app.hookTemplate("user-profile", this.model.toJSON()));
23. return this;
24. },
25.
26. userEdit: function() {
27. var user = new userEditView({ model: this.model });
28. $("#main").html( user.render().el );
29. }
30. });
Issue Tracking System Web Client Code

Code

Code Download
https://github.com/eimg/issues-backbone/archive/master.zip
Conclusion
App BackboneJS M-V-C Code Architecture Framework
BackboneJS
App
Structure
Template
Template

View Event
View View
Event
File Name Model, View, Collection Name Function Name Variable

Name
File Name () Function Name

Code

Issue Status
Priority Filter

Email Notification ()
Source Code
Platform
Cross-platform


Download
http://pwdbook.com
Rockstar Developer () Building Clients (Hybrid Mobile App) 410
( ) Building Clients (Hybrid Mobile App)
() ExpressJS Issue Tracking System

API Service HTTP Client
Web Client API Service

API Andorid, iOS Mobile Platform
Mobile Client
16.1 Types of Mobile Apps

Mobile App Native App, Mobile Web App Hybrid App
Native App Mobile Platform SDK

App Mobile Device Install
App Native App Android
App Android Device iOS
App iOS
Web Client Bootstrap Responsive Layout

Mobile Device Device
Web Client Mobile Web Client
Mobile Web Client
Browser Device Mobile Web
Client Device
Device Storage GPS, Camera
Web Client
Mobile Web Client Native Client

Hybrid App
App
HTML5, CSS3, JavaScript Web Technology Mobile Web Client
Mobile Platform
Web Technology Native Technology
Device

App Web Browser Native App Install

()
Web Client Cordova
Mobile Device Install Hybrid App
16.2 Apache Cordova

Apache Cordova
Hybrid App Mobile Development
Framework App HTML5, CSS3, JavaScript Web
Technology App Mobile Platform Webview
Embedded Browser Mobile Device Native

JavaScript API App Device Native
Cordova Cordova

Web Client Hybrid App
Cordova cordova.apache.org
Cordova NPM Install
$ sudo npm install -g cordova
Install Project cordova create
$ cordova create issues com.yourname.issues 'Issue Tracking System'
cordova create Parameter () issues

Project Directory Name
com.yourname.issues Reverse Domain
Style ID Domain Name Unique Package Name
yourname Domain Name
Parameter App Title
cordova create issues Directory
issues
config.xml
hooks
README.md
platforms
plugins
www
css
img
index.html
js
config.xml App Setting
XML
1. <?xml version='1.0' encoding='utf-8'?>

2. <widget id="com.yourname.issues" version="0.0.1"
xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
3. <name>Issues Tracking System</name>
4. <description>
5.
6. </description>
7. <author email="dev@cordova.apache.org" href="http://cordova.io">
8. Apache Cordova Team
9. </author>
10. <content src="index.html" />
11. <plugin name="cordova-plugin-whitelist" version="1" />
12. <access origin="*" />
13. <allow-intent href="http://*/*" />
14. <allow-intent href="https://*/*" />
15. <allow-intent href="tel:*" />
16. <allow-intent href="sms:*" />
17. <allow-intent href="mailto:*" />
18. <allow-intent href="geo:*" />
19. <platform name="android">
20. <allow-intent href="market:*" />
21. </platform>
22. <platform name="ios">
23. <allow-intent href="itms:*" />
24. <allow-intent href="itms-apps:*" />
25. </platform>
26. </widget>
id Reverse Domain <name>,

<description>, <author> Element
() <access origin="*" />
Web Browser Cross-domain Request Cordova

Default <access origin="*" /> Cross-domain Request
API Service App Access
Project Directory www Directory App Directory

BackboneJS Client Code Directory
Platform cordova add platform

$ cordova platform add android
npm http GET https://registry.npmjs.org/cordova-android/4.0.0

npm http 200 https://registry.npmjs.org/cordova-android/4.0.0
npm http GET https://registry.npmjs.org/cordova-android/-/cordova-android-
4.0.0.tgz
npm http 200 https://registry.npmjs.org/cordova-android/-/cordova-android-
4.0.0.tgz
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.eimaung.issues
Name: Issues Tracking System
Activity: MainActivity
Android target: android-22
Copying template files...
Android project created with cordova-android@4.0.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the
project
Fetching plugin "cordova-plugin-whitelist@1" via npm
npm http GET https://registry.npmjs.org/cordova-plugin-whitelist
npm http 304 https://registry.npmjs.org/cordova-plugin-whitelist
Installing "cordova-plugin-whitelist" for android
Android SDK Cordova Android SDK

Platform Tools Android SDK
http://developer.android.com/sdk/index.html
Android Platform
cordova platform add ios

cordova platform add amazon-fireos
cordova platform add blackberry10
cordova platform add firefoxos
cordova platform add wp8
cordova platform add windows
Platform cordova platform remove
www Directory Web Client Source Code index.html

HTML
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>

10. </head>
11. <body onLoad="onLoad()">

49. <script>
50. function onLoad() {
51. document.addEventListener("deviceready", function(){
52. app.init();
53. }, false);
54. }
55. </script>
56. </body>
57. </html>

Webview JavaScript Code deviceready Event
app.init() deviceready Event

Web Client Code Device Webview

App Android Device Run Device USB

Device Setting USB Debugging USB USB
Debugging cordova run App
$ cordova run android

App USB
Android Device
cordova run .apk Installer
platforms/android/build Directory Hybrid App
Android Mobile Platform
Conclusion
Web App Install

App Device

Hybrid App
Device Battery Status, Network Status, Motion Sensor, Orientation, Geolocation, Camera, File,
Vibration Hardware Contact, Dialog Mobile OS
App Plugin
Cordova Plugin
http://plugins.cordova.io/
()
Deployment and Scaling

Software
Software Run
Server Environment
Ubuntu Linux ()

http://u4ubook.com
( ) Deployment with Docker
Software Production Server Environment

Challenge ()
1. Development Machine Software Production Server

Package Dependencies

2. Software Software
Production Server
3. SOA Software Service
Service Environment Production Server
Service
17.1 Development Machine vs. Production Server

Software Development Code Build
Production Code () Code
Development Production Code Run
Development Machine Production Server Development Machine
Code Laptop Production
Server Public IP Address () Domain
Name
Software
Development Machine
Production Server Production
Server Development Machine Environment
Software Operating System, Web Server, Database Server,
Programming Language Package Production Server
Software Package Version

Software MongoDB 2.4
Production Server MongoDB 2.4

Rockstar Developer () Deployment with Docker 419
Version MongoDB 3.0 Production Server

Software Development Machine
Production Server
Software Package
Software Version 1.0 NodeJS 0.12.2

Software Production Server
NodeJS 0.12.2
Software Version
2.0 NodeJS 1.0 Production Server NodeJS 1.0

Version 2.0
Release
Production Server Run
Software Version 1.0 Development Machine Version 2.0

Challenge
Service Server
Service NodeJS 0.12.2
Service NodeJS 1.0 Service
Server
NodeJS Version
Package Version
Package
Challenge
Docker

17.2 Docker
Docker Tool LXC
Linux Container LXC
Virtualization VirtualBox,
VMWare Hypervisor Virtual Machine
VirtualBox VMWare Hypervisor Virtual Machine Host Operating System

Guest Operating System Host
Operating System Linux, Windows, Mac OS Guest OS

OS Ubuntu OS VirtualBox Windows 7
Ubuntu OS Host OS Windows 7 Guest OS
Ubuntu Linux () Host OS Guest OS
Host OS Guest OS (.)

Hypervisor Virtual Machine
Docker Container Virtual Machine

Docker Linux OS
Linux
Docker Linux Kernel
Environment
Linux OS Virtual Machine
Linux Host OS Linux Guest OS Docker
OS Guest OS
OS Image
OS Image
Run
Virtual Machine Container
(.)
Docker Container
( (.) - Hypervisor vs. Docker
Source docker.com
(.)
Hypervisor Host OS Kernel, Library
OS
Guest OS Kernel, Library OS
Docker Host OS Kernel, Library
OS Container OS Image OS Host OS
Host OS Library
Configuration OS
Virtual Machine Guest OS Kernel OS

Host OS Guest OS Host OS

Guest OS CPU, Memory System
Resource Host OS Guest OS RAM 4
GB Host OS 2 GB RAM 1 GB Guest OS

Container Kernel OS
Host OS Container OS Image
Environment Guest OS
Host OS Setting
OS Image
Docker Ubuntu Linux Install
$ sudo apt-get install docker.io
boot2docker
Windows, Mac Operating System
Docker Install

https://docs.docker.com/installation/
Command

17.3 Getting Docker Images

Docker Install Docker Image Download
docker pull Command Ubuntu Docker Image Install
$ sudo docker pull ubuntu
Git Source Code Version Docker Image

Version Version Ubuntu Image

Version
$ sudo docker pull ubuntu:latest

$ sudo docker pull ubuntu:14.04
Ubuntu Image latest Tag

Version 14.04 Tag
Version
Docker Image
registry.hub.docker.com docker search

$ sudo docker search mongo

NAME DESCRIPTION STARS OFFICIAL AUTOMATED mongo
MongoDB document databases provide high av... 753 [OK]
tutum/mongodb MongoDB Docker image listens in port 2... 33 [OK]
torusware/speedus-mongo Always updated official MongoDB docker ima... 7 [OK]
jacksoncage/mongo Instant MongoDB sharded cluster 6 [OK]
mongooseim/mongooseim-docker MongooseIM server the latest stable version 2 [OK]
knickers/mongo-express Graphically manage your mongoDB container ... 2 [OK]
19hz/mongo-container Mongodb replicaset for coreos 1 [OK]

asteris/apache-php-mongo Apache2.4 + PHP + Mongo + mod_rewrite 0 [OK]
appertly/hhvm-mongo Docker image of HHVM with compiled Mongofi... 0 [OK]
ulexus/mongo DEPRECATED - please use the official mongo... 0 [OK]
razmo/mongo MongoDB base 0 [OK]
rzani/php-mongo PHP and MongoDB (drive) 0 [OK]
docker search mongo Image MongoDB Install

Image OFFICIAL Column [OK]
Image Docker Team Official Image [OK] Image
Unofficial Image Unofficial Image
username/image
Image DockerHub
Image docker images
$ sudo docker images

REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE
ubuntu nginx 906bf9539e9d 4 days ago 206.9 MB
ubuntu 14.04 d2a0ecffe6fa 7 days ago 188.4 MB
hello-world latest 91c95931e552 3 months ago 910 B
ubuntu Image hello-world Image

ubuntu Image
nginx TAG
14.04 TAG
17.4 Running Image in Docker Container

Image Docker Container Run docker run
$ sudo docker run ubuntu:14.04 echo 'hello world'
hello world
ubuntu:14.04 Image Docker Container Run echo 'hello world'

Command Container
hello world Message
Host OS
Container echo Command

Container Run Image Terminal -t Option -i Option

-t Terminal -i Interactive

docker run -t -i () -ti
$ sudo docker run -t -i ubuntu:14.04 /bin/bash
root@090b21537ff8:/#
ubuntu:14.04 Image Container Run Command Run Prompt

Terminal NodeJS Install
root@090b21537ff8:/# apt-get update && apt-get install -y nodejs
apt-get update Package Repo Update

apt-get install NodeJS Install
ubuntu:14.04 Image Image
NodeJS Package Dependency

Container docker ps
Terminal
$ sudo docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS NAMES

090b21537ff8 ubuntu:14.04 /bin/bash 4 minutes ago Up 4 minutes berserk_bohr
ubuntu:14.04 Image Run

Container Id Container Name
Container berserk_bohr Docker
17.5 Saving Image Update

NodeJS Install Container Image
docker commit Command Save
Container ID Name
$ sudo docker commit -m 'Installed NodeJS' -a 'Ei Maung' berserk_bohr ubuntu:node
ecc87910db51819c68414d2400e5a2a88b7090c6efb35eb1e7ee681502f8384a

ubuntu node ecc87910db51 29 seconds ago 221 MB
ubuntu nginx 906bf9539e9d 4 days ago 206.9 MB
() Git Version -m Option

Commit Message -a Option Commit
Container Name () ID Image
Image ubuntu node TAG

NodeJS Install Ubuntu Image ubuntu:node

Image () Tag docker tag
$ sudo docker tag ubuntu:node ubuntu:nodejs


ubuntu node ecc87910db51 4 minutes ago 221 MB
ubuntu nodejs ecc87910db51 4 minutes ago 221 MB
ubuntu:node Image ubuntu:nodejs

Docker ubuntu:node
Image docker rmi
$ sudo docker rmi ubuntu:nodejs
Untagged: ubuntu:nodejs

ubuntu node ecc87910db51 6 minutes ago 221 MB
17.6 Creating Image with Dockerfile

Image docker commit Image
Docker Image Dockerfile
Configuration

Config
1. FROM ubuntu:14.04
2. RUN apt-get update && apt-get install -y mongodb
3. RUN mkdir -p /data/db
4. EXPOSE 27017
5. CMD ['/usr/bin/mongod']
FROM Keyword Image ubuntu:14.04 Image

Image RUN Keyword Image
Command apt-get
Package Repository Update mongodb Install MongoDB
/data/db Directory RUN Keyword
EXPOSE Keyword Container Service Host OS

MongoDB Default Port 27017 Host OS

CMD Command Image Run Command

MongoDB Server mongod Command Image
Run
RUN CMD RUN Image Command

CMD Image Container Command

Dockerfile RUN Keyword

CMD Keyword CMD Keyword
Docker
Dockerfile Image docker build

-t Option Image
$ sudo docker build -t ubuntu:mongo .
Dot Dot Dockerfile Directory

docker build Command Run Directory Dockerfile
Dot Location Build
MongoDB Install ubuntu:mongo
Image
Dockerfile Keyword
http://docs.docker.com/reference/builder/
Image Build Dockerfile docker build

Run docker build Build Dockerfile
Image Update
17.7 Running Container as Daemon

Image Container Run Container Background Service (Daemon)
-d Option -
$ sudo docker run -d -p 27017:27017 ubuntu:mongo
ubuntu:mongo Image Background Service Container Run

-p Option Port Binding 27017:27017
Host OS Port 27017 Container Port 27017 Bind
Container Port 27017
MongoDB Server Host OS

docker ps Container Background Service

Run Container Background Service
Container docker stop
$ sudo docker ps
CONTAINER ID IMAGE COMMAND PORTS NAMES

959db209f4cb ubuntu:mongo /usr/bin/mongod 27017->27017 silly_archimedes
73f4d6ae4a1a ubuntu:14.04 /bin/sh -c 'while tr trusting_pare
$ sudo docker stop silly_archimedes
docker stop Container ID Background Service Run

Container dock stop Container

docker start
$ sudo docker start silly_archimedes
Container docker rm
$ sudo docker stop silly_archimedes

$ sudo docker rm silly_archimedes
--name Option Container Run

Container Docker Docker
Container Name --name Option

$ sudo docker run -ti --name mymongo ubuntu:14.04 /bin/bash
Terminal docker ps Run

mymongo Container
$ sudo docker ps

959db209f4cb ubuntu:14.04 /bin/bash mymongo

Container Run Container
docker ps -a Option
17.8 Data Volume in Container

Container Data Volume
/data Volume Container
$ sudo docker run -d -v /data ubuntu:14.04
-v Option Volume Host OS

Directory Data Volume
$ sudo docker run -d -v /var/www:/data ubuntu:14.04
root@cef44bf69c38:/# cd data
root@cef44bf69c38:/data# ls
sample.txt logo.png
/var/www Host OS Directory

Host /var/www Container Image /data
Build
Project Directory Docker Container
Run Image

17.9 Linking container

Service Package Docker Image
NodeJS MongoDB App NodeJS MongoDB
Image

( (.) - Docker Image with NodeJS + MongoDB

Package Image
NodeJS Image MongoDB Image
Image Run
Container Link
( (.) - Linking Docker Containers

() ExpressJS Issue Tracking System API
Image Dockerfile
Config
1. FROM ubuntu:14.04
2. RUN apt-get update && apt-get install -y nodejs nodejs-legacy
3. RUN mkdir -p /src
4. COPY . /src
5. EXPOSE 3000
6. CMD ["node", "/src/index.js"]
ubuntu:14.04 Image nodejs nodejs-legacy
Package Install
/src Directory
() COPY Keyword Host Directory Image
/src Directory Directory
Issue Tracking API Source Code Image Build

Source Code Image Docker
Port 3000 Expose Image Run node

Command /src/app.js Run Dockerfile docker build
Build
$ sudo docker build -t ubuntu:node .

NodeJS Install
Issue Tracking API Source Code
ubuntu:node Image
Image Run

$ sudo docker run -d -p 80:3000 ubuntu:node
Issue Tracking API MongoDB Image MongoDB

MongoDB Install
Image Link
Link MongoDB Image Run
$ sudo docker run -d ubuntu:mongo

$ sudo docker ps

959db209f4cb ubuntu:mongo /usr/bin/mongod 27017->27017 silly_archimedes
Container Name --link Options

$ sudo docker run -d -p 80:3000 --link silly_archimedes ubuntu:node
ubuntu:node Image Run --link Option Run ubuntu:

mongo ubuntu:node Issue Tracking API
Container Run MongoDB
Conclusion
Production Server Environment Challenge ()
Docker
1. Software Project Development Environment

Package
Dockerfile
2. Dockerfile Image Build

Development Image
3. Package Upgrade ()
Manual Dockerfile
Software Project
Package Dockerfile

4. Development Production Environment Dockerfile

Server Build Software Project Production
Environment
5. Development Production Dockerfile
Environ-ment
6. Development Machine Package Update
Dockerfile Production Server Build Production Environment

SOA Service Environment

Package Docker Image
Server Environment Service
Service NodeJS 0.12.2

Docker Image NodeJS 0.12.2 NodeJS 1.0
Docker Image NodeJS 1.0 Image
Container Server

Docker Developer
Docker RedHat, VMWare, Ubuntu, Microsoft
Docker LXC Container

App
Server Architecture


()
Rockstar Developer () Load Balancing with Nginx 433
( ) Load Balancing with Nginx
Performance Hardware Server

Host
Software
Application () Service Request

App
Server
App Server
Server Load Balance
Nginx
Nginx Apache
Web Server Engine X
Igor Sysoev
Open Source
Resource
Web Server Web Server Reverse Proxy, Load Balancer,
Cache Server
Ubuntu Nginx Install
$ sudo apt-get install nginx
Source Code () Windows Nginx Installer
http://nginx.org/en/download.html
Install Nginx Web Server Run
$ sudo nginx
Ubuntu apt-get Install

Ubuntu Run
Run Nginx nginx -s stop () nginx -s

quit stop Nginx quit Signal
Request
$ sudo nginx -s quit
Nginx Server Configuration Nginx Restart Configuration

Reload reload Signal
$ sudo nginx -s reload
18.1 Nginx Configuration

Ngix Configuration Simple Directive Block Directive
Simple Directive name parameter Format Semi-colon
Block Directive name Block
Block Instruction # Sign
Comment
Configuration
Nginx Simplify

Directive http, server location

Directive ()
Config
1. http {
2. gzip on;
3. server {
4. listen 80
5. server_name example.com
6. location / {
7. # Configuration
8. }
9. }
10.
11. server {
12. listen 80
13. server_name example.net
14. location / {
15. # Configuration
16. }
17.
18. location /images {
19. # Configuration
20. }
21. }
22. }
http Main Block http Block

Setting server Block server Block
Setting location Block server Block Virtual Host
location Block Routing
Nginx Server Setting http Block Virtual Web
Server Setting
server Block location
Setting
location Block
Ubuntu Linux Nginx Main Configuration /etc/nginx/nginx.conf

Text Editor
Config
1. user www-data;
2. worker_processes 4;
3. pid /run/nginx.pid;
4.
5. events {
6. worker_connections 768;
7. # multi_accept on;
8. }
9.
10. http {
11.
12. ##
13. # Basic Settings
14. ##
15.
16. sendfile on;
17. tcp_nopush on;
18. tcp_nodelay on;
19. keepalive_timeout 65;
20. types_hash_max_size 2048;
21.
22. include /etc/nginx/mime.types;
23. default_type application/octet-stream;
24.
25. access_log /var/log/nginx/access.log;
26. error_log /var/log/nginx/error.log;

27.
28. gzip on;
29. gzip_disable "msie6";
30.
31. include /etc/nginx/conf.d/*.conf;
32. include /etc/nginx/sites-enabled/*;
33. }
http Block Setting http Block

() include Directive /etc/nginx/sites-enabled Directory
Configuration server Block
Main Configuration sites-enabled Directory
sites-enabled Directory default
Config
1. server {
2. listen 80 default_server;
3. listen [::]:80 default_server ipv6only=on;
4.
5. root /usr/share/nginx/html;
6. index index.html index.htm;
7.
8. server_name localhost;
9.
10. location / {
11. try_files $uri $uri/ =404;
12. }
13. }
Comment Comment
server Block () root Directive
/usr/share/nginx/html Directory Document Root
HTML Static Document /user/share/nginx/html Directory
() index Directive index.html index.htm Directory Index
Document Root Location
Config
1. location /static {
2. root /usr/share/nginx/html
3. }
4.
5. location /images {
6. root /usr/share/nginx/html/images
7. }
URI /static Request Document Root URI

/images Request Document Root
default Configuration () try_files $uri $uri/ =404

Document Root URI Path () Directory Response
404 Response
Nginx Static File Server Directive
() server_name localhost Server

Domain Name localhost Domain Name
Domain Name Domain Name Virtual Host

Config
1. server {
2. server_name example.com;
3. root /var/www/example.com;
5. location / {
6. try_files $uri $uri/ =404
7. }
8. }
9.
10. server {
11. server_name example.net;
12. root /var/www/example.net;
14. location / {
16. }
17. }
example.com Document Root exmaple.net Document Root

() ExpressJS API Server Cross Origin Resource

Sharing Header Nginx Default
Header add_header Directive
Config
1. location / {
2. add_header 'Access-Control-Allow-Origin' '*';
3. add_header 'Access-Control-Allow-Credentials' 'true';
4.
6. }
location Block Location

Web Server
server Block
Nginx Directive

http://nginx.org/en/docs/http/ngx_http_core_module.html
18.2 Proxy
Ngix

Proxy Proxy Server
User Request
App Server
Proxy Forward Proxy Reverse Proxy Forward Proxy

"Client "
Proxy Client
example.com foo.com foo.com Client
Request example.com foo.com Forward Proxy

example.com foo.com

( (.) - Forward Proxy
Reverse Proxy
Request "Server "
Proxy Client example.com Request

example.com Request foo.com example.com
Reverse Proxy App Server foo.com example.com
User foo.com example.com
App Server
Reverse Proxy
( (.) - Reverse Proxy
Proxy Server Request

.) App Server
Access Client
Request App Server
Proxy Server
.) Proxy Cache
Client Resource Proxy Cache App Server
Proxy Cache Content
App Server
.) App Server Request

Server App Server Load
Balance

Nginx Proxy
proxy_pass Directive

Config
1. location /api {
2. proxy_pass http://foo.com:3000/api;
3. }
/api URI Nginx foo.com:3000/api

URI /api/issues
URL http://foo.com:3000/api/issues
App Server Request Forward
Config
1. if ($http_user_agent ~* (wget|crawler) ) {
2. return 403;
3. }
4.
5. location /api {
6. deny 192.168.1.2;
7. proxy_pass http://foo.com:3000/api;
8. }
User Agent Search Engine Crawler () Wget 403

Forbidden Response IP Address 192.168.1.2 Request
Deny
IP Address User Agent Black List

Request Request Header

example.com Proxy Server Setup
API Server foo.com Setup

User example.com Request example.com Proxy Server foo.com
Request foo.com
Request User example.com
Request foo.com
Request example.com
Proxy Request Request Header
Header
Config
1. proxy_set_header HOST $host;

2. proxy_set_header X-Forwarded-Proto $scheme;
3. proxy_set_header X-Real-IP $remote_addr;
4. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
5.
6. location /api {
7. proxy_pass http://foo.com/api;
8. }
Nginx $host Variable Request Host

$host Variable example.com Proxy Request
HOST Header proxy_pass Host Name
HOST Header Client example.com Proxy foo.com
HOST Header
() proxy_set_header Directive
HOST $host () X-Forwarded-
Proto Header Standard HTTP Header
Custom Header Nginx $scheme Variable
Protocol (HTTP HTTPS) Proxy Server App Server
Protocol Client Protocol

() X-Real-IP Custom Header Client IP Address App Server

Proxy
Configure Nginx Proxy Server IP Address
$proxy_add_x_forwarded_for Variable ()
Proxy Server IP
Request App Server

Proxy Server Header
18.2 Load Balancing

Nginx Proxy App Server Server
Request upstream
Directive
Config
1. upstream api_servers {
2. server api.server1.com;
5. }
6.
7. server {
8. # Other server configs
9. location /api {
10. proxy_pass http://api_servers;
11. }
12. }
upstream Directive api_servers Block

Block Server ()
proxy_pass Upstream Server
api_servers Nginx Upstream Server
Request
Server
Request
Load Balancing Algorithm Nginx Default Algorithm

Round Robin Algorithm
Round Robin - Round Robin Algorithm Request

Server Server Request
api.server1.com
api.server2.com
Least Connection Nginx Load Balancing Algorithm

least_conn Server Active Connection Server
Request Round Robin
Server Server Algorithm
IP Hash Algorithm ip_hash Algorithm Client IP

Address Server Client Request
Server
Server
Proxy ip_hash Algorithm Client IP
Server
Least Connection Algorithm Upstream Setting
Config
2.
3. least_conn;
4.
8. }
IP Hash
Config
2.
3. ip_hash;
4.
8. }
Server Server
Upstream Setting Weight
Config
2. server api.server1.com weight=3;
5. }
api.server1.com Server Request ()

Server Load Balance
Upstream Server Server Request

Config
2. server api.server1.com max_fails=3 fail_timeout=25s;
5. }
max_fails 3 api.server1.com Request

() Fail fail_timeout
() Server Nginx Proxy Server

18.3 Proxy Cache

Nginx Proxy
Content Cache
Nginx Proxy Content Request
Upstream Server Cache Content Response

Upstream Server

Cache
http Block

Config
1. proxy_cache_path /var/lib/nginx/cache levels=1:2 keys_zone=backcache:8m max_size=50m;
2. proxy_cache_key "$scheme$request_method$host$request_uri$is_args$args";
3. proxy_cache_valid 200 10m;
4. proxy_cache_valid 404 1m;
() proxy_cache_path Directive Cache Content

Directory Nginx Cache Cache Key Cache Data
Cache Key Scheme, Request Method, Host Name, Request URI
Request Variable () Request
GET http://example.com/api
Cache Key httpgetexample.com/api0 Nginx
Key Hash
() levels=1:2 Cache Cache Key Hash

Character Directory Hash Character
Directory
Key Hash abcd123ef34abc c Directory ab Directory Cache Content

keys_zone=backcache:8m Cache Key backcache

Cache Key Storage 8 MB
max_size=50m Cache Content Storage 50 MB

() () proxy_cache_valid Status Code 200 OK

Content () Cache Status Code 404 Not Found Content
() Cache
Cache Setting Cache

server () location Block
Config
1. location /api {
2. proxy_cache backcache;
3. proxy_cache_bypass $http_cache_control;
4.
5. proxy_pass http://api_servers;
6. }
proxy_cache Directive Cache Key Client

Cache-Control Header proxy_cache_bypass
Directive Client Cache App Server
"Cache-Control: no cache"
Header Request
no cache Header Nginx Cache Upstream Server Request

Cache
Image, Icon, Style, JavaScript Library Static Content Cache
Content Cache Database User List
Cache Cache Database Data
Nginx () Cache Client Data

Content User A Request
Data Cache
User B Request Cache User B
User A Content Static Content
Cache Response Cache
App Server
JavaScript
1. app.use(function(req, res, next) {

2. res.set("expire", "-1");
3. res.set("Cache-Control", "no store");
4. });
ExpressJS App Server Cache-Control Header no store Nginx Proxy

Header Content Cache
Nginx App Server

Load Balancer App Cache
Proxy
Conclusion
Nginx Reverse Proxy
Nginx Proxy Setting Load Balancing Setting
Nginx
Load Balancing HAProxy

HAProxy Nginx Application Layer Proxy Network Layer
Proxy Cache Server Varnish

Nginx Web Server Proxy Server
Cache Server
Nginx
Database Server Architecture Hardware
Failure Data Data
Storage Capacity

NodeJS

()
Rockstar Developer () MongoDB Replication and Sharded Cluster 448
( ) MongoDB Replication and Sharded Cluster
Nginx Load Balance Load Balance

App Server Balance
Database Server Architecture

( (.) - Server Architecture without Database Load Balancing
App Server Load Balance

Database
Server Database Server
Data
() MongoDB MongoDB Scale

MongoDB
Performance Availability Replication Sharded
Cluster
Scale
19.1 MongoDB Replica Sets

Replication
Database
Master Database Server Slave
Database Server

Read Performance Request Master Database Server

Slave Database Server
Database Read Performance
Data Safety Master Database Server Slave Database

Server
Availability Master Database Server Slave

Database Server Master
App
Replication Write Master Database Server

Slave Database Server Master Data Master Operation Log
(oplogs) Master Slave
Slave Write

Write Master
Read Master Slave Server
MongoDB Replication
Replica Sets Master Database Server
Primary Member Slave Database Server Secondary Member
MongoDB Replica Set Member ()
Mongo Shell
Simplify

19.2 Setting Up Replica Sets

MongoDB Replica Sets
Domain Name
MongoDB Install
Database Server
db1.example.com
db2.example.com
db3.example.com
db1.example.com MongoDB Configuration replSet = rs0

rs0
Replica Sets
Ubuntu /etc/mongodb.conf
MongoDB Configuration

MongoDB Server Restart
$ sudo service mongodb restart
Mongo Shell mongo Command rs.initiate() Function Run
$ mongo
> rs.initiate()
rs.initiate() Function Server Replica Sets Member

Replica Sets rs.conf()
{
"_id" : "rs0"
"version" : 1,
"members" : [
{
"_id" : 0,
"host" "db1.example.com:27017"
}
]
}
MongoDB Server rs.add() Replication Sets

> rs.add("db2.example.com");
> rs.add("db3.example.com");
Server () MongoDB Replica Sets

MonboDB Replica Sets Member ()
Replica Sets Member rs.remove()
> rs.remove("db3.example.com");
Remove
Member Primary MongoDB Member
Primary
19.3 Arbiter Member in Replica Sets and Member Priority

MongoDB Automatic Failover
Primary Member Replica
Sets Secondary Member Primary
Primary (Election)
MongoDB Election Process
Election Arbiter Member MongoDB
Server Replica Sets
Arbiter Member Replica Sets Secondary Member Data

Primary Member Secondary
Member Primary Primary
Vote Replica Sets Arbiter Member
> rs.addArb("adb.example.com");
Replica Set Member

Arbiter Member
Member () Arbiter
() Member ()
Arbiter
Replica Sets Member () Election

() Vote Member ()
Arbiter

Primary Member Priority 0

Member Server Data Center
Server Primary
( (.) - Multi-Data Center Replica Sets
source: mongodb.org
Data Center Member Primary Replica Sets

Member Priority 0

> rs.conf()
{
"_id" : "rs0"
"version" : 1,
"members" : [
{
"_id" : 0,
},
{
"_id" : 1,
},
{
"_id" : 2,
}
]
}
> cfg = rs.conf();

> cfg.members[2].priority = 0;
> rs.reconfig(cfg);
Replica Sets Configuration Member Priority 0

Member Vote Primary
19.4 Hidden and Delayed Member in Replica Sets

Replica Sets Member Hidden Member Hidden
Member Data Secondary Member Client Request
Data Backup
Application Data Statistics Report
Hidden Member Data
Member Hidden Member
> cfg = rs.conf();

> cfg.members[2].hidden = true;
> rs.reconfig(cfg);
Hidden
Member hidden true
Hidden Member Priority 0
Replica Sets Member Delay Member

Delay
Member

Member Backup Delay Member Data
Primary Member

Delay Member Delay
Member
Delay Member Priority 0 Hidden True

Member Delay Member
> cfg = rs.conf();

> cfg.members[2].hidden = true;
> cfg.members[2].slaveDelay = 3600;

> rs.reconfig(cfg);
Member slaveDelay Property

Delay Member member[2]
( ) Primary
member[2]
19.5 Forcing a Member to be Primary in Replica Sets

Replica Sets Primary Member
MongoDB
Election Member Primary
Member Priority Member
Priority 0 1000
Priority 0 Primary
Member members[2] Primary Member
> cfg = rs.conf();

> cfg.members[0].priority = 0.5;
> cfg.members[1].priority = 0.5;
> rs.reconfig(cfg);
members[2] Priority Member member[2] Primary

MongoDB
Primary Secondary
> db.runCommand("ismaster");
{
"ismaster" : false,
"secondary" : true,
"hosts" : [
"db1.example.com",
"db2.example.com"
],
"passives" : [
"db3.example.com"
],
"arbiters" : [
"db4.example.com",
]
"primary" : "db2.example.com",
"ok" : true
}
db2.example.com Primary Priority 0

Passive Server Arbiter
19.6 Sharding in MongoDB

Replica Sets
Reliability Read Performance
Data Server Sharding

Sharding
Data Database Server
Storage Database Server

( (.) - MongoDB Sharding
source: mongodb.org
MongoDB Sharding
() Config
Servers, Query Routers Shards
Sharded
Cluster
Config Servers Data

Sharded Cluster Config Server ()
Query Routers App Request Request

Query Router Config Server Data
Data App
Shards Data Shard MongoDB Server

Replica Sets Production Replica Sets
Shard
Sharded Cluster (.)
( (.) - MongoDB Sharded Cluster
source: mongodb.org
Sharded Cluster
Query Router Query Router
Shard
Shard () Config Server ()
Sharded Cluster
Domain Name
MongoDB Install
Database Server
cfg1.example.com (Config Server 1)

router.example.com (Query Router)
rs0 (Replica Stes 1)
rs1 (Replica Sets 2)
Config Server Server () Query Router Server Shard Replica Sets

()
19.7 Setting Up Config Servers for Sharded Cluster

Config Server Setup Config Server
Server MongoDB Service Stop
$ sudo service mongodb stop
Configuration Meta Data Directory
$ mkdir -p /data/configdb
MongoDB Install mongod Config Server

$ sudo mongod --configsvr --dbpath /data/configdb --port 27019
mongod Command MongoDB Server

Server Config Server --configsvr Option
Meta Data Location --dbpath Option
Config Server Port 27019 --port Option 27019 MongoDB
Config Server Default Port
Config Server cfg1.example.com, cfg2.example.com

cfg3.example.com Server ()
19.8 Setting Up Query Router for Sharded Cluster

Query Router router.example.com Server MongoDB Install
mongos Router Run
MongoDB Stop
$ sudo service mongodb stop

$ sudo mongos --configdb cfg1.example.com:27019,cfg2.example.com:27019,cfg3.example.com:27019
mongos Command --configdb Command Config Server

Query Router Query
Router Server mongos Command Config Server Server

Config Server

Query Router Server Data Directory Query Router

Server Config Server () MongoDB Database Server
Run

Server
19.9 Adding Replica Stes as Shard to Sharded Cluster

MongoDB Server () Replica Sets
Shard Sharded Cluster
Query Router Mongo Shell
$ mongo --host router.example.com --port 27017
Query Router Mongo Shell

sh.addShard() Function Shard
> sh.addShard( "rs0/db1.example.com:27017" );

> sh.addShard( "rs1/db5.example.com:27017" );
rs0 Replica Sets rs1 Replica Sets Sharded Cluster

Replica Sets Database Server
Replica Sets Server Server MongoDB
Replica Sets Server
sh.addShard()
Replica Sets MongoDB Server
> sh.addShard("db10.example.com:27017");
Port 27017 MongoDB Default Port

Shard Database
> sh.enableSharding("mydb");
mydb Database Sharding

Data Sharded Cluster

Database Shard
config Database
config Database Sharding
MongoDB Database
> use config;

> db.databases.find();
{ "_id" : "admin", "partitioned" : false, "primary" : "config" }

{ "_id" : "mydb", "partitioned" : true, "primary" : "shard0003" }
mydb Database Partition

(Shard )

19.10 Enable Sharding for Collections

Database Shard
Enable Collections Shard
Enable MongoDB Collection Sharded

Cluster Shard Key

Data Shard

users Collection city Field Shard Key

Shard User
Shard
> sh.shardCollection("mydb.users", { "city": 1 } );
city Field Shard Key mydb Database users Collection Shard

User %
% Shard Storage
Compound Shard Key
> sh.shardCollection("mydb.users", { "city": 1, "date_of_birth": 1 } );
city Field Shard Key

Data
Shard date_of_birth
User Shard Shard Storage
User Shard
User Shard 1
Shard 2
MongoDB
Shard Key
Field Shard Key
_id
Field _id
Shard Data
Data Data Set Shard

> sh.shardCollection("mydb.users", { "_id": "hashed" } );
Shard Key Field Index

Collection Data sh.shardCollection()
Function Shard Key Field Index
Data Index

Index ()
{ "_id": 1 } { "_id": "hashed" }

_id Field Index Index Hashed Index
Hashed Index Number String

Field MongoDB Field Index Hash Summary
Index _id Field Field
ObjectId() Function ID Field Shard Key

Hashed Index { "_id": "hashed" }

Sharded Cluster Configuration Query Router Mongo Shell

> sh.status();
--- Sharding Status ---
sharding version: { "_id" : 1, "version" : 3 }
shards:
{ "_id" : "shard0000", "host" : "db1.example.com:27017" }
databases:
mydb.users
shard key: { "roll_no" : 1 }
chunks:
shard0001 2
shard0000 2
{ "roll_no" : { "$minKey":1 } } -->> { "roll_no" : "56000" } on : shard0001 { "t":2, "i":0 }
{ "roll_no" : 57500 } -->> { "roll_no" : "58140" } on : shard0001 { "t" : 4, "i" : 0 }
{ "roll_no" : 58140 } -->> { "roll_no" : "59000" } on : shard0000 { "t" : 4, "i" : 1 }
{ "roll_no" : 59000 } -->> { "roll_no" : { "$maxKey":1 } } on : shard0000 { "t":3, "i":3 }
sh.status() Data Cluster

19.11 Removing a Shard from Cluster

Cluster Shard

Shard Data
Shard Shard ID
sh.status()
> sh.status();
--- Sharding Status ---

sharding version: { "_id" : 1, "version" : 3 }
shards:
databases:

shard0000, shard0001 shard0002

Shard shard0002
Query Router
> use admin;

> db.runCommand( { removeShard: "shard0002" } );
{
"msg" : "draining started successfully",
"state" : "started",
"shard" : "mongodb0",
"ok" : 1
}
admin Database removeShard Run msg

"draining started successfully" Data Shard

removeShard Run
> use admin;

{
"msg" : "draining ongoing",
"state" : "ongoing",
"remaining" : {
"chunks" : 42,
"dbs" : 1
},
"ok" : 1
}
msg "drainin ongoing" Data

remaining.chunks
remaining.chunks 0 Data
Database Cluster Shard Primary Shard

Primary sh.status()
sh.status()
{ "_id" : "somedb", "partitioned" : true, "primary" : "shard0002" }

somedb
Database shard0002 Primary Shard
somedb Primary
> use admin;

> db.runCommand( { movePrimary: "somedb", to: "shard0000" });
admin Database somedb Primary shard0000

remaining.chunks 0
Data Shard Shard Primary Database

Primary removeShard Run Shard
Cluster
> use admin;

{
"msg" : "removeshard completed successfully",
"state" : "completed",
"shard" : "shard0002",
"ok" : 1
}
msg removeshard completed successfully Shard Cluster

Conclusion
Database Replication Sharding Architecture
Architecture Replication Sharding

( (.) - Scalable Architecture with Nginx and Sharded Cluster
Process Power App Server
Storage Capacity MongoDB Server Sharded

Cluster
Resource Scalable Architecture

MongoDB Sharded Cluster
http://docs.mongodb.org/manual/sharding/
Front-end, Back-end, UI Design Software
Development

Server Architecture


()
Rockstar Developer () Common Server Architectures 466
( ) Common Server Architectures
Software
Programmer, Designer, Software Engineer, Web Master, Front-end Developer, Back-end Developer,
Database Administrator, System Administrator, Network Engineer
Full-stack Developer Software

Release Developer
Code UI Design
Data Structure System Design Client
App Back-end Service Server Operating
System Server Architecture Software Development Process

Full-stack Developer Programming
Language

Specialist
Software Development Team Specialist


Engineer Designer Developer Software

Specialist Startup Software Team
Specialist
Developer
Specialist
% Full-stack
Developer Client App Back-end Service
Software Service Host Server Architecture Developer

Docker, Nginx, Sharded Cluster

Developer Server Architecture

Server
Architecture
20.1 Everything on One Server

Server Architecture Service
Server
Nginx, MongoDB ExpressJS API Server Server

( (.) - Single Server Setup
source digitalocean.com
Setup
Server
Server Hardware VPS ()
Hosting Service

Hardware Server
Scalable
RAM () Storage Capacity Server RAM HDD
Capacity Upgrade
Scale Up
Vertical Scaling Scale Up
Hardware RAM 16 GB
Server OS
HDD 16TB

Resource

App Scale App

20.2 Separate Database Server

Database Server Server

Nginx Web Server ExpressJS
API Server Server
MongoDB Server
( (.) - Separate Database Server Setup
source digitalocean.com
Resource Server Server

Scale
App Server Database Server Scale Up Server
Capacity
Data Storage Database Server Scale Up App Server

App Server Public Internet

Database Server Public Internet Access Private Network
App Server Access Database Server

Setup
Scalability App Server

Database Server
20.3 Load Balancer (Reverse Proxy)

Load Balancer () Nginx Load
Balance Load Balancer App
Server App Server
Server RAM HDD Server
Scale Out Horizontal Scaling
Scale Scale
Server Hardware

Server

( (.) - Load Balancer Setup
() Security
Request App Server Load Balancer Proxy
Cache

Request App Server Proxy

Load Balancer App Server

Session SSL Encryption Setup

Resource
Server RAM HDD

Scale

Scale App

20.4 Sharded Cluster

Sharded Cluster Database Server Scale

Load Balancer Shard Cluster
Scalable
Server Architecture
( (.) - Load Balancer and Sharded Cluster
App Server Database Server Scale Out

Scalable

Shard Server Hardware Data

Migrate Shard Server Replica Sets

Replica
Sets Data Read Sync Secondary Server Read
Data MongoDB
Server
App

20.5 Multiple Load Balancers and Query Routers

Load Balancer
App Scale
Load Balancer
Request Load
Balancer Sharded Cluster Data Request
Query Router Query Router

Load Balancer Load Balancer

DNS Server DNS Server Domain Name IP
Address Resolve Domain Name IP Address
DNS Server Round Robin Algorithm IP Address

example.com Domain Name 123.45.67.89

IP Address 123.45.67.99
IP
Address DNS Server DNS Lookup Request
123.45.67.89, 123.45.67.99
123.45.67.99, 123.45.67.89 Domain Name IP
Address Round Robin
Load Balancer IP Address Setup DNS IP Address

DNS Server Load Balancer

( (.) - Multiple Load Balancers
DNS
Server Load Balancer DNS Server
IP Address IP Address Setup
Host Nginx Load Balancer App
Server Down App Server DNS
IP Address Load
Balancer Load Balancer

DNS
Cache Web Browser Client DNS
Resolver IP Address Cache
Domain Name
IP Address DNS Resolve

DNS Server IP Address

Browser Resolver
Update Cache

Sharded Cluster Query Router

MongoDB Client Query Router Query
Router App Server () App Server A
Query Router 1 Query Router 1
Automatic Load Balance App Server Query
Router

Debug Code
Load Balancer Query Router Sharded
Cluster Configuration Architecture
Software Team Architecture

20.6 Memcached & Cloud Storage

Server Architecture Performance
Performance

Server Architecture Memcahced

Memcached
App Server Cache Proxy Cache
Database Server Memcached Cache Data
Memcached Server Memory
Database Server

( (.) - Memcached and Cloud Backup in Architecture
(.) App Server Sharded Cluster Memcached

Backup Backup

Database Data Backup Database
Data Export


()
App Data Frequency Backup Routine
- Backup
Data Backup Data

Restore
Backup Backup
Backup NAS, SAN, Tape Backup Storage Device
Backup

Architecture
Backup Architecture Datacenter

Backup Backup
Backup Google Drive, Amazon S3
Cloud Storage
SAN Device

Server Architecture Backup

20.7 Failover Architecture to Embrace Disasters

Data Backup Data
Server Architecture ()

Server Architecture
Server Architecture
Failover Architecture
Failover Architecture

Procedure
1. Cloud Storage Data Backup

2. Data Backup Cloud Storage Backup
3. Datacenter Architecture
Architecture Failover Architecture Setup

4. Failover Architecture App Server Stand-by

5. Failover Architecture Database Server Architecture Data

Backup Restore
6. Failover Architecture Database Server Data

( (.) - Failover Architecture
Architecture Backup Failover

Architecture

Architecture Recover Architecture
Failover Architecture Migrate
Conclusion
Full-stack Developer Software Server
Architecture

Server Architecture Design

Architecture

Software Server Architecture

Memcached Software Memcached Server
Data Cache Database Server
Architecture Scalable

Software Scalable Architecture Scalable Software
Server Architecture Server Architecture
Scalable Software

Rockstar Developer
Rockstar Developer
Maintainable Code
Scalable Code

NodeJS

()
() 10x Programmer () Rockstar

Developer
() Rockstar Developer
()

1.
2. Code
3. Code

4.
5.
Source Code Management System, Issue Tracking System, SCRUM

SOLID, TDD, SOA BackboneJS Code Architecture

Code
NodeJS, MongoDB, Nginx

Scalable Code
Yeoman, NPM, Bower, Grunt, Docker Tool

Rockstar Developer


Fairway Web

Website: http://rsdbook.com
Author Profile: http://eimaung.com
Contact Email: author@rsdbook.com
Facebook: http://fb.com/RockstarDeveloperBook
()

() PDF Ebook

Rockstar Developer by Ei - Maung

Uploaded by

Document Informationclick to expand document informationweb

Document Informationclick to expand document information

Copyright:

Available Formats

Rockstar Developer by Ei - Maung

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Rockstar Developer by Ei - Maung

Uploaded by

Copyright:

Available Formats

Rockstar Developer

This document, Rockstar Developer by Ei Maung is licensed under a Creative Commons

THE WORK IS PROTECTED BY COPYRIGHT AND/OR OTHER APPLICABLE LAW.

() Modern Development Stack

() Building an Issue Tracking System

() Deployment and Scaling

() Load Balancing with Nginx . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

TDD, SOLID, Database Scaling Server Architecture

CEO (Zwenexsys International Limited)

Software Development Web Development

Professional Web Developer pwdbook.com

Bug Free Program

10x Programmer Programmer

Programmer " "

Rockstar Developer () Development Processes Management 14

( ) Development Processes Management

Software Project Software

((.) Common Project Management Problem

Rockstar Developer () Development Processes Management 16

Business Solution Software

1.1 Stages of Software Development

1. Business Model Creation

Software Development Process Plan, Design, Code, Test ()

Software Product Business Model

Software Developer Business Model

((.) Business Model Canvas

Business Model Requirements Specification

Specification Data Model System Design

Service-Oriented Architecture Communication Protocol

User Interface Prototype Prototype Design Tool

Coding Coding Standards,

Unit Testing () Test Driven Development

Technical Support Solution

Software Team System Analysis, Software Engineer, Programmer, Designer, Front-end

Rockstar Developer () Development Processes Management 20

1.2 Waterfall Model

( (.) - Waterfall Model

Waterfall Model Software

1.3 Iterative Development

3. Early Delivery Product

Iterative Development Agile

Non-Functional Requirement Software

( (.) - Iterative Development

Iterative Development Team Developer

Waterfall Model Development Process

(.) - Timeline of Iterative Development

Inception Business Model Requirement Specification

Rockstar Developer () Development Processes Management 25

Software Development Project Plan, Design,

Requirement Waterfall Model

Software Project Development Process

Professional Web Developer Course

( ) Test Driven Development

" Route "

" Mobile App App Sync

" . .. Sync Button ... ... ... "

" Internet Connection Data Sync