前言

很久沒參加 conference 了，而這次剛好有機會參加 Modern Web 2018 並且擔任講者之一，趁機把與會的心得記錄下來並且簡單筆記一下我有在聽的議程的心得。

由於這篇只是個人簡短的筆記以及心得，如果想看完整議程的可以到這裡，或如果想看更完整的紀錄，今年也有大家在 HackMD 上寫的共筆：https://hackmd.io/c/MW18

How We Ended Up With Electron - Felix Rieseberg

講者來自於 Slack，當初沒仔細看介紹原本以為他要講 Electron 在 Slack 內應用碰到的坑之類的，但後來講的內容就是很基本的 Electron 介紹以及帶來簡單的 live demo，利用 Monaco Editor 做出一個很簡單的 Editor 並且示範如何打包成可執行檔。

如果是之前沒碰過 Electron 的人應該會滿喜歡這場的，是不錯的入門介紹。

我為什麼選擇 Vue.js - 趙錦江 (勾三股四)

來自阿里雲的講者，同時也是 Vue.js 的團隊成員之一。

這場是我第一天最喜歡的一場議程，作者從以前工作時就碰到的一個問題開始講，找了幾種現有的解決方法都不太滿意，後來用一些其他技術寫了一個簡單的 library，後來某天看到 Vue.js 的核心概念跟他很像，有種不謀而合的感覺，從此以後就決定要使用 Vue 了（那時候才 2013 年，Vue 的版本是 v0.10）

後來跟同事推廣這套，但他們不買單，覺得這東西太新而且又不是什麼大公司做的，不願意去用它。但儘管如此，作者還是用額外的時間在嘗試 Vue.js，但一開始也碰到一些程式碼的組織問題（template 放一起、CSS 放一起），後來發現 vue-loader 又再次不謀而合的解決了這個問題。

後來到了 2015，Vue 的聲勢開始慢慢壯大，而 React Native 的出現也讓講者思考起 Vue Native 的可能性，後來在公司內嘗試了一個解決方案並且被公司採用，終於在光棍節正式運用在天貓首頁，沒錯，就是 Weex。

而一路走來的過程中講者也發現有時候問題並不在工具本身，而在生態圈。你要有好的社群、好的文件才能把整個生態系建立起來，所以後來就比較專注在這個方向。

從講者的這段歷程可以看見 Vue.js 的發展，從一個小小的 library 變到現在成為三大前端框架之一，若是一路跟著走來的人一定很感動。最後也講了一些 Vue 之後可能的發展以及 3.0 正在討論之中，有在關注 Vue 的朋友可以留意一下。

WebAssembly 在全民直播的應用 - 趙洋 (Eros Zhao)

之前有做過一點直播（還寫了一點筆記：直播協議 hls 筆記）所以對這場特別有興趣，聽了之後果真沒失望。

一開始會用到 WebAssembly 是因為上面問說能不能支援在 WeChat 的 Webview 播放？但經過調查之後發現 WeChat 只支援 hls 格式，最短也會有 10 秒鐘的延遲，對直播來說是沒辦法接受的，而 MSE 也無法使用，可以切入的兩個點是 WebGL 跟 WebAudio API 都有支持，所以就圍繞著這個切入點來想解決辦法，看看有沒有可能在 JavaScript 這層自己解碼然後用上述提到的兩個東西一個播放畫面一個播放聲音。

後來找到一套 library 叫做：jsmpeg，發現應該是可以達成的，但仍然有很多東西有自己來，例如說 H264 的編解碼器在 JavaScript 上面沒有成熟的解決方案以及可能會有效能問題，這時候就是 WebAssembly 登場的時候了，後來就直接拿 C/C++ 的來改一改 compile 成 WebAssembly。

雖然我沒什麼在關注 WebAssembly，不過我覺得以後用到的場合應該會越來越多（不過應該也不會多到哪裡去），大概就像寫 Android 跟 JNI 的關係差不多吧，你碰到一些地方很需要效能或是要更有安全性一點的話，就用 JNI 來寫 C 的 code，我自己對 WebAssembly 的感覺也是這樣。

A Modern Web Architecture for (GDPR) Compliance - 曾義峰 (Ant)

介紹了一下 GDPR 裡面到底有哪些條款以及企業應該如何遵守，其實對 GDPR 也有很多不同面向的討論，例如說有些專家覺得 GDPR 的法規太複雜，根本沒有企業能夠 100% 遵守，還有人推出了幫忙 block 來自歐盟的 IP 的服務，滿有趣的（但沒什麼用就是了，GDPR 不僅限於歐盟 IP）。

之後有講到在 DevOps 裡面加上 Security 的元素，變成 SecDevOps，不過後面這整段我沒有聽得很懂就是了，對 DevOps 這塊不太熟悉。總之在這場演講裡面學到滿多跟 GDPR 有關的東西，滿有趣的。

遺留代碼經濟學 - Terry Yin

我覺得這場的講者口條超好然後也講得很有趣，主要是在講 Legacy code 以及在重構時應該注意的事項。裡面有提到一句經典名言：「高內聚，低耦合」，講者說記得臨死前要把這句話傳給孫子。

但有些人一學到這些東西之後就走火入魔了，不管是什麼都有開始解耦，覺得這樣很帥，但在高內聚跟低耦合之中，比較重要的其實是前者。因為沒有高內聚的話你東西分散四處很難 debug，可是沒有解耦的話頂多就東西混在一起，你要拆開的時候還是隨時都可以拆開，相較之下會比較容易一點。

相信大家都有跟 Legacy code 奮戰的一些經驗，這次的 Modern web 除了這場以外也有別的是在討論類似的議題。

傳統如何翻新，用Serverless新架構改造傳統資料分析ETL：以利用 AWS Lambda Batch 為例 - 楊立偉 (Bryan Yang)

這場大爆滿，兩側走道都站滿了人，我對這領域很陌生，是誤打誤撞之下才聽到這一場，不過也覺得這場很棒。

要解決的問題其實就是要提供給內部使用者一個介面，讓他們可以輸入 query，接著把符合的資料從 AWS 轉到 GCP 上面。聽著來很容易，但仔細一個一個步驟分析下來就會發現其實很多細節要注意。

例如說你要有一個前端做介面、一個後端寫 Server，還要有一個人負責監控 Server 的狀況，然後把資料轉過去也因為格式不互通的關係需要額外再做轉檔，而且每一個步驟都要監控是否成功，要把結果再回傳給 user。

後來講者在 AWS 上面尋找可以運用的服務，最後成功用一大堆 AWS 的服務把這整個流程串起來，是一個 Serverless 的解決方案。例如說前端的部分直接讓使用者用 postman 打 API，再用 API gateway 接資料後用 lambda 處理，用 Batch 去開機器轉檔，轉完之後再去 trigger Google 的 Cloud function 把資料搬進去，途中都用 CloudWatch 來監控並且用 slack 回傳結果。

看起來滿方便的但其實也有缺點，那就是有很多元件，你要了解每一個 service 的 input、output 以及使用方法，其實要花很多時間，再來語言是 python 跟 node.js 混用，因為有些不支援 python。發生問題的時候也很難 debug 因為太多環節了。

From Traditional Web to Modern Web - 蕭晊莛 (Neo)

這場也是在講如何跟 Legacy code 奮戰。起因是每次大家去一些 conf 之後都會看到很多新潮的東西，可是回到公司只能面對十年前的技術棧，在 conf 上面學到的完全都用不上，所以講者就要想辦法來解決這個問題。

其實要引用新的東西不用完全引用，一次就全部換掉，而是可以慢慢來。講者簡單示範了用 Vue 來實作 PM 交代的新功能，順便把相關的程式碼換了一下，這樣慢慢把程式碼換掉一方面可以保證穩定性，另一方面也可以引入新的技術。

不過我自己覺得可能換到一半的時候最麻煩，一半新的一半舊的，可以預期到應該會有一些問題。而在置換的過程中其實就有碰到問題，例如說 jQuery 跟 Vue 在某些功能上不太相容，例如說 jQuery 可能會把你的 DOM 刪掉之類的，這方面也要特別注意。

用 CSS 玩出無限可能！ - 卓承賢 (AarOn)

這場超有趣的。簡單來說就是用 CSS 來畫畫，用一些很基本的屬性搭配組合就可以畫出很厲害的東西。例如說講者畫了喬巴還畫了一碗拉麵。

雖然說背後原理應該通了就不難，但我覺得對工程師來說最難的應該是「到底要畫什麼」，同樣是一碗拉麵，我相信純工程師跟有設計背景的工程師畫出來的東西質感也是差很多，例如說可能就不會考慮到陰影之類的。

總之是一場很有趣的議程，有興趣的也可以參考看看講者在 codepen 上面的作品。

從平台、媒體到數據公司：PIXNET 的技術架構演進 - 林瑞男 (Jnlin)

這場就是在講 PIXNET 的歷史，相對於其他場其實會比較無聊一點，技術的含量也會比較低。比起技術上面的架構，談到組織上面的架構比較多。

在一開頭時講者就提供了一個網站開放大家提問，最高票的兩個問題是：

1. 為什麼廣告這麼多
2. 對黑帽 SEO 發布假文章有沒有什麼應對措施？

每次只要有 PIXNET 的場合就會被問到這些問題，他們應該也有點習慣了。畢竟想到 PIXNEXT，大家想到的第一件事應該就是蓋板廣告。

Modern Talk 閃電秀

閃電秀一直都是一個又歡樂又有趣的單元，今年也不例外。不過講的人有點多，我就挑一個我印象最深刻的。

來自趨勢科技的山姆大叔給的講題：GraphQL in 5 mins，主要是因為很多人雖然都對 GraphQL 有興趣，但最麻煩的一點還是原來那一大堆的 RESTful API 要怎麼辦？其實可以先用一些技巧讓前端用 GraphQL，可是後端還是 RESTful API，雖然感覺很髒但也沒辦法，不失為一個解決方法。

口條很好也很幽默，有致敬第一天的講者還有引經據典，沒聽到這場的真的可惜，

SOLO - 李維翰(Paul Li)

Modern Web 的壓軸。

大概兩三年前在 JSDC 還是哪邊就有聽過 Paul 的演講，真的是很有渲染力以及個人風格強烈的演說。這次講的題目是他最近一直在研究的 AMP，其實我到那之前都一直以為 AMP 就是一個你用了之後就可以在 Google 搜尋結果上面排名變高然後會有比較原生的體驗。

但聽了一些東西之後發現這只是 AMP 的其中一個面向，其實他可以做到的更多更廣，應該要找個時間來好好研究一下 AMP。

這場介紹了滿多 AMP 相關的應用以及如何用現有的 AMP 元件組合出其他功能，但其實我印象最深刻的反而跟 AMP 無關，有一個我覺得很酷的就是 input 的 suggestion 那個功能，平常大家應該是用 JavaScript 來控制要不要顯示 suggestion 的選單，這次學到了居然可以用 CSS 來控制！

input:placeholder-shown ~ .suggestion {
  display: none;
}

如果 placeholder 有顯示的話就代表 input 是空的，就把 suggestion 用 CSS 隱藏掉，高招！

輕鬆應付複雜的非同步操作：RxJS Redux Observable - 胡立 (huli)

這我自己的議程所以放最後講。

在前一天我有先把簡報放上去 Facebook 的社團，因為我以前在聽 conf 的時候都很希望講者能夠在一開始就把簡報檔的連結公布，不然有些比較小的圖片其實底下的人根本看不清楚，因為距離實在是太遠。

有些人沒辦法這樣做是因為簡報裡面有一些梗，提早破梗就不有趣了，不過我的簡報沒什麼梗所以沒差，就在演講前一天公布了，也可以順便讓大家自己看看對這場議程有沒有興趣。

事前大概有演練個兩三次，看一下自己要講什麼以及抓一下時間，但真的站上台就是腦子一片空白，其實講什麼都是靠直覺的，沒什麼餘力思考，畢竟你一但停止講話了，就整個會場都沒聲音了，不過適時的留白應該還是 OK。

時間掌握的話我覺得算是還行，就後半部分可能有一點點趕，但結束的時候是剛好 40 分鐘左右，我有把我想講的大概都傳達出來。會後也有一些聽眾來找我交流，之後有機會的話可以把這個簡報變成幾篇系列文好好講一下這個主題，或是我有在想乾脆直接用「如何用 Redux 處理 API」去開一堂付費的線上課程，畢竟影片講的還是會比較清楚一點。

不過一切都還在規劃階段啦，如果有興趣的話也歡迎留言讓我知道。

與會心得與總結

這是我第一次參加 Modern Web，其實我很少參加 conf，上一次參加的可能是 2015 的 JSDC 跟不知道什麼時候的 COSCUP，所以第一點讓我覺得不一樣的是場地，我原本預期的場地是像中研院那樣每個人都有桌子都有插座那種，但這次只有前排有，後排都是額外再放上去的椅子然後沒有桌子。

以場地來說，其實比較像一些大公司辦的活動例如說 AWS Summit 之類的，不過我也沒有覺得這個場地有問題，因為中研院的場地可能已經是頂級的了，所以其他場地沒有那麼好我可以理解。

再來是會場外面有零食可以拿，這點不錯，但比較奇怪的一點是拿了之後可以帶到裡面去吃，沒記錯的話好像很多研討會的場地裡面都是禁止飲食的，如果要吃東西的話要到外面來。我自己覺得台上在講話然後台下在吃零食其實滿奇怪的（有種看電影配爆米花的感覺），而且咀嚼聲跟一些開汽水的聲音都會影響到別人。除此之外我覺得沒什麼問題，然後講者講完之後會到外面固定區域坐著這一點很棒，因為你有問題的話就可以知道講者在哪邊然後直接去找他。

總之整體的感覺都不錯，很多講題我也都滿喜歡的，祝 Modern Web 一年比一年順利！

關於作者：
@huli 野生工程師，相信分享與交流能讓世界變得更美好