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

binggg

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

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

历史

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

同构的好处

  1. Code Sharing(代码模块可以共享)

  2. Perceived Performance(有些脚本可以放在前端来执行,体验更好)

  3. SEO(搜索引擎对单页面应用的收录还不够好)

代码示例

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

  1. View共享: react-dom的ReactDOMServer.renderToString()

  2. 路由共享:client端用react-routerbrowserHistory, server端则使用 match 功能(服务器端做配置是为了解决浏览器端禁用 JS 后,页面还能否渲染出来的问题),server端和client端可以共用一套路由的配置文件,可以参照ServerRendering

  3. 数据: 可以使用redux等数据流的库,在服务端渲染时将data赋值给window.__DATA__

  4. 初始化数据: 这里提到在一些需要拉取数据的组件里,封装一个fetchData的方法,然后在初始化应用时可以调用一个fetchAllData方法实现组件的数据初始化。介绍了一个isomorphic-fetch的库,可以在浏览器端和node端使用fetch api, 这样可以实现一个api封装的文件可以在server端和client端共用。

一些代价

  1. 从各个平台迁移到node+react同构还是需要做大量的工作

  2. node是单线程的,可以考虑使用Clousure

微信Web APP开发最佳实践

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

微信应用使用Web APP的情况

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

微信JSSDK

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

微信用户分布

clipboard.png

clipboard.png

clipboard.png

clipboard.png

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

X5内核

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

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

  1. 缓存很严重,甚至html文件也会缓存,清理缓存有个黑科技:在聊天框输入//triggerWebViewCacheCleanup

  2. flex布局部分不支持,不支持flex-wrap等,可以使用老写法

  3. 动画卡顿,伪元素不支持动画效果

  4. 视频:controll控制条必须存在(产品层面考虑,防止用户无法关闭视频);autoplay无效,可以用touchstarts事件触发;currentTime不准

  5. 可能出现cookie或者localstorage失效,可能是内存不足、进程被杀、微信主动杀或用户主动清理造成,可以多管齐下,同时启用两种方案

WeUI

快速打造一套微信风格的UI界面

微信调试工具

还提到了weinre

X5内核升级了

这个月底,微信X5内核将全量从webkit内核升级到blink内核,用户无须升级客户端版本就可以升级到最新内核,上面的坑基本没有了~

  • 标准缓存

  • 支持flex

  • canvas支持css背景色

  • filter:blur()有效

  • 动画卡顿

  • 伪元素支持动画

  • autoplay有效

React Tips

演讲人是Fackebook前端工程师黄士旗。

Container Component

clipboard.png

clipboard.png

Flux Store & Reduce Store

clipboard.png

Functional*

HOC高阶组件

High-order Components 高阶组件,本质上就是 Decorator 模式在React的一种实现,Debug友好

clipboard.png

Composition over inheritance

RxJS

强烈推荐这个网址,https://github.com/ReactiveX/learnrx,学会了Rx之后你会发现JS原来还可以这么写。

如何提前运用下一代Web技术提升Web性能和安全

主讲人是陈子舜(PuterJam)。

一个常见的前端面试题

HTPP/2时代的Web性能

阅读 1.7k

前端UP
前端升级进阶
56 声望
2 粉丝
0 条评论
你知道吗?

56 声望
2 粉丝
宣传栏