JavaScript Weekly #468 (上)

• Tesseract.js 2.0 颯爽登場
• State of JavaScript 2019 問卷結果
• CNDJS 維護團隊(Cloudflare)的真情告白
• 高手都是這樣用 console.log
• void 在現代 JavaScript 下的生存之道

Tesseract.js 2.0 颯爽登場

• performance 瓶頸
• 失敗後難以 debug，找不到原因

• 用新的 emscripten 升級到新的 core
• 更好懂的 API
• 支援排程，可以同時跑很多個 OCR 工作
• 加入 TypeScript 定義檔
• 重寫文件

const { createWorker } = require('tesseract.js');
const image = 'https://tesseract.projectnaptha.com/img/eng_bw.png';
const worker = createWorker();
let isReady = false;
// Called as early as possible
(async ()=> {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  isReady = true;
})();
// Do other stuffs
(async (image) => {
  if (isReady) {
    const { data: { text } } = await worker.recognize(image);
    console.log(text);
  }
});

const { createWorker, createScheduler } = require('tesseract.js');
const image = 'https://tesseract.projectnaptha.com/img/eng_bw.png';

const scheduler = createScheduler();

(async () => {
  for (let i = 0; i < 4; i++) {
    const w = createWorker();
    await w.load();
    await w.loadLanguage('eng');
    await w.initialize('eng');
    scheduler.addWorker(w);
  }
  const rets = await Promise.all(Array(10).fill(0).map(() => (
    scheduler.addJob('recognize', image);
  )));
  console.log(rets.map(({ data: { text } }) => text));
  await scheduler.terminate();
})();

State of JavaScript 2019 問卷結果

調查人口

• 大家薪水好多 😠
• 9 成答卷者是男的 www
• 職稱「全端工程師」占最多，真是辛苦大家了
• 看完 CSS Proficiency 跟 Back-end Proficiency 發現原來答卷仔高手雲集

總覽

• 有些今年才出來的只有一個點
• 從不掉粉仔筆記一下，列入觀察重點
• Express
• Jest
• GraphQL
• Apollo
• Storybook
• Next.js
• TypeScript

• 70% 以上的看起來都前途不可限量
• Ionic 意外地落在 AVOID 區…

語言特性

JavaScript 加強版們

Languages that compile to JavaScript

前端框架

資料層

後端框架

• express 大神還是大神
• Next.js 只能說現在的 SSR 需求實在是不小，自己搞又非常麻煩…
• Gatsby 體驗還是算不錯，雖然有一些些限制但瑕不掩瑜

測試

• jest 的聲勢大概就跟 React 綁一起的，不太意外，也確實好用
• cypress 超級推，E2E test 戰鬥力直接爆表
• storybook 因為我不是什麼嚴謹的 component 人，沒有在用
• enzyme 我不懂它往下掉的原因是什麼…
• 難道是 shallow rendering 神話破滅的緣故嗎？
• react-testing-library 有崛起的趨勢
• 還是 hook 太夯，但 shallow rendering 支援度不佳呢？

手機/桌機 app

• reactnative 知名度竟然超過 electron XD
• ionic 一種跟 cordova 一起沉淪感 (所以才推出自己的 capacitor 吧)

其他工具

新知來源

看法

頒獎典禮

結論

CNDJS 維護團隊(Cloudflare)的真情告白

高手都是這樣用 console.log

void 在現代 JavaScript 下的生存之道

The void operator evaluates the given expression and then returns undefined.

在把 arrow function 寫成單行的時候，可以用 void 來達成 return undefined 的效果