modern javascript development


my development stack


AngularJs
Spring
Maven

SPA


  • Server doesn't have any state
  • Client manage state
  • Rich and better UX
  • Scalable

javascript


  • too many ways to achieve goal
  • too  flexible
  • implicit type conversion
  • global(browser)
  • no module

javascript


  • flexible
  • JIT - very fast
  • high order function
  • duck typing
  • ubiquitous
  • prototype based

javascript the right way


  • strict mode
  • module system
  • prototype in javascript
  • functional javascript
  • async javascript
  • jshint

strict mode


(function() {   "use strict";
//blabla})();

STRICT MODE

  • without var

function hello() {  "use strict";
job = "Hello"; //error}

strict mode

  • duplicate key in object
function duplicate() {  "use strict";
var obj = {   name : 'yum', name : 'yum' }; //error}

strict mode

  • duplicate arguments
function duplicate(arg, arg) { //error  "use strict";
console.log(arg, arg);}

strict mode

  • freeze arguments of function
function hello(arg) {  "use strict";
arguments[0] = "Hello World"; //no side effect console.log(arg); //Javascript}
hello("Javascript");

strict mode

  • arguments.callee
var max = 3,    count = 0;
function hello() {
"use strict";   while(count < max) { count++; console.log("count", count); arguments.callee(); //error } }
hello();

module


  • Core of large application
  • There is no native module for javascript
  • AMD
  • CommonJS
  • ECMA6
                                                                                     




AMD

  • Asynchronous module definition
  • Require.js
  • sandbox

aMD

<script data-min="js/app.js" src="js/require.js"></script>
require.config({  path : {    "jquery" : "lib/jquery.js",    "angular" : "lib/angular.js"  },  shim : {    "angular" : {      deps : [jquery],      exports : 'angular'    }  }});
require(['angular', 'jquery', 'main'], function(angular, $, main) { main.init();});

AMD

//conf.jsdefine(function() {  return {    name : "hello"  };});
//main.jsrequire(["conf", function(conf) { return {   init : function() {  console.log(conf.name); //hello }; };}]);

AMD


  • optimization with r.js
  • plugin support
  • path alias
  • no build step for development
  • load text, css
  • CommonJs compatability

AMD


  • boilerplate, verbose
  • some overhead to file size
  • remove require.js dependency in build time
  • jquery build

commonjs


  • node.js, vert.x
  • browserify

commonjs

//myFactory.jsvar forEach = require('mout/array/forEach'),    mixIn = require('mout/object/mixIn'),    map = require('mout/array/map');
var myFactory = function() { //blabla};
module.exports = mixIn(myFactory, { extend : mixIn});
//app.jsvar factory = require('./myFactory');var result = factory.extend({}, { name : 'hello' });

commonjs


  • simple
  • build step(browerify)
  • we can use node.js module

how to solve problem


  • Abstraction
  • Separation of concern
  • Pattern
  • OOP
  • Functional Programming

prototype in javascript


  • Class vs Prototype
  • Object

object litertal

var myObj = {  name : 'mac',  getName : function() {    return this.name;  },  setName : function(name) {    this.name = name;  }};



Constructor pattern

function Car(name, price) {   this.name = name;   this.price = price;}Car.prototype.getPrice = function() {  var interest = 10;  return this.price + interest;};
var car1 = new Car('spring', 100);console.log(car1.getPrice()); //110//oh myvar car2 = Car('summer', 100);console.log(car2.getPrice());

ecma5

var car = {  name : 'car',  myPrice : 0,  get price() {    var interest = 100;    return this.myPrice + interest;  },  set price(price) {    this.myPrice = price;  }};
var myCar = Object.create(car);myCar.name = 'my Car';myCar.price = 1000;console.log(myCar.price);

ecma5

var myCar = Object.create(car, {  name : {    value : 'my car',    enumerable : true,    configurable : true,    writable : true  }});
Object.defineProperty(myCar, 'name', { value : 'he'});
//bettervar myCar = Object(car, utilFunc({ name : 'my car' }));

mixin

var animal = {  name : 'animal',  meow : function() {    console.log('hello');  }};
var man = { name : 'james', play : function() {  console.log('play'); };
var myObj = _.extend({}, man, animal, { name : 'My name' });myObj.meow(); //hellomyObj.play(); //play

module pattern

var carFactory = (function() {  var privatePrice = 1000;
return function(parent, prop) { var newCar = Object.create(arg); newCar = _.extend(newCar, prop); newCar.getPrivatePrice = function() { return privatePrice; }; return newCar; };})();
var car = { getName : function() { return this.name + " Hello";}};var myCar = carFactory(car, { name : "my car" });myCar.getPrivatePirce(); //1000

stampit


  • Classical inheritance is obsolete
  • use factory for creating object
  • inherit methods and default state
  • state is cloned
  • compose factories
  • link

stampit

//prototypevar availability = stampit().methods({  getName : function() {    return this.name + "!";  }});//own statevar person = stampit().state({  name : "james"});//closurevar animal = stampit().enclose(function() {  var price;    return { getPrice : function() { return price; } };});

stampit

var availability = stampit().enclose(function() {  var isOpen = false;
return stampit.mixIn(this, { open : function() {} });});var membership = stampit({ add : function() {}}, { members : {}});var defaults = stampit().state({ name : 'House'});
var mybar = stampit.compose(defaults, availability, membership);mybar.add({ name : 'home' }).open();

What is functional programming


  • Referential transparency
  • Immutability
  • No side effect
  • High order function

feature


  • declarative
  • lazy evaluation
  • closure
  • recursive
  • function is first class object

functional javascript


  • Is Javascript functional language?
  • High order function
  • closure
  • call, apply

functional javascript



  • alternative for underscore and more
  • performance optimization
  • custom build

functional javascript

function curry
var curried = _.curry(function(a, b, c) {    console.log(a + b + c);});

curried(1)(2)(3); //6curried(1)(2,3); //6curried(1,2,3); //6

functional javascript

function partial
var newFunc = _.partial(function(a, b, c) {    console.log(a + b + c);}, 1);

newFunc(2, 3); //6

functional javascript

function bind
var newFunc = _.bind(function(greeting) {    console.log(greeting + " " + this.name);}, { name : 'james' }, 'Hello');

newFunc(); //Hello james

function.bind


  • change context
  • function with value(closure)

functional javascript

memoize
var fibonacci = _.memoize(function(n) {  return n < 2 ? n : fibonacci(n - 1) + fibonacci(n - 2);});
fibonacci(9); //34

functional javascript

compose
var format = function(name) {  return name.upperCase();};
var greet = function(formatted) { return "Hello " + formatted + "!";};
var func = _.compose(greet, format);func("james'); // Hello JAMES!

functional javascript

wrap
var greet = function(name) {  return "Hello " + name + "!";};var newFunc = _.wrap(greet, function(func, text) {  console.log('before');    func(text);    console.log('after');});
newFunc('james');

functional javascript

throttle
var throttled = _.throttle(updatePosition, 100);
$(window).on('scroll', throttled);
var searchThrottled = _.throttle(checkAutoComplete, 100, { 'trailing' : true});$('#searchQ').on('keydown', searchThrottled);

FUNCTIONAL JAVASCRIPT


map
reduce
filter
some
every
forEach

async programming


  • ajax
  • animation
  • callback
  • promise

callback

  • callback hell
someAsync(function(error, someData) {  anotherAsync(someData, function(error, anotherData) {      theOtherAsync(anotherData, function(error, result) {        console.log(result);      });  });});

callback


  • difficult to read
  • difficult to parallel call
  • difficult to compose

promise


  • promise/A+
  • event result of async operation
  • then operation(fulfill, reject)

promise

var promise = new Promise(function(resolve, reject) {  if( /*  some condition  */) {    resolve('success');  } else {    reject('reject');  }});
promise.then(function(result) { console.log(result); //success}, function(reason) { console.log(reason); //reject});

jshint


  • code inspection tool
  • detect error
  • detect potential problem
  • coding convention
  • ... many option

                                    





Thank you

modern javascript

By odyss

modern javascript

  • 17,191