[Day 1] 听说你没来 JSConf 2017?

15,045 阅读8分钟

上海 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 中实现时面临的一些问题。

  1. 如果区分
  2. 模块相互加载间的问题
  3. 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 第一天的内容就这么多了,想要了解更多第二天的干货,请持续保持关注哟。

第二天笔记链接

整理者 @根号三@一缕殇流化隐半边冰霜