文/楊博

本文首發(fā)于InfoQ：http://www.infoq.com/cn/articles/more-than-react-part05

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

在過去的前端開發(fā)中，向服務器請求數(shù)據(jù)需要使用異步編程技術。異步編程的概念很簡單，指在進行 I/O 操作時，不阻塞當前執(zhí)行流，而通過回調(diào)函數(shù)處理 I/O 的結(jié)果。不幸的是，這個概念雖然簡單，但用起來很麻煩，如果錯用會導致 bug 叢生，就算小心翼翼的處理各種異步事件，也會導致程序變得復雜、更難維護。

Binding.scala 可以用 I/O 狀態(tài)的綁定代替異步編程，從而讓程序又簡單又好讀，對業(yè)務人員也更友好。

我將以一個從 Github 加載頭像的 DEMO 頁面為例，說明為什么異步編程會導致代碼變復雜，以及 Binding.scala 如何解決這個問題。

DEMO 功能需求

作為 DEMO 使用者，打開頁面后會看到一個文本框。

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

從 Github 加載頭像

要想實現(xiàn)這個需求，可以用 Github API 發(fā)送獲取用戶信息的 HTTPS 請求。

發(fā)送請求并渲染頭像的完整流程的驗收標準如下：

• 如果用戶名為空，顯示“請輸入用戶名”的提示文字；
• 如果用戶名非空，發(fā)起 Github API，并根據(jù) API 結(jié)果顯示不同的內(nèi)容：
  • 如果尚未加載完，顯示“正在加載”的提示信息；
  • 如果成功加載，把回應解析成 JSON，從中提取頭像 URL 并顯示；
  • 如果加載時出錯，顯示錯誤信息。

異步編程和 MVVM

過去，我們在前端開發(fā)中，會用異步編程來發(fā)送請求、獲取數(shù)據(jù)。比如 ECMAScript 2015 的 Promise 和 HTML 5 的 fetch API。

而要想把這些數(shù)據(jù)渲染到網(wǎng)頁上，我們過去的做法是用 MVVM 框架。在獲取數(shù)據(jù)的過程中持續(xù)修改 View Model ，然后編寫 View 把 View Model 渲染到頁面上。這樣一來，頁面上就可以反映出加載過程的動態(tài)信息了。比如，ReactJS 的 state 就是 View Model，而 render 則是 View ，負責把 View Model 渲染到頁面上。

用 ReactJS 和 Promise 的實現(xiàn)如下：

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 行代碼。

由于整套流程由若干個閉包構(gòu)成，設置、訪問狀態(tài)的代碼五零四散，所以調(diào)試起來很麻煩，我花了兩個晚上才調(diào)通這 100 行代碼。

Binding.scala

現(xiàn)在我們有了 Binding.scala ，由于 Binding.scala 支持自動遠程數(shù)據(jù)綁定，可以這樣寫：

@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>
}

一共 25 行代碼。

完整的 DEMO 請訪問 ScalaFiddle。

之所以這么簡單，是因為 Binding.scala 可以用 FutureBinding 把 API 請求當成普通的綁定表達式使用，表示 API 請求的當前狀態(tài)。

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

還記得綁定表達式的 .bind 嗎？它表示“each time it changes”。
由于 FutureBinding 也是 Binding 的子類型，所以我們就可以利用 .bind ，表達出“每當遠端數(shù)據(jù)的狀態(tài)改變”的語義。

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

讓我們回顧一下驗收標準，看看和源代碼是怎么一一對應的：

• 如果用戶名為空，顯示“請輸入用戶名”的提示文字；

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

• 如果用戶名非空，發(fā)起 Github API，并根據(jù) API 結(jié)果顯示不同的內(nèi)容：

  } 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>
    

  • 如果成功加載，把回應解析成 JSON，從中提取頭像 URL 并顯示；

    case Some(Success(response)) =>
      val json = JSON.parse(response.responseText)
      <img src={ json.avatar_url.toString }/>
    

  • 如果加載時出錯，顯示錯誤信息。

    case Some(Failure(exception)) => // 如果加載時出錯，
      <div>{ exception.toString }</div> // 顯示錯誤信息。
    

•   }
  }
  

結(jié)論

本文對比了 ECMAScript 2015 的異步編程和 Binding.scala 的 FutureBinding 兩種通信技術。Binding.scala 概念更少，功能更強，對業(yè)務更為友好。

表格.png

這五篇文章介紹了用 ReactJS 實現(xiàn)復雜交互的前端項目的幾個難點，以及 Binding.scala 如何解決這些難點，包括：

• 復用性
• 性能和精確性
• HTML模板
• 異步編程

除了上述四個方面以外，ReactJS 的狀態(tài)管理也是老大難問題，如果引入 Redux 或者 react-router 這樣的第三方庫來處理狀態(tài)，會導致架構(gòu)變復雜，分層變多，代碼繞來繞去。而Binding.scala 可以用和頁面渲染一樣的數(shù)據(jù)綁定機制描述復雜的狀態(tài)，不需要任何第三方庫，就能提供服務器通信、狀態(tài)管理和網(wǎng)址分發(fā)的功能。

如果你正參與復雜的前端項目，使用ReactJS或其他開發(fā)框架時，感到痛苦不堪，你可以用Binding.scala一舉解決這些問題。Binding.scala快速上手指南中包含了從零開始創(chuàng)建Binding.scala項目的每一步驟。

后記

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

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

電腦程序是很神奇的存在，它可以運行，會看、會聽、會說話，就像生命一樣。會編程的人就像在創(chuàng)造生命一樣，干的是上帝的工作。

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

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

如果QA、BA或產(chǎn)品經(jīng)理掌握Binding.scala，他們寫下驗收標準后，不再需要檢查程序員干的活對不對，而可以把驗收標準自動變成可以運轉(zhuǎn)的功能。

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

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

相關鏈接

• Binding.scala 項目主頁
• Binding.scala ? TodoMVC 項目主頁
• Binding.scala ? TodoMVC DEMO
• Binding.scala ? TodoMVC 以外的其他 DEMO
• JavaScript 到 Scala.js 移植指南
• Scala.js 項目主頁
• Scala API 參考文檔
• Scala.js API 參考文檔
• Scala.js DOM API 參考文檔
• Binding.scala快速上手指南
• Binding.scala API參考文檔
• Binding.scala 的 Gitter 聊天室

More than React系列文章：

《More than React（一）為什么ReactJS不適合復雜的前端項目？》

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

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

《More than React（四）HTML也可以靜態(tài)編譯？》

《More than React（五）異步編程真的好嗎？》