EP13 - 前端工程師怎麼跟設計師工作
上禮拜社群內辦了兩個分享會
分別是Astro最近3.0的更新讓大家很有興趣尤其是它完美地運用了View Transition API
讓畫面切換在絲滑的動畫中完成真的感覺很棒 把手機app的體驗帶到了web上
還有一個是Nextjs App Router live coding 這蠻好玩的 感覺有點像coding interview大家盯著你看哈哈
但稍微輕鬆一點
至少是自己的節奏也不會因為寫不出來而沒有工作
本來預計一小時結果後面討論了很多當直播聊天最後聊了2個半小時
我是不是考慮下次開直播錄音直接發podcast
不過真的有人會想聽2個半小時的podcast嗎
前兩個禮拜DHH ruby on rails創辦人在自己產品把typescript拔掉這件事情感覺還有點在延燒
有蠻多人照著這個做文章的比如JavaScript真的需要型別嗎
或是偏鬆動的標題比如大型project都不要TypeScript了
也有人開始疑惑是不是不必學TypeScript了
對我來說如果這個技術讓你們做事很麻煩或是沒有解決到問題 壞處多過好處
那不管別人怎麼說你不要用就不要用
至於是不是因為這樣就不要學TypeScript也不至於
不會因為一間公司說TypeScript不值得他們用就代表大家都這麼覺得
Airbnb在2018年說不用React Native了因為組織和軟體架構問題
但不代表其他公司就不用React Native
Linkedin打開還是會看到很多公司在用React Native
而TypeScript也是這樣
bun目前來到1.0.2版本修復了很多bug和更多的效能優化
而Twitter也看到很多人說他們自己的project 不管個人還是公司的
也都用上了bun然後說自從把webpack刪掉之後測試和build time從5分鐘變成30 秒
然後因為webpack刪掉了也可以刪掉其他的babel plugins 整體npm install時間變短 node_modules size也變小
我自己還沒用上因為bun一些bug讓我的單元測試過不了
但我相信他們bug修好我馬上就會把bun弄上CICD
我最近才把bun configuration file偷渡到repo上所以其實我公司project要bun install也是可以的
上禮拜Remix發布了Remix 2 我個人雖然沒用過Remix但聽過很多Remix的好話
尤其是它的rendering和loading讓application順很多
看了changelog和upgrade path看起來蠻多東西的
可能和它把minimum requirement升到node 18和react 18有關
node 16剛end of life所以node最低support是18
而用上react 18意味著可以用比較新的react 18語法比如suspense useTransition boundary等等
然後Remix特別寫了一個章節講這個代表這可能很重要吧就是Remix 2有沒有RSC
答案是 沒有的 他們的理由是現階段Remix仰賴著React的stable version所以用不上RSC
但Remix 3或許會有
不過也有可能等他們支援了可能RSC也不是個東西了
那會不會因為Remix沒有RSC就跳到隔壁的Next
我想是不會的 至少大部分不會
因為一個feature就跳到隔壁應該不常見
不管怎麼樣換框架都是有成本的
加上RSC不是什麼拯救世界的技術所以應該不至於為了這個把整個application從Remix換成Next
Vercel宣布說10月26日的Next conf在舊金山舉行 到時候也會有online event所以應該不用真的去
well 如果公司願意出錢讓我去我當然肯定還是會去的
今天Vercel也更新了Next 13.5 那個changelog真的落落長
不過主要就是效能優化包括更快的dev server和lower memory usage
也修復了一下App Router的bug包括有些東西不能做unit test的
有空的話可以看一下那我是更新之後沒什麼問題也有感覺有快一點
那天在想這一集能聊什麼 有個朋友說可以聊iPhone
聊著聊著會不會變成其他聊股票的節目了
先聊製程 然後研究出貨量 最後預估這一季蘋果股票會不會因為iPhone漲這樣
到時候變成股票輕鬆聊了
這一集講講前端工程師怎麼跟設計師工作的
這個感覺和公司文化會有點關係導致每個人的經驗不同
我聽過大概最多的是工程師拿到設計就直接工作了
我覺得這樣不太對 我們當然會儘量滿足那個設計但還是要盡我們所能先評估一下這些東西是不是做的出來
從頭講好了
產品經理可能會根據公司所需了解下一個project需要做什麼和這個quarter應該完成什麼
他們帶著這些需求會先去找UI設計師
一開始先把大概的藍圖 wireframe畫出來給PM一個感覺
根據需求的細節越來越清楚 設計也會越來越像是真的我們稱做 high fidelity
有寫設計師也會更進一步用工具做出一個prototype
不如Figma可以弄出一個prototype 點了什麼會發生什麼事等等
通常工程師是在偏最後面的階段也就是他們已經都講好了然後問我們這樣行不行
個人覺得這樣的優點是工程師只需要管工程不需要特別管產品體驗畢竟他們都講好了
也不是說不能去改但到了這邊畢竟他們都投入很多時間了
會比較偏好小改動除非直接說這個不可能做得出來
我自己會比較喜歡在早一點點的時候把工程師加進去這樣可以提早點出會有什麼concern
比如今天PM和設計師說我們這裡點開會顯示出產品的什麼資料
但工程師一看可能就會問這個資料哪裡來的因為現在根本沒有搜集或是input這些資料
當然PM可以先問別的組管這個data的但現實還是現實有時候就是會發生這樣的事情
類似的事情也有發生過比如設計師也一套自己的設計語言
整體一看會跟公司其他project甚至和大家共用的style不一樣
前端最喜歡用shared component了那如果style不一樣會很頭痛
這時候就可以問甚至push back說這樣子時間會拖比較久因為要重新弄那些component
或是因為跟其他project不一樣體驗會不好
或是之後要更新也不好更新等等
這些都是可以提出來的
這時候就不會管說他應該做好的為什麼我們要把關
看到問題早點提出來都是好事
開始寫code之後我有遇過兩種不同的設計師review style
第一個是每隔一段時間 可能是sprint結束時demo給他們看說我們進度到哪裡這個畫面長這樣
他們會當下給feedback說什麼東西需要改
之後給他們一個link 可能是dev server的可能是UAT的link和test account給他們自己玩
第二種 可能也是我比較喜歡的尤其現在比較注重非同步交流方式
也是一段時間但比較短比如一個禮拜
在slack上面和設計師說我們這週做了什麼 這是我們的ticket和PR
錄一段demo影片然後留一個link給他們
之後他們會開ticket說什麼東西需要改這樣
兩種方法也可以混著用但或許會有點redundant
這邊我覺得可以特別提醒一下
工作這麼多年 我發現人看到不會動的設計圖和照著這個設計圖做出可以互動的網站時那個感覺完全不一樣
也會讓他們給的feedback不一樣
明明在設計圖本來就是這樣但用了之後覺得不好
我不是說不好只是想要跟你說不是你不好 不是誰不好 不是誰比較機車意見這麼多
就只是人的觀點和感受會因為怎麼使用這個產品而不同
人的意見也會隨著時間而變
順便講一下我們設計師挺好的 有很好的design guideline
我們前端工程師有個shared component library
每個project都可以npm install這個然後裡面什麼都有
button drawer modal card 這類的
然後我們設計師有一個figma file其實是這個library的草稿
包括每個component padding應該多少 有什麼variant和顏色
而且顏色也不是說是什麼color code
而是我們有自己的color palette還有自己的名字
比如red-500 blue-700 stone-50之類的
然後設計師為了project而做設計時候也是照著這個命名的
而我們的code也是這樣命名
所以當大家說這個顏色要用stone-100 那個顏色就是那個顏色
這點挺好的也很好的響應了source of truth
當資料太多之後我們應該要根據哪一個做更新或是知道哪一個絕對是正確的這樣
這次就小聊一下 感覺這問題和面試一樣蠻多人問的也會每過一段時間就出現一次
希望對你有幫助
那人畢竟是活的 公司文化習慣也不同 找到一套你們舒服ok的就好了
那如果覺得這樣會讓你做事比較好那拿去用也是可以的
這邊廣告一下我們Discord社群我真的覺得這是一個好地方
我們時不時會辦技術分享會像是上禮拜的Astro和Nextjs demo或是聽我聊溫哥華這邊的珍珠奶茶一杯要台幣160塊
如果你覺得自己學習很無聊或是不確定學的對不對那這個社群也歡迎你
裡面有各式各樣背景的人也有不同level的人而且大家也願意幫忙畢竟都是過來人
沒有人一生出來就是senior 知道best practice是什麼和怎麼invert binary tree
我之前也發過一篇說不要被自己的怕和不好意思拖累自己的成就
今天有問題然後自己試了好久做不出來 就要問
問了就是你的而且大家都會有成長 你學到東西 回答的人也得到一個解說的機會幫助他自己更了解這個話題 不問就是失去一個成長的機會
然後我還在籌備但近期會開放做諮詢服務 for transparency 這也會是收費服務
review resume 尤其英文的 做模擬面試給你feedback幫助你準備外商工作甚至了解國外的人才要什麼
有幾個人有提說我可以開mentor計畫但這方面我還不清楚我可以提供什麼樣的價值
但如果上面講的有興趣的話都可以在twitter或instagram跟我說
如果你喜歡這內容的話幫我在 Twitter 和 Threads 上面分享給其他正在前端這條路上努力的朋友們，也別忘了訂閱我們電子報收到第一手消息喔 🚀