基于Reactjs实现webapp(加精)
git原文链接:https://github.com/my-fe/wiki/issues/1
由于最近的reactjs实在太火,而且距离第一版已经快2年的时间了,已经相对稳定和成熟了,基于这两个前提下,团队对reactjs及其他开源技术进行了相关调研,发现落地是可行的,我们有4名前端同学,从调研到上线,大概花了1个半月的时间,期间有踩一些坑,后面会说,整个开发总体来说是非常顺利的,下面进入正题~~
产品简介
线上应用:mami.baidu.com
我们做的是一个移动端的单页webapp,可以在这个h5页面完成商品选择->支付->订单跟踪整个闭环
技术选型
Reactjs
React.js是Facebook在2013年开源的一个JS框架,在目前的前端开发的主流模式MVC和MVVM中,React主要专注于View层的开发,即视图部分。
使用React开发的好处有以下几点:
- React倡导组件化的开发模式,这样的开发模式和客户端开发(iOS和Android)的模式很类似。这样就可以实现组件最大限度的复用;
- React只负责视图部分的开发,很容易和其他已有的框架进行融合,例如Backbone和Angular,可以比较轻松的融入之前的项目中;
- React通过virtual-dom和dom-diff的技术,避免了频繁操作DOM带来的性能损耗,开发的应用很流畅;
- React通过virtual-dom实现了同构JS,这样一来前后端可以使用一套模板,节省了传统开发模式中要在前后端两套模板的时间;
- React自从开源以来,获得了前端社区的广泛关注和好评,先前比较主流的库都针对React实现了相应的版本,在开发过程中有非常多的组件可以使用,避免了重复造轮子的困扰;
基于以上几个优点,在本次项目中我们选择了React.js作为前端开发的框架。
项目中实际是使用下来reactjs有2点留下了深刻的印象:
规范:遵守W3C规范,基于web component的组件化开发模式,可读性和可维护性都和传统开发不可同日而语(这个很重要,因为市面上的很多框架都是自行一套的接口风格,群雄割据的时代已经快要结束,现在的框架如果不遵守w3c规范,自己意淫一套,开发者初次上手体验会很差)
性能:操作虚拟Dom的速度React具有绝对的优势相对于传统web开发
Redux
redux是一个优秀的前端框架,用于管理web应用中的整个数据流。
react只是MVC中的V层,在一个大型webapp中,以一种合理的形式来组织、维护不同来源的数据非常重要,我们希望在整个应用正确动态更新演变的同时,能够有清晰的代码结构、方便不同开发者分工协作、较低的维护成本。
redux是flux多种实现的一个升级版,具有以下几个特征:
整个应用的状态(state)存储为一个对象. 单一数据源使得client端可以直接使用server端构建的单一对象,方便对当前状态的获取,同时使得调试简单。
极强的数据流约束。redux数据流的变化只能由action触发,由reducer产生新的state,并且state只读,代码结构一致、清晰,并且不同的层不会有重复代码。
完善的state拆分整合机制。 将state分为不同数据块,每一块分别维护自己的action以及reducer,这使得逻辑清晰,并且分工协作便捷。
强大的开发调试工具。webpack的hotload以及redux-devtools,使得调试方便,开发效率大大提高。
服务端渲染。与客户端相比,服务端生成一个state对象并返回给页面,就可在server和client实现同构的渲染。
无复杂对象,action与reducer分别为纯JavaScript对象和函数,观念清晰,无复杂对象的学习、维护成本。
功能完善,文档清晰。 强大的中间件机制以及丰富的开源中间件库,使得redux功能更加完善,如何发异步请求、异步数据流如何处理都有规定以及清晰的文档。
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 dev
和npm
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。
基于Reactjs实现webapp(加精)的更多相关文章
- 一看就懂的ReactJs入门教程(精华版)
一看就懂的ReactJs入门教程(精华版) 现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和 ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- Flask实战第64天:帖子加精和取消加精功能完成
帖子加精和取消加精是在cms后台来设置的 后台逻辑 首页个帖子加精设计个模型表,编辑apps.models.py class HighlightPostModel(db.Model): __table ...
- 基于jQuery的图片加载loading效果插件
基于jQuery的图片加载loading效果插件 图片loading的效果是网页中比较常见的,尤其是对大图片,loading效果让用户能够明白图片加载的过程. 实现思路也是比较简单的: $.fn.Lo ...
- 一百四十五:CMS系统之帖子加精和取消加精
模型 class HighlightPostModel(db.Model): """ 帖子加精信息 """ __tablename__ = ...
- 基于 ReactJS 开发简单的可视化业务编辑器 01
线上可以看的,跟github上的代码不一样的:https://whensea.com/wfd/ 程序中经常有一些业务需要定制化,我定制化这些业务的方式主要是基于工作流.配置等方式.由于个人水平限制并不 ...
- 评论 ”[实例] 设计基于JQM的WebApp“
点这里 DEMO 先上最近做的一个WebApp小应用,http://iwxy.me/m.html,大家可以先去玩玩儿,在移动终端访问查看最佳效果 实现的功能是微博上偶然看到的一个小测试,动物认识真实的 ...
- 《你必须知道的.NET》读书实践:一个基于OO的万能加载器的实现
此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.关于万能加载器 简而言之,就是孝顺的小王想开发一个万能程序,可以一键式打开常见的计算机资料,例如: ...
随机推荐
- GDAL创建图像提示Driver xxx does not support XXX creation option的原因
经常在群里有人问,创建图像的时候为什么老是提示下面的信息. CPLError: Driver GTiff does not support DCAP_CREATE creation option Wa ...
- Unity UGUI图文混排(六) -- 超链接
图文混排更新到超链接这儿,好像也差不多了,不过就在最后一点,博主也表现得相当不专业,直接整合了山中双木林同学提供的超链接的解决方案,博主甚至没来得及细看就直接复制了,但感觉还是挺好用的. 博主已经将超 ...
- antlr 4新特性总结及与antlr v3的不同
antlr 4新特性总结及与antlr v3的不同 学习曲线低.antlr v4相对于v3,v4更注重于用更接近于自然语言的方式去解析语言.比如运算符优先级,排在最前面的规则优先级最高: 层次更清晰. ...
- qsort函数应用大全
七种qsort排序方法 <本文中排序都是采用的从小到大排序> 一.对int类型数组排序 int num[100]; Sample: int cmp ( const void *a , c ...
- 编译GDAL支持OpenCL使用GPU加速
前言 GDAL库中提供的gdalwarp支持各种高性能的图像重采样算法,图像重采样算法广泛应用于图像校正,重投影,裁切,镶嵌等算法中,而且对于这些算法来说,计算坐标变换的运算量是相当少的,绝大部分运算 ...
- UE4读取scv文件 -- 数据驱动游戏性元素
官方文档链接:http://docs.unrealengine.com/latest/CHN/Gameplay/DataDriven/index.html 略懒,稍微麻烦重复的工作,总希望能找人帮忙一 ...
- 13常用sql语句
创建语句 CREATE table if not exists b(id INTEGER PRIMARY KEY AUTOINCREMENT,waijian int ,FOREIGN KEY (wai ...
- Android简易实战教程--第八话《短信备份~一》
各种手机助手里面都包含了短信备份这一项.短信的本分主要包含四项:内容body.事件date.方式type.号码address. 短信备份~一.使用一种很笨的方式来保存短信到xml文件中,而且保存在外部 ...
- Java进阶(三十八)快速排序
Java进阶(三十八)快速排序 前言 有没有既不浪费空间又可以快一点的排序算法呢?那就是"快速排序"啦!光听这个名字是不是就觉得很高端呢. 假设我们现在对"6 1 2 7 ...
- UNIX环境高级编程——线程属性
pthread_attr_t 的缺省属性值 属性 值 结果 scope PTHREAD_SCOPE_PROCESS 新线程与进程中的其他线程发生竞争. detachstate PTHREAD_CREA ...