[Day 1] 聽說你沒來 JSConf 2017？

根號三發表於2019-02-25
JS

上海 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 第一天的內容就這麼多了，想要了解更多第二天的乾貨，請持續保持關注喲。

第二天筆記連結

整理者 @根號三、@一縷殤流化隱半邊冰霜

相關文章