FEDAY第二届前端开发者大会回顾
使用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失效,可能是内存不足、进程被杀、微信主动杀或用户主动清理造成,可以多管齐下,同时启用两种方案
WeUI
快速打造一套微信风格的UI界面
微信调试工具
还提到了weinre
X5内核升级了
这个月底,微信X5内核将全量从webkit内核升级到blink内核,用户无须升级客户端版本就可以升级到最新内核,上面的坑基本没有了~
标准缓存
支持flex
canvas支持css背景色
filter:blur()有效
动画卡顿
伪元素支持动画
autoplay有效
React Tips
演讲人是Fackebook前端工程师黄士旗。
Container Component
Flux Store & Reduce Store
Functional*
HOC高阶组件
High-order Components 高阶组件,本质上就是 Decorator 模式在React的一种实现,Debug友好
Composition over inheritance
RxJS
强烈推荐这个网址,https://github.com/ReactiveX/learnrx,学会了Rx之后你会发现JS原来还可以这么写。
如何提前运用下一代Web技术提升Web性能和安全
主讲人是陈子舜(PuterJam)。