New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

百度母婴技术团队—基于Reactjs实现webapp #1

Open
my-fe opened this Issue Oct 22, 2015 · 87 comments

Comments

Projects
None yet
@ghost
Collaborator

ghost commented Oct 22, 2015

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

产品简介

线上应用:mami.baidu.com

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

image

技术选型

image

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应用中的整个数据流。

image

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已在百度多个产品线落地使用,大家有兴趣的话,可以点击查看,下面这两个图我们整个项目的目录结构和分层架构:

image

image

React-router

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

image

编译部署

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

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

image

问题和踩坑

  • 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。

@fegg

This comment has been minimized.

Show comment
Hide comment
@fegg

fegg Oct 23, 2015

用es5也可以,不一定要es6

fegg commented Oct 23, 2015

用es5也可以,不一定要es6

@xuheng

This comment has been minimized.

Show comment
Hide comment
@xuheng

xuheng Oct 23, 2015

Contributor

@fegg 确实可以不用,但是用了会有2个主要的好处
1.不需要自己再实现代码模块化了,这个应该是最大的亮点
2.极其简化代码

ps:这也是顺应时代开发的趋势,前端开发人员已经能够适应开发时需要编译才能看效果的节奏,现在大部分国外前端开源软件都是基于es6编写,对于有需求阅读源码的同学,学习es6也是必需的。

Contributor

xuheng commented Oct 23, 2015

@fegg 确实可以不用,但是用了会有2个主要的好处
1.不需要自己再实现代码模块化了,这个应该是最大的亮点
2.极其简化代码

ps:这也是顺应时代开发的趋势,前端开发人员已经能够适应开发时需要编译才能看效果的节奏,现在大部分国外前端开源软件都是基于es6编写,对于有需求阅读源码的同学,学习es6也是必需的。

@okoala

This comment has been minimized.

Show comment
Hide comment
@okoala

okoala Oct 23, 2015

Redux还有个middleware层~(^__^)

okoala commented Oct 23, 2015

Redux还有个middleware层~(^__^)

@jovey-zheng

This comment has been minimized.

Show comment
Hide comment
@jovey-zheng

jovey-zheng Oct 23, 2015

ES6 的一些特性在 React 中简直不要太好。
学习学习!👍

jovey-zheng commented Oct 23, 2015

ES6 的一些特性在 React 中简直不要太好。
学习学习!👍

@demohi

This comment has been minimized.

Show comment
Hide comment
@demohi

demohi Oct 23, 2015

棒棒的 点个赞 👍

demohi commented Oct 23, 2015

棒棒的 点个赞 👍

@zkaip

This comment has been minimized.

Show comment
Hide comment
@zkaip

zkaip Oct 23, 2015

ES6 很棒的!

zkaip commented Oct 23, 2015

ES6 很棒的!

@mdingdong

This comment has been minimized.

Show comment
Hide comment
@mdingdong

mdingdong Oct 23, 2015

@okoala 确实在触发ACTION后可能会经过一些列中间件,并且中间件使redux功能更加完善和强大,这个项目中也用到了redux-thunk。 那个图只是画出了redux容易理解也是最基本的几个环节,而middleware只是在下边的特点中描述了一下。

mdingdong commented Oct 23, 2015

@okoala 确实在触发ACTION后可能会经过一些列中间件,并且中间件使redux功能更加完善和强大,这个项目中也用到了redux-thunk。 那个图只是画出了redux容易理解也是最基本的几个环节,而middleware只是在下边的特点中描述了一下。

@nieweidong

This comment has been minimized.

Show comment
Hide comment
@nieweidong

nieweidong commented Oct 23, 2015

棒棒哒~

@changfuguo

This comment has been minimized.

Show comment
Hide comment
@changfuguo

changfuguo Oct 23, 2015

赞,落地就是好下一步是优化

changfuguo commented Oct 23, 2015

赞,落地就是好下一步是优化

@dYb

This comment has been minimized.

Show comment
Hide comment
@dYb

dYb Oct 23, 2015

安卓点击事件是一个bug,倒是可以避免,react团队会在0.14.1中修复,目前在打包的时候,需要设置环境变量为生产模式

dYb commented Oct 23, 2015

安卓点击事件是一个bug,倒是可以避免,react团队会在0.14.1中修复,目前在打包的时候,需要设置环境变量为生产模式

@polunzh

This comment has been minimized.

Show comment
Hide comment
@polunzh

polunzh commented Oct 23, 2015

很棒

@cqqccqc

This comment has been minimized.

Show comment
Hide comment
@cqqccqc

cqqccqc Oct 23, 2015

能分享一下组件嵌套互相通信的经验么。现在正在用react,组件嵌套深的话,写起来比较痛苦。

cqqccqc commented Oct 23, 2015

能分享一下组件嵌套互相通信的经验么。现在正在用react,组件嵌套深的话,写起来比较痛苦。

@fegg

This comment has been minimized.

Show comment
Hide comment
@fegg

fegg Oct 23, 2015

@xuheng 我这边特殊,如果用ES6新人接入成本会比较高,而且他们之前已经用5写啦部分功能了,不过我也支持ES6,项目才开始,可以考虑用它。

fegg commented Oct 23, 2015

@xuheng 我这边特殊,如果用ES6新人接入成本会比较高,而且他们之前已经用5写啦部分功能了,不过我也支持ES6,项目才开始,可以考虑用它。

@fegg

This comment has been minimized.

Show comment
Hide comment
@fegg

fegg Oct 23, 2015

@cqqccqc 亲,你如果是纯react,可以看我的博客,http://www.60sky.com/2015/09/03/2015-07-19-react-component-communicate/ 你如果是用reflux redux flux可以看一下他们的事件模型和todomvc。其实比较简单。不过还是要尽量缩小组件层级。

fegg commented Oct 23, 2015

@cqqccqc 亲,你如果是纯react,可以看我的博客,http://www.60sky.com/2015/09/03/2015-07-19-react-component-communicate/ 你如果是用reflux redux flux可以看一下他们的事件模型和todomvc。其实比较简单。不过还是要尽量缩小组件层级。

@polunzh

This comment has been minimized.

Show comment
Hide comment
@polunzh

polunzh Oct 23, 2015

能不能推荐一本学习CSS的书?

polunzh commented Oct 23, 2015

能不能推荐一本学习CSS的书?

@kevyu

This comment has been minimized.

Show comment
Hide comment
@kevyu

kevyu Oct 24, 2015

请问选择webpack和gulp而不是百度自己的FIS是基于什么样的考虑呢?

kevyu commented Oct 24, 2015

请问选择webpack和gulp而不是百度自己的FIS是基于什么样的考虑呢?

@okoala

This comment has been minimized.

Show comment
Hide comment
@okoala

okoala Oct 24, 2015

@kevyu 我想应该是fis打包node_modules中的模块不方便吧。之前我是这么干的,webpack打包node_modules中的模块,最后fis再打包和管理最后项目中的模块。

okoala commented Oct 24, 2015

@kevyu 我想应该是fis打包node_modules中的模块不方便吧。之前我是这么干的,webpack打包node_modules中的模块,最后fis再打包和管理最后项目中的模块。

@xiaokekeT

This comment has been minimized.

Show comment
Hide comment
@xiaokekeT

xiaokekeT Oct 24, 2015

想请教下,你们服务端渲染,css是怎样处理的呢,就是传统的写法还是css-modules之类的

xiaokekeT commented Oct 24, 2015

想请教下,你们服务端渲染,css是怎样处理的呢,就是传统的写法还是css-modules之类的

@jroam

This comment has been minimized.

Show comment
Hide comment
@jroam

jroam Oct 24, 2015

请问下是不是与原生app相比,不能gps定位,开摄像头,等一些功能?

jroam commented Oct 24, 2015

请问下是不是与原生app相比,不能gps定位,开摄像头,等一些功能?

@hufeng

This comment has been minimized.

Show comment
Hide comment
@hufeng

hufeng Oct 24, 2015

路由可以异步加载需要的component模块

hufeng commented Oct 24, 2015

路由可以异步加载需要的component模块

@rockcoder23

This comment has been minimized.

Show comment
Hide comment
@rockcoder23

rockcoder23 Oct 24, 2015

请问Lark.js有对静态文件请求提供一个独立的服务么?还是跟正常的请求走一个服务?

rockcoder23 commented Oct 24, 2015

请问Lark.js有对静态文件请求提供一个独立的服务么?还是跟正常的请求走一个服务?

@sophister

This comment has been minimized.

Show comment
Hide comment
@sophister

sophister Oct 25, 2015

刚开始写React,对于state/props 很纠结,有些属性,组件本身也会修改,父组件也会传值,不太明白应该是放state还是props。

比如Dialog的是否显示属性isVisible,应该放在props还是Dialog本身的state中呢。
如果dialog自带关闭按钮,那点击关闭按钮后,是应该直接修改Dialog的state,还是应该调用父组件回调,通过父组件使用props传递给Dialog呢

sophister commented Oct 25, 2015

刚开始写React,对于state/props 很纠结,有些属性,组件本身也会修改,父组件也会传值,不太明白应该是放state还是props。

比如Dialog的是否显示属性isVisible,应该放在props还是Dialog本身的state中呢。
如果dialog自带关闭按钮,那点击关闭按钮后,是应该直接修改Dialog的state,还是应该调用父组件回调,通过父组件使用props传递给Dialog呢

@haibinyu

This comment has been minimized.

Show comment
Hide comment
@haibinyu

haibinyu Oct 25, 2015

@sophister 组件最好保持dumb的好,可以参考下redux的实现方式。

haibinyu commented Oct 25, 2015

@sophister 组件最好保持dumb的好,可以参考下redux的实现方式。

@carr123

This comment has been minimized.

Show comment
Hide comment
@carr123

carr123 Oct 25, 2015

请问你们的UI上各种控件用的是什么库?

carr123 commented Oct 25, 2015

请问你们的UI上各种控件用的是什么库?

@sophister

This comment has been minimized.

Show comment
Hide comment
@sophister

sophister Oct 26, 2015

@haibinyu 嗯,dump的,就是尽量用smart的父组件去修改store,然后触发UI树的重新render吧,UI树上是可能会有多个smart组件,多能dispatch action去修改store的吧,如果只能在顶层组件dispatch,估计要通过props传递好多callback了

sophister commented Oct 26, 2015

@haibinyu 嗯,dump的,就是尽量用smart的父组件去修改store,然后触发UI树的重新render吧,UI树上是可能会有多个smart组件,多能dispatch action去修改store的吧,如果只能在顶层组件dispatch,估计要通过props传递好多callback了

@sorrycc

This comment has been minimized.

Show comment
Hide comment
@sorrycc

sorrycc Oct 26, 2015

@sophister action 转 props 后,只传一个 actions 对象就可以了。

sorrycc commented Oct 26, 2015

@sophister action 转 props 后,只传一个 actions 对象就可以了。

@mdingdong

This comment has been minimized.

Show comment
Hide comment
@mdingdong

mdingdong Oct 26, 2015

@sophister 不必传很多callback,而是传子组件需要的action。
这个项目里是把页面级组件当做smart,直接从redux中获取state和对应的action。 子组件对应的state以及action都通过props传递。
单向数据流是react一个很优秀的设计,但可能出现层层下传层级过多,个人感觉,大的业务逻辑组件也可设计为smart的。

mdingdong commented Oct 26, 2015

@sophister 不必传很多callback,而是传子组件需要的action。
这个项目里是把页面级组件当做smart,直接从redux中获取state和对应的action。 子组件对应的state以及action都通过props传递。
单向数据流是react一个很优秀的设计,但可能出现层层下传层级过多,个人感觉,大的业务逻辑组件也可设计为smart的。

@viRingbells

This comment has been minimized.

Show comment
Hide comment
@viRingbells

viRingbells Oct 26, 2015

请问Lark.js有对静态文件请求提供一个独立的服务么?还是跟正常的请求走一个服务?

@rockcoder23

和正常请求走一个服务。Larkjs是基于Koa的,直接复用了koa-static中间件来提供静态文件的服务的。

viRingbells commented Oct 26, 2015

请问Lark.js有对静态文件请求提供一个独立的服务么?还是跟正常的请求走一个服务?

@rockcoder23

和正常请求走一个服务。Larkjs是基于Koa的,直接复用了koa-static中间件来提供静态文件的服务的。

@sophister

This comment has been minimized.

Show comment
Hide comment
@sophister

sophister Oct 26, 2015

@mdingdong 把 action 传递给子组件,是意味着组件树中,不同层级的组件都可能会dispatch action来触发store的改变吧

sophister commented Oct 26, 2015

@mdingdong 把 action 传递给子组件,是意味着组件树中,不同层级的组件都可能会dispatch action来触发store的改变吧

@kevyu

This comment has been minimized.

Show comment
Hide comment
@kevyu

kevyu Oct 26, 2015

@mdingdong 说的action应该就是子组件需要的callback吧,但是每个子组件的功能单一,所以不用很多callback,dumb的子组件里面没法dispatch action.

kevyu commented Oct 26, 2015

@mdingdong 说的action应该就是子组件需要的callback吧,但是每个子组件的功能单一,所以不用很多callback,dumb的子组件里面没法dispatch action.

@transtone

This comment has been minimized.

Show comment
Hide comment
@transtone

transtone Oct 27, 2015

@polun 《CSS设计指南》

transtone commented Oct 27, 2015

@polun 《CSS设计指南》

@luqin luqin referenced this issue Oct 27, 2015

Open

React 收藏 #19

@ziluo

This comment has been minimized.

Show comment
Hide comment
@ziluo

ziluo Oct 28, 2015

@dYb @my-fe 移动端的click有300ms延迟的问题,这个怎么解决的?

ziluo commented Oct 28, 2015

@dYb @my-fe 移动端的click有300ms延迟的问题,这个怎么解决的?

@zkaip

This comment has been minimized.

Show comment
Hide comment
@zkaip

zkaip commented Oct 28, 2015

@ziluo https://www.npmjs.com/package/fastclick 这个可以消除点击延迟

@mdanielfe

This comment has been minimized.

Show comment
Hide comment
@mdanielfe

mdanielfe Oct 28, 2015

@ziluo 用了fastclick

mdanielfe commented Oct 28, 2015

@ziluo 用了fastclick

@justnull

This comment has been minimized.

Show comment
Hide comment
@justnull

justnull Oct 28, 2015

用了nodejs,就不需要用java了?可不可以和java集成?

justnull commented Oct 28, 2015

用了nodejs,就不需要用java了?可不可以和java集成?

@zkaip

This comment has been minimized.

Show comment
Hide comment
@zkaip

zkaip Oct 28, 2015

@justnull nodejs强在高io, 高强度cpu运算还是要java为好, 不过如果页面逻辑不复杂,可以用nodejs全包

zkaip commented Oct 28, 2015

@justnull nodejs强在高io, 高强度cpu运算还是要java为好, 不过如果页面逻辑不复杂,可以用nodejs全包

@fouber

This comment has been minimized.

Show comment
Hide comment
@fouber

fouber Oct 29, 2015

可能还有一个缺点,就是整个站点的资源要在首页全部加载,不能按需,看了一下mami的页面,主要的那个css gzip之后有12.4K,其中89%的css没有在首页中用到,这会影响无缓存用户的首屏时间的

fouber commented Oct 29, 2015

可能还有一个缺点,就是整个站点的资源要在首页全部加载,不能按需,看了一下mami的页面,主要的那个css gzip之后有12.4K,其中89%的css没有在首页中用到,这会影响无缓存用户的首屏时间的

@rockcoder23

This comment has been minimized.

Show comment
Hide comment
@rockcoder23

rockcoder23 Oct 29, 2015

@fouber 其中89%的css没有在首页中用到 请教下89是怎么计算出来的~

rockcoder23 commented Oct 29, 2015

@fouber 其中89%的css没有在首页中用到 请教下89是怎么计算出来的~

@mdingdong

This comment has been minimized.

Show comment
Hide comment
@mdingdong

mdingdong Nov 2, 2015

@muyi0327 服务端确实只能渲染成htmlString。 前端渲染时需要的数据是由服务端带过来的。

mdingdong commented Nov 2, 2015

@muyi0327 服务端确实只能渲染成htmlString。 前端渲染时需要的数据是由服务端带过来的。

@fouber

This comment has been minimized.

Show comment
Hide comment
@fouber

fouber Nov 2, 2015

@muyi0327

react的服务端渲染最终的产物是这样结构的:

+------------+
|            |
|            |
|    HTML    |
|            |
|            |
+------------+
|            |
|    DATA    |
|            |
+------------+
|            |
|     JS     |
|            |
+------------+

其中 HTML 就是服务端render的结果,DATA 是在服务端用于生成HTML时所用的数据(JSON输出),JS 是服务端用于生成HTML时所用的jsx代码,然后前端run起来后第一件事就是JS利用这个DATA生成一次 virtual-dom 然后跟服务端输出的HTML进行dom-diff,用于初始化状态,绑定事件等,这个过程叫 反射

fouber commented Nov 2, 2015

@muyi0327

react的服务端渲染最终的产物是这样结构的:

+------------+
|            |
|            |
|    HTML    |
|            |
|            |
+------------+
|            |
|    DATA    |
|            |
+------------+
|            |
|     JS     |
|            |
+------------+

其中 HTML 就是服务端render的结果,DATA 是在服务端用于生成HTML时所用的数据(JSON输出),JS 是服务端用于生成HTML时所用的jsx代码,然后前端run起来后第一件事就是JS利用这个DATA生成一次 virtual-dom 然后跟服务端输出的HTML进行dom-diff,用于初始化状态,绑定事件等,这个过程叫 反射

@tangseng

This comment has been minimized.

Show comment
Hide comment
@tangseng

tangseng Nov 3, 2015

用gulp了?百度不是有fis的么?

tangseng commented Nov 3, 2015

用gulp了?百度不是有fis的么?

@mhbseal

This comment has been minimized.

Show comment
Hide comment
@mhbseal

mhbseal Nov 5, 2015

至于component中require css font image等,同构时nodejs无法解析,可以用https://github.com/halt-hammerzeit/webpack-isomorphic-tools这个pkg ,另外请教下,同构时HTTP request library,用的哪个呢?怎么做的哇。

mhbseal commented Nov 5, 2015

至于component中require css font image等,同构时nodejs无法解析,可以用https://github.com/halt-hammerzeit/webpack-isomorphic-tools这个pkg ,另外请教下,同构时HTTP request library,用的哪个呢?怎么做的哇。

@xiaokekeT

This comment has been minimized.

Show comment
Hide comment
@xiaokekeT

xiaokekeT Nov 5, 2015

@mhbseal 我也是刚用这个库把css的问题解决掉,可以有很多组件库都不支持服务端,各种报错

xiaokekeT commented Nov 5, 2015

@mhbseal 我也是刚用这个库把css的问题解决掉,可以有很多组件库都不支持服务端,各种报错

@rockcoder23

This comment has been minimized.

Show comment
Hide comment
@rockcoder23

rockcoder23 Nov 12, 2015

请问下当初这个项目的组件的css部分是怎么组织的呢?inline style形式还是 css modules ?

rockcoder23 commented Nov 12, 2015

请问下当初这个项目的组件的css部分是怎么组织的呢?inline style形式还是 css modules ?

@p2227

This comment has been minimized.

Show comment
Hide comment
@p2227

p2227 Nov 12, 2015

我想问一下你们是不是一开始就定义好所有的reducer,然后一个action就触发所有的reducer?这个能分模块吗?

p2227 commented Nov 12, 2015

我想问一下你们是不是一开始就定义好所有的reducer,然后一个action就触发所有的reducer?这个能分模块吗?

@rockcoder23

This comment has been minimized.

Show comment
Hide comment
@rockcoder23

rockcoder23 Nov 13, 2015

@p2227 这个应该是一个action对应某个reducer的一个case的,一个action会触发所有的reducer,但是只会命中某一个reducer的某个case。

rockcoder23 commented Nov 13, 2015

@p2227 这个应该是一个action对应某个reducer的一个case的,一个action会触发所有的reducer,但是只会命中某一个reducer的某个case。

@p2227

This comment has been minimized.

Show comment
Hide comment
@p2227

p2227 Nov 13, 2015

@rockcoder23 嗯,这样reducer的命名就必须全局唯一了吧,这样不利于项目模块扩展啊

p2227 commented Nov 13, 2015

@rockcoder23 嗯,这样reducer的命名就必须全局唯一了吧,这样不利于项目模块扩展啊

@yifei337

This comment has been minimized.

Show comment
Hide comment
@yifei337

yifei337 Nov 16, 2015

刚开始学reactjs 能不能提供一个demo

yifei337 commented Nov 16, 2015

刚开始学reactjs 能不能提供一个demo

@RyanSuen

This comment has been minimized.

Show comment
Hide comment
@RyanSuen

RyanSuen Nov 25, 2015

@fouber 瓶神看问题之深入

RyanSuen commented Nov 25, 2015

@fouber 瓶神看问题之深入

@xuyingchuan

This comment has been minimized.

Show comment
Hide comment
@xuyingchuan

xuyingchuan commented Nov 28, 2015

马之

@chemdemo

This comment has been minimized.

Show comment
Hide comment
@chemdemo

chemdemo Nov 30, 2015

对于普通的webapp开发,webpack(资源组织、打包)+react(组件化)简直完美,至于ES6只是语法糖。

可是对于前后端同构的应用,这种组合明显的鸡肋了,因为webpack是静态打包,很难满足服务器端动态加载的打包需求,而且目前也没有看到比较通用的解决方案。

chemdemo commented Nov 30, 2015

对于普通的webapp开发,webpack(资源组织、打包)+react(组件化)简直完美,至于ES6只是语法糖。

可是对于前后端同构的应用,这种组合明显的鸡肋了,因为webpack是静态打包,很难满足服务器端动态加载的打包需求,而且目前也没有看到比较通用的解决方案。

@yifei337

This comment has been minimized.

Show comment
Hide comment
@yifei337

yifei337 Nov 30, 2015

前端使用,reactjs+redux+reac-router 使用 webpack 打包,后端使用java开发,开发前端使用什么工具比较好,就是前后端都在一个项目包下面,现在是每次都手动执行webpack 打包

yifei337 commented Nov 30, 2015

前端使用,reactjs+redux+reac-router 使用 webpack 打包,后端使用java开发,开发前端使用什么工具比较好,就是前后端都在一个项目包下面,现在是每次都手动执行webpack 打包

@idamag

This comment has been minimized.

Show comment
Hide comment
@idamag

idamag Nov 30, 2015

react服务端客户端同构最恶心的一点是,数据实际得输出两份,一份是服务端渲染出来的html片段,一份是js变量用于客户端react渲染

idamag commented Nov 30, 2015

react服务端客户端同构最恶心的一点是,数据实际得输出两份,一份是服务端渲染出来的html片段,一份是js变量用于客户端react渲染

@yifei337

This comment has been minimized.

Show comment
Hide comment
@yifei337

yifei337 Dec 1, 2015

webpack 打包后 jsx 组件里中文乱码了,你们有没有遇见过

yifei337 commented Dec 1, 2015

webpack 打包后 jsx 组件里中文乱码了,你们有没有遇见过

@muyi0327

This comment has been minimized.

Show comment
Hide comment
@muyi0327

muyi0327 Dec 1, 2015

有个问题比较烦恼, 就是如果采用了redux,需要不少第三方的组件。这样的话,造成的结果就是,为了实现状态和action的管理。代码量成几倍的增加。不知道这方面有什么好的管理策略?

muyi0327 commented Dec 1, 2015

有个问题比较烦恼, 就是如果采用了redux,需要不少第三方的组件。这样的话,造成的结果就是,为了实现状态和action的管理。代码量成几倍的增加。不知道这方面有什么好的管理策略?

@xuheng

This comment has been minimized.

Show comment
Hide comment
@xuheng

xuheng Dec 1, 2015

Contributor

@idamag 这也是为了提升体验,方案没办法改变,但是我们可以优化架构让他没那么恶心

Contributor

xuheng commented Dec 1, 2015

@idamag 这也是为了提升体验,方案没办法改变,但是我们可以优化架构让他没那么恶心

@yifei337

This comment has been minimized.

Show comment
Hide comment
@yifei337

yifei337 Dec 3, 2015

http://localhost:63342/demo/index.html#/home?_k=xw07vr 路由之后路径变成这样了,我想变成http://localhost:63342/demo/home 这样的路径 路由需要怎么配置

yifei337 commented Dec 3, 2015

http://localhost:63342/demo/index.html#/home?_k=xw07vr 路由之后路径变成这样了,我想变成http://localhost:63342/demo/home 这样的路径 路由需要怎么配置

@mhbseal

This comment has been minimized.

Show comment
Hide comment
@mhbseal

mhbseal Dec 3, 2015

这个不错,不过源码没有放出,最近把自己的博客同构了一把,源码地址,求围观,https://github.com/mhbseal/blog ,打包出来的js大小出奇的相似哇。。。。

mhbseal commented Dec 3, 2015

这个不错,不过源码没有放出,最近把自己的博客同构了一把,源码地址,求围观,https://github.com/mhbseal/blog ,打包出来的js大小出奇的相似哇。。。。

@tom31203120

This comment has been minimized.

Show comment
Hide comment
@tom31203120

tom31203120 Dec 7, 2015

@yifei337 我也遇到打包中文乱码啦,请问你是怎么解决的?

tom31203120 commented Dec 7, 2015

@yifei337 我也遇到打包中文乱码啦,请问你是怎么解决的?

@yifei337

This comment has been minimized.

Show comment
Hide comment
@yifei337

yifei337 Dec 7, 2015

@tom31203120 所有文件都是UTF-8 格式就好了,我之前是因为自己手动使用txt 写的 文件编码格式不对

yifei337 commented Dec 7, 2015

@tom31203120 所有文件都是UTF-8 格式就好了,我之前是因为自己手动使用txt 写的 文件编码格式不对

@tom31203120

This comment has been minimized.

Show comment
Hide comment
@tom31203120

tom31203120 Dec 9, 2015

@yifei337 多谢多谢,解决啦;
我做移动端web 的项目,有没有比较成熟的样式框架和reactjs结合比较好的推荐下,考察了刚刚出的WeUI准吗针对微信的,看着还不错,就是太新啦~

tom31203120 commented Dec 9, 2015

@yifei337 多谢多谢,解决啦;
我做移动端web 的项目,有没有比较成熟的样式框架和reactjs结合比较好的推荐下,考察了刚刚出的WeUI准吗针对微信的,看着还不错,就是太新啦~

@wtz

This comment has been minimized.

Show comment
Hide comment
@wtz

wtz Dec 30, 2015

你这个项目有用到异步Promise库吗

wtz commented Dec 30, 2015

你这个项目有用到异步Promise库吗

@tom31203120

This comment has been minimized.

Show comment
Hide comment
@tom31203120

tom31203120 Jan 9, 2016

请问 大伙使用redux 和 react-route 时是怎么配合的 ?

tom31203120 commented Jan 9, 2016

请问 大伙使用redux 和 react-route 时是怎么配合的 ?

@zlyi

This comment has been minimized.

Show comment
Hide comment
@zlyi

zlyi Jan 13, 2016

@yifei337 这个是react-route根据Html5 history api实现的,写路由时加上这个属性:history={browserHistory} 。具体可以参考这篇文章 http://stylechen.com/react-router.html

zlyi commented Jan 13, 2016

@yifei337 这个是react-route根据Html5 history api实现的,写路由时加上这个属性:history={browserHistory} 。具体可以参考这篇文章 http://stylechen.com/react-router.html

@jcs12311

This comment has been minimized.

Show comment
Hide comment
@jcs12311

jcs12311 Feb 6, 2016

@my-fe 能否问一下你们是怎么记录返回时的滚动条位置的? 我看了你们首页的瀑布流,加载到第三页,然后进去内页,返回的还是第三页,然后也没有在请求第一到第三页的数据了,这是通过什么实现的?

jcs12311 commented Feb 6, 2016

@my-fe 能否问一下你们是怎么记录返回时的滚动条位置的? 我看了你们首页的瀑布流,加载到第三页,然后进去内页,返回的还是第三页,然后也没有在请求第一到第三页的数据了,这是通过什么实现的?

@fengzhixi

This comment has been minimized.

Show comment
Hide comment
@fengzhixi

fengzhixi Feb 6, 2016

@my-fe 同问滚动条位置是如何记录的?我用的不是服务端渲染,也试过scroll-behavior,但是貌似异步加载的时候,后退时位置就无法记录了,请建议,谢谢

fengzhixi commented Feb 6, 2016

@my-fe 同问滚动条位置是如何记录的?我用的不是服务端渲染,也试过scroll-behavior,但是貌似异步加载的时候,后退时位置就无法记录了,请建议,谢谢

@jcs12311

This comment has been minimized.

Show comment
Hide comment
@jcs12311

jcs12311 Feb 25, 2016

@fegg @xuheng 能否问一下你们是怎么解决react app滚动条位置的问题, 之前试过scroll-behavior这个组件,但是发现并不支持异步的情况, 还有百度母婴的首页列表,列表加载了几页然后点击进一个页面,然后返回列表页,还是第几页的页面,而不是第一页,这个是通过什么实现的

jcs12311 commented Feb 25, 2016

@fegg @xuheng 能否问一下你们是怎么解决react app滚动条位置的问题, 之前试过scroll-behavior这个组件,但是发现并不支持异步的情况, 还有百度母婴的首页列表,列表加载了几页然后点击进一个页面,然后返回列表页,还是第几页的页面,而不是第一页,这个是通过什么实现的

@sundyxfan

This comment has been minimized.

Show comment
Hide comment
@sundyxfan

sundyxfan Mar 2, 2016

请教一个问题,使用react+redux+webpack这套东西,实现前后端开发,大家在搞前端开发环境这块是如何搞的,求分享?比如本地server, 请求后端restfull api接口,本地调试等等

sundyxfan commented Mar 2, 2016

请教一个问题,使用react+redux+webpack这套东西,实现前后端开发,大家在搞前端开发环境这块是如何搞的,求分享?比如本地server, 请求后端restfull api接口,本地调试等等

@changfuguo

This comment has been minimized.

Show comment
Hide comment
@changfuguo

changfuguo Jun 16, 2016

@xiaokekeT css的打包,我实践了下也没找到好的办法,处理的方式是在代码里引用的css的地方去判断环境变量是浏览器还是服务端里,这里有一个办法是


 plugins:[
            new webpack.IgnorePlugin(/\.(css|scss)$/),
            new webpack.NormalModuleReplacementPlugin(/\.(css|scss)$/, 'node-noop')
        ],

但亲测无效呀,泪奔


if(process.env.__BROWSER){
    var styles = require('./xxx.scss');
}

其中process.env的变量是在webpack打包的时候打包进去的


 new webpack.DefinePlugin({
                "process.env": {
                    'NODE_ENV' : JSON.stringify('development'),
                    '__BROWSER__': JSON.stringify(true)
                }
            })

changfuguo commented Jun 16, 2016

@xiaokekeT css的打包,我实践了下也没找到好的办法,处理的方式是在代码里引用的css的地方去判断环境变量是浏览器还是服务端里,这里有一个办法是


 plugins:[
            new webpack.IgnorePlugin(/\.(css|scss)$/),
            new webpack.NormalModuleReplacementPlugin(/\.(css|scss)$/, 'node-noop')
        ],

但亲测无效呀,泪奔


if(process.env.__BROWSER){
    var styles = require('./xxx.scss');
}

其中process.env的变量是在webpack打包的时候打包进去的


 new webpack.DefinePlugin({
                "process.env": {
                    'NODE_ENV' : JSON.stringify('development'),
                    '__BROWSER__': JSON.stringify(true)
                }
            })

@redsx

This comment has been minimized.

Show comment
Hide comment
@redsx

redsx Jun 19, 2016

能问一下首屏加载的问题吗?我的代码经过webpac+gzip之后还有300k+,以后可能遇到更大的文件那该怎么办呢???小白很疑惑,求大大解答一下好咩

redsx commented Jun 19, 2016

能问一下首屏加载的问题吗?我的代码经过webpac+gzip之后还有300k+,以后可能遇到更大的文件那该怎么办呢???小白很疑惑,求大大解答一下好咩

@xiaokekeT

This comment has been minimized.

Show comment
Hide comment
@xiaokekeT

xiaokekeT Jun 19, 2016

@changfuguo 现在服务端我用css-modules-require-hook来加载css,具体可以参看下我的https://github.com/sleys/sley

xiaokekeT commented Jun 19, 2016

@changfuguo 现在服务端我用css-modules-require-hook来加载css,具体可以参看下我的https://github.com/sleys/sley

@moocss moocss referenced this issue Jun 23, 2016

Open

全栈 #70

@HAAAAADION

This comment has been minimized.

Show comment
Hide comment
@HAAAAADION

HAAAAADION Oct 24, 2016

@changfuguo css-modules-require-hook只能解决加载服务端加载css和同步css-modules类名的问题,具体的css还是需要在前端渲染出来,所以在同构服务端输出的时候因为css的缺失会出现"页面丢失样式"的效果,然后等js渲染出css内容才会正常,这种情况对于同构非常致命

HAAAAADION commented Oct 24, 2016

@changfuguo css-modules-require-hook只能解决加载服务端加载css和同步css-modules类名的问题,具体的css还是需要在前端渲染出来,所以在同构服务端输出的时候因为css的缺失会出现"页面丢失样式"的效果,然后等js渲染出css内容才会正常,这种情况对于同构非常致命

@xiaokekeT

This comment has been minimized.

Show comment
Hide comment
@xiaokekeT

xiaokekeT Oct 24, 2016

@HAAAAADION
在打包的时候,请使用extract-text-webpack-plugin将css提取成.css文件,和传统页面无异,并不会出现你说的那种情况

xiaokekeT commented Oct 24, 2016

@HAAAAADION
在打包的时候,请使用extract-text-webpack-plugin将css提取成.css文件,和传统页面无异,并不会出现你说的那种情况

@HAAAAADION

This comment has been minimized.

Show comment
Hide comment
@HAAAAADION

HAAAAADION Oct 24, 2016

@xiaokekeT 请问extract-text-webpack-plugin这个要如何做按需加载呢?
比如我有a.css b.css,请问要如何顺利打包出两个css文件?
如果要这样分离打包的话就需要改config的entry,这样做的话不会对原来生成javascript的过程有影响(除非名称不相同,但是这样感觉不太好?)
否则就会全部打包到一个css文件里.
望解惑

HAAAAADION commented Oct 24, 2016

@xiaokekeT 请问extract-text-webpack-plugin这个要如何做按需加载呢?
比如我有a.css b.css,请问要如何顺利打包出两个css文件?
如果要这样分离打包的话就需要改config的entry,这样做的话不会对原来生成javascript的过程有影响(除非名称不相同,但是这样感觉不太好?)
否则就会全部打包到一个css文件里.
望解惑

@xiaokekeT

This comment has been minimized.

Show comment
Hide comment
@xiaokekeT

xiaokekeT Oct 24, 2016

@HAAAAADION
extract-text-webpack-plugin
非常简单,试一下就懂了
服务端按需加载css很麻烦,我没有尝试过

xiaokekeT commented Oct 24, 2016

@HAAAAADION
extract-text-webpack-plugin
非常简单,试一下就懂了
服务端按需加载css很麻烦,我没有尝试过

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment