上海 2017 JSConf 大会已经结束,整理的两天大会实录如下:
首先是开场演讲,主要介绍了 JSConf 的一些往年活动以及所取得的成就,JSConf 在中国已经举办了 6 年,80 多个讲师参与。
第一场 Programming the Universal Future with next.js
简短的介绍之后,第一场主讲就开始啦。第一场讲的是 Programming the Universal Future with next.js。
首先一个大新闻就是 next.js 3.0 发布啦!!!
先介绍了 now,一行命令搞定你的部署。一个非常不错的工具。
now 支持 static projects、package.json(node 项目)、Dockerfile 项目配置部署。
提出一系列开发中会遇到的需求:自定义 URL,服务端渲染、实时日志。
我们能用一个命令来解决这些需求吗?答案是是的,那就是 next
1.安装
2.创建一个页面
3.使用 next
命令启动,直接搞定手工。
启动之后无需配置直接具有以下功能:
现场代码演示,用了一个很酷的终端 —— Hyper,也是他们团队做的哟。
并提供了一个新的 API —— getInitialProps 用于异步加载数据。
现场展示了使用 next.js 开发的一个在线案例 —— next-news.now.sh
next.js 中提供了一个非常有用 head 组件。你可以在这个组件内写任何你需要添加的东西,比如是 link 一个样式,控制页面的 Title 。
典型的开发流程是:加载代码 —— 加载数据 —— 渲染页面。
有了 next.js 就可以很轻松的做服务端渲染,进一步提升页面体验。
服务器端渲染可以实现首屏秒开,并且可以函数式的懒加载代码。
想要了解更多信息可以查看以下链接哟:
第二场 理解现代 Web 开发
这一场演讲干货满满,作者想要表达的内容也很多,总结了 web 开发领域的早期模式以及现代开发的趋势。感兴趣的同学可以直接查看作者的 幻灯片。
第三场 后 ES6 时代的 JavaScript 语言
Hax ,一个写了 20 年 JS 的人,有很多演讲。并调侃了明年的演讲计划
支持度
对比了各个浏览器和 babel 之间对 ES6 的支持程度以及演进时间过程。到 2016 年 3 月份,chrome 几乎全部实现了所有标准,形势一片大好。
只有 proper tail calls 还没有支持。其他厂商没有支持的原因是对这一特性有其他意见,并提出了新想法 STC。
Array.prototype.values() 方法已经实现了,只是没有默认开启,原因是在旧应用中可能存在兼容性问题。
ES7+
已经几乎全部支持。
ES6 已落地,ES7+ ready
之前的语言规范像是憋大招,五年半憋出了一个大版本,厂商集中实现特性。
现在的策略是细水长流,根据提案推进实现,每年 6 月份左右发新版本,并将版本号按年份命名。
从 stage 0 => 4,主要过程如下:
Strawman => Proposal => Draft => Candidate => Finished
核心是 正式版本发布前至少有两个实现
ES7+ 特性
**
乘方
Array.prototype.includes()
tips:
[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true
尾逗号
函数传参和调用时支持尾逗号,在参数比较复杂时非常好用。
f(
a,
b,
c,
)
object.values() && object.entries()
String.prototype.padStart() && String.prototype.padEnd()
回想起了 left-pad 事件,现在有标准支持啦。
Async function
Shared memory and atomices
Worker 之间是通过消息进行通信,现在可以共享内存了。
Async / Await
Worker 其实就是类似线程。Worker 的通信是消息传递的,message事件传递的。一般多线程编程里面是共享内存。
RTC ,run to completion,JS函数从头运行到底,一般都不会被打断的。JS 是使用 run to completion 语意的语言。在增加 Async/Await 打破了run to completion 语意,但是还是可控的,只在标识了 Async/Await 的地方可能会有变量的改变,其他没有标识的地方还都是 run to completion 可控的。SharedArrayBuffer 也同理。在 JS 中默认所有变量都是『线程安全』的,只有在 await 或创建 SharedArrayBuffer 的地方不是。
node.js 没有 worker,不过node.js开发组已经考虑会加入相关的 API。
ESM: ES 模块规范
目前的使用方式是通过 babel 等方式编译为 script 然后运行的。
HTML 规范已经加入了 <script type="module">
用于支持 ESM 实现。还可以使用 nomodule
做兼容处理。 Safari 10.1、Chrome 61、Edge 15+、 已经支持。
引申出 ESM 在 Node 中实现时面临的一些问题。
- 如果区分
- 模块相互加载间的问题
- dirname && filename 变量问题
未来新特性
import()
动态加载
数组和对象的展开运算符
正则表达式的一些特性
global 变量
Class 特性扩展
支持私有属性
上周新提出的提案:Pattern Match
WebAssembly:web 上的汇编语言
第四场 前端工程中的编译时优化
编译的目的:为了让代码变得更小。
从源代码如何到目标代码:
源代码 - 抽象语法树 - 编译 - 压缩 - 目标代码
常见的压缩器:
- colsure compilder
- uglifyJS
- babili
- butternut
早期,文件拼接 + 文件压缩
bundlers: 拆分模块进行打包,打包以后会产生新问题,难以压缩。
介绍了 rollup 的解决方案。
编译也会让代码变得更快。
以 React 为例举例说明在编译阶段的模板优化。 babel-react-optimize
- Svelte 框架,完全依赖于编译的框架。
- Relay Modern: pre-compile GraphQL Queries & Schemas。
- Prepack: 将编译时优化推进一个新高度。
- Rakt:在应用层面进行编译时优化
Vue 中的编译时优化
- Hoisting Static Trees
- Skipping Static bindings
- Skipping Children Array Normalization
- SSR: optimizing Virtual DOM render functions into string concat.
- SSR: inferring async shunks: 分别做 client build 和 server build
- SSR: inlining Critical CSS
一些新想法:
- 在 Vue 编译时分析 APP 中没有用到的部分
- 编译时分析 CSS 并处理为原子类 Atomic CSS
目前在编译时优化只是一个起步阶段,还大有发展空间。
第五场 学习 React Native 你需要知道的一切
简要的介绍了历史以及目前的状态
RN 为什么这么流行:
- 热更新
- 使用现代 web 技术开发移动端
- 跨平台
缺点:
- Breaking changes 太多
- 文档不易理解,导致学习成本高
- Navigation:导航组件问题校对
Keep improving:
- 安卓性能
- Nodes
- FaltList / SectionList
- yoga, metro-bundler
- Road map, Monthly meeting
原生动画
目前大多是基于 requestAnimationFrame + setState 实现的,官方提供了一个性能更好的 Animated 库,是基于 requestAnimation + setNativeProps 实现。
社区提供了更好的解决方案 Native Animated:
使用 useNativeDriver: true 直接启用 Native Animated。
缺陷:
只支持 transform, opacity, 不支持 flex, position 等属性
解决方案:
- layout -> transform
导航的问题,社区目前已有的解决方案
调试工具
- Chrome Dev Tools
- React Dev Tools
- React Native Debugger
- Visual Testing
State 管理
- Built-in state
- Redux
- Mobx
- Mobx State Tree
- dva
建议
第六场 TypeScript, Angular 和移动端的跨品台开发
什么是 TypeScript
TypeScript 类型系统
- 编译器
- 基于 tsconfig.json 配置文件
- 静态类型检查和代码重构
特性
几个重要的特性介绍
TypeScript interfaces 接口
TypeScript Typing
- --strictNullChecks
- any:任何类型
还支持装饰器和注解。
TypeScript 在国外已经非常流行了
为什么使用 Angular
Angular 已经不是一个框架,而是一个平台。
三个支柱:
- 核心模块
- 程序库
- 工具
Angular 的核心
Angular 变化检测
Immutability & Observable
Angular 周边库
- Angular Router
- Angular Animation
- Angular Material
- Angular Tooling
- Angular Universal
Angular 的未来
更小、更快、更方便的去使用
移动端的实现
简单介绍了 Ionic Framework。
NativeScript 简介和原理
NativeScript 跨平台原理如下:
第七场 Ruff 应用开发
Ruff 是一个支持 JavaScript 开发应用的物联网操作系统。
直接现场演示 Demo。
(就问你这些代码像不像 jQuery? )
在做 Ruff 时的一些思考
开发高效,而非执行高效。
不会插板子?
Ruff 提供了很方便的 UI 界面,手把手教你怎么连接电路。
现代程序设计语言
- 程序设计语言:JavaScript
- 内存管理:垃圾回收
- 测试:自动化测试框架
- 包管理:Ruff 软件仓库
面向应用的抽象
传统方式:
需要了解 GPIO 等一系列硬件基础知识
GPIO.output(11, GPIO.HIGT)
Ruff
$('#light').turnOn()
抽象级别
提供生产支持
- 设备宝 Ruff PI
从生产视角拆分成了三层:
- code
- Layout
- Hardware
Ruff 2.0
听完 Ruff 的演讲,终于可以用 jQuery 给孩子写玩具了!
本系列笔记是现场记录的,比较仓促,有些地方会存在偏差或理解错误,还请关注官方后续发布的讲师 PPT 和大会视频。
JSConf 第一天的内容就这么多了,想要了解更多第二天的干货,请持续保持关注哟。
整理者 @根号三、@一缕殇流化隐半边冰霜