WebConf 2024 遊記

alexianalexian
2025-01-07
前端開發

前言

去年從我司褥到 Modern Web Conference 的票(去年的記錄請看 Modern Web Conference 2023 觀後感 )今年打算再捲土重來,結果今年 MWC 沒辦,於是找到年度的最後一個週末,迎來台灣 2024 最後一檔網站應用開發的研討會 WebConf 2024,感謝佛心我司提供的贊助票券,讓我可以在 2024 得到最後成長機會,觀摩大神們的分享。

趨勢關鍵字:AI 時代應該… & 整合 AI

2023 年作為 AI 起飛的一年,新創和大企業為了創佔市場,許多 AI 工具推陳出新,以致人們在生活中已經更熟悉習慣使用各種 AI 的工具,諸如用於吸收新知、概念發想常用的 ChatGPT、Claude 等對話型生成式 AI,軟體開發常用的 Copilot,AI 整合開發工具 v0 、cursor 等,可以說 AI 與日常生活已經密不可分。

而作為產品開發人,自然會開始考慮把 AI 整入進產品之中,那麼如何規劃、實作 AI 相關的功能就變得十分重要;而且 AI 工具的普及,也讓工程師、PM、Design 反思在 AI 世代下提供予人的價值外,如何透過 AI 工具的輔助,讓自己能創造更多的價值。

用 AI 做產品要注意什麼?

在 2023 MWC 中,較常提到的主題較偏向「如何」使用 AI 相關的工具,諸如怎麼使用 Copilot,如何問 ChatGPT 得到想要的答案。經過熱烈的發展,今年的 WebConf 則有更多的主題聚焦在你可以使用這些 AI 工具做什麼,以及如何在現有產品中使用 AI 進行整合。

要知道 AI 的產出往往不是百分百可控,有時可能產生幻覺(illusion),而不可控和自動化其實是有衝突的,因此掌握 AI 與功能的平衡需要深度的研究。

相對 AI 時代的軟實力

除了分享 AI 可以做什麼的議程外,也有一些相對有主題圍繞在「有什麼是 AI 不能取代的」的議程在其中,例如講者們有提到如何利用 AI 來提升產品開發效率,同時也強調軟體工程師需要具備的商業思維、架構能力,以及如何在與 AI 協作的過程中保持自己的競爭力,這些都是單純依賴 AI 工具無法取代的關鍵能力。

關於 AI 時代下的議程

  • 個人專案到產品:善用 AI 工具打造可盈利產品 - 王鵬傑 PJ Wang
  • 產品 AI 整合路徑:分階段為現有產品找到最佳 AI 整合方案 - 林威宇
  • AI、Data 與 Web,跨領域的資料科學工作者之路 - 維元
  • AI+商業思維:軟體工程師如何擁抱趨勢,提升職場價值 - 游舒帆
  • 在 AI 時代如何成為資深工程師? - Mosky
  • 用 AI 幫助開發 Apple Watch App 實戰分享 - 海馬
  • DevOps 與 GenAI:在人工智慧時代的未來之路 - 邱宏瑋

關於前端的發展 - 穩步前進

小弟作為一個前端仔,相對更在意前端相關的議程,但不得不說與 AI 的火熱程度相比,本年度針對前端項目的議程主題相對保守,但這並不代表前端沒有任何發展,作為前端框架三本柱的 React、Vue 與 Angular,都各個其專家介紹該框架近期的發展:

React v19

剛發佈的 v19 版本,新的 use hook 對元件初始化需要非同步載入資源的畫面處理十分有幫助;而正在 beta 中、即將登場的 react compiler 對優化 React 效能也十分讓人期待。之前在社群鬧得沸沸揚揚的 Server Component 也穩定,就看它能否對前端掀起一股新革命。

Vue

我對 Vue 的記憶停留在 Vue 2 的,對於 Vue 3 以及之後的發展相對陌生,但對其想要參考 svelte、solid.js 新推出的前端 framework,建構了擺脫 virtual DOM ,改為直接操作 DOM 元素的 **vue-vapor** 感到相當有趣,畢竟 virtual DOM 誕生的情境是為了解決 DOM 更新的成本,但現代瀏覽器操作 DOM 的性能已經有極大的優化,反而複雜的 virtual DOM 計算更可能導致效能瓶項,因此我對其後續的發展十分期待。

Angular

Angular 作為前端框架的完整性非常高,也因此較少突破性的功能更新,也就較少受到注目和討論;前陣子較常聽聞的是 Singal 的推出,改善了其狀態更新與同步的逅病。另外還有講者提及的新語法糖、Standalone Components 等對 DX 的提升,讓開發者更願意嘗試使用 Angular。

其它前端的發展

今年有幸看到 Vue、Vite 和 Nuxt 的核心團隊成員 Anthony Fu 的分享,其主題 eslint v9 的重大更新,其最大的突破是配置檔案的更新,可以使用 ESM 的方式建立,讓其更易理解與組合。

前端技能相關的議程

  • 有限狀態機與 RxJS - 奶綠茶
  • 十年回首:React 的過去、現在與未來發展 - Zet
  • ESLint One for All Made Easy - Anthony Fu
  • 當 Vue 與 View 分手之後⋯ - Kuro Hsu

後記 & 其他高手們

除了以上小弟特別關注的項目,活動中當然還有囊括前後端、DevOps、UIUX、PM、工程師的自我修養等主題分享;場外也有贊助廠商攤位推廣活動送小禮物,讓小弟除了專業知識外,還可以再褥一波羊毛,另外豐盛的午餐便當、下午提供小點心、加上沁爽冰涼的肥宅快樂水,讓身心靈都得到莫大的滿足。

今年的講者中讓人印象深刻的,還有 10 歲的海馬同學,其講述使用 AI 開發 Apple Watch 記帳軟體的經驗,作為步入 30 的大叔來說,感受到自己越來越老了。

對於一年沒參與這種盛會的我,這次的收穫實在太多了,也再次謝謝我司 Shopline 讓我又有機會參與這種開發者盛會,希望明年也有機會拿到公關票(嘻。

(近期我司前端有開缺,有興趣瞭解可以聯絡我歐。)


下一篇

在中大型企業下微前端的實現與挑戰


Alex Ian
Alex Ian

ReactJS, VueJS 畫畫/寫作/前端開發

Alex Ian
Alex Ian

ReactJS, VueJS 畫畫/寫作/前端開發


共29篇文章
文章分類
  • 前端開發14
  • JavaScript7
  • 那些前端開發應該要知道的小事5
  • Gatsby.js3
  • ChromeExtension2
  • NetlifyCMS2
  • 生產力工具2
  • 關於我1
  • 非Coding1
  • Svelte1
  • raycast1
  • toolRecommend1
  • productivity1
  • MutationObserver1
  • observer pattern1
  • 開發效率1
  • will-change1
  • GitHubCopilot1
  • 生產力1
  • ChatGPT1
  • AI1
  • Copilot1
  • WebAssembly1
  • SEO1
  • GoogleSearchConsole1
  • react1
  • applescript1
  • 閱讀1
  • css1
  • grid1
  • micro-frontend1

Build with GatsbyJS and React 18.2.0. Hosted on Netlify.

The original code is open source and available at calpa/gatsby-starter-calpa-blog

Copyright ©AlexIan's blog 2025.

  1. 從頭開始上架 Chrome extension

    上回提到我們在本地端建好一個開發版本的 Chrome …
  2. Gatsby 部落格更新記錄 1.0

    首先把 Blog 連結貼在最前面:https://alex-ian.me/ 許多工程師 …
  3. Debounce & Throttle - 那些前端開發應該要知道的小事(一)

    前言 也許一開始接觸前端開發的新手們,都有使 …
  4. 使用 GitHub Copilot 一個月心得

    後悔自己為何沒有早點課金 在 Modern Web Conference 2023 觀後感 …
  5. 什麼是 Headless CMS?以探索 Netlify CMS 為例

    小弟的部落格使用 Gatsby.js 框架來架設,作為一個靜 …
  6. Modern Web Conference 2023 觀後感

    https://modernweb.tw/ 前言 Modern Web Conference (MWC) 作為每年度經典的網頁開 …
  7. 什麼是語法糖(Syntactic sugar)? - 2024 你要知道的 JS 語法糖 🍭

    語法糖能吃嗎? 在算數學時,不知道你什麼時候開 …
  8. 閉包 - 那些前端開發應該要知道的小事(三)

    前言 開始這個系列的原因,是因為雖然在程式中 …
  9. Raycast — Mac 提升工作效率的啟動工具

    Mac 的使用者,應該對 Spotlight 這個系統預設的啟動工具 …
  10. 使用 Notion 管理我的年度目標 暨 2023 回顧 & 2024 展望

    都進入 2024 才來展望 想要成為流量的奴隸,自然要 …
  11. 慢半拍來初嚐 Svelte

    Svelte 都出來兩年多的框架現在才來玩,有夠慢半拍 …
  12. 從頭開始學習開發 Chrome extension (v3 版本)

    Chrome extension 經歷過 v1, v2 後,來到了 v3,雖然曾小量接觸 v2 …
  13. 留言簿

    歡迎留言
  14. addEventListener的第三個參數 - 那些前端開發應該要知道的小事(二)

    前言 開始這個系列的原因,是因為雖然在程式中 …
  15. 在中大型企業下微前端的實現與挑戰

    我們先聊工程面,人的部分先不要 小弟任職前端 …
  16. will-change — 那些前端開發應該要知道的小事(七)

    你要做動畫你要先說啊 前端開發少不免會需要 …
  17. 關於我

    關於我 我是Alex Ian,是個小小的前端工程師,出來工 …
  18. 開發效率提升 - 操作鍵盤 & 快捷鍵篇

    我國中的電腦課,會教導學生倉頡和速成輸入法 …
  19. macbook-pro(retina) late2012 換電池記錄

    這篇文章其實與Coding無關,主要是記錄mbp換電池的 …
  20. polyfill是什麼?

    人在江湖,身不由己,在接案的過程中,總有一些你 …
所有結果