前端小報 - 201902月刊

【AIS-TXD前端技術月刊】- 本月熱門前端技術快報，彙聚 Github Trending 流行 Repo 和熱門文章，文末有福利

歡迎 訂閱 & 投稿

本期小編：damujiangr (墨止)

新聞快報

React v16.8 釋出: The One With Hooks

• Hooks 上手介紹
• 額外：React 終于開始做國際化了，以後國内的新手們就能看到中文文檔的 React 了，目前正在招募 Contributors，有興趣的可以參看 Is React Translated Yet? ¡Sí! Sim! はい

Vue v2.6 釋出: 代号：Macross

• 準備與 v3.0 版本接軌了
• Slot 引入了新的模版文法， v-slot (預設插槽) v-slot:name (具名插槽)
• 異步錯誤處理、編譯警告位置資訊等等
• 專欄連結

Flutter 1.2 釋出

• Flutter 1.2 是自第一個測試版本，曆時一年後，釋出的第一次 feature update
• 除了提升了核心架構的穩定性、性能和品質，完善現在的widget，重要的是為開發者提供了基于 Web 的開發工具，以後還可能會直接建構到VS Code中

• widget inspector 支援樹狀層級結構的可視化
• timeline view 支援幀級别的診斷，發現渲染和計算的問題
• full source-level debugger 支援設定斷點、單步執行，檢視調用堆棧
• logging view 能夠顯示 app 中的日志、網絡、架構和垃圾回收事件

• 官方介紹連結

支付寶小程式向個人開發者開放公測

• 小程式這場圍繞流量、場景、創意等諸多概念的新風口，每一家公司都想要分得一杯羹，越來越多的小程式、輕應用湧現出來，支付寶小程式開發公測，說明技術架構上已趨穩定
• 支付包小程式入駐連結
• 這裡還有一篇技術稿，為支付寶小程式首席架構師白招拒，解讀支付寶小程式的技術架構和開發特點，《獨家！支付寶首次披露其小程式技術架構》

阿裡雲 ARMS 推出小程式監控

• 基礎服務的角色來了，可以用于及時發現卡頓、緩慢和一些錯誤，讓小程式不再裸奔
• 目前支援情況：釘釘E應用、支付寶小程式、微信小程式、其他符合标準的小程式
• 前端監控接入概述

Next.js 8 新增支援 Serverless

• 支援 Serverless 可以極大的提高應用開發的可靠性和可伸縮性，啟用也很簡單，檢視官方詳細介紹

// next.config.js
module.exports = {
  target: "serverless",
};複制代碼                

Ant Design of Vue

• 近日有開發者基于 Ant Design 的設計語言，開發了一套基于 Vue 元件庫，喜歡 antd 風 的 Vue 開發者有福利了
• 使用體驗方面，跟 Ant Design 官網的更新要滞後一些，感官上還是很不錯的

TSLint in 2019

• 随着TypeScript生态的不斷壯大，TSLint也在不斷演進，準備提供更多的能力，更加擁抱社群共同發展，和對 ESLint 的相容，讓開發者可以無縫切換

npm 推出企業版 npm Enterprise

• 主打安全性，提供額外的控制權限，還可以定制CI/CD系統內建流程，可以了解為企業私服，比如阿裡内部的tnpm與開放的鏡像的cnpm

Github Trending

好用的代碼片段檢視工具 推薦者：x-cold

• 将某一個檔案的倉庫位址的

  github.com

  替換為

  github.githistory.xyz

  ，回車即可通路到代碼變更的記錄。也可以安裝浏覽器插件 Chrome 或 Firefox，在某個檔案的網頁上就能看到一個 `Open in Git History` 的按鈕，點選即可。

• 對于本地倉庫，可以使用指令通路

  npx git-file-history path/to/file.ext

• Github 倉庫：pomber/git-history

讓網站變的透明直到消失的方案

• 加入 kleampa/ not-paid 後，如果設定的日期即将到來，那麼網頁會逐天變得越來越透明，直到完全消失

是時候打造一款屬于自己的AI助手了

• 使用 leon-ai/ leon 即可打造屬于自己的AI助手
• 安裝過程中注意需要某些必要的包：如

  brew install pipenv

工具推薦

Animation in React

• 使用 React 寫動畫并不容易，但是借用 `@nearform/react-animation` 提供的元件和預制的 keyframes，就會讓動畫實作變得輕松起來
• 使用入門文章
• @nearform/react-animation in NPM

Webpack 5 的新特性

• 介紹了 Webpack 5 即将帶來的新特性 New Features in Webpack 5

• 通過持久緩存提高建構性能
• 代碼拆分功能更加強大，更智能的分析子產品大小
• Name Chunk ID 不需要在使用注釋定義，而是使用如下配置：

• 盡量遵循在内部作出改變的原則，而不會破壞使用方式

熱門文章

給2019前端的5個建議

• 不斷學習 Redux/TypeScript 等等，造輪子覆寫全鍊路，程式員一直在路上

近一萬字的ES6文法知識點補充

• ES2019 都來了，快來補充學習起來

研發團隊資源成本優化實踐

• 主要介紹了成本投入與産出的背景、實踐過程中的幾個階段，可以對自己的團隊管理進行了一個對照和複盤

福利來了

春天來了，又到了金三銀四的季節，我們是阿裡巴巴「研發效能部-體驗技術」團隊，一個集前端、視覺、互動的綜合性團隊，緻力于阿裡集團全球資料中心和DevOps的數字化、自動化、智能化的體驗設計和前端體系化建設，打造企業級資料可視化産品、探索未來前沿科技創新産品，這裡有酒有故事，就等你來，履歷請投：`thomasyang.ypf#alibaba-inc.com`、`longbo.ylb#alibaba-inc.com`