-
2021 年 02 月 09 日
其實 SSR CSR MPA SPA PWA AMP 在最一開始學習時就接觸到了，但在最近研究工作室架構要怎開時，
除了 黑暗執行續 - 輕前端 這種架構可用外，
才發現近年流行的 SPA 前端框架，其實也有 SSR+SPA 混和，針對 SEO / 首頁渲染 所做的 Solution => 雙端渲染
除了這以外發現水真的蠻深的，像是 AG UI 庫 / .NET 設計原理 也都需花時間整理學習，
最好的方式就是趕快把 GTD 基礎先出來，後續需補強的就藉由此基礎再往上架，反正後台架構基本上 SPA 就夠應付了...
-
2021 年 02 月 05 日
如何不編譯直接在前端瀏覽器使用Vue.js插件？以vue-slim-tabs為例
終於了解其實前端大致上分為 cdn 與 node.js Command 兩種流派，
通常各大框架都走 node.js Command
指令產生的方式來處理框架系統建立，而 vue 主打漸進式，可以用 cdn import export 方式
人工引入，但非主流且人工引入的狀態下，蠻多坑的，也不是每種 函式庫都支援，人工引入與安裝，
如需使用 .vue 檔 module / component 化，還需額外載入 vue-loader cdn 套件，進行即時轉譯效能或有落差
再者目前前端開發似乎都是 使用 UI 庫 搭配少量客製化 Component ，
似乎應該專注於商業邏輯，而不是在這邊搞腳手架，最近幫老弟看別人 Vue 光搞環境架設專案 Webpack,lib version etc... 就搞超久最後還沒架起來
目前考慮完成此專案 不使用Vue-cli的情況下，只使用Vue.js、Vue-router實現單頁應用，
了解引入與不使用 .vue 模組化後，方便以後前台使用此架構建置，
後台就用 angular2+ 寫，專注在研究各大好用的 AG UI 庫，與 Component 客製化，MVP 把時間花值得的地方。
-
2021 年 01 月 27 日
在研究到 Vue3 ( 輕前端可能需要進階到 cdn vue router 與 vue vuex ) 且準備 figma 再繼續架構時發現 ...
原來 Google Keep 非常符合 GTD 的使用方式 ... GTD 參考
目前就差在 G Keep 似乎在協作上比較不像一般的，看板模式協作，比較偏向個人 GTD，
且對於後續其他功能連動的擴充會有很大的問題，也是等於要重新開發，
所以 MVP 模式也必須考量擴充，應該是趕快快速開發符合最簡需求的工具，
而了解了 架站相關資訊 後，確定 .NET CORE API + heroku 要，
但目前這個 vue + firebase 優先開發 mvp ，後續有機會在連動 angular 之類的。
studio 架構 => 能串 API 就串，能用函式庫就用，但必須一體且可以整合
- GTD
- CMS
- Calendar
- CRM
-
2020 年 12 月 14 日
先前想依照 OKR KPI 做的管理工具，目前看來是失敗了，
看起來還是要利用框架優先想好資料結構才便於存取與渲染，
當存取渲染後才去想功能，整個順序反了，
目前要優先評估 Firebase 還是 GoogleSheet 較適合開發此 GTD 工具，
並先想好架構在開發以免碰上相同問題，改由後來接觸到感覺更適合的管理方法 GTD。
在架構上一開始覺得可以使用 vue + firebase + github page 但受到後續 studio 影響，
原本在上面架構與 angular + .net core + heroku 抉擇，想說要不要統一就好省事，
後來接觸到以下心得 順道接續之前幫老弟製作的專案 Try-Swagger-RESTfulAPI 將一切都解釋清楚
以往沒有一堆前端框架時引入函式庫只要 script src 即可，
到後來一堆前端框架與函式庫，也衍生了 NPM Webpack cli SASS hexo etc... 這些預先處理的工具，
可以參考這兩篇文章了解生態演變
詳細了解後才發現，其實以上就跟後端 bat 批次檔案，根本大同小異...
其實就是 cmd 利用命令，讓程式把 某種語言 e.g. razor typescript jsx etc... 編譯成 瀏覽器看得懂的 html5 (html / css /js /webassembly) 如此而已，
所以在後端 ( 或是 angular ) 其實架構較穩定下 ( 版本不會隨意改變且通常向低版本相容 )，
感覺前端就應該只採用輕前端就好，盡量不要耦合一堆其他技術避免技術棧拉得很高，難維護也增加開發難度，
那什麼是 Kuro Hsu 、 黑暗執行緒 所提及之 輕前端 ( 其實就是單純用 script 引入之套件 )
所以 vue 漸進式框架 其實就只要採用 script 引入 能用到的功能即可，
其餘就轉 angular 利用 ng 的一致性、向下兼容 這些就由 google 開發團隊煩惱，我們顧商業邏輯即可...
https://forum.quasar-framework.org/topic/5878/need-advice-angular-or-vue-and-quasar/6
根據以上我覺得可以很明顯的發現到，其實要做 站台 / 平台 基本上就要全包，很少不包的，那應該就依照以下方式起架構即可
- 小工具 -> script 引入的 vue (現行版本 v3)
- 站台 / 平台 -> angular + .net core + etc...
以上...
這次要使用的是 firebase NoSql ，所以就不使用以下工具了。
https://www.itread01.com/hklxhkihk.html
再直接構想資料結構時，必須真的了解 Domain Knowhow 與 Use case 才有利設計出真正符合需求的架構
https://www.managertoday.com.tw/articles/view/55903
https://www.managertoday.com.tw/articles/view/55927
與愷蒂討論過後發現，以 Cinda 目前工程師的協作方式來看，就很符合 kiss 與 gtd ，
但因為愷蒂目前是 辣咖 的實習生，有接觸到他們的管理方式，主要是自己的後台串接各大教學平台 api ( 也可能是利用爬蟲 )，
收集留言回復，在利用他們自己的後台回復(tag)，配合 googlesheet / Slack，同時擴大社群與管理的影響力，這點也是蠻棒的，
愷蒂評估自身後發現，並不是他不認真，而是我在安排工作給他的狀況下無法得知他當禮拜的行程 ( 是否有課或考試或... )，
而約束力也不像 Cinda / 辣咖 這麼夠，在這種狀況下，管理工具要是不能達到 kiss 肯定會更降低使用率，
且也要符合後續延展功能與目前強烈需要快速開發出 MVP 的架構。
- KISS ( Keep It Simple, Stupid )
- GTD 功能 ( 收集箱 / ToDoList ) / Tag 分類
- 需有行程檢視與自動排除功能 Calendar
- 架構需 MVP 且能夠漸進延展功能
去完 wanhon 結案報告完後，發現相較於 API 圖 (也是需要但可能可以藉由 swagger、gRPC、GraphQL)
或是一些 架構流程圖 甚至是開程式講解，都不會比 Prototype、Wireframe 來的直觀，
所以優先看完下篇完成 figma 後，在接續實作。
( 到時出去接也是需要有 figma 與客戶談完後才發包給專業設計師，看起來比較可行 figma 就像設計圖 )
參考上篇趨勢，最後選定 Vue3 加上 Firebase
- Vue3 https://github.com/johch3n611u/Side-Project-Getting-Things-Done/blob/main/Vue3Example.md
- Firebase https://github.com/johch3n611u/Side-Project-Firebase-to-WebDatabase/blob/main/README.md
- ES6: import module from URL => download & import ...
- https://stackoverflow.com/questions/44877904/how-do-you-import-a-javascript-package-from-a-cdn-script-tag-in-react
- bundle js https://github.com/johch3n611u/Side-Project-Getting-Things-Done/blob/main/assets/config/firebasebundle.js
- Login Component
- x-template https://book.vue.tw/CH2/2-1-components.html#%E9%80%8F%E9%81%8E-x-template-%E5%B0%81%E8%A3%9D%E6%A8%A1%E6%9D%BF
https://www.managertoday.com.tw/articles/view/55903
...