參加 2017 餓了么大前端秋季交流會是一種怎樣的體驗?

11月4日的秋季交流會:餓了么大前端秋季交流會 -百格活動


成功面基 @嚶嚶 ,聊了很多,很難想像才大三,技術兼具廣度與深度,也有自己獨道的見解,比如最後上台的總結,未來不可限量。

見到了傳說中的天哥 @敖天羽 ,其實在微信群的迷惑下,我一度認為天哥是個藍孩子。。。好吧,我錯了,天哥主持可以像群里那樣更活潑一點,哈哈。

坐在我後面的 @栗噔噔 是我第一次聽到真實的娃娃音,太給力了,當產品經理的利器啊。

捲走了一本書和一件T恤,感謝高顏值的餓了么前端團隊組織這次交流分享,最後許諾過要在知乎回答一下嘛,沒有詳細做筆記,稍微談一些個人收穫和感想吧:

向勇老師的《H5埋雷指南》,因為我個人沒怎麼做過 H5 的業務,體感不是很強烈。sticky 屬性之前並不知道,漲姿勢了。多個提升層那塊我認為 z-index 是要被妥善管理的,隨意加1,或者粗暴999不可取。PPT 開頭也說了不是談具體的解決方案,而是談遇到問題時的方法論,今天講的坑沒遇到過,明天也就忘了,而調試方法、思考方式是不變的。

邵丁丁老師的《前端數據可視化實踐解析》,大部分內容來源於陳為老師的《數據可視化》,內容相對科普和理論一些,其中有一點是與我有共鳴的,UED 給我們的可視化方案往往非常理想,對於一些極限情況需要前端進行兼容。使用 Rxjs 建立時序方案後面找時間嘗試一下。數據可視化是一個水很深的主題,前端很」接近「而又很」遙遠「,」接近「在於界面渲染在我們手中,我們是最有機會去完成的那幫人,」遙遠「在於學術界與工業界在數據可視化上仍存在鴻溝,思想與方法都不太一致。

喻爭老師的《淺析第三方服務與 Vue 的結合》,講得真得好。第三方服務封裝很容易變成一層薄薄的語法糖,也很容易與第三方服務迭代發生脫節,餓了么都提出了不錯的解決方案,不僅是提升開發體驗,更思考了如何多做一點。最近我的團隊也在做 G2 的封裝,可以借鑒很多地方。

林溪老師的《H5頁面可視化編輯系統實踐》,比較常規,運營頁面通過可視化編輯系統去搭建已是業界共識了,我們內部也有類似的 Card 搭建系統。在 QA 環節中,我也問了對於組件源代碼上傳是否需要做版本管理,因為在我們這邊是有做的,基於 git 還是基於 npm 當時還做過一些討論。當然對於運營頁面這樣簡單的業務場景來說,不需要也是合理的。

蘇再華老師的《淺析 ElementUI 中 Table 的設計實現》,我之前也遇到過相類似的滾動條問題,直接就 ::-webkit-scrollbar 處理了,沒有考慮 Firefox 的兼容性問題,一起想一下是否有更好的兼容方案吧。Table 實現的細節還是很多的,比如寬度的自適應計算,後面去拜讀一下源碼。蘇老師似乎提到了 js 浮點數的精度問題,可以試試我們團隊這個庫:nefe/number-precision

薛導的《從用戶體驗角度看需求的始終》,今天最大的驚喜吧,很難在現在的前端會議上聽到有關用戶體驗和產品方面的分享。前端作為最直面用戶的那一層,體驗往往被我們掛在嘴邊,遺憾的是真正的前端沉澱與分享很稀缺。」二十多把刀「的故事告訴我們,人人都要有產品的 owner 意識,對於開發而言,需求並不一定是輸入,也可以成為輸出。」如何劃分前端技術階段?被產品懟的說不出話為初級,跟產品互懟不相上下為中級,懟的產品沒話說為高級,直接將其懟辭職為專家「,哈哈,玩笑啦。另外還分享了 @徐飛 叔叔的一個 case,意外的收穫,就不透露啦。

袁德鑫老師的《Vue TypeScript 實戰指北》,只實踐過 React 與 TS,應該 Vue 與 TS 也大同小異吧。除了官方良好的支持外,我覺得難點是在工程實踐與團隊協作上,比如 QA 環節提到的 any 濫用的問題,團隊從弱類型定義轉換到強類型體系下的適應過程,像泛型這樣的概念對於前端而言是有一定理解成本的。我們團隊在大型 React 項目中實踐 TS,在度過陣痛期後,整個代碼的清晰程度和維護性有了很大提升。

黃鼎恆老師的《Node.js 之 Serverless 簡介》,Serverless 能在20ms以內快速伸縮的特性,讓我感到吃驚,一下子就想到了微博的熱點事件場景。理想很豐滿但現實很骨感,網路延遲、不易測試、與服務商強綁定、穩定性、系統拆分等問題使 Serverless 還需要進一步觀望。

最後還是要(bei)招(bi)聘(wu)啊(nai)啊啊啊,真的很缺很缺很缺人,阿里數據新能源前端團隊,歡迎私聊投遞簡歷!


撿到一個女朋友@栗噔噔

感覺死而無憾了


多圖預警!

來的時候很懵,不知道往哪兒走,本來說好當志願者的,被總監放生了。
然後掘金的贊助來了,有了下面這一幕:

可以,這很前端。。。

接著就是各位講師了

蘇老師還是很萌的,天總說,他比宣傳照里老,所以今天來的是蘇老師的爸爸。。。
以及,有任何Element的問題,現場可以暴打蘇老師。

Galen大概是今天講師里顏值最高的一位

在台下工作中的@敖天羽

主持工作中的@敖天羽

中途休息的時候玩了餓了么的滑滑梯,挺好玩的,雖然我,卡住了。。。

然後我們去了位於三樓的玲瓏寶宴吃飯,12個人,人均60。

同桌有第一次和我吃飯的,看到拍照的我,陷入了恐慌。。。

下午有個做用戶體驗的小姐姐,做的分享我還是很感興趣的,特別她提到,有個網紅前端,讓團隊在一周內做了50多種刀的頁面什麼的。。。

因為提問得到了一本書!

最後,晚霞很好看,完美收場~

11.5更新
現場撿了一個男朋友@余博倫 回家
感謝餓了么?(? ? ?ω? ? ?)?


@栗噔噔 的聲線超級贊,軟萌軟萌的 =3=


艾草看到其他答案你說寫什麼開源代碼有毛用


這算是我第二次參加餓了么的前端交流會了,上次沒寫什麼東西,這次得補點。

首先是成功和 @淡蒼 聚聚面基,哇網友見面就很開心,感謝聚聚抬一手,跟著漲了一波粉~

然後是我事後才知道的, @余博倫 竟然坐我後面,而且我在最後一場 serverless 還回頭和他聊了幾句 Faas,就這樣都!沒!認!出!來!而且還悄無聲息地和 @栗噔噔 脫單了,祝999~(論前端面基大會的正確參與方式)

當然少不掉的是 @敖天羽 天爺,拍了一段 video,挺好看的?(? ???ω??? ?)?

最後是帥得不像話的 @Galen 和 蘇再華,我這長相都不好意思說自己是前端開發了 ,你餓廠這顏值是沒得說。

水完一波來點觀後感了,挑幾個來聊一聊:

邵丁丁聚聚的《前端數據可視化實踐解析》是我比較喜歡的一個 pre,因為其實我最近在知乎、交流圈子中都頻繁地聽到了 前端數據可視化 相關的話題,對這個話題自然比較感興趣。邵聚聚的分享偏向理論,裡面有些部分很有意思,比如關於引起視覺警覺的元素排序等等,感覺這些理論可以很好地用在做 PPT 中 (開個玩笑)。

幾個月前聽學長提到過清華的視覺可視化實驗室,才慢慢意識到這個領域的龐大。那為什麼最近可視化被頻繁地提及呢?我想和數據分析的大熱有脫不開的干係。數據分析是很有用,但是如何更直觀地呈現分析結果的特徵呢?前端可視化無疑是不二的選擇。這麼來看,前端可視化的工作也可以看成一種另類的數據分析:對數據結果的分析,而這樣的分析結果就是各種不同的圖表。

數據分析在我的理解是各種學習、AI 的 toB 商業化體現(toC 有面部識別、語音助手之類),所以前端工程師別怕趕不上 AI 的車啦,不妨可以了解了解數據可視化呢~


薛導的《從用戶體驗角度看需求的始終》實在是太精彩了,PPT 本身就特別好看,舉得 也非常直觀,不過可惜的是我和產品小姐姐的交流太少了,可能不是很感同身受,只能說這麼多了,可以參考別的聚聚的回答~


袁德鑫 @Galen 聚聚的《Vue TypeScript 實戰指北》還是非常緊跟社區的,還記得第一次分享的時候是 Flow,當時說之後會跟進 TS,果然跟進了,很酷。對於強類型在項目中的使用,我覺得 TS 這種 gradual typing 是一種很不錯的方式,可以逐步地將現有的代碼遷移到強類型上。TS 的類型系統設計實在算得上集大成者,提供了恰到好處的抽象,台下幾百個教授一致通過(大霧。當然前端原先的業務動態性可能會與類型系統的靜態設計摩擦出一定的火花,在改造的過程中可能會遇到各種各樣業務抽象的陣痛。但是可拓展的業務模式設計是複雜業務的基石,就當做一個梳理和 refact 吧。知乎上有一個問題: 為什麼很少前端開發會對介面數據定義Model? 用上了 TS,定義 Model 就會成為家常便飯了,畢竟要做 type check,臣妾不得不 declare 啊!


總結一下,這次前端交流會比春季的涉獵範圍要廣許多,這得點贊,當然更希望可以增加一下部分選題的深度,那樣就更棒啦。

感謝餓廠大佬和各位分享聚聚帶來這麼精彩的交流會,期待下一次的活動~


看到群里有人說有人竟然配對成功後不約自來。@栗噔噔 就是她!以前是程序員,現在叛變去做產品了!
先上圖

因為早上起來晚了,遲到了半小時,於是只能坐最後一排了。
然後就是各位大佬的分享……認真聽了,沒拍照

坐第一排近距離感受大佬來證明自己認真聽講了 我是好學生

回答問題送了一本書 感覺棒棒大
趁著休息的時候拍了一些餓了么公司的照片

員工標配顯示器

公司小庭院 看著是1樓,其實是4樓。

最後一張發到朋友圈了 大家都說好最後,希望餓了么以後多多舉辦這樣的分享,下次要活躍一些,多認識些比較牛的朋友。


首先,對不起大家我的主持技能確實點的不咋地,感謝大家的包涵。另外總監上午的主持真的很棒,從這次大會的舉辦上來看也感謝總監全程的辛苦和負責和神助攻。

然後回答一下大家問的一些問題:

第一,我是萌新,比較菜,暫時不太會上舞台分享技術,希望明年有機會不過估計還是個菜逼wwwwww所以……而且比較慫……

第二,萬萬沒想到有人來問我要簽名我嚇了一跳,下次我一定好好練字以及敖天羽是網名……

第三,關於非大前端的分享,其實我們這裡也有一些別的心得,這裡就先保留了(另外是夏季的時候有人說過了)。

第四是我父母已經同意了萬年單身狗的提議,所以我是一條鐵U?ェ?U。

第五是前一陣身體不太好,還好恢復的不錯Emmm 不過所以沒一直站著看不到 PPT,有點尷尬,這次有不點評內容了。

希望每個人都是不虛此行,有所收穫的!嗯!就這樣。


因為是來面基的,所以 topic 基本也沒怎麼聽。
在最後排划水寫了一天 rust ,被編譯器爸爸教育了一天,最後又被 @Saviio 教育了。

PS: 玲瓏寶宴真的不錯


在這次交流會中收穫的可能更多的不是技術方面的東西

因為最近剛好在瓶頸期

一直在思考自己究竟應該如何做個『有核心競爭力的前端』以及方向

今天感受到每一位分享的導師的背後都有一種工匠精神

就是深究原理、知識框架廣泛、自我突破還有對細節的極致

比如一個很常用的visibility:hidden引起的所有子節點重繪造成的浪費

在日常工作中我可能都無法察覺

以及薛導對每一個問題點深入精微(並保持沉著冷靜的幽默詼諧

每個導師的分享都帶給我很大的啟發 (雖然下半場惡意遲到

第一次參加餓了么秋季前端交流會 明年繼續參與

感恩這個團隊提供這樣的平台與機會,嗯,365天一天不落的拜膜大佬們


主要是去和小夥伴們玩耍約飯的畢竟我做好了什麼都聽不懂的準備…………
兩頓飯都很好吃還知道了不少八卦,令人驚奇的是有些八卦的主角我甚至都不認識真是amazing!
另外我還學會了商吹!通過消消樂和表情包與@一小瓶濃硫酸建立起了深(su)厚(liao)的友誼!(此處應有握手)
最後,我終於做了一次新聞當事人和八卦主角的身邊人知情者,作為認識大佬的人我感到很興奮!滿足了長久以來的願望!開心


希望回答中有更多乾貨,而不是變成粉絲見面會強行混臉熟的朋友圈,大家看的也挺尷尬的


《H5 埋雷指南》

在移動端H5開發過程中,我們經常會用一些常見的手段去解決性能問題,比如將小圖片編譯成BASE64、通過Hash值控制版本、資源緩存本地、拆分基礎及業務層代碼等等減少HTTP請求的優化手段,但是這些是從載入性能(Loading performance)的角度去優化。

從而我們忽視了如何從渲染性能(Rendering performance)的角度去優化代碼。那麼我們需要去關注一些樣式對層的提升從而使用3D加速(我理解為GPU加速)去提升頁面渲染,但是這一類樣式特性並不能濫用,考慮到用戶設備配置過低,效果其實並不理想,所以使用的地方需要權衡,不然就是給同事埋「雷」啦

那麼如何用Chrome去觀察頁面渲染呢?
-&> Rendering [x] Layer borders
-&> Layers

《前端數據可視化實踐淺析》

感受了可視化從古至今的演變過程,為之震撼,理解為可視化的目標就是為了讓人更直觀的獲取數據和信息,並與其進行交互。

那麼在做可視化之前需要對數據轉標準化,將一些非標的數據進行標準化處理,因為之前在浙商銀行從事過產品經理相關的工作內容,所以我認為這更像是數據分析的前提工作,數據濾波、降維、採樣、聚類、剖分、配准、轉換,最後再呈現給用戶。

至於在前端實現可視化內容,目前成熟的輪子還是比較多的。

《淺談第三方服務與 Vue 的結合》

很巧,剛好我用過Vue-AMap,關於使用Vue-AMap和我實踐ES6的總結我將放在下次。

那麼架橋樑的目的和在架橋樑的時候存在的問題:

在架橋樑的時候需要注意什麼點呢?

  • 如何隨同第三方服務迭代而迭代?
  • 提供第三方服務Plus功能
  • 尋找第三方服務API特徵規律
  • 保證用戶能夠使用第三方服務的所有功能 (直接暴露第三方對象 哈哈……)
  • 巧用Mixin

《H5 頁面可視化編輯系統的實踐》

H5活動頁面快速生成工具?應該是這樣吧,讓我後面再悟一悟

《淺析 ElementUI 中 Table 的設計實現》

我就記得很優雅

對了,還有就是跟瀏覽器的滾動條對著干,嗯…… 是這麼個節奏

總之,分享了很多在Table開發過程中的深坑,實在回想不起來了……

我一定會去讀源碼的

《從用戶體驗角度看需求的始終》

在公司中如何讓前端具有主導地位,那麼就是不要局限於前端領域,有空多去看看周邊領域,一樣很有趣喔~

同樣,在看到事物的時候多想想為什麼要這樣做?

從用戶角度去考慮問題,把最簡單的呈現給用戶,複雜的我們自己消化掉。

這讓我想到,我的老東家,銀行裡面有很多奇奇怪怪的專業辭彙其實用戶根本看不懂,只有從事金融領域的同事才能看懂其實,那些專業辭彙其實都是經驗豐富的大佬提出的,但是沒有做好用戶體驗,現在社會人人都能擼出一個差不多的產品,競爭點其實都在用戶體驗。

前端,其實不止擼代碼、同樣要考慮到交互、用戶體驗等等問題,目的就是把產品做到極致。

最後記住那51把刀,哈哈!

《Vue TypeScript 實戰指北》

TypeScript

  • 語言類型向強類型語言靠攏,編譯階段發現問題,避免把問題帶上生產
  • Coding過程可以更方便的使用ES6, ES7

值得我去學習了解更多。

《Node.js 之 Serverless 簡介》

  • 取代運維?
  • 生產上直接改代碼?

挺牛逼的,同樣也擴大了眼界。


真的是乾貨滿滿!收貨很大!

最後可樂需求不接


第一次參加餓了么大前端的秋(tian)季(ge)交(jian)流(mian)會(hui),聽完總體感受是每一位講師的分享都很用心,但是有些分享的主題不是很了解,所以下面談談印象比較深的幾場分享:

向勇老師分享的 H5 埋雷指南,講了餓了么商超頁面在開發過程中踩過的一些坑,很多都沒遇到過,個人覺得收穫很大。PS: 我第一次知道 position 還有 sticky 這個屬性(請告訴我不是我一個人 ...)。

下午薛導分享了《從用戶體驗角度看需求的始終》,給一整天的技術分享帶來了一股清流,從她們公司的幾個實際項目入手,介紹了產品、運營、開發和設計在這個項目中的角色,讓我見識到了開發也可以主導一個項目,當然前提是要能說服老闆,如果不能,請乖乖按老闆說的做。這也給我們開發如何跟產品撕逼提供了另外一種思路...

PS: 那個 51 把刀的項目真的是讓我大開眼界,很想聽聽開發和設計在做這個項目的時候是一種怎樣的體驗...

QA環節提了一個問題,還獎勵了一本書,開心(?????)


第三次跑去真北路蹭吃蹭喝了。
感謝魚老闆的熱情款待。

因為沒買到票子,魚老闆和總監讓我直接過去,我很難為情。所以我帶了一點禮物過去。

一共七本書。不知道哪七位同學拿到了書。你們都是被選中的少年。

  1. JavaScript設計模式
  2. 七周七語言 卷2
  3. 七周七並發模型
  4. 數學之美(第二版)
  5. 程序員修鍊之道:從小工到專家
  6. 學習JavaScript數據結構與演算法 第2版
  7. 圖解密碼技術 第3版

為什麼選了這七本?

希望你們不被領域所束縛,增加更多的內容到你的知識資產中。

  • 數據結構與演算法:計算機科學的根本
  • 設計模式:前人總結的經驗
  • 七周七語言:多學幾門語言,觸類旁通
  • 七周七並發模型:並發是一個永恆的話題
  • 數學之美:計算機科學的源頭
  • 圖解密碼技術:安全領域懂一點,並且不會過時
  • 程序員修鍊之道:雞湯,喝點補身子,況且這碗味道不錯

開始正式答題

H5埋雷指南

提出問題,探討解決方案,追求細節完美,處女座棒棒噠。

前端數據可視化淺析

我很期待的話題之一,內容和分享技巧都很棒,可惜不是我要的。

可視化是一個大坑,很深,但是又都需要。

可視化不是說,我把數據怎麼樣呈現出來就完事了,折線圖柱狀圖熱力圖 xx 圖,都只是一個表現形式而已。

至於怎麼實現這 xx 圖,我很懶,用現成的。

而我更關心的是:在某個特定業務場景裡面,應該獲取哪些數據,如何呈現這類數據

分享最後有提到 BI,可惜的是,這個還真的不是 BI,BI 不是報表,BI 不是 xx 圖

以下是個人觀點:

可視化並不能獨立存在,只有結合業務場景,才能稱之為可視化。

這個分享,我期待的是:

1,可視化的背後枯燥理論

2,可視化如何結合業務場景。

可惜都沒聽到。

淺析第三方服務於 Vue 的結合(地圖篇)

沒有 vue 就沒有 xin zhong guo,好好的封裝第三方服務,幹嘛要扯上 Vue。

不過有一點我非常贊同:封裝任何東西都要產生價值。

H5頁面可視化編輯實踐

我能說我在打王者榮耀給錯過了么?

淺析 ElementUI 中的 Table 的設計實現

精益求精:和滾動條死磕到底

我贊同把 Table 配置 從 JS 裡面剝離到模板,這樣可以增加靈活度,增加代碼可閱讀性。

我很期待說到數據那塊,可惜就粗粗帶過,我們用了經典的 MVVM。

Table/Grid 的需求是無止境的,因為有 Excel 的存在,所有人都希望可以做成那樣。

從用戶體驗看需求的始終

恭喜點頭豬轉型成功

Vue TypeScript 的實踐指北

題目不錯,依舊坑深,我很保守,繼續觀望。

Node.js 之 Serverless 簡介

嗯,果然只有簡介。

想通過 Serverless 的動態擴容來應對突發流量,個人觀點還是 圖樣圖森破。


不是十一月份嗎 難道我錯過了?

補充11.06:

來晚的關係,坐在最後一排,吃著零食聽台上的同學做分享。有種以前上大學的時候聽大課的感覺。

《H5 埋雷指南》的講師挺逗 講一些優化的方法以及思路 對我挺有啟發的

接下來呢 略過 有點白瞎 ···

聽說 唯一的女士 《從用戶體驗角度看需求的始終》 講的很棒 可惜 本人當時因為在手機電力不足所產生的不安下提前離場了

ps. 回來後聽說 本次面基大會 有一對牽手成功 祝賀下


上次去夏季交流會的時候就走錯了樓,這次以為和上次一樣的地方,結果發現又走錯了

到了現場基本也就最後排有位置了 和寅侃聊了很多

感謝 @sofish 魚總的午餐

席間還見到了以前東家的員工,後來合影后他發到他們的群里去了,感慨這都過去好多年了

這次的零食很多,怕胖很久不敢吃巧克力了,這次一吃就止不住了

下午偷偷交流農藥也很有意思

總監各種被人找也是辛苦


竟然要求講 40 分鐘,看了眼稀少的 PPT 內容,怎麼辦,怎麼辦,要是 10 分鐘講完了,怎麼辦,怎麼辦,會不會尬場.......結果才講到一半,總監就多次在門外指著手錶,提示我時間,可車開起來剎車不住了,華麗地超時。讓各位挨餓了,抱歉。


第一次參加餓了么交流會(^O^括弧~陪男朋友參會),全程懵圈狀態,作為一個產品,基本招數還沒學會,入門就內功心法,也只能說你們前端好強大~ 收穫是啥,產品和前端在一起的日子是不是不好過~


早上每個分享都記了筆記。然後下午的就等放PPT了。

對個人而言感觸挺大的是早上的分享,講師們講的都挺到位。

學習到了很多。

下午分享印象最深刻的居然是產品經理的分享,很多細節的地方能學,而且例子都舉得特別好,關鍵講師也很漂亮2333

遺憾的是最想聽的typescript沒聽到想聽的內容。

主辦方很用心。

更具體的等PPT放出來再去做個技術總結。

總的來說,這是一場挺好的分享,對個人而言大部分的議題都有學到東西,這對於現在來講挺難得的,尤其是課後還想回顧PPT再研究一下的課題蠻多。


你們這幫人把群聊天搬到了知乎來。生怕別人不知道你們上班只干聊微信和刷知乎兩件事。


推薦閱讀:

用了react 或者 vue,如何做SEO優化呢?
零基礎轉前端是怎樣一種體驗?
網站的美術設計和前端工程師如何溝通?
有C/C++ 基礎的學生學習網頁開發最好選擇哪門語言?
Web 開發的前端、後端的入門門檻是不是比較低?

TAG:前端開發 | Nodejs | 餓了么網上訂餐 |