FEDAY第二届前端开发者大会回顾

最新推荐文章于 2024-10-04 13:18:14 发布

weixin_34308389

最新推荐文章于 2024-10-04 13:18:14 发布

阅读量142

点赞数

文章标签：前端 javascript 移动开发 ViewUI

原文链接：https://segmentfault.com/a/1190000004656770

版权

使用React、Redux和Node.js构建通用应用

演讲者是来自Facebook的Stepan，他为我们介绍了怎么样用Node和React、React-Router、Redux等技术，建立一个通用应用(Universal APP)或者同构应用（Isomorphism APP）。

历史

他先从2008年讲起，从那时的Rails包揽路由、验证和视图相关的工作，而JS则只用来写一点点貌似很酷（？）的动画。到后来backbone、ember、angular等等技术和框架的出现，JS已经可以做到解决路由、验证和视图等这些以前是Rails做的工作。

同构的好处

Code Sharing（代码模块可以共享）
Perceived Performance（有些脚本可以放在前端来执行，体验更好）
SEO（搜索引擎对单页面应用的收录还不够好）

代码示例

用一系列代码示例来解决了以下问题

View共享： react-dom的ReactDOMServer.renderToString()
路由共享：client端用react-router的browserHistory, server端则使用 match 功能（服务器端做配置是为了解决浏览器端禁用 JS 后，页面还能否渲染出来的问题），server端和client端可以共用一套路由的配置文件，可以参照ServerRendering
数据：可以使用redux等数据流的库，在服务端渲染时将data赋值给window.__DATA__
初始化数据：这里提到在一些需要拉取数据的组件里，封装一个fetchData的方法，然后在初始化应用时可以调用一个fetchAllData方法实现组件的数据初始化。介绍了一个isomorphic-fetch的库，可以在浏览器端和node端使用fetch api, 这样可以实现一个api封装的文件可以在server端和client端共用。

一些代价

从各个平台迁移到node+react同构还是需要做大量的工作
node是单线程的，可以考虑使用Clousure

微信Web APP开发最佳实践

演讲人是来自微信的江剑锋

微信应用使用Web APP的情况

有微信城市，微信搜索结果等

微信JSSDK

JSSDK给开发者提供了调用微信功能和手机功能的能力。
为什么做一个静态页面，也需要进行服务端签名呢，这里JF介绍说主要是为了安全。
开发者可以使用微信的测试号来测试（域名没备案也可以测）。
小提示：
签名失败的原因，注意在取url加密时不要后面的hash，还有就是contentType注意设置为json

微信用户分布

可以看出使用2G网络用户有8%之多

X5内核

抹平不同Android机型的webview差异，减少适配的工作量

目前的X5内核坑还是不少的：

缓存很严重，甚至html文件也会缓存，清理缓存有个黑科技：在聊天框输入//triggerWebViewCacheCleanup
flex布局部分不支持，不支持flex-wrap等，可以使用老写法
动画卡顿，伪元素不支持动画效果
视频：controll控制条必须存在（产品层面考虑，防止用户无法关闭视频）；autoplay无效，可以用touchstarts事件触发；currentTime不准
可能出现cookie或者localstorage失效，可能是内存不足、进程被杀、微信主动杀或用户主动清理造成，可以多管齐下，同时启用两种方案