f8 2017 见闻

san jose convention center

big map

detail map

convention center

 

设施

A – G 7 个会场, 1 个展示会场

confa

 

hall

keynote

第一天 mark 强调 facebook 的下一个关注点在于构建社区

community

技术上主要围绕 ar(argumented reality),并且 ar affordable(费用低),应用场景包括信息,数字对象,增强等

ar

设备上现阶段主要依赖摄像头,并把摄像头打造成第一个 ar 平台(camera platform: the first augmented reality platform), 摄像头 ar 平台会提供 3d 效果,地理定位,对象识别功能,并有对应的工具帮助在摄像头的视频上开发。

主要依赖计算机视觉,可以识别物体距离,手势,形状.

computer_vision

内容制作方面提供 360 camera

360camera

messager platform 将升级到 2.0,并且支持 messager 码,和微信码类似.

messager code

weixin-app

messager 还支持了聊天窗口直接嵌入应用

第二天 cto 整体上介绍了 facebook 的三大技术方向 connectivity, ai, vr/ar

connectivity 主干还是依赖光纤,主要解决的是覆盖率和灵活性问题。对于城市通过 telegraph 实现街道的全面覆盖

telegraph1

telegraph

对于偏远地区,通过直升飞机 aquila 底部链接光纤,在高空进行无线信号发射。

aquila

ai 的核心在于将 ai 能力从数据中心带到手机上来,caffe2 框架可以高效运行在手机上

caffe2

例如可以软件实现背景虚化

blur

vr 和 ar 先走不同路,不过最终目标是一致的,合并真实世界与虚拟世界。 发布 facebook spaces 支持 vr 社交

分享主题

litho: a declarative framework for efficient uis

作者以及演讲者: Emil Sjölander(sjolander.emil@gmail.com)

facebook 在 web 上开发了 react 后,ios 和 android 也在转向声明式的 UI,ios 上开发了 componentkit, 在这次大会上发布了 android 上的声明式 UI 框架 litho

代码示例如下

code

技术上通过 async layout, view flattening, incremental recycling 来提高性能。

传统 android 做法是在主进程进行布局:

thread

litho 通过使用 yoga 将布局操作放在后台线程中,从而提高用户交互的响应

thread

传统 android 在渲染节点时会把布局节点也渲染出来,litho 通过将 view flatten 仅渲染内容节点

view

view

incremental recycling 则指的是比 RecycleView 更细粒度的回收重用策略,每个节点都可以复用。

the evolution of react and graphql at facebook and beyond

react 核心作者 sebmarkbage(sebastian@calyptus.eu) Ben Alpert(ben@benalpert.com)

graphql 核心作者 Lee Byron(lee@leebyron.com)

react rerender 的问题,同步 render 复杂情况下造成页面卡顿(jank).

react

不同场景用户期待响应时间不同,优先级也不同.

react priority

react fiber 重写了 react 核心算法,除了支持指定优先级渲染,还包括

react fiber

graphql 介绍: 是一种声明式的数据获取方法,在已有后端的一层数据交互层,可用于任何后端.

relay 是 graphql 的客户端

relay 1

之前是将解析放到客户端,比较耗时

relay 2

后面改为在服务端解析

relay 3

relay 重写后优势

relay 4

React VR: Build amazing VR experiences using React

核心作者 Andrew Imm https://www.linkedin.com/in/andrewimm/

终端的进化

react vr

示例

demo

逻辑运行在 web worker 中,渲染在浏览器中,此架构也是支付宝小程序的理想架构。

architecture

并且渲染端可切换

render

实际效果

demo2

Hack: Complilations @ Scale

hack(php with types) 如何替换原先的 php

hack 1

hack 2

中间件,框架作者先改,大量的产品工程师可以直接受益。

hack arch

Building High-Quality Javascript Tools

jest and yarn

jest 的成功依赖: 性能,特性,被采用度

性能包括: 只测试变化的部分以及其依赖,并进行并行测试

xxx

特性包括: 输出结果包含 diff 部分,可以进行 snapshot 测试

x

为了提高采用度,jest 被内置到 react-native 以及 create-react-app 工具中一键使用,并且进行模块拆分从而可以使用其部分功能。

x

会场的 jest 宣传,特色的 snapshot 功能

x

yarn

npm 的伟大之处在于推行小模块以及自由发布,是所有语言最大的包管理。

x

但随着也带来 left-pad 问题。

yarn 的优势在于支持更多控制以及提高下载性能.

控制体现在可以通过 lock file 以及 deterministic build 来控制发布的内容以及成员的统一项目目录。

提高下载性能的手段包括

  • 尽早开始下载
  • 缓存优先
  • 尽量少的 io 请求
  • 多进程并行处理

yarn 的未来规划包括:支持单仓库多模块发布,lerna 可能以后就不需要了。

x

以及作为多种语言的包管理器。

Moving faster: optimize the developer experience of a facebook enginner

讲述 facebook 如何提高工程师的开发效率.

  • 服务端从 hiphop 切换到 hack,代码写完立刻生效,不需要编译
  • 客户端推进 react-native,代码写完立刻生效,不需要编译

fast 1

开发 watchman 高效得监听静态资源,仅对变化的资源重新编译

fast 2

开发 ide nuclide,将编译,测试挪到服务器(sandcastle)进行,和客户端实时通信

fast 3

building offline experience for instagram

对于读请求,每次请求数据后将数据存一份到离线 store,网络不通时从 store 取.

对于写操作,修改本地状态,并将操作动作存到队列,恢复网络后继续执行。

offline-1

offline-2

vr 201

这个主题介绍了 vr 制作过程中的一些注意点,主要原则在于不要和现实不同步,否则会导致头晕呕吐,比如

  • 不要使用加速度
  • 不要限制镜头移动范围,不要有动画
  • 画面保持稳定不要颤抖
  • 不要有背景声音和音乐,声音要有对应的物理触发源头

大硅谷介绍

sv

旧金山

sfo

市内交通包括叮当车,公交车,电车

叮当车

x

电车

x

caltrain 通过湾区

x

x

alibaba 在 san meteo 的一个办公楼

xx2

google

x

x

x

facebook

x

x

x

apple

x

x

stanford

x

居民

湾区 house

x

x

x

f8 2017 见闻”的一个响应

发表评论

Fill in your details below or click an icon to log in:

WordPress.com 徽标

You are commenting using your WordPress.com account. Log Out /  更改 )

Google photo

You are commenting using your Google account. Log Out /  更改 )

Twitter picture

You are commenting using your Twitter account. Log Out /  更改 )

Facebook photo

You are commenting using your Facebook account. Log Out /  更改 )

Connecting to %s