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

浠ラ箍发布于2019-08-19 17:55 / 646人阅读

摘要：使用和构建通用应用演讲者是来自的，他为我们介绍了怎么样用和等技术，建立一个通用应用或者同构应用。开发者可以使用微信的测试号来测试域名没备案也可以测。如何提前运用下一代技术提升性能和安全主讲人是陈子舜。一个常见的前端面试题时代的性能

使用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)。

一个常见的前端面试题 HTPP/2时代的Web性能

云服务器 GPU云服务器 FEDAY google开发者大会 js开发者大会直播 js开发者大会视频

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78980.html

FEDAY2016之旅

摘要：前戏补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戏 2016/3/21 补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 ...

red_bricks 2019-08-19 17:55 评论0 收藏0
4月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享关于的思考一款有趣的动画效果跨站资源共享之二最流行的编程语言能做什么到底什么是闭包的第三个参数跨域资源共享详解阮一峰前端要给力之语句在中的值周爱民中国第二届视频花絮编码规范前端工程师手册奇舞周刊被忽视的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfron...

jsdt 2019-08-20 15:54 评论0 收藏0
前端学习资源汇总

摘要：建立该仓库的目的主要是整理收集学习资源，统一管理，方便随时查找。目前整合的学习资源只是前端方向的，可能会存在漏缺比较好的资源，需要慢慢的完善它，欢迎在该上补充资源或者提供宝贵的建议。说明平时的学习资源都比较的凌乱，看到好的资源都是直接收藏在浏览器的收藏夹中，这样其实并不方便，整理在云笔记上，也不方便查看修改记录，索性就整理在 github 上并开源出来，希望帮助大家能够更快的找到需...

SnaiLiu 2019-08-29 16:08 评论0 收藏0
谈项目中如何选择框架和库（FEDAY主题分享总结）

摘要：但是在不同的项目中不同的维度权重时不一样的没有统一的原则去解决一个问题要自身实践来测试选择原则妥适性原则避免过渡实现，暂时用一些，现在还可能用不到，或者用的不多库来满足当前需求。这个两天看了张克军（豆瓣前端专家、前端布道师）在FEDAY的主题分享觉得对中大型项目开发很有帮助所以在这里分享给大家后面会有视频地址。下面介绍重点内容。这里分享的项目是指公司实际产品开发，协同人数比较多，更加...

go4it 2019-08-23 14:03 评论0 收藏0