<More than React>异步编程真的好吗?彩民之家高手论

2019-10-11 12:56 来源:未知

难点一:ReactJS组件难以在错综复杂交互页面中复用

ReactJS中的最小复用单位是组件。ReactJS的机件比AngularJS的Controller和View 要轻量些。 每种组件只须要前端开荒者提供贰个 render 函数,把 propsstate 映射成网页成分。

如此那般的轻量级组件在渲染轻巧静态页面时很好用, 不过要是页面有互动,就非得在组件间传递回调函数来处监护人件。

本身就要《More than React(二)组件对复用性有毒?》中用原生DHTML API、ReactJS和Binding.scala完毕同多少个内需复用的页面,介绍Binding.scala如何简单达成、轻巧复用复杂的互相逻辑。

背景介绍

二〇一八年 4 月,作者首先次在某些客商的门类中接触到ReactJS 。

自己意识ReactJS要比笔者原先用过的AngularJS轻易非常多,它提供了响应式的多寡绑定功效,把多少映射到网页上,使自己得以轻易实现互动轻便的网址。

然则,随着作者进一步深远的行使ReactJS,作者发觉用ReactJS编写交互复杂的网页非常不方便。
自家梦想有一种艺术,可以像ReactJS同样轻易消除轻巧难点。除此以外,还要能轻巧解决复杂难点。

于是乎笔者把ReactJS用Scala重新写了叁个。代码量从近两万行降到了一千多行。

用这一个框架达成的TodoMVC应用,只用了154行代码。而用ReactJS落成均等效果的TodoMVC,需要488行代码。

下图是用Binding.scala实现的TodoMVC应用。

那个框架正是Binding.scala。

有关链接

  • 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也能够静态编写翻译?》

《More than React(五)异步编制程序真的可以吗?》

结论

就算Binding.scala初看上去很像ReactJS, 但遮蔽在Binding.scala背后的体制更简明、更通用,与ReactJS和Widok差之千里。

因此,通过简化概念,Binding.scala灵活性越来越强,能用通用的办法消除ReactJS化解不了的千头万绪难点。

诸如,除了上述八个地点以外,ReactJS的事态管理也是为难难题,若是引进Redux或许react-router那样的第三方库来拍卖意况,会促成架构变复杂,分层变多,代码绕来绕去。而Binding.scala可以用和页面渲染同样的数目绑定机制描述复杂的情景,没有须要别的第三方库,就能够提供服务器通讯、状态管理和网站分发的功能。

以下表格中列出了上述Binding.scala和ReactJS的机能差距:

Binding.scala

ReactJS

复用性

细微复用单位

方法

组件

复用难度

不管交互内容依然静态内容都轻便复用

轻松复用静态内容组件,但麻烦复用交互组件

页面渲染算法

算法

正确的数量绑定

虚拟 DOM

性能

正确性

自行保险科学

内需开采者手动设置 key 属性,不然复杂的页面会混杂。

HTML 模板

语法

Scala XML 字面量

JSX

是否帮忙 HTML 或 XHTML 语法

完全扶植 XHTML

残缺匡助。符合规律的 XHTML 无法编写翻译。开荒者必得手动把 classfor 属性替换来 classNamehtmlFor,还要把内联的 style 样式从 CSS 语法改成 JSON 语法。

怎么着校验模板语法

电动编写翻译时校验

运转时通过 propTypes 校验但不恐怕检查评定大概的拼写错误。

服务器通信

机制

活动远程数据绑定

MVVM 异步编制程序

福寿康宁难度

简单

复杂

其他

什么样分担网站或然锚点链接

支撑把网站当成普通的绑定变量来用,没有需求第三方库。

不支持,供给第三方库 react-router

意义完备性

完整的前端开辟施工方案

自个儿只满含视图部分功效。须求特出精通 react-router 、 Redux 品级三方库本领兑现完全的前端项目。

学习曲线

API 轻巧,对没用过 Scala 的人的话也很好懂

上心灵。但功能太弱导致中期学习第三方库时曲线陡峭。

Binding.scala

ReactJS

多个多月前,小编在Scala.js的论坛公布Binding.scala时,那时候Scala.js社区最流行的响应式前端编制程序框架是Widok。TimNieradzik是Widok的小编。他在察看本身颁发的框架后,表彰那一个框架是Scala.js社区最有前途的 HTML 5渲染框架。

她是对的,八个月后,今后Binding.scala已经济体改为Scala.js社区最风靡的响应式前端编制程序框架。

Awesome Scala网站对待了Scala的响应式前端编程框架,Binding.scala的活跃程度和流行度都比Udash、Widok等任何框架要高。

彩民之家高手论坛 1

自己在近来的多少个品种中,也逐年抛弃JavaScript和ReactJS,改用Scala.js和Binding.scala搭建新时代的前端手艺栈。

主题材料三:ReactJS的HTML模板作用既不完备、也不硬朗

ReactJS支持用JSX编写HTML模板。

力排众议上,前端技术员只要把静态HTML原型复制到JSX源文件中,
充实一些变量替换代码,
就会改产生动态页面。
商酌上这种做法要比Cycle.js、Widok、ScalaTags等框架更相符复用设计师提供的HTML原型。

噩运的是,ReactJS对HTML的支撑七零八落。开辟者必须手动把classfor属性替换到classNamehtmlFor,还要把内联的style体制从CSS语法改成JSON语法,代码技能运维。
这种开辟形式下,前端程序猿即使可以把HTML原型复制粘贴到代码中,但还索要多量改换工夫实际运作。
比Cycle.js、Widok、或然、ScalaTags省连发太多事。

除去,ReactJS还提供了propTypes编写制定校验虚构DOM的合法性。
而是,这第一建工公司制也破绽百出。
就是钦命了propTypes,ReactJS也不能够在编写翻译前提前发掘错误。唯有测验覆盖率异常高的品种时工夫在各种组件使用其他零件时张开校验。
即便测量检验覆盖率极高,propTypes照例不能够检查实验出拼错的属性名,假若你把onClick写成了onclick
ReactJS就不会报错,往往变成开垦者额外费用多量小时排查三个相当粗略的bug。

笔者将要《More than React(四)HTML也得以编写翻译?》中相比较ReactJS和Binding.scala的HTML模板,介绍Binding.scala如何在全部援助XHTML语法的还要静态检查语法错误和语义错误。

作者将以贰个从 Github 加载头像的 DEMO 页面为例,表明为什么异步编制程序会产生代码变复杂,以致 Binding.scala 如何解决那么些标题。

主题材料四:ReactJS与服务器通讯时索要复杂的异步编程

ReactJS从服务器加载数据时的架构能够视作MVVM(Model–View–ViewModel)形式。 前端技术员需求编写制定一个数据库访谈层作为Model,把ReactJS的state当做ViewModel,而render用作View。 Model担任访谈数据库并把多少设置到state(即View Model)上,可以用Promise和fetch API实现。 然后,render,即View,担负把View Model渲染到页面上。

在这里全数流程中,前端技术员需求编写制定多量闭包组成的异步流程, 设置、访问状态的代码五零四散, 一十分的大心就能bug丛生,固然谦虚严谨的拍卖种种异步事件,也会形成程序变得复杂,既难调节和测量检验,又难保障。

自个儿就要《More than React(五)为何别用异步编制程序?》中比较ReactJS和Binding.scala的多少同步模型,介绍Binding.scala如何自动同步服务器数据,防止手动异步编制程序。

《More than React》连串的篇章会一同分为五篇。本文是第一篇,介绍用ReactJS开垦时相遇的各类难点。前边四篇小说的每一篇将会独家详细座谈当中一个难点,以致Binding.scala怎么着减轻那些主题素材。

在过去的前端开垦中,向服务器诉求数据须要动用异步编制程序本领。异步编程的概念一点也不细略,指在进展 I/O 操作时,不打断当前实施流,而透过回调函数管理 I/O 的结果。不幸的是,这么些概念就算简易,但用起来很麻烦,倘诺错用会导致 bug 丛生,固然小心翼翼的管理种种异步事件,也会促成程序变得复杂、更难保障。

难题二:ReactJS的杜撰DOM 算法又慢又不准

ReactJS的页面渲染算法是虚构DOM差量算法。

开荒者需求提供 render 函数,根据 propsstate 生成设想 DOM。 然后 ReactJS 框架依照 render 再次来到的虚拟 DOM 创造一样结构的诚实 DOM.

每当 state 改造时,ReacJS 框架重新调用 render 函数,获取新的设想 DOM 。 然后,框架会比较上次生成的设想 DOM 和新的杜撰 DOM 有哪些不同,然后把差距应用到实际DOM上。

那般做有两大毛病:

  1. 每次 state 更改,render 函数都要生成完全的杜撰 DOM. 哪怕 state 改变不大,render函数也会完全总结三遍。假设 render 函数很复杂,这些进程就白白浪费了广大乘除财富。
  2. ReactJS框架相比设想DOM差异的进度,既慢又便于失误。比方,即便你想要在有个别 <ul>列表的最上部插入一项 <li> ,那么ReactJS框架会误感到你改改了 <ul> 的每一样 <li>,然后在后面部分插入了多个 <li>

那是因为 ReactJS收到的新旧四个虚构DOM之间互相独立,ReactJS并不知道数据源产生了哪些操作,只可以依靠新旧多个设想DOM来猜测内需实施的操作。 自动的估算算法既不准又慢,供给求前端开采者手动提供 key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法只怕 componentWillUpdate 等方法手艺扶植 ReactJS 框架猜对。

自己就要《More than React(三)虚构DOM已死?》中比较ReactJS、AngularJS和Binding.scala渲染机制,介绍轻巧品质高的Binding.scala正确数据绑定机制。

连带链接

  • 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 聊天室

结论

本文相比较了 ECMAScript 2016 的异步编制程序和 Binding.scala 的 FutureBinding 二种通讯本领。Binding.scala 概念越来越少,功效更加强,对事情愈发和睦。

表格.png

那五篇小说介绍了用 ReactJS 完毕复杂交互的前端项目标多少个难点,以至Binding.scala 怎样解决那个难点,蕴涵:

  • 复用性
  • 天性和正确性
  • HTML模板
  • 异步编程

除此而外上述八个地方以外,ReactJS 的意况管理也是困难难点,假设引进 Redux 恐怕 react-router 那样的第三方库来管理状态,会导致框架结构变复杂,分层变多,代码绕来绕去。而Binding.scala 能够用和页面渲染一样的多少绑定机制描述复杂的事态,无需别的第三方库,就会提供服务器通讯、状态处理和网站分发的职能。

借使您正参与复杂的前端项目,使用ReactJS或任何支付框架时,认为悲伤不堪,你能够用Binding.scala一举消除那几个主题素材。Binding.scala快捷上手指南中满含了从零开头创造Binding.scala项目标每一步骤。

背景介绍

2018年 4 月,笔者第一回在有些客商的项目中接触到ReactJS 。

本身发觉ReactJS要比自个儿在此以前用过的AngularJS轻松相当多,它提供了响应式的数目绑定作用,把多少映射到网页上,使小编能够轻便落成相互之间不难的网站。

但是,随着笔者进一步深入的利用ReactJS,笔者意识用ReactJS编写交互复杂的网页很勤奋。 笔者期望有一种方法,能够像ReactJS同样简单消除轻易难题。另外,还要能大致化解复杂难点。

于是自个儿把ReactJS用Scala重新写了多个。代码量从近三千0行降到了一千多行。

用那些框架达成的TodoMVC应用,只用了154行代码。而用ReactJS达成平等效用的TodoMVC,需要488行代码。

下图是用Binding.scala完毕的TodoMVC应用。

彩民之家高手论坛 2

本条框架正是Binding.scala。

难题四:ReactJS与服务器通讯时需求复杂的异步编制程序

ReactJS从服务器加载数据时的架构能够当做MVVM(Model–View–ViewModel)格局。
前端程序员需求编写制定一个数据库访问层作为Model,把ReactJS的state当做ViewModel,而render当做View。
Model担任访谈数据库并把多少设置到state(即View Model)上,可以用Promise和fetch API实现。
然后,render,即View,担当把View Model渲染到页面上。

在这里整个流程中,前端技士须求编制大批量闭包组成的异步流程,
安装、访谈状态的代码五零四散,
轻率就能够bug丛生,尽管一毫不苟的拍卖各样异步事件,也会变成程序变得复杂,既难调节和测量检验,又难保险。

本身就要《More than React(五)为何别用异步编程?》中比较ReactJS和Binding.scala的数据同步模型,介绍Binding.scala如何自动同步服务器数据,制止手动异步编制程序。

异步编制程序和 MVVM

千古,大家在前端开采中,会用异步编制程序来发送央浼、获取数据。举个例子ECMAScript 二零一五 的 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 行代码。

由于全数流程由若干个闭包构成,设置、访问状态的代码五零四散,所以调节和测量检验起来很辛勤,笔者花了八个晚上才调通那100 行代码。

关于小编:ThoughtWorks

彩民之家高手论坛 3

ThoughtWorks是一家中外IT咨询集团,追求卓绝软件品质,致力于科技(science and technology)驱动商业变革。长于营造定制化软件出品,扶植客商高效将概念转化为价值。相同的时候为客户提供客户体验设计、技巧计谋咨询、组织转型等咨询服务。 个人主页 · 我的稿子 · 84 ·   

彩民之家高手论坛 4

标题一:ReactJS组件难以在犬牙相制交互页面中复用

ReactJS中的最小复用单位是组件。ReactJS的组件比AngularJS的Controller和View 要轻量些。
每一种组件只须要前端开采者提供叁个 render 函数,把 propsstate 映射成网页成分。

与此相类似的轻量级组件在渲染轻巧静态页面时很好用,
然则纵然页面有互动,就不可能不在组件间传递回调函数来处监护人件。

自个儿就要《More than React(二)组件对复用性有剧毒?》中用原生DHTML API、ReactJS和Binding.scala完结同一个亟需复用的页面,介绍Binding.scala怎么着轻松完成、轻便复用复杂的并行逻辑。

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

一共 25 行代码。

完整的 DEMO 请访问 ScalaFiddle。

所以如此轻便,是因为 Binding.scala 能够用 FutureBinding 把 API 诉求当成普通的绑定表明式使用,表示 API 央浼的脚下情状。

每个 FutureBinding 的状态有两种大概,None意味着操作正在开展,Some(Success(...))代表操作成功,Some(Failure(...))表示操作退步。

还记得绑定表明式的 .bind 吗?它表示“each time it changes”。
由于 FutureBinding 也是 Binding 的子类型,所以大家就能够利用 .bind ,表达出“每当远端数据的状态退换”的语义。

结果就是,用 Binding.scala 时,大家编辑的每一行代码都得以对应检验收下标准中的一句话,描述着事情法规,而非“异步流程”这样的工夫细节。

让我们回想一下检验收下标准,看看和源代码是怎么一一对应的:

  • 倘诺客户名字为空,显示“请输入客户名”的提醒文字;

    if (name == "") {
      <div>Please input your Github user name</div>
    
  • 假定客户名非空,发起 Github API,并基于 API 结果显示差异的内容:

    } 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,从当中提取头像 U普拉多L 并展示;

      case Some(Success(response)) =>
        val json = JSON.parse(response.responseText)
        <img src={ json.avatar_url.toString }/>
      
    • 要是加载时出错,彰显错误音讯。

      case Some(Failure(exception)) => // 如果加载时出错,
        <div>{ exception.toString }</div> // 显示错误信息。
      
  • } }

为什么 ReactJS 不切合复杂的前端项目?

2016/08/17 · JavaScript · 15 评论 · React, ReactJS, 前端

正文我: 伯乐在线 - ThoughtWorks 。未经我许可,幸免转发!
迎接参预伯乐在线 专栏撰稿人。

《More than React》连串的小说会一齐分成五篇。本文是率先篇,介绍用ReactJS开采时境遇的各种难点。后边四篇小说的每一篇将会独家详细钻探之中三个主题素材,以致Binding.scala怎样消除这些题目。

标题二:ReactJS的杜撰DOM 算法又慢又不准

ReactJS的页面渲染算法是杜撰DOM差量算法。

开垦者须要提供 render 函数,根据 propsstate 生成虚拟 DOM。
接下来 ReactJS 框架依照 render 再次来到的设想 DOM 创设同样结构的诚实 DOM.

每当 state 改造时,ReacJS 框架重新调用 render 函数,获取新的杜撰 DOM 。
然后,框架会比较上次生成的虚拟 DOM 和新的设想 DOM 有哪些分裂,然后把差别应用到实际DOM上。

这么做有两大缺陷:

  1. 每次 state 更改,render 函数都要生成完全的虚构 DOM. 哪怕 state 改造异常的小,render函数也会全体总括一次。假若 render 函数很复杂,这一个历程就白白浪费了累累积算能源。
  2. ReactJS框架相比较设想DOM差别的进程,既慢又轻松失误。举例,倘让你想要在某些 <ul> 列表的顶上部分插入一项 <li> ,那么ReactJS框架会误以为你改改了 <ul> 的各个 <li>,然后在尾巴部分插入了贰个 <li>

那是因为 ReactJS收到的新旧多少个设想DOM之间相互独立,ReactJS并不知道数据源发生了怎么着操作,只好依靠新旧七个设想DOM来猜测亟待实行的操作。
自动的困惑算法既不准又慢,供给求前端开荒者手动提供 key 属性、shouldComponentUpdate 方法、componentDidUpdate 方法照旧 componentWillUpdate 等办法才具扶植 ReactJS 框架猜对。

自个儿就要《More than React(三)虚拟DOM已死?》中比较ReactJS、AngularJS和Binding.scala渲染机制,介绍轻松质量高的Binding.scala准确数据绑定机制。

文/杨博

难题三:ReactJS的HTML模板功能既不完备、也不健全

ReactJS支持用JSX编写HTML模板。

辩解上,前端技术员只要把静态HTML原型复制到JSX源文件中, 扩大部分变量替换代码, 就能够退换成动态页面。 理论上这种做法要比Cycle.js、Widok、ScalaTags等框架更适合复用设计员提供的HTML原型。

噩运的是,ReactJS对HTML的支撑星落云散。开采者必需手动把classfor质量替换来classNamehtmlFor,还要把内联的style体制从CSS语法改成JSON语法,代码工夫运作。 这种开荒格局下,前端程序猿就算能够把HTML原型复制粘贴到代码中,但还索要大批量改造工夫实际运作。 比Cycle.js、Widok、恐怕、ScalaTags省每每太多事。

而外,ReactJS还提供了propTypes编写制定校验设想DOM的合法性。 然则,这一编写制定也破绽百出。 就算钦点了propTypes,ReactJS也不可能在编写翻译前提前发掘错误。独有测验覆盖率异常高的等级次序时技巧在各种组件使用另外零件时实行校验。 固然测量检验覆盖率异常高,propTypes照例不能够检查实验出拼错的属性名,假若您把onClick写成了onclick, ReactJS就不会报错,往往导致开辟者额外开支大批量小时排查多少个相当粗略的bug。

作者就要《More than React(四)HTML也得以编写翻译?》中比较ReactJS和Binding.scala的HTML模板,介绍Binding.scala怎么着在一体化援救XHTML语法的还要静态检查语法错误和语义错误。

结论

就算Binding.scala初看上去很像ReactJS,
但蒙蔽在Binding.scala背后的编写制定更轻松、更通用,与ReactJS和Widok大相径庭。

所以,通过简化概念,Binding.scala灵活性更加强,能用通用的法子减轻ReactJS解决不了的复杂性问题。

譬喻说,除了上述多个方面以外,ReactJS的状态管理也是费劲难题,若是引进Redux只怕react-router那样的第三方库来拍卖景况,会招致框架结构变复杂,分层变多,代码绕来绕去。而Binding.scala可以用和页面渲染同样的多少绑定机制描述复杂的景色,无需别的第三方库,就能够提供服务器通讯、状态管理和网站分发的效率。

以下表格中列出了上述Binding.scala和ReactJS的功力差别:

3-sheet.png

八个多月前,作者在Scala.js的论坛发布Binding.scala时,当时Scala.js社区最风靡的响应式前端编制程序框架是Widok。提姆Nieradzik是Widok的撰稿人。他在察看自家发布的框架后,赞叹那些框架是Scala.js社区最有前景的 HTML 5渲染框架。

他是对的,多个月后,今后Binding.scala已经变为Scala.js社区最风靡的响应式前端编程框架。

Awesome Scala网站比较了Scala的响应式前端编制程序框架,Binding.scala的龙精虎猛程度和流行度都比Udash、Widok等其他框架要高。

本身在近年来的多少个类型中,也日渐放任JavaScript和ReactJS,改用Scala.js和Binding.scala搭建新时期的前端本领栈。

《More than React》体系的上一篇小说《HTML也能够编写翻译?》介绍了 Binding.scala 怎么着在渲染 HTML 时静态检查语法错误和语义错误,进而幸免 bug ,写出更健康的代码。本篇小说将商讨Binding.scala和其余前端框架如何向服务器发送诉求并在页面彰显。

相关链接

  • 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 聊天室

    1 赞 5 收藏 15 评论

后记

Everybody's Got to Learn How to Code
——奥巴马

编制程序语言是人和管理器对话的语言。对左右编制程序语言的人来讲,计算机正是他们大脑的延伸,也是她们肉体的一局地。所以,不会编制程序的人就疑似失去双翅的Smart。

微型Computer程序是很巧妙的留存,它能够运作,会看、会听、会讲话,就疑似生命同样。会编制程序的人就好像在开创生命同样,干的是上帝的行事。

自个儿有三个期望,梦想编制程序能够像说话、写字同样的底子技巧,被每种人都明白。

一经网页设计员精通Binding.scala,他们不再须求找程序猿实现他们的统一谋算,而只必要在友好的设计稿原型上平添法力符号.bind,就能够创制出会动的网页。

假若QA、BA或产品经营精通Binding.scala,他们写下检验收下标准后,不再供给检讨程序猿干的活对不对,而得以把检验收下标准机动成为能够运转的机能。

自家拼命在Binding.scala的筹算中消除不须要的技艺细节,令人使用Binding.scala时,只要求关注他想传递给Computer的音信。

Binding.scala是本身朝着梦想迈进的小小产物。小编期望它不仅是前者程序猿手中的利器,也能成为草木愚夫迈入编制程序宝殿的踏脚石。

DEMO 效率要求

用作 DEMO 使用者,张开页面后会看见贰个文本框。

在文本框中输入随机 Github 客商名,在文本框下方就能够显得客商名对应的头像。

彩民之家高手论坛 5

从 Github 加载头像

要想达成那些必要,可以用 Github API 发送赢得客户音讯的 HTTPS 请求。

发送诉求并渲染头像的完好流程的检验收下标准如下:

  • 只要用户名叫空,呈现“请输入顾客名”的提醒文字;
  • 借使客户名非空,发起 Github API,并依附 API 结果展现不一样的剧情:
    • 若无加载完,展现“正在加载”的提示信息;
    • 万百分之十功加载,把回应分析成 JSON,从当中提取头像 U帕杰罗L 并彰显;
    • 如果加载时出错,突显错误音讯。

Binding.scala 可以用 I/O 状态的绑定代替异步编制程序,进而让程序又简便又好读,对业务职员也更要好。

本文头阵于InfoQ:http://www.infoq.com/cn/articles/more-than-react-part05

版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:<More than React>异步编程真的好吗?彩民之家高手论