[Soft & Share 會員服務] 開源報報 274 – 使用 React 的漸進式靜態網站生成器

工具

PseudoTex是一個移植器，它可以將虛擬碼翻譯成LaTex的表示形式

• https://github.com/bruno-anjos/PseudoTex

在大學裡，我不得不用LaTex做一些有虛擬碼的報告。將簡單的虛擬碼翻譯成LaTex命令是一個巨大的困難，所以我決定做這個工具，將一個簡單的虛擬碼語言翻譯成LaTex的等價命令。我希望它能讓你的生活更輕鬆

PseudoTex 所遵循的虛擬碼在 João Leitão 的這篇論文中得到了一定的形式化。

開發過程中執行 script 的最簡單方法

• https://github.com/gschier/will-you-please

把常用的 script 使用 yaml 設定檔來集中維護，這個工具也會幫你初始化你的 yaml 檔案

快速開源的 Slack 桌面應用程式

• https://github.com/cacticouncil/lounge-lizard/

使用 Node.js 編寫，由 Yue 程式庫提供原生UI。

Web 應用程式開發

使用 React 的漸進式靜態網站生成器

• https://github.com/react-static/react-static

React-Static是一款基於React及其生態系統的快速、輕量級、強大的漸進式靜態網站生成器。它類似於你在Create React App等工具中所習慣的簡單性和開發者體驗，並針對性能、靈活性和使用者/開發者體驗進行了精心設計。

特色

• 100% React
• 超級快速的建構和效能。
• 資料不可知。從任何地方提供你的網站的資料，無論你想要什麼。
• 自動程式碼和資料分割!
• 即時瀏覽和頁面瀏覽。
• 逐步增強和行動裝置就緒
• SEO友好。
• 以 React 為中心的開發者體驗。
• 無痛的專案設定和遷移。
• 支援 100% 的 React 生態系統。包括 CSS-in-JS 程式庫，客製化查詢層，如GraphQL，甚至Redux。
• 開箱即用的熱重載。即時編輯 React 元件、樣式甚至資料。

運作原理

React Static 將你的資料和樣板收集在一起，並使用 webpack 和 javascript 將它們智慧地分割成位元大小的靜態檔案。一旦這些檔案被生成，React Static 就會使用它們來渲染和匯出你提供給它的路由列表到HTML檔案中。在你的網站被匯出後，生成的資料、樣板和html檔案可以傳輸到靜態檔案伺服器上，並作為一個速度快、效能好的靜態網站進行瀏覽。

但請記住，一個漸進式靜態網站不僅僅是……

你不知道，當React Static匯出你的網站時，它還為你網站的每個頁面生成了一個微小的、經過最佳化的、程式碼分割的原始 React 應用版本！在這些頁面載入後，React 無形中將這個應用程式掛載到頁面上現有的HTML中，並且……。當這些頁面載入完畢後，React 會將這個應用程式隱形地掛載到頁面上現有的HTML上，然後…… 你現在使用的是你最初構建的單網頁React應用程式! 不過這個應用程式很特別! 當你瀏覽你的網站時，你下一步可能會去的網頁會自動預載，瀏覽到它們時會瞬間出現！.

這僅僅是個開始! 有了React Static，你可以釋放你的創造力，用速度和生產力建構任何你能想象的東西。它甚至還有超讚的外掛，在你的旅途中助你一臂之力!

互動式 React 生命週期方法圖

• https://github.com/wojtekmaj/react-lifecycle-methods-diagram

線上版本

如何使用圖表

• 點選任何方法名稱來閱讀其官方文件（在新標籤頁中開啟）。
• 粗體字的方法是最常見的方法。
• 不是方法但有助於讀圖的動作用斜體表示。

資料科學

在原始碼上應用機器學習

• https://github.com/autosoft-dev/ml-on-code

這個 repository 包含了這個 YouTube 演講中的簡報和 source code

影片介紹

最近一段時間，機器學習，尤其是深度學習，已經顯示出從資料中學習潛伏模式的巨大潛力，並且幾乎打破了一個又一個的基準。這種持續成功的主要因素是–海量的開放資料，GPU加速的高效能運算，以及最後但並非最不重要的聰明演算法技巧，如自我關注和圖神經網路。

可以說，類似的技術和方法可以應用到更多不同的領域，比如為電腦軟體編寫的原始碼。事實上，2018年Miltiadis Allamanis等人在他們的開創性論文 “A Survey of Machine Learning for Big Code and Naturalness”(https://arxiv.org/pdf/1709.06182.pdf)中提出了我們所說的自然性假說。其中指出：”軟體是人類交流的一種形式；軟體語料庫具有類似於自然語言語料庫的統計特性；可以利用這些特性來構建更好的軟體工程工具。”

在這之後，出現了大量新的研究論文，這些論文要麼是探索其他機器學習學科中已經被證明的技術（如NLP中的變換器、Graph Convolution Networks等），要麼是設計新的技術（如Gated Graph Neural Network、Nueral Symbolic方法、Deep ProbLog等）。還有一種新型的公司（如Kite、DiffBlue、Ponicode、Codist），他們使用/推進這些方法，生產出一套新的工具，幫助開發者更快、更安全、更容易地編寫原始碼。

在今天的演講中，我們將研究這個領域。討論一些最近的進展。由於這些進步而出現的一些新的工具，最後寫一些程式碼來探索研究者們正在試圖解決的許多問題中的一個問題。討論目前最好的方法及其缺點和進一步的研究方向。

講者介紹

Shubhadeep Roychowdhury–Codist的CTO和聯合創始人。是一家總部位於巴黎的新創公司，為開發者建立了docly（http://thedocly.io/）自動原始碼總結工具，幫助他們維護更好的程式碼文件。SRC在遊戲程式設計、超大規模資料工程和基於深度學習的尖端系統等不同領域有超過17年的經驗。他在2019年與人合著了《用Python進行資料整理》，這是一本500多頁的龐大寶典，內容涉及任何與資料處理和整理以及描述性統計相關的內容。SRC是一位活躍的 medium 部落客，也是兩個孩子的父親，他在法國巴黎生活和工作。

使用 C 語言開發的一個極小型神經網路程式庫

• https://github.com/glouw/tinn

使用 C99 開發，總共 200 行

對於如何學習手寫數字的演示，得到一些訓練資料。

wget http://archive.ics.uci.edu/ml/machine-learning-databases/semeion/semeion.data

make; ./test

訓練資料由緩慢和快速書寫的手寫數字組成。資料集中的每一行對應一個手寫數字，每個數字的大小為16×16畫素，給神經網路提供256個輸入。每個數字的大小是16×16畫素，給神經網路提供256個輸入。

在行的末尾，10個數字表示手寫數字。

0: 1 0 0 0 0 0 0 0 0 0
1: 0 1 0 0 0 0 0 0 0 0
2: 0 0 1 0 0 0 0 0 0 0
3: 0 0 0 1 0 0 0 0 0 0
4: 0 0 0 0 1 0 0 0 0 0
...
9: 0 0 0 0 0 0 0 0 0 1

這給神經網路提供了10個輸出。測試程式將輸出每個數字的準確性。期望正確數字的準確率高於99%，其他數字的準確率低於0.1%。

雲端和網路管理

git-cdn是一個 git 鏡像( mirror )，你可以把它放在你的 CI 工作者和開發者附近。

• https://gitlab.com/grouperenault/git_cdn

git-cdn 是一個按需要鏡像，只有在客戶端請求時才會更新本地快取。
這意味著鏡像總是保證返回中央 repository 的最新版本。
其他的 git 鏡像方案（gitlab geo-replication, gerrit mirror）都是基於cron或者事件的，而且中央 repository 和鏡像之間總是存在差異，這讓持續整合工作者很難使用鏡像。

程式設計語言/程式庫

可嵌入、可複製、可容錯的SQL引擎。

• https://github.com/canonical/dqlite

dqlite是一個 C 程式庫，它實現了一個具有高可用性和自動故障轉移的可嵌入和可複製( replicated ) 的SQL資料庫引擎。

dqlite “是 “分散式SQLite “的縮寫，意思是dqlite透過網路通訊協定擴充了SQLite，它可以將你的應用程式的不同實體連線在一起，並讓它們作為一個高度可用的叢集，而不依賴於外部資料庫。

設計亮點

• 使用 libuv 作為事件迴圈的非同步單執行緒實現。
• 針對 SQLite primitives和資料型別最佳化的客製化 wire 通訊協定。
• 基於 Raft 演算法及其高效的 C-raft 實現的資料複製。