回顧我的 2023 開發者生涯:前端、後端、雲端、到 Web3

2023 年,我回到香港,從全棧工程師,行過死蔭幽谷,現在成爲系統架構師。能夠在 Web3 的世界自由自在地行走,十分感激當初的百般試煉。現在,就讓我回顧這一年我採用的前端後端雲端 Web3 方案,希望可以拋磚引玉

前端開發領域一直都處於不斷變化的前緣,2023 年也同樣如此。我一直追求最新的技術趨勢和工具,以確保我能夠在這個競爭激烈的領域中保持競爭力。在不斷追求創新和學習的過程中,我深深體會到前端技術的重要性。

Vue.js
Vue.js

React.js、Vue.js 和 Astro 是我最喜愛的前端技術之一,它們各自具有獨特的優勢和特點,能夠應對現代 Web 開發中的各種挑戰。React.js 提供了一個極為靈活且高效的組件化開發模型,Vue.js 則以其簡潔和優雅的語法贏得了眾多開發者的喜愛。而 Astro 則以其卓越的性能和開發速度脫穎而出,為我們帶來了嶄新的開發方式。

在這個快速發展的前端世界中,持續學習和適應是至關重要的,而我對這些前端技術的熱情正是我不斷前進的動力。讓我們繼續深入探討這些令人振奮的技術,看看它們如何塑造著 Web 開發的未來。

Astro

當談到現代前端開發技術時,Astro 無疑是一個令人振奮的選擇。Astro 是一個全新的靜態網站生成器,它以其卓越的性能和開發速度在開發者社區中嶄露頭角。讓我們深入探討一下我對 Astro 的喜愛以及它在 2023 年前端開發中的關鍵地位。

Astro 的獨特之處在於其靜態渲染(Static Rendering)和動態渲染(Dynamic Rendering)的結合,這種結合為開發者提供了卓越的彈性和性能。當我們需要快速呈現靜態內容時,Astro 可以在構建時生成高度優化的靜態 HTML 頁面,從而實現極快的加載速度。然而,當我們需要動態內容時,Astro 可以在用戶端以高效的方式載入和更新數據,提供無縫的用戶體驗。

一個令人印象深刻的特點是,Astro 支援多種前端框架,包括 React、Vue 和 Svelte。這意味著開發者可以根據自己的偏好和團隊的技術堆棧來選擇最合適的框架,而無需擔心性能問題。如果你熟悉 React,你可以在 Astro 中使用 React;如果你更喜歡 Vue,你也可以輕鬆地導入 Vue 組件。這種靈活性使得 Astro 成為一個無可比擬的工具,可以適應各種項目需求。

Astro 的開發速度也是令人驚嘆的。它採用了開箱即用的原則,允許開發者專注於編寫代碼而不是配置。擁有智能的代碼拆分和按需加載,Astro 可以在保持代碼輕量的同時實現極速的構建,這對於項目的開發和部署時間至關重要。

對於 SEO 來說,Astro 也是一個強大的工具。由於它生成的是靜態 HTML,搜索引擎能夠輕鬆索引我們的內容,從而提高了搜索可見性。這使得我們的網站在搜索結果中更容易被找到,有助於吸引更多的流量和用戶。

Astro 不僅僅是一個前端框架,它更像是一個革命,改變了我們構建網站的方式。它簡化了開發流程,提供了卓越的性能,並為開發者提供了更多的自由度。在 2023 年,我將繼續深入探索和運用 Astro,以創建出更出色的 Web 項目,實現更快的加載速度、更好的用戶體驗和更高的搜索可見性。

在不久前的八月,我寫了一篇名為 《重構我的網站:Astro 與 Vue 重構心得分享》,詳細分享了我如何運用 Astro 和 Vue 來重構我的網站,以及在這個過程中的心得體會。

整合了 Astro 與 Vue,我獲得了一股嶄新的動力與能量。在這次的網站重寫過程中,我深刻感受到這兩者結合所帶來的卓越效果。Astro 的靜態網站生成能力與 Vue 的動態組件融合在一起,為我的專案注入了新的生命。這種組合的優點不僅體現在用戶體驗的提升,同時也反映在開發效率的提高。而最令我感激的是,這種結合彷彿践行了 Steve Jobs 所說的「Connecting the dots」,將不同的技術點連接在一起,產生了出乎意料的效果和能量。2023-08-13 Calpa

如果你對 Astro 抱有濃厚的興趣,或者想深入了解我在實際專案中是如何應用這個令人振奮的技術的,不妨前往閱讀 這篇文章,或許你會找到一些對你有所啟發的內容。

Mobile Applications

當談到手機應用程序開發時,React Native 是一個引人注目的技術。特別是在我年初加入一家高度專注於開發的香港小型 Vendor 公司時,React Native 成為了我工作中的一個重要技術選擇。React Native 為我們提供了一個獨特的優勢,允許我們使用相同的代碼庫來構建跨平台的移動應用,同時保持極高的性能和用戶體驗。

在這家公司的經歷中,我深入瞭解了 React Native 的強大功能和優勢。它讓我們可以使用 React 框架的組件化開發方法,以相對輕鬆的方式構建應用程序的界面。同時,React Native 還充分利用了 JavaScript 和 React 的生態系統,這使我們能夠更快速地開發應用程序,同時確保應用程序在 iOS 和 Android 等多個平台上運行順暢。

React Native 還提供了豐富的庫和第三方插件,這些插件能夠加速開發過程,並提供額外的功能。這使我們能夠在應用程序中輕鬆實現複雜的功能,例如地圖集成、社交分享和通知系統。

React Navigation

React Navigation Homepage
React Navigation Homepage

我發現 React Navigation 在開發跨平台應用中發揮了重要作用。它允許我們輕鬆地創建堆疊導航、底部選項卡、抽屜式菜單和其他常見的應用程序導航模式,而不需要繁瑣的自定義代碼。React Navigation 提供了一個清晰而靈活的 API,使我們能夠定制應用程序的導航外觀和行為,以滿足特定項目的需求。

除此之外,React Navigation 還提供了對深度鏈接、按需加載、狀態管理集成等高級功能的支持。這些功能使我們能夠更好地處理複雜的應用程序路由邏輯,同時保持應用程序的性能和可維護性。

Amazon Web Services

Amazon Web Services Homepage
Amazon Web Services Homepage

AWS(Amazon Web Services)提供了豐富的雲端服務和工具,對前端開發者來說具有重要意義。特別是,AWS Lambda 是一個強大的服務,它對前端開發有著重要的幫助,下面將介紹 AWS 如何支持前端開發,尤其是在 AWS Lambda 方面的應用。

實戰部分

Web Hosting

Route 53 - Cloudfront - S3
Route 53 - Cloudfront - S3

Amazon S3 可以存儲靜態網頁文件,並通過全球性的內容分發網絡(CDN)提供快速的全球訪問速度。

首先,AWS S3 是一個高度可靠和高可用的對象存儲服務,這意味著它非常適合用於托管網站。無論是個人項目還是企業應用程序,我們都可以信賴 AWS S3 來確保我們的網站保持在線並提供高性能。

此外,AWS S3 提供了極大的擴展性,這對於處理高流量的應用程序來說至關重要。我們可以輕鬆地配置 S3 存儲桶以處理大量的訪問請求,而不會影響性能。

AWS S3 靜態網站托管還具有簡單的配置和管理優勢。我們可以輕鬆地將我們的網站文件上傳到 S3 存儲桶中,然後通過設置存儲桶的訪問權限和設置靜態網站主機託管選項來快速設置我們的網站。這一切都可以在 AWS 控制台或通過 AWS CLI 進行完成。

最重要的是,AWS S3 靜態網站托管服務成本效益極高。我們只需支付所使用的存儲和流量費用,無需為伺服器的運維負擔額外的費用。這使得它成為一個理想的選擇,特別是對於個人項目或初創企業來說。

回顧過去

在過去的高強度工作,我面臨極大量的開發需求,這期間我有幸能與三名 Junior 開發者共同協作,共同度過了一個充實的開發階段。這段經歷不僅讓我們團隊更加團結,也讓我學到了很多關於領導和協作的重要教訓。

作為資深開發者,我經常需要將複雜的技術概念傳遞給團隊成員,以確保項目順利進行。這推動我將複雜知識轉化為易懂形式,促進團隊合作,並加強自身學習。本文將分享如何在實際工作中運用費曼學習法,幫助團隊理解複雜技術,實現項目成功。2023-09-03 Calpa

《從「費曼學習法」到團隊的實際應用:促進知識分享與合作》
《從「費曼學習法」到團隊的實際應用:促進知識分享與合作》

我對於費曼學習法的實際應用寫了在博客 《從「費曼學習法」到團隊的實際應用:促進知識分享與合作》

在三個月內,我們成功地從零到一,開發了十套系統,這對於任何團隊來說都是一項巨大的成就。我們將這些系統分為不同的模塊,每個 Junior 開發者負責一個或多個模塊的開發。我則負責領導整個團隊,協調各個模塊之間的集成,並確保項目按計劃推進。

很困難,很辛苦,但是我們捱過去了,也就是百般試煉,我們得以成長,也就是當時我透過「費曼學習法」,幫助團隊成員成長。

AWS CDK Introduction
AWS CDK Introduction

其中一個關鍵的成功因素是我們採用了基於 AWS CDK(Cloud Development Kit)的基礎即代碼(Infrastructure as Code,IaC)方法。這允許我們以編程方式定義和管理我們的基礎架構,包括伺服器、數據庫、網絡配置等。這樣的方法使我們能夠快速構建和部署環境,並在需要時進行擴展。此外,它也提供了一種可重復使用的方式來管理基礎設施,這在我們需要為不同的系統創建相似環境時非常有價值。

這段經歷也讓我更好地理解了領導和協作的重要性。我學到了如何有效地分配任務,提供明確的方向,同時也學會了傾聽團隊成員的意見並給予他們支持。我們的成功不僅來自個人的努力,更來自於我們作為團隊的協作和努力。

這段經歷讓我更加成長,不僅技術方面,也在領導和協作方面。我們成功克服了高強度的開發需求,並通過 CDK + 基礎即代碼方法使我們的項目更具可擴展性和可維護性。這是一個寶貴的經歷,我期待著將這些教訓應用於未來的項目中。

代碼藝術:當代碼變成了文章

作為一名開發者,我一直致力於追求優雅且高效的代碼。然而,我也深深體會到,優雅的代碼不僅僅是高效的運行,還包括了可讀性和可理解性。在這一章中,我將分享我如何將代碼變成了一種藝術,同時也讓代碼成為了文章。

優雅的代碼

對我來說,優雅的代碼不僅僅是能夠正確運行的代碼,還應該具有可讀性和可維護性。這意味著代碼應該使用清晰的命名,遵循一致的風格指南,並且具有適當的註釋,以便其他開發者能夠理解和維護它。

文章般的代碼

為了讓代碼更具可讀性,我常常將其視為一篇文章來編寫。就像寫文章一樣,我會給代碼添加標題(函數名稱或註釋),分段(代碼塊),並使用段落(空行)來組織代碼。這種結構使代碼更容易閱讀和理解,就像閱讀文章一樣。

可讀的代碼即是可理解的代碼

可讀性和可理解性是緊密相關的。當代碼容易閱讀時,它也更容易理解。這就是為什麼我總是注重代碼的可讀性。我使用有意義的變量名稱,避免過於復雜的邏輯,並保持代碼的簡潔性。這樣,不僅我自己能夠理解代碼,而且其他團隊成員也能夠輕松地加入並貢獻。

代碼即文章,文章即代碼

對我來說,代碼和文章之間存在著密切的聯繫。當我編寫代碼時,我像寫文章一樣考慮結構、流暢性和表達能力。我希望我的代碼不僅僅是一堆指令,而是一個故事,能夠清晰地傳達它的目的和邏輯。

總的來說,將代碼視為一種藝術形式,同時也視為文章,可以幫助我寫出更具可讀性和可理解性的代碼。這種方式不僅提高了代碼的質量,還使開發過程更有創造性和滿足感。希望這種代碼藝術的理念能夠激勵更多開發者追求優雅的代碼。

ChatGPT:我的寫作助手

現在來說,ChatGPT 應該無人不知,沒有人沒有用過。它幫助我更輕鬆地寫出高質量的代碼和文章。

代碼生成

ChatGPT 不僅可以理解自然語言,還能夠生成各種編程語言的代碼。當我遇到編程問題或需要寫複雜的代碼時,我可以向 ChatGPT 提問,它會生成幫助我解決問題的代碼片段。這不僅節省了我的時間,還提高了代碼的質量。

文章撰寫

除了代碼生成,ChatGPT 還可以協助我撰寫文章。當我需要寫一篇關於技術趨勢、開發經驗或教程的文章時,我可以向 ChatGPT 提出相關主題的問題,它會生成文章的開頭、主要內容和結尾,我只需要稍微調整和編輯,就能得到一篇高質量的文章。

代碼即文章,文章即代碼

有趣的是,我發現 ChatGPT 不僅能生成優雅的代碼,還能幫助我將代碼轉化為文章。我可以向它提供代碼片段,然後它會幫我生成相應的文章段落,解釋代碼的目的、邏輯和用法。這樣,我可以輕鬆地將我的代碼文檔化,使其更具可讀性和可理解性。

ChatGPT 幫助我寫出高質量的代碼和文章。它不僅節省了我的時間,還提高了我的寫作和編程效率。我相信未來它將在我技術和創作的道路上繼續發揮重要作用。

走進 Web3

隨著區塊鏈技術的快速發展,我也積極參與了 Web3 領域的開發。Web3 是一個分散式的互聯網世界,它基於區塊鏈技術,旨在實現更加安全、透明和去中心化的網絡生態系統。在這個領域,我學習了一些重要的技術,包括 IPFS、Solidity 和 Move。

IPFS:分散式文件存儲

IPFS Home Page
IPFS Home Page

IPFS(InterPlanetary File System)是一個分散式文件存儲協議,它允許我們以分散的方式存儲和共享數據。相比於傳統的中心化服務器,IPFS 使用點對點的方式存儲文件,並且使用內容地址(Content Addressing)來定位數據,這使得數據更加安全和不可篡改。我使用 IPFS 來存儲和分享我的技術文檔、代碼片段和數據,同時也在 Web3 應用程序中使用它來實現分散式數據存儲。

Web3 Storage Home Page
Web3 Storage Home Page

我在使用官方的界面的時候覺得不太好用,所以自己寫了一個前端界面

Solidity:智能合約開發

Solidity
Solidity

Solidity 是一種專為以太坊區塊鏈設計的智能合約語言。我學習了 Solidity 並開始開發智能合約,這些合約可以實現去中心化的應用程序、加密貨幣和數字資產。通過 Solidity,我能夠參與到加密貨幣項目中,設計和實現智能合約,並為去中心化金融生態系統做出貢獻。

Web3 領域為我提供了一個全新的技術世界,讓我能夠參與到分散式互聯網的建設中。IPFS、Solidity 等技術成為我在這個領域的工具,我期待未來能夠繼續深入學習和貢獻。這是一個充滿挑戰和機會的領域,我相信 Web3 將為我們帶來更多驚喜。

展望將來

作為一名技術愛好者,我一直以來都致力於利用各種先進技術和工具來建立優秀的應用程序。我深深感受到前端開發是一個不斷變化的領域,而我的技術堆疊也隨之演變。在我最近的文章中,我探討了一些值得關注的主題,例如 Astro 和 Vue 的整合。這種結合為我的項目帶來了新的生命,同時提高了開發效率。

在技術世界裡,我們經常需要根據現實情況做出決策。這也讓我想起了新加坡的故事,一個從無到有的小島國家,充分展示了決心、堅韌和信念的力量。新加坡的建設是一個不可思議的成就,特別是在缺乏天然資源、內外困境的情況下。李光耀先生不惜一切代價,堅持不懈地建設了這個國家,這是他的信念和原則的體現。

852 Web3 Home Page
852 Web3 Home Page

有幸,九月與 852 Web3 團隊過去新加坡一同參與 TOKEN 2049 會議,見證李光耀先生不惜一切代價都要打造的一片樂土,從前我沒有來過新加坡,但非常感受到當地人的親切感,待客之道,他們分享的生活小事,是曾幾何時的在腦海中的日常。新加坡人的親切和待客之道讓我深受感動,他們的生活方式和價值觀令人印象深刻。這次之旅也讓我更加理解新加坡的成功來自於人民的團結和努力,以及他們對未來的承諾。這次旅行不僅是一次文化體驗,也是一次深受啟發的經歷。

何も捨てることができない人には何も変えることはできないだろう
何も捨てることができない人には何も変えることはできないだろう

新加坡要在沒選擇的現實當中,爲未來創造無限可能,這聽起來很簡單,但是實踐起來很不簡單。從一無所有,到落地生根,到衆人新加坡奮鬥,把握來自世界各地的機遇,完全就是《從零到一》的見證。

不自覺地寫了那麼多,就最後一句話吧

於是耶穌對門徒說:「若有人要跟從我,就當捨己,背起自己的十字架來跟從我。 - 馬太福音 16:24

如果一切的安排都是主所應許的話,就讓我好好地背上屬於我的十字架,在這個充滿挑戰的國度內盡力而爲吧!

是時候上路,我又要出發了。

關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。