緣起

今年參加COSCUP受到許多人樂於分享的感召，便興起了分享所 踩坑 學習的過程，由於資訊技術一再更新，有時候大家可能內心很想吶喊：「求不要更新了，老子学不动了」，但身為一個軟體工程師，身上多帶幾把 武器 工具應該要是合情可理的(?)。

大家在學習新東西的時係，時常容易卡住(或者只有我?)，我個人慣用的學習過程大概是這樣

• 先大略看一下官網的文件說明
• 查一下大家的評論及意見
• 實作一個小型的poc確定可以work
• 有時間(?)再深入探討它的原理

怎麼有一種先求不傷身體，再講究療效的感覺，畢竟說明文件的抽象有時候不易理解，還是需要搭配實務的操作把手弄髒，再回去看文件，如此交替著運行，在poc完成後，大概就會一半了。不過副作用是常常被錯誤的坑卡很久之後，發現原來官網早就說了 XDDD ，老師在講你有沒有在聽? 沒有嘛! (丟筆) 。

身為一個程式設計工程師，不愛寫文件也是合情合理的 (?)，希望自己可以藉這次參賽的機會，挑戰完成一篇完整的文件(指導手冊)。希望這一系列可以帶給大家如下的的感覺 XDDD：

另外推薦大家要學習新東西，可以參考邦友的文章，我還滿認同的。

目標

本系列我自己是覺得有點硬(?)，可能不太適合程式完全新手，但對程式語言有概念及基礎，知道前後端分離基本概念，應該可以 勉強 跟的上，有C#或Vue經驗應該會有一點幫助，有時候我會用這兩個作類比，至於高手就還請鞭小力一點 XDD。我會盡量放慢步調把東西講清楚，希望讓新手小白也可以跟著完成（至少做出來能動XDD）

這系列文篇會透過step by step引導大家從無到有建立起一個大全端的小型應用，其間可能會應用到不同的技術，其實各種技術都是在取捨，選了某技術的優勢並接受它帶來的缺點，其間不同的應用場景可能會有不同適用的選擇， 小孩子才做選擇，我全都要，這邊帶大家練練手，實際應用可以依照不同選擇選取不同的方案，我會儘量附上相關的資源，有興趣的話可以更深入的了解。

技術棧

技術棧又稱技術債，沒有啦我亂講的，回到正題，剛剛上面說的全部都要是什麼概念，大約就像是199吃到飽、吃到撐、吃到吐的意思，(先嚇嚇大家)。

以下為本系列文章所選擇的技術堆疊(technology stack)，放引言部分是計劃會用到，但希望不會遇到計劃趕不上變化的情境(?)

• 後端
  • rust: 一款最近很火的程式語言，歡迎大家歡迎加入社群!! 加入社群!! 加入社群!!，很重要所以說三次，絕對不是為了灌水湊字數。
  • Tauri: 基於rust開發出來的一款跨平台桌面版應用程式，UI使用webview，可掛載各種前端web應用，裡面放vue.js、react、angular、甚至純 html + vanilla-js也沒問題。
  • axum: 基於rust的一款後端 web 框架，大部分開發 web 所需的功能都找的到 其他人寫好的 對應的程式庫可以呼叫。原本計劃要使用的，但發現有有其他邦友已經選axum了，我們改用另一個試試看
  • warp: 在rust使用FP概念實作的一個web框架，號稱簡單易用。
• 前端
  • TypeScript: 前端SPA的開發紛紛從ECMAScript (俗稱JavaScript) 轉投抱到 TypeScript的懷抱，推測是JavaScript的雷太多了，為了 團隊的和平 程式的穩定，還是用TypeScript比較安全。
  • Svelte: 新興的前端框架，雖然說新但wiki說是2016年首次發佈，傳說他有著比三大框架好的效能，更小的成品打包，以及比較好的開發體驗
  • TailwindCSS: 前端css框架的後起之秀，寫習慣程式習慣用元件去看事情，但css好像可以這樣用又好像有點怪怪的，TailwindCss帶你從另一個角度去看待如何處理CSS。

  • vue.js: 先前很火的三大框架之一，號稱有著比較好的開發者體驗(?)，來看看怎麼實作吧。
  • quasar: 用vue.js實作的前端套件庫，如果要_基於vue之上_快速建立前端，用它就對了，包含會用到的各種元件。還有很完整的文件說明。

• 其他
  • rest Api: 這啥應該沒有人不知道吧(?)，別說，還真的有很多人一知半解(?) 包括我(小聲說) ，所以也是常見各種不同的說法及爭論，這邊不去討論哲學，就實務面如何實現該功能，你愛全部都開post也可以(x)。
  • gRPC: google大神推出來的東西不一定 - SQL Server: 常見資料庫之一，大家應該很熟悉資料庫。但因為rust生態是開源為主的，對PostgreSQL, MySQL 之類的ORM套件比較完善，對SQL Server的支援度比較低，rust只有driver，沒有ORM，所以我用SQL Server來 自虐 示例給大家，相信這個會了，再去看其他ORM庫就比較沒有問題。
  • wasm: WebAssembly，故名思義就是在Web環境底上跑的Assebmly(組合語言或汇编语言)，wasm是WebAssembly的副檔名或大家慣用的簡稱(?)了，可以用來 炫技 解決一部分奇怪的JavaScript。
    好，所以我們一起來看看對比現在常用的RestAPI，要怎麼去實現，聽說它又快又小(?)，到底神奇在哪，讓我們接著看下去。
  • WebSocket: 它和你可能聽過的Socket是不一樣的喔，就像白馬非馬，欸不是啦，真的不一樣，如果你知道OSI7層，Socket在傳輸層，WebSocket在應用層，那麼具體怎麼用呢，晚點一起來試試看吧。

  • SurrealDB: 號稱未來的DB(?)，網路上經常可見RDB(關聯式資料庫)與NoSQL爭奪戰的文章，Surreal也是秉持著小孩子才做選擇的想法而建立，欲知詳情請靜待後續分曉。
  • DDD：領域驅動開發是個滿抽象的概念，相信大家在軟體業受到的涂毒不會少，Eric Evan在2003年的藍皮書封面標題就寫著「Tackling Complexity in the Heart of Software」(解決軟體核心的複雜性)，應該不會有人覺得軟體維護是簡單的，所以Eric提供一些方法讓我們維護起來可以相對(?)比較簡單。
  • Event Sourcing: 事件溯源，常常聽到XX驅動開發，如TDD、BDD、ATDD、DDD、事件驅動就是把大家以往從資料導向，改為由事件導向，資料結構不是重點，事件才是重點，因為各種事件才會導致資料的改變(新增/修改/刪除)，所以事件才是設計應該關注的主軸。

演示的主軸我會放在rust上，其他語言或技術可能只會輕微帶過，畢竟rust易學難精 （騙人，跟本沒有易學吧） 我會透過案例的實作與解說，一步步帶大家認識rust裡的語言特性，以及相關語法等等。

本列系文章希望能在30天內建構(scaffold)出一套完整的大全端(?)應用，由於資訊領域 就是無底深淵 學海無涯，需要大家一直不停的學習，希望在此透過演示的過程，可以讓大家手把手搭建出一個能動的東西，另外透過匆匆一瞥官方資料或網上可找到的資料，希望對於初學者有個基本的概念，對於想精進的同好，也可以再透過參考資料去深入了解，把連結存起來等有空再慢慢看的概念，(就像程式裡註解的 // todo 一樣 XDD)

本系列案例會附上原始碼，建構一個簡單版的可行性驗證(proof of concept)，實際上各個環境深入還有很多不同的眉角要處理，大家有興趣可以再選擇各自想深入的領域學習，我會儘量附上參考資訊來源，另外我 只是半路出家 不是專家，難免有錯還請大家不吝指正。

特別感謝

另外，我在下面這些社群擔任專業的潛水員，所以也歡迎大家一起加入，感謝有許多軟體產業前輩無私的分享，我們google的很多技術文章分享，都是多虧了這些先輩不吝分享，噢雖然現在好像大家都在用 xxxGPT? 我覺得GPT只是一個工具，幫助大家快速更有效率的處理事情，但相對新手的使用成本(判斷對錯)也比較高，比如這裡提到研究顯示ChatGPT寫程式的問題解答正確率不到五成，但很容易被採信，雖然有時候google到別人部落格的文章也可能是別人意識到自己踩雷之前寫的，所以說踩雷是大家學習的必經之路(?)，另外GPT好像也是學習這些前人的知識來的，只是它爬文比大家有效率的多。

以下這些技術社團大家可以有空多去逛逛

• Rust Taiwan: 網站、FB、Telegram
• DDD taiwan： FB、LINE群、Telegram
• Will 保哥的技術交流中心： FB、LINE群
• 水球軟體學院：FB、Discord
• Abp.io：.NET生態系底下學習DDD的一個好的框架