非同步程式設計真的好嗎？

ThoughtWorks發表於2017-02-05

非同步程式設計

More than React系列文章：

《More than React（一）為什麼ReactJS不適合複雜的前端專案？》

《More than React（二）React.Component損害了複用性？》

《More than React（三）虛擬DOM已死？》

《More than React（四）HTML也可以靜態編譯？》

《More than React（五）非同步程式設計真的好嗎？》

文/楊博

《More than React》系列的上一篇文章HTML也可以編譯？介紹了 Binding.scala 如何在渲染 HTML 時靜態檢查語法錯誤和語義錯誤，從而避免 bug ，寫出更健壯的程式碼。本篇文章將討論Binding.scala和其他前端框架如何向伺服器傳送請求並在頁面顯示。

在過去的前端開發中，向伺服器請求資料需要使用非同步程式設計技術。非同步程式設計的概念很簡單，指在進行 I/O 操作時，不阻塞當前執行流，而通過回撥函式處理 I/O 的結果。不幸的是，這個概念雖然簡單，但用起來很麻煩，如果錯用會導致 bug 叢生，就算小心翼翼的處理各種非同步事件，也會導致程式變得複雜、更難維護。

Binding.scala 可以用 I/O 狀態的繫結代替非同步程式設計，從而讓程式又簡單又好讀，對業務人員也更友好。

我將以一個從 Github 載入頭像的 DEMO 頁面為例，說明為什麼非同步程式設計會導致程式碼變複雜，以及 Binding.scala 如何解決這個問題。

DEMO 功能需求

作為 DEMO 使用者，開啟頁面後會看到一個文字框。

在文字框中輸入任意 Github 使用者名稱，在文字框下方就會顯示使用者名稱對應的頭像。

從 Github 載入頭像

要想實現這個需求，可以用 Github API 傳送獲取使用者資訊的 HTTPS 請求。

傳送請求並渲染頭像的完整流程的驗收標準如下：

如果使用者名稱為空，顯示“請輸入使用者名稱”的提示文字；
如果使用者名稱非空，發起 Github API，並根據 API 結果顯示不同的內容：
- 如果尚未載入完，顯示“正在載入”的提示資訊；
- 如果成功載入，把迴應解析成 JSON，從中提取頭像 URL 並顯示；
- 如果載入時出錯，顯示錯誤資訊。

非同步程式設計和 MVVM

過去，我們在前端開發中，會用非同步程式設計來傳送請求、獲取資料。比如 ECMAScript 2015 的 Promise 和 HTML 5 的 fetch API。

而要想把這些資料渲染到網頁上，我們過去的做法是用 MVVM 框架。在獲取資料的過程中持續修改 View Model ，然後編寫 View 把 View Model 渲染到頁面上。這樣一來，頁面上就可以反映出載入過程的動態資訊了。比如，ReactJS 的 state 就是 View Model，而 render 則是 View ，負責把 View Model 渲染到頁面上。

用 ReactJS 和 Promise 的實現如下：

class Page extends React.Component {

  state = {
    githubUserName: null,
    isLoading: false,
    error: null,
    avatarUrl: null,
  };

  currentPromise = null;

  sendRequest(githubUserName) {
    const currentPromise = fetch(`https://api.github.com/users/${githubUserName}`);
    this.currentPromise = currentPromise;
    currentPromise.then(response => {
      if (this.currentPromise != currentPromise) {
        return;
      }
      if (response.status >= 200 && response.status < 300) {
        return response.json();
      } else {
        this.currentPromise = null;
        this.setState({
          isLoading: false,
          error: response.statusText
        });
      }
    }).then(json => {
      if (this.currentPromise != currentPromise) {
        return;
      }
      this.currentPromise = null;
      this.setState({
        isLoading: false,
        avatarUrl: json.avatar_url,
        error: null
      });
    }).catch(error => {
      if (this.currentPromise != currentPromise) {
        return;
      }
      this.currentPromise = null;
      this.setState({
        isLoading: false,
        error: error,
        avatarUrl: null
      });
    });
    this.setState({
      githubUserName: githubUserName,
      isLoading: true,
      error: null,
      avatarUrl: null
    });
  }

  changeHandler = event => {
    const githubUserName = event.currentTarget.value;
    if (githubUserName) {
      this.sendRequest(githubUserName);
    } else {
      this.setState({
        githubUserName: githubUserName,
        isLoading: false,
        error: null,
        avatarUrl: null
      });
    }
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.changeHandler}/>
        <hr/>
        <div>
          {
            (() => {
              if (this.state.githubUserName) {
                if (this.state.isLoading) {
                  return <div>{`Loading the avatar for ${this.state.githubUserName}`}</div>
                } else {
                  const error = this.state.error;
                  if (error) {
                    return <div>{error.toString()}</div>;
                  } else {
                    return <img src={this.state.avatarUrl}/>;
                  }
                }
              } else {
                return <div>Please input your Github user name</div>;
              }
            })()
          }
        </div>
      </div>
    );
  }

}

100

class Page extends React.Component {

state = {

githubUserName: null,

isLoading: false,

error: null,

avatarUrl: null,

};

currentPromise = null;

sendRequest(githubUserName) {

const currentPromise = fetch(`https://api.github.com/users/${githubUserName}`);

this.currentPromise = currentPromise;

currentPromise.then(response => {

if (this.currentPromise != currentPromise) {

return;

}

if (response.status >= 200 && response.status < 300) {

return response.json();

} else {

this.currentPromise = null;

this.setState({

isLoading: false,

error: response.statusText

});

}

}).then(json => {

if (this.currentPromise != currentPromise) {

return;

}

this.currentPromise = null;

this.setState({

isLoading: false,

avatarUrl: json.avatar_url,

error: null

});

}).catch(error => {

if (this.currentPromise != currentPromise) {

return;

}

this.currentPromise = null;

this.setState({

isLoading: false,

error: error,

avatarUrl: null

});

this.setState({

githubUserName: githubUserName,

isLoading: true,

error: null,

avatarUrl: null

});

}

changeHandler = event => {

const githubUserName = event.currentTarget.value;

if (githubUserName) {

this.sendRequest(githubUserName);

} else {

this.setState({

githubUserName: githubUserName,

isLoading: false,

error: null,

avatarUrl: null

});

}

};

render() {

return (

<div>

<hr/>

<div>

{

(() => {

if (this.state.githubUserName) {

if (this.state.isLoading) {

return <div>{`Loading the avatar for ${this.state.githubUserName}`}</div>

} else {

const error = this.state.error;

if (error) {

return <div>{error.toString()}</div>;

} else {

return <img src={this.state.avatarUrl}/>;

}

} else {

return <div>Please input your Github user name</div>;

}

})()

}

</div>

);

}

一共用了 100 行程式碼。

由於整套流程由若干個閉包構成，設定、訪問狀態的程式碼五零四散，所以除錯起來很麻煩，我花了兩個晚上才調通這 100 行程式碼。

Binding.scala

現在我們有了 Binding.scala ，由於 Binding.scala 支援自動遠端資料繫結，可以這樣寫：

@dom def render = {
  val githubUserName = Var("")
  def inputHandler = { event: Event => githubUserName := event.currentTarget.asInstanceOf[Input].value }
  <div>
    <input type="text" oninput={ inputHandler }/>
    <hr/>
    {
      val name = githubUserName.bind
      if (name == "") {
        <div>Please input your Github user name</div>
      } else {
        val githubResult = FutureBinding(Ajax.get(s"https://api.github.com/users/${name}"))
        githubResult.bind match {
          case None =>
            <div>Loading the avatar for { name }</div>
          case Some(Success(response)) =>
            val json = JSON.parse(response.responseText)
            <img src={ json.avatar_url.toString }/>
          case Some(Failure(exception)) =>
            <div>{ exception.toString }</div>
        }
      }
    }
  </div>
}

@dom def render = {

val githubUserName = Var("")

def inputHandler = { event: Event => githubUserName := event.currentTarget.asInstanceOf[Input].value }

<div>

<hr/>

{

val name = githubUserName.bind

if (name == "") {

<div>Please input your Github user name</div>

} else {

val githubResult = FutureBinding(Ajax.get(s"https://api.github.com/users/${name}"))

githubResult.bind match {

case None =>

<div>Loading the avatar for { name }</div>

case Some(Success(response)) =>

val json = JSON.parse(response.responseText)

case Some(Failure(exception)) =>

<div>{ exception.toString }</div>

}

</div>

}

一共 25 行程式碼。

完整的 DEMO 請訪問 ScalaFiddle。

之所以這麼簡單，是因為 Binding.scala 可以用 FutureBinding 把 API 請求當成普通的繫結表示式使用，表示 API 請求的當前狀態。

每個 FutureBinding 的狀態有三種可能，None表示操作正在進行，Some(Success(...))表示操作成功，Some(Failure(...))表示操作失敗。

還記得繫結表示式的 .bind 嗎？它表示“each time it changes”。
由於 FutureBinding 也是 Binding 的子型別，所以我們就可以利用 .bind ，表達出“每當遠端資料的狀態改變”的語義。

結果就是，用 Binding.scala 時，我們編寫的每一行程式碼都可以對應驗收標準中的一句話，描述著業務規格，而非“非同步流程”這樣的技術細節。

讓我們回顧一下驗收標準，看看和原始碼是怎麼一一對應的：

如果使用者名稱為空，顯示“請輸入使用者名稱”的提示文字；

JavaScript

if (name == "") { <div>Please input your Github user name</div>

1
2

if (name == "") {
<div>Please input your Github user name</div>
如果使用者名稱非空，發起 Github API，並根據 API 結果顯示不同的內容：

JavaScript

} else { val githubResult = FutureBinding(Ajax.get(s"https://api.github.com/users/${name}")) githubResult.bind match {

1
2
3

} else {
val githubResult = FutureBinding(Ajax.get(s"https://api.github.com/users/${name}"))
githubResult.bind match {
- 如果尚未載入完，顯示“正在載入”的提示資訊；
  
  JavaScript
  
  case None => <div>Loading the avatar for { name }</div>
  
  1
  2
  
  case None =>
  <div>Loading the avatar for { name }</div>
- 如果成功載入，把迴應解析成 JSON，從中提取頭像 URL 並顯示；
  
  JavaScript
  
  case Some(Success(response)) => val json = JSON.parse(response.responseText) <img src={ json.avatar_url.toString }/>
  
  1
  2
  3
  
  case Some(Success(response)) =>
  val json = JSON.parse(response.responseText)
  <img src={ json.avatar_url.toString }/>
- 如果載入時出錯，顯示錯誤資訊。
  
  JavaScript
  
  case Some(Failure(exception)) => // 如果載入時出錯， <div>{ exception.toString }</div> // 顯示錯誤資訊。
  
  1
  2
  
  case Some(Failure(exception)) => // 如果載入時出錯，
  <div>{ exception.toString }</div> // 顯示錯誤資訊。
JavaScript

} }

1
2

}
}

結論

本文對比了 ECMAScript 2015 的非同步程式設計和 Binding.scala 的 FutureBinding 兩種通訊技術。Binding.scala 概念更少，功能更強，對業務更為友好。

技術棧	ReactJS + Promise + fetch	Binding.scala
程式設計正規化	MVVM + 非同步程式設計	遠端資料繫結
如何管理資料載入流程	程式設計師手動編寫非同步程式設計程式碼	自動處理
能不能用程式碼直接描述驗收標準	不能	能
從RESTful API載入資料並顯示所需程式碼行數	100行	25行

這五篇文章介紹了用 ReactJS 實現複雜互動的前端專案的幾個難點，以及 Binding.scala 如何解決這些難點，包括：

複用性
效能和精確性
HTML模板
非同步程式設計

除了上述四個方面以外，ReactJS 的狀態管理也是老大難問題，如果引入 Redux 或者 react-router 這樣的第三方庫來處理狀態，會導致架構變複雜，分層變多，程式碼繞來繞去。而Binding.scala 可以用和頁面渲染一樣的資料繫結機制描述複雜的狀態，不需要任何第三方庫，就能提供伺服器通訊、狀態管理和網址分發的功能。

如果你正參與複雜的前端專案，使用ReactJS或其他開發框架時，感到痛苦不堪，你可以用Binding.scala一舉解決這些問題。Binding.scala快速上手指南中包含了從零開始建立Binding.scala專案的每一步驟。

後記

Everybody’s Got to Learn How to Code ——奧巴馬

程式語言是人和電腦對話的語言。對掌握程式語言的人來說，電腦就是他們大腦的延伸，也是他們身體的一部分。所以，不會程式設計的人就像是失去翅膀的天使。

電腦程式是很神奇的存在，它可以執行，會看、會聽、會說話，就像生命一樣。會程式設計的人就像在創造生命一樣，乾的是上帝的工作。

我有一個夢想，夢想程式設計可以像說話、寫字一樣的基礎技能，被每個人都掌握。

如果網頁設計師掌握Binding.scala，他們不再需要找工程師實現他們的設計，而只需要在自己的設計稿原型上增加魔法符號.bind，就能創造出會動的網頁。

如果QA、BA或產品經理掌握Binding.scala，他們寫下驗收標準後，不再需要檢查程式設計師乾的活對不對，而可以把驗收標準自動變成可以運轉的功能。

我努力在Binding.scala的設計中消除不必要的技術細節，讓人使用Binding.scala時，只需要關注他想傳遞給電腦的資訊。

Binding.scala是我朝著夢想邁進的小小產物。我希望它不光是前端工程師手中的利器，也能成為普通人邁入程式設計殿堂的踏腳石。

非同步程式設計真的好嗎？

DEMO 功能需求

非同步程式設計和 MVVM

Binding.scala

結論

後記

相關連結

相關文章