ISOMORPHIC ARCHITECTURE

ISOMORPHIC ARCHITECTURE

• Reason not use single page web:

• - SEO Poor  SEO, cannot serve HTML to crawlers

• - Performance if the server doesn’t render a full page of HTML but instead waits for client-side JavaScript to do so

• - Maintainability

We want to serve fully-formed HTML from the server for performance and SEO, but we want the speed and flexibility of client-side application logic. To this end, we’ve been experimenting at Airbnb with “Isomorphic JavaScript” apps, which are JavaScript applications that can run both on the client-side and the server-side.

By creating the appropriate abstractions, we can write our application logic such that it runs on both the server and the client — the definition of isomorphic JavaScript.

Abstraction

• Routing handlers need to be able to access HTTP headers, cookies, and URI information, and specify redirects without directly accessing window.location (browser) or req and res (Node.js).
• Fetching and persisting data
• View rendering
• Building and packaging

react-native note

Feature

One of it’s unique selling points is that not only does it perform on the client side, but it can also be rendered server side, and they can work together inter-operably.

It also uses a concept called the Virtual DOM that selectively renders subtrees of nodes based upon state changes. It does the least amount of DOM manipulation possible in order to keep your components up to date.

virtual DOM

react element : lives in the virtual DOM

react component : has render function, and has state| no access to the virtual DOM




JSX （ JavaScript Syntax eXtension ， JavaScript 語法擴充）

vue, multipart upload

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
export const doImageUpload = ({ dispatch, state }, file, resizeArr) => {
  const SIGNUP_USER_URL = 'http://localhost:3000/api/v1/upload/upload'

  var fd = new FormData() // eslint-disable-line
  fd.append('file', file)
  console.log('going to post : ' + file.size / 1000 + 'mb')

  var start = new Date().getTime()
  Vue.http.post(SIGNUP_USER_URL, fd, {
    headers: {
      'Content-Type': undefined
    }
  })
  .success(function (result) {
    var returnList = []

    for (let index in resizeArr) {
      var w = resizeArr[index].w
      var h = resizeArr[index].h
      returnList.push(result.fileUrl + '?imageView2/2/w/' + w + '/h/' + h + '/q/100/format/jpg')
    }
    returnList.push(result.fileUrl)
    dispatch('DO_IMAGE_UPLOAD', returnList)
  }).error(function (error) {
    console.log(error)
  })
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////



/**
 * Upload floorplan file for the given buildId
 */
 // requiredLogin
router.post("/upload", _pre_form, function(req, res) {
  var files = req.uploadFile;
  var fileLocalPath = files.path;

      console.log(" -------- 3 ")

  fs.readFile(fileLocalPath, function(err, data){
      console.log(" -------- 4 ")
      if(err){
        res.status(httplib.INTERNAL_SERVER_ERROR).json({code: 2021,error: errorMsg(2021, err)});
      }

      console.log(" -------- 5 ")
      var base64Data = data.toString('base64');
      var theFile = new AV.File(files.name, {base64: base64Data});
      theFile.save().then(function(result) {
      console.log(" -------- 6 ")

          res.status(httplib.OK).json({
              fileId: result.id,
              fileName: result.name(),
              mimeType: result.metaData().mime_type,
              fileUrl: result.url()
          })

      },function(err){
        res.status(httplib.INTERNAL_SERVER_ERROR).json({code: 2021,error: errorMsg(2021, err)});
      });
  });

});

zapier, trello, bitbucket 整合

當 bitbuket 創建新的 issue，系統會同步到 trello 上，而且在會 trello 上創建新的 card
zapier.com/app/explore

Unity Test 單元測試

Principle 

is to isolate each part of the program and show that the individual parts are correct. A unit test provides a strict, written contract that the piece of code must satisfy. As a result, it affords several benefits.

Ideally, each test case is independent from the others. Substitutes such as method stubs, mock objects, fakes, and test harnesses can be used to assist testing a module in isolation

Benefits

• Find problems early
• TDD helps you to realise when to stop coding. Your tests give you confidence that you've done enough for now and can stop tweaking and move on to the next thing.
• Unit Tests help you really understand the design of the code you are working on. Instead of writing code to do something, you are starting by outlining all the conditions you are subjecting the code to and what outputs you'd expect from that.
• Contrary to popular belief unit testing does not mean writing twice as much code, or coding slower. It's faster and more robust than coding without tests once you've got the hang of it.
• 
  

limitation

• 測試不可能發現所有的程式錯誤，單元測試也不例外。
• 單元測試只測試程式單元自身的功能。因此，它不能發現整合錯誤、效能問題、或者其他系統級別的問題。
• 單元測試只能表明測到的問題，不能表明不存在未測試到的錯誤。

code refactoring

代碼重構 code refactoring

There are two general categories of benefits to the activity of refactoring.

1. Maintainability. It is easier to fix bugs because the source code is easy to read and the intent of its author is easy to grasp.^[4] This might be achieved by reducing large monolithic routines into a set of individually concise, well-named, single-purpose methods. It might be achieved by moving a method to a more appropriate class, or by removing misleading comments.
2. Extensibility. It is easier to extend the capabilities of the application if it uses recognizable design patterns, and it provides some flexibility where none before may have existed.^[1]

Purpose

1. 在極限編程或其他敏捷方法學中，重構常常是軟體開發迴圈的一部分：開發者輪流增加新的測試和功能，並重構代碼來增進內部的清晰性和一致性。自動化的單元測試保證了重構不至於讓代碼停止工作。
2. 重構既不修正錯誤，又不增加新的功能性。反而它是用於提高代碼的可讀性或者改變代碼內部結構與設計
3. 移除死代碼，使其在將來更容易被維護
4. 一個重構的小範例是修改一個變數的名稱使其具有更明確的含義，例如從單個字母的「i」重構為「interestRate」。較複雜的重構是把一段if區段中的代碼變為一個子程式。

來源

• 重構這個術語是從數字與多項式的因式分解類比而來。如，x² − 1可以被分解為(x + 1)(x − 1)，這樣揭示了前面的形式不可見的內部結構（如兩個根+1和−1）。同樣，在軟體重構中，在可見結構上的改變通常會揭示原代碼中「隱藏」的內部結構。

stress test, loda test, 壓力測試, node.js

常見的 stress test 工具為 java 的 JMeter, 但對 Nodejs server 做壓力測試可以用開源使用者開發的 library, 例如 loadtest 和 nodeload .

What is load-test, stress-test, and identity

Load testing is the process of putting demand on a software system or computing device and measuring its response.
Load testing is performed to determine a system's behavior under both normal and anticipated peak load conditions.
It helps to identify the maximum operating capacity of an application as well as any bottlenecks and determine which element is causing degradation.
When the load placed on the system is raised beyond normal usage patterns to test the system's response at unusually high or peak loads, it is known as stress testing.

Methodology 

There is little agreement on what the specific goals of load testing are. The term is often used synonymously with concurrency testing, software performance testing, reliability testing, and volume testing. Load testing is usually a type of non-functional testing, but it can be used as a functional test to validate suitability for use.

Nodejs VS Apache

http://zgadzaj.com/benchmarking-nodejs-basic-performance-tests-against-apache-php

nodeload

 is a collection of independent node.js modules for load testing HTTP services.
https://www.npmjs.com/package/nodeload

NODE STRESS SUITE

is a collection of independent node.js modules for load testing HTTP services.
https://github.com/Samuel29/NodeStressSuite

loadtest

Runs a load test on the selected HTTP or WebSockets URL. The API allows for easy integration in your own tests.
https://github.com/alexfernandez/loadtest