基于React.js实现webapp的技术实践

由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花了1个半月的时间,期间有踩一些坑,后面会说,整个开发总体来说是非常顺利的,下面进入正题~~

产品简介

线上应用:mami.baidu.com

我们做的是一个移动端的单页webapp,可以在这个h5页面完成商品选择->支付->订单跟踪整个闭环

技术选型

Reactjs

React.js是Facebook在2013年开源的一个JS框架,在目前的前端开发的主流模式MVC和MVVM中,React主要专注于View层的开发,即视图部分。

使用React开发的好处有以下几点:

  1. React倡导组件化的开发模式,这样的开发模式和客户端开发(iOS和Android)的模式很类似。这样就可以实现组件最大限度的复用;
  2. React只负责视图部分的开发,很容易和其他已有的框架进行融合,例如Backbone和Angular,可以比较轻松的融入之前的项目中;
  3. React通过virtual-dom和dom-diff的技术,避免了频繁操作DOM带来的性能损耗,开发的应用很流畅;
  4. React通过virtual-dom实现了同构JS,这样一来前后端可以使用一套模板,节省了传统开发模式中要在前后端两套模板的时间;
  5. React自从开源以来,获得了前端社区的广泛关注和好评,先前比较主流的库都针对React实现了相应的版本,在开发过程中有非常多的组件可以使用,避免了重复造轮子的困扰;

基于以上几个优点,在本次项目中我们选择了React.js作为前端开发的框架。

项目中实际是使用下来reactjs有2点留下了深刻的印象:

  • 规范:遵守W3C规范,基于web component的组件化开发模式,可读性和可维护性都和传统开发不可同日而语(这个很重要,因为市面上的很多框架都是自行一套的接口风格,群雄割据的时代已经快要结束,现在的框架如果不遵守w3c规范,自己意淫一套,开发者初次上手体验会很差)
  • 性能:操作虚拟Dom的速度React具有绝对的优势相对于传统web开发

Redux

redux是一个优秀的前端框架,用于管理web应用中的整个数据流。

react只是MVC中的V层,在一个大型webapp中,以一种合理的形式来组织、维护不同来源的数据非常重要,我们希望在整个应用正确动态更新演变的同时,能够有清晰的代码结构、方便不同开发者分工协作、较低的维护成本。

redux是flux多种实现的一个升级版,具有以下几个特征:

  1. 整个应用的状态(state)存储为一个对象. 单一数据源使得client端可以直接使用server端构建的单一对象,方便对当前状态的获取,同时使得调试简单。
  2. 极强的数据流约束。redux数据流的变化只能由action触发,由reducer产生新的state,并且state只读,代码结构一致、清晰,并且不同的层不会有重复代码。
  3. 完善的state拆分整合机制。 将state分为不同数据块,每一块分别维护自己的action以及reducer,这使得逻辑清晰,并且分工协作便捷。
  4. 强大的开发调试工具。webpack的hotload以及redux-devtools,使得调试方便,开发效率大大提高。
  5. 服务端渲染。与客户端相比,服务端生成一个state对象并返回给页面,就可在server和client实现同构的渲染。
  6. 无复杂对象,action与reducer分别为纯JavaScript对象和函数,观念清晰,无复杂对象的学习、维护成本。
  7. 功能完善,文档清晰。 强大的中间件机制以及丰富的开源中间件库,使得redux功能更加完善,如何发异步请求、异步数据流如何处理都有规定以及清晰的文档。
  8. react-redux使得redux与react结合更顺畅。

以上几个特征在母婴项目中也得到了很好的体现,redux是做单页web应用很好的选择。

nodejs

我们基于团队内的一个nodejs的mvc框架Lark.js,实现前后端分离,这个框架已经开源,

Lark.js 是一个面向大并发大流量互联网服务的工业级 Node.js 框架[ 1 ]。它是从一个 10亿级以上 pv 的线上node.js服务抽象出来的一个通用框架,这里需要注意的是,lark.js 并不是为快速开发设计的框架。lark.js 在设计上采用了路由,分层架构等拆分很细的设计,并且没有像 django 或 ror 一样自己实现一整套完整系统。这些不是lark.js 的重点关注目标。lark.js 的目标是支撑大流量大并发的业务,性能、多人开发模式、架构和可维护性是关注重点。

larkjs作为一个可支撑大流量并发业务的nodejs框架,在性能、多人开发模式、架构以及可维护性方面值得推荐。目前larkjs已在百度多个产品线落地使用,大家有兴趣的话,可以点击查看,下面这两个图我们整个项目的目录结构和分层架构:

React-router

react-router作为webapp的路由模块,提供了丰富的功能,调用非常简单,react-router对pushstate支持很好,视图切换可以直接p-ajax

编译部署

基于gulp和webpack,实现了一套编译工具,主要有两个命令,npm run devnpm run deploy

  • dev:监听所有文件变化,基于babel将es6编译成es5,基于webpack区分出lib.js(lib.js是底层代码,这个文件几乎是不变的)和app.js(这个是业务代码每次上线都会根据需求变化),编译less,并重启nodejs服务
  • deploy:主要是合并压缩js、css,并将这些静态资源文件md5打包,方便浏览器缓存

问题和踩坑

  • state需要在做项目之前设计好,保证一份业务数据在state tree中出现一次
  • smart组件太少导致state需要逐级下传。
  • onClick事件在大部分安卓手机上不可点

总结

百度妈咪特卖项目在技术选型上选取了前端领域最热门的框架组合,项目成功落地后,对使用这一技术实现的优缺点总结如下: 优点: 1. 通过服务端以及前端的技术选型,实现了前端后同构。 同一套react组件分别在前后端render,避免了白页loading态的出现。 2. 基于reactjs实现,除组件化、虚拟DOM在复用以及性能上带来的一般好处外,reactjs思想使得开发者之间更好的分工与合作,在配合上非常顺畅。 3. react+redux,规范的接口以及极强的约束,使得整个代码结构清晰,不同开发者的代码高度一致。 4. 技术生态。越来越多的开发调试工具以及JavaScript框架正在依附着react生长,这一技术选型对以后的产品升级以及客户端的开发上线打下了良好的基础。 5.如果你想基于react-native开发native项目,也需要学习reactjs

缺点: 1.学习成本略高。如果想基于reactjs开发项目,还得学习redux、react-router、es6等一系列比较前沿的技术。 2. 体积略大。这套技术实现,框架库代码压缩后大于200K,gzip后实际传输大小为60K+,更适合大型的webapp。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏祝威廉

如何按程序员思维写分析师脚本

今天无意在在某群里,看到一个很复杂的SQL脚本,join很多,子查询很多,union很多,case when也很多。然后就让我们负责分析师脚本管理的同事给我看了...

1414
来自专栏知晓程序

小程序运维中心上线!小程序有 Bug,微信帮你找出来

但微信官方的消息一直都短小精炼,想详细了解这些新能力,知晓程序(微信号 zxcx0101)就掰开给你细细讲。

2544
来自专栏EAWorld

生态型App的架构实践分享

其实文章的题目纠结了很久,最后还是采用了“生态型App”这个词,这个词可能不是一个约定俗成的词,但却是这篇文章的主线,我将会从以下面三个维度展开,期望能够给正在...

3625
来自专栏沈唁志

PHP技能树—大神的进阶之路

1.2K4
来自专栏视频咖

从0到1搭建视频通话系统,我1天就搞定了

最近被老大分配了一个任务,他打开微信视频聊天,发起多人视频,指着功能界面说,“你看我们的产品也是有多人会议的场景,我们也加一个这样的功能,也不用很复杂,就仿照微...

4823
来自专栏ThoughtWorks

TW洞见 | 刘冉:QA应该更新的测试工具

作为一名QA,过去一年是我的软件质量知识体系和自动化测试知识体系收获最丰的一年,让我对于软件质量和自动化测试有了一个更高层次的认识。所以我写下了一些自己更新了的...

3957
来自专栏无原型不设计

移动网站应用设计:速度至关重要!

以下内容由Mockplus(摹客)团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。

1.9K10
来自专栏京东技术

塞伯坦 | 提高业务研发效率的工程化解决方案

http://cyb.hestudy.com/,面向前端模块化工程的构建工具。主要目的是帮助开发者统一前端开发模式和项目开发结构,提高功能扩展和降低维护成本,自...

1602
来自专栏前端达人

源码福利(文末有彩蛋) | vuejs 2 Material Design 后台模板源码大放送

各位亲们,关于vue3.0的方案已在拟定中了,想必大家都听说过了吧,2.0你学会了吗?没学会的还不抓紧时间补补,看完官方文档再加上本文分享的重量级源码,想必各位...

3871
来自专栏Linux Python 加油站

揭秘Linux工程师一路走来都需要哪些技能

大公司也是从小公司一步步走过来的,而大公司之所以与小公司不同,不在于基础的技术体系不同,而是当数据量达到一定程度后,引发的质变而已。而在思考质变带来的性能问题中...

1294

扫码关注云+社区

领取腾讯云代金券