文/楊博

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

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

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

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

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

DEMO 功能需求

作為 DEMO 使用者，打開頁面后會(huì)看到一個(gè)文本框。

在文本框中輸入任意 Github 用戶名，在文本框下方就會(huì)顯示用戶名對(duì)應(yīng)的頭像。

從 Github 加載頭像

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

發(fā)送請(qǐng)求并渲染頭像的完整流程的驗(yàn)收標(biāo)準(zhǔn)如下：

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

異步編程和 MVVM

過去，我們?cè)谇岸碎_發(fā)中，會(huì)用異步編程來發(fā)送請(qǐng)求、獲取數(shù)據(jù)。比如 ECMAScript 2015 的 Promise 和 HTML 5 的 fetch API。

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

用 ReactJS 和 Promise 的實(shí)現(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è)閉包構(gòu)成，設(shè)置、訪問狀態(tài)的代碼五零四散，所以調(diào)試起來很麻煩，我花了兩個(gè)晚上才調(diào)通這 100 行代碼。

Binding.scala

現(xiàn)在我們有了 Binding.scala ，由于 Binding.scala 支持自動(dòng)遠(yuǎn)程數(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 請(qǐng)?jiān)L問 ScalaFiddle。

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

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

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

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

讓我們回顧一下驗(yàn)收標(biāo)準(zhǔn)，看看和源代碼是怎么一一對(duì)應(yīng)的：

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

  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>
    

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

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

  • 如果加載時(shí)出錯(cuò)，顯示錯(cuò)誤信息。

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

•   }
  }
  

結(jié)論

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

表格.png

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

• 復(fù)用性
• 性能和精確性
• HTML模板
• 異步編程

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

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

后記

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

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

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

我有一個(gè)夢(mèng)想，夢(mèng)想編程可以像說話、寫字一樣的基礎(chǔ)技能，被每個(gè)人都掌握。

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

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

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

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

相關(guān)鏈接

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

More than React系列文章：

《More than React（一）為什么ReactJS不適合復(fù)雜的前端項(xiàng)目？》

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

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

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

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