ES6 Promise 筆記

new Promise() 接受一個 function 做為初始化參數
這個 function 又接受兩個參數 resolvereject
它們都是 function
resolve() 的作用是把 Promise object 的狀態從 pending 改成 resolved / fulfilled(成功)
reject() 則是把狀態從 pending 改成 rejected(失敗)

Promise object 產生之後
可以用 Promise object 的 then() 來指定 resolved 狀態的 callback function
然後 catch() 來指定 rejected 狀態的 callback function

每個 then()catch() 都會 return 一個新的 Promise objecct
如果你在 then() 裡 return 的不是 Promise object
它會隱式地用 Promise.resolve() 幫你轉換

const yourPromiseFunc = function (params) {
  return new Promise((resolve, reject) => {
    doYourAsyncShit(params, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};

yourPromiseFunc('some parameter')
.then((data) => {
  console.log('success', data);
})
.catch((err) => {
  console.log('fail', data);
});

嚴格來說你只能在 then() 裡做三件事:

  • return 另外一個 Promise object
  • return 一個 synchronous value(字串、數字或其他 object)
  • throw 一個 Error()

如果你沒有顯式地 return 的話,JavaScript 會自動幫你 return undefined;

ref:
http://www.html5rocks.com/zh/tutorials/es6/promises/
http://es6.ruanyifeng.com/#docs/promise#基本用法

使用 reject() 而不是 throw

在 Promise 裡
如果可以用 reject(new Error('your error message')) 就用
不要用 throw new Error('your error message');

基本上就是用 reject() 來表示我們有意識地拋出的錯誤

ref:
http://liubin.org/promises-book/#not-throw-use-reject

把任意 object 轉換成 Promise object

Promise.resolve(xxx); 就是把 xxx 包裝成 Promise object
然後 resolve() 它
如果 xxx 已經是 Promise object 了,則會 clone 一個新的

Promise.resolve(42);

# equals to

new Promise((resolve) => {
  resolve(42);
});

因為所有 Promise 操作都一定是 async 的(這是規格裡規定的)
所以就算是 Promise.resolve(42); 的 42 也不會馬上被執行到

var promise = new Promise(function (resolve) {
    console.log("inner promise"); // 執行順序 1
    resolve(42);
});

promise.then(function(value) {
    console.log(value); // 執行順序 3
});

console.log("outer promise"); // 執行順序 2

ref:
http://liubin.org/promises-book/#chapter2-how-to-write-promise

Promise chains

一律使用 then().catch() 的方式分別指定 resolved 和 rejected 的 callback functions
通常會在 promise chains 的最後放一個 catch()

因為每個 then() 執行完都會 return 一個新的 Promise object(注意!是新的 Promise object,不是你最一開始 new 出來的那個)
所以你可以一直用很多個 then() 串起來
你也可以在 then() 裡 return 某個值作為下一個 then() 的參數

get('story.json')
.then(function(response) {
  return JSON.parse(response);
})
.then(function(data) {
  console.log(data);
});

ref:
http://liubin.org/promises-book/#then-return-new-promise

// 會照順序由上往下執行(除了 .catch() 之外)
Promise.resolve()
  .then(functionA)
  .then(functionB)
  .then(functionC)
  .catch(errorHandler)
  .then(finalFunction);

errorHandler 只能 catch 到 functionA、functionB 和 functionC 中拋出的錯誤

你可以在 then() 裡 return 某個值
他會被包裝成 Promise object(透過 Promise.resolve(某個值))然後傳給下一個 then()

如果你想在 functionC 裡同時使用 funtionA 和 functionB 的結果
你可以這麼寫

firstThingAsync()
  .then(function(result1) {
    return Promise.all([result1, secondThingAsync(result1)]);
  })
  .then(function(results) {
    // do something with results array: results[0], results[1]
  })
  .catch((err) => {
    doErrorHandling();
  });

Anti-patterns

// 這種寫法會造成你的 badAsyncCall() 得不到 newVar 的返回值
function badAsyncCall() {
    var promise = Promise.resolve();
    promise.then(function() {
        return newVar;
    });

    return promise;
}

// 應該要寫成
function badAsyncCall() {
    var promise = Promise.resolve();
    return promise.then(function() {
        return newVar;
    });
}

ref:
https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html
http://www.datchley.name/promise-patterns-anti-patterns/

等到所有 promises 都執行完才執行某個動作

你可以用 Promise.all()

Promise.all([promise1, promise2, promise3])
.then((results) => {
  // 這裡會在 promise1, promise2, promise3 的狀態都是 fulfilled 時執行
  // results 的順序跟 .all() 的順序一定會是一致的
  // results[0] 就是 promise1 的回傳值,results[1] 則是 promise2,以此類推
  // 你也可以寫成 .then(([data1, data2, data3]) => {}),不過 Node.js v4.3 還不支援這個語法就是了
})
.catch((err) => {
  // 這裡會在任一個 promise 變成 rejected 時執行
});

ref:
http://www.datchley.name/es6-promises/
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
http://liubin.org/promises-book/#ch2-promise-all

AWS Lambda cookbook

AWS Lambda cookbook

AWS Lambda is an event-driven service that you can upload your code to it and run those code on-demand without having your own servers.

ref:
http://aws.amazon.com/lambda/
http://docs.aws.amazon.com/lambda/latest/dg/limits.html

API Gateway 就是 URL routing
Lambda 則是那些 route (endpoint) 對應的 handler
如果你是用 event 或 schedule 的方式呼叫 Lambda function 的話
可以不用 API Gateway

AWS Lambda 有兩種 invocation type
一是 RequestResponse,同步(例如綁定 API Gateway 和你在 Lambda Management Console 操作的時候)
二是 Event,非同步

Runtimes

AWS Lambda supports the following runtime versions:

  • nodejs (Node v0.10)
  • nodejs4.3
  • java
  • python

ref:
http://docs.aws.amazon.com/lambda/latest/dg/current-supported-versions.html

Node.js

const aws = require('aws-sdk');

exports.handle = (event, context, callback) => {
  doYourShit();
  callback(null, 'DONE');
};

每個 Lambda function 會接收三個參數 eventcontextcallback

event 是從外部的 input
可能是來自 S3 object event、DynamoDB stream 或是由 API Gateway POST 進來的 JSON payload

context 則會包含當前這個 Lambda fuction 的一些 metadata
例如 context.getRemainingTimeInMillis()

callback 參數只有 Node.js runtime v4.3 才支援
v0.10 的話得用 context.succeed()context.fail()context.done()
不過誰他媽還在用 Node.js v0.10

ref:
http://docs.aws.amazon.com/lambda/latest/dg/programming-model.html
http://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-handler.html
http://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-context.html
http://docs.aws.amazon.com/lambda/latest/dg/best-practices.html

Calling another Lambda function in a Lambda function.

要注意的是
你的 Lambda function 的 role 得要有 invoke 其他 Lambda function 的權限才行

const util = require('util');

const aws = require('aws-sdk');

const params = {
  FunctionName: 'LambdaBaku_syncIssue',
  InvocationType: 'Event', // means asynchronous execution
  Payload: JSON.stringify({ issue_number: curatedIssue.number }),
};

lambda.invoke(params, (err, data) => {
  if (err) {
    console.log('FAIL', params);
    console.log(util.inspect(err));
  } else {
    console.log(data);
  }
});

ref:
http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/Lambda.html
http://stackoverflow.com/questions/31714788/can-an-aws-lambda-function-call-another

完整的程式碼放在 GitHub 上
https://github.com/CodeTengu/lambdabaku

Users and Roles

如果你是用 apex 來管理 Lambda functions 的話
確保你用的 AWS credential (User) 擁有 AWSLambdaFullAccessAWSLambdaRole 這兩個 permissions

以 project 為單位建立 Role 即可
例如 lambdabaku_role
你可以在 IAM Management Console 找到那些你建立的 roles
基本上用 Basic execution role 就夠了
反正之後可以隨時修改 Role 的 permission / policy
Lambda function 屬於哪個 VPC 是額外指定的
跟 Role 沒有關係
也就是說你用 Basic execution role 還是可以支援 VPC

如果想在 Lambda function 裡存取 DynamoDB
要記得在 Role 裡新增對應的設定

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "",
            "Effect": "Allow",
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "*"
        },
        {
            "Sid": "Stmt1428341300017",
            "Effect": "Allow",
            "Action": [
                "dynamodb:*"
            ],
            "Resource": [
                "arn:aws:dynamodb:ap-northeast-1:004615714446:table/CodeTengu_Preference",
                "arn:aws:dynamodb:ap-northeast-1:004615714446:table/CodeTengu_WeeklyIssue",
                "arn:aws:dynamodb:ap-northeast-1:004615714446:table/CodeTengu_WeeklyPost"
            ]
        }
    ]
}

Scheduled Events

ref:
http://docs.aws.amazon.com/lambda/latest/dg/with-scheduled-events.html

API Gateway

單純一點的話
Security 可以選 Open with access key
然後到 API Gateway 介面的 API Keys 底下新增一組 access key
然後分配一個 API stage 給它

使用的時候在 HTTP header 加上 x-api-key: YOUR_API_KEY 即可

ref:
http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-api-keys.html

Related Projects

ref:
https://github.com/serverless/serverless
https://github.com/apex/apex
https://github.com/claudiajs/claudia
https://github.com/garnaat/kappa
https://github.com/Miserlou/Zappa
https://github.com/nficano/python-lambda

淺析 serverless 架構與實作
http://abalone0204.github.io/2016/05/22/serverless-simple-crud/

Deploy Lambda Functions via apex

$ curl https://raw.githubusercontent.com/apex/apex/master/install.sh | sh

$ apex deploy
$ apex invoke syncPublishedIssues --logs
$ echo -n '{"issue_number": 43}' | apex invoke syncIssue --logs

ref:
https://github.com/apex/apex
http://apex.run/

ESLint: a pluggable and extensible linter for JavaScript

ESLint is a pluggable and extensible linter for JavaScript, supports ECMAScript 6 perfectly.

ref:
https://eslint.org/

Installation

$ npm install \
eslint \
eslint-plugin-import \
eslint-config-airbnb-base \
--save-dev

It's convenient to use the ESLint plugin from Airbnb instead of configurating your own preferences.
https://github.com/airbnb/javascript/tree/master/linters

Configuration

// .eslintrc
{
  "extends": ["airbnb-base"],
  "env": {
    "browser": true,
    "es6": true,
    "mocha": true,
    "node": true,
    "shared-node-browser": true
  },
  "rules": {
    "class-methods-use-this": 0,
    "curly": 2,
    "indent": [2, 2],
    "max-len": 0,
    "no-continue": 0,
    "no-plusplus": ["error", {"allowForLoopAfterthoughts": true}],
    "no-useless-escape": 0,
    "object-curly-spacing": 0,
    "quote-props": 0,
    "quotes": [1, "single"]
  }
}

You should put a .eslintrc in your project root as the global linting settings, also you can put a .eslintrc in any subfolders to specialize linting configurations.

ref:
http://eslint.org/docs/user-guide/configuring
http://eslint.org/docs/rules/

datetime format in Python / JavaScript

Python

I recommend dateutil.

import datetime
import dateutil

>>> dateutil.parser.parse('2014-12-24T16:15:16')
datetime.datetime(2014, 12, 24, 16, 15, 16)

>>> datetime_obj = datetime.datetime.strptime('2014-12-24T16:15:16', '%Y-%m-%dT%H:%M:%S')
datetime.datetime(2014, 12, 24, 16, 15, 16)

>>> datetime_obj = datetime.datetime.strptime('201408282300', '%Y%m%d%H%M')
datetime.datetime(2014, 8, 28, 23, 0)

>>> datetime_obj.strftime('%Y-%m-%d %H:%M')

strftime >> datetime -> str
strptime >> str --> datetime

ref:
https://docs.python.org/2/library/datetime.html#strftime-and-strptime-behavior

Django Template

class DriverInfoForm(forms.ModelForm):
    service_time_start = forms.TimeField(
        widget=forms.TimeInput(format='%H:%M'),
        input_formats=['%H:%M', ]
    )
日期:{{ withdraw.presented_at|date:"%Y 年 %n 月" }}
聯絡時間:{{ driver.service_time_start|date:"H:i" }} - {{ driver.service_time_end|date:"H:i" }}

要注意的是
Django 似乎不能 parse AM / PM
所以儘量用 24 小時制

ref:
https://docs.djangoproject.com/en/dev/ref/templates/builtins/#date

JavaScript

moment("201408292300", "YYYYMMDDHHmm");

Karma: JavaScript test runner

ref:

http://karma-runner.github.io/

建議跟 grunt 一起用
然後把配置都寫在 Gruntfile.js 裡

Install

$ npm install karma --save-dev

# 產生 karma.conf.js,你可以看一下默認的配置
$ ./node_modules/.bin/karma init

Configuration

如果是用 karma 的方式跑 jasmine 的話
就不需要 SpecRunner.html
而是改用 Gruntfile.js 裡的 files

in Gruntfile.js

karma: {
    test: {
        options: {
            // base path, that will be used to resolve files and exclude
            basePath: '',
            // start these browsers
            browsers: [
                'PhantomJS'
            ],
            coverageReporter: {
                // multiple reporters
                reporters: [
                    {type: 'lcov', dir:'coverage/'},
                    {type: 'text'}
                ]
            },
            // list of files to exclude
            exclude: [],
            // list of files / patterns to load in the browser
            files: [
                'dist/pangu.js',
                'tests/lib/jquery/jquery-1.10.2.min.js',
                'tests/lib/jasmine-jquery/jasmine-jquery.js',
                'tests/spec/**/*.js',
                {
                    pattern: 'tests/fixtures/**/*.html',
                    included: false,
                    served: true
                }
            ],
            // frameworks to use
            frameworks: [
                'jasmine'
            ],
            plugins: [
                'karma-*'
            ],
            // preprocessors allow you to do some work with your files before they get served to the browser.
            preprocessors: {
                '**/*.html': [],
                // source files, that you wanna generate coverage for
                'dist/pangu.js': [
                    'coverage'
                ]
            },
            // test results reporter to use, possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
            reporters: [
                'progress',
                'coverage'
            ],
            // continuous Integration mode, if true, it capture browsers, run tests and exit
            singleRun: true
        }
    }
},

ref:
http://karma-runner.github.io/0.10/config/configuration-file.html

Issues

Fixture could not be loaded

用 jasmine-jquery loadFixtures 的時候出現這個錯誤
是因為 karma 的 preprocessors 在作怪
改成這樣就可以了:

in Gruntfile.js

karma: {
  unit: {
    options: {
      ...
      preprocessors: {
        '**/*.html': []
      },
      ...
    }
  }
},

ref:
http://karma-runner.github.io/0.10/config/preprocessors.html
https://github.com/karma-runner/karma/issues/736
https://github.com/karma-runner/karma/issues/788

而且 karma 會把檔案放在 base/ 路徑底下
所以 jasmine-jquery 還要額外設定:

in SpecHelper.js

beforeEach(function() {
  // https://github.com/karma-runner/karma/issues/481
  var path = '';
  if (typeof window.__karma__ !== 'undefined') {
    path += 'base/'
  }
  jasmine.getFixtures().fixturesPath = path + 'test/fixture/';
});