D2前端技術沙龍(北京場)紀錄

來源:互聯網
上載者:User

淘寶北京前端團隊在此分享一下整場的精彩內容

本次北京會場由淘寶技術嘉年華與淘寶北京新業務前端團隊共同組織協辦,現場100多人,整個會場圍繞著濃厚的技術氛圍,技術牛人帶動剛步入前端行業的新人共同暢言分享。
同時本次的技術交流會是淘寶北京前端團隊第一次組織,有很多不盡人意的地方,譬如稍過形式化,重點沒有放在交流討論上等。
但是整個技術分享過程卻非常有內容,有收穫,讓前端從業者又一次確立了自己的足夠信心,更加堅定自己的行業發展方向。
並且本次交流會圍繞著很多技術亮點展開,如多單元測試、自動化工具、編譯平台、前端技術架構、前端團隊定位、前端發展方向等等,太多迷人的話題。

首屆D2沙龍北京&杭州站主題演講資料查看

拔赤傑作暖場視頻,牽動很多人的心弦。9月25日D2沙龍暖場視頻

一、首先是主持人(拔赤)開場分享

主持人開場分享了6屆D2技術論壇的舉辦情況,及在前端業界的影響力及走向。每張ppt中選取經典的現場照片,勾起很多同學的記憶,讓老人感慨前端的發展曆程,讓新人倍受鼓舞,讓現場同學對前端行業更加充滿熱情。最後介紹了本次D2沙龍的流程及各環節介紹;微博直播,抽獎,互動送禮等內容;

二、接下來是嘉賓分享環節

本次D2有幸邀請到百度,新浪,豆瓣的前端資深人員為我們分享他們的技術及實戰經驗;

1、 第一個上台分享的是百度的李成銀,帶來題目是《編譯平台》

李成銀是百度空間的開發負責人,他談到在前端的開發web的應用已經越來越複雜,前端開發的人員也越來越多,必然導致問題越來越多,包括人多並行開發時的衝突,人多了開發效率反而下降了等等混亂問題的不斷產生,因此我們必須統一規範,這就出現了統一的執行指令碼即前端編譯平台,編譯平台為我們實際解決了兩大問題,一是統一編碼規範,二是漏洞檢查。

比如說xss安全問題,模組目錄檢查,統一的img檔案夾,編碼規範檢查、html&css規範屬性標籤檢查、模板文法、詞法分析等如果發現錯誤,編譯平台直接拋出錯誤提示,如果編譯通過將壓縮多個開發小檔案並進行合并上線。

同時李成銀還介紹了編譯平台可以自動補全CSS3私人屬性的功能,開發人員只需遵守一個瀏覽器的規範,其他瀏覽器的寫法將自動通過編譯平台補全,大大減少了開發時間及人力成本。

同時還有檔案快取方面的最佳實務方案,即使用檔案名稱+MD5的方式,只是清除有變動的檔案。css sprites等都有很好的支援。
總體總結編譯平台就是讓工程師減少犯錯,提醒讓工程師不要花太多時間解決小問題,提高效率,把更多注意力放在解決實際上的問題。

QA環節的問題

A:長久堆積的代碼上線怎麼判斷?
答:編譯平台完全可以處理,可以配置。

B:html動態標籤怎麼檢查?
答:動態變數不好處理,除非後端異常,瀏覽器外掛程式檢測可以辦到;

C:css sprites平鋪品質下降怎麼解決?
答:工具不能百分百解決問題,沒有想到更好的問題的時候還需手工改動,代碼編譯上線前還需要測試的。

D:怎麼看到上線時的代碼?
答:開發的時候也可以手動去看效果,編譯平台功能是模組化的,可以開關相應的功能模組。

E:怎麼同步到工程師環境?
答:php的代碼,採取下載編譯平台,隨時更新可以即時下載。
2、第二個分享人是來至新浪的錢寶坤,分享題目是《多瀏覽器的單元測試工具》

錢寶坤分享的多瀏覽器的單元測試工具實現採用Delphi+Qt+PHP+JS。本次分享的主要是產品的前期思考,繼承多瀏覽器核心中的問題,及產品的優缺點,今後的擴充。

此產品是把核心繼承在用戶端,ie核心可以繼承,其他瀏覽器核心都是開源的,可以將內整合在用戶端;同一個用戶端的各瀏覽器可以通訊,操作瀏覽器對象通過api可以輸入,都能明確的知道哪個瀏覽器出錯誤;同時可以多進程,解決多核並行開發。思路有了著手開發開始,採用什麼語言,中途問題的解決到最終的實戰,作者ppt裡展示的非常詳細。

同時現場做了實戰示範,遠程開啟程式,並開啟子進程,返回測試案例結果。

QA環節
F:聽後感覺此產品很偉大,為什麼不採用前人已經開發的很多架構如jsUnit、QUnit等?
答:因為已有的架構對瀏覽器支援並不全面,測試UI邏輯等不支援。並且通過java啟動多瀏覽器,通過ajax到達目的,會出現一些問題,如果掛掉將影響非常大,接收不回資料,風險不能控制!

3、接下來是來至豆瓣張克軍分享《前端基礎架構的實踐和思考》

在此引用克軍原話:
“前端技術架構是我一直思考的問題,4年前我在淘寶分享過一個基於ant的靜態檔案編譯系統,那個時候對基礎架構沒有全域的認識,在實際開發的過程中沒有更好的推廣應用,我們只當最單純的工具應用!兩年前才意識到基礎架構的意義,更好的組織應用,前端團隊高速運轉的基礎。

我是02年畢業參與前端開發10年開發,前端團隊的職能的很大轉變,製作到開發,網頁到實踐,到案頭應用的轉變。實際上很少團隊真正轉變過來,很多團隊還停留在是否高效把頁面做出來作為品質衡量標準。現在開發只是人多了,很多公司團隊就是一條流水線,在他得崗位沒有發揮空間,實際前端作用沒有更好發揮出來。所以我感覺對於想創業的公司,他們不需要技術大牛,他們更需要是一個團隊!前端工程師比設計師更明白原理,所以看到雅虎大牛到國外去聘請工程師,但實際上不瞭解中國特色。前端開發不能脫離整個技術體系,在產品設計上需要環節越來越多更好,後續環節應該越少越好。前端開發早期是放在設計部門,我感覺前端應該放在技術部門,到了豆瓣後,在部門的調整上,想放到設計部門UED,現在時放到技術部門!

讓前後端技術結合在一起才更大發揮作用。不能片面的做一件事情,作用是有限的,應該從大局出發才能應用到實際中。基礎架構的構建像一顆樹,枝葉茂盛,工具規範系統。基礎大架構更像一個發芽的種子,整個技術部門的所有智慧構建。工具最需要注意的是規範跟品質來定義的,建立一套有秩序的開發工具,找到更高品質的優秀體驗,不要把事情做得偏離初衷。”

可見js架構的重要性,克軍接下來分享了實際應用的規範及工具系統,包括代碼管理的編譯系統、js引用的規範、編譯後打包上線、css oo抽象化、代碼資源的重複利用、html5應用的開發架構、自動化工具、技術文檔跟培訓等等非常多得經驗內容,同樣在ppt中都有很詳細的闡述。

更詳細的描述可看克軍真跡

QA環節
G:作為一個新入門的前端開發人員怎麼快速成長?
答:從背景出發,對自己格局有個大規劃,前端基礎js css html必須掌握!在學習採取正確學習方法,多看大家推薦經典的書,不要什麼書去看,多看國外網站。在此之后豐富自己知識體系,豐富效能調試,新技術的增加!技能是必要的,知識的豐富是後期需關注的。需要判斷性的學習,不應該忽視基礎!

三、招聘環節

豆瓣、遨遊、網易、新浪微博、百度空間紛紛上台介紹公司的特點及對人才的迫切需求。最後低調的作為主辦方的淘寶北京前端團隊負責人一舟上台介紹了淘寶網的工作環境。

四、茶休時間,準備了很多零食跟茶水,很多人進行交流分享,結交新朋友,重聚老朋友,微博大螢幕與杭州同步直播滾動。

五、分組討論 & 抽獎

三位嘉賓坐在台上與現場同學共同進行討論

Q:工作很有限,很多人只會css,流水線的工作方式,但是我會感覺他學得不精,這種流水線方式是否可行?
克軍:很多大公司需要大量生產靜態頁面,為了快速提高產物,網路重構階段遺留下來的問題,從公司及個人的發展都不是很好,有的人會認為這很好。但是這個想法需要去批判的,這樣個人的職業方向很受限制,這是公司沒有給到個人足夠的空間導致的。所以前端工程師應該具備多種能力,被拴在崗位上5 6年,被公司所毀!流水線方式只在公司的角度考慮,很不負責任,是一個穩定的方式不是最好的方式,需要改變的,改變要付出代價的。不鼓勵在推自己公司的時候不要推只有在一家公司專屬的技術,前端開發沒有特別多可研發的技術,只要把基礎做好就可以,對個人成長有好處。

W:我不同意克軍的觀點,我曾查看各家網站的代碼,並不是很好,可能是遺留的問題,而大公司有很好的流程需要大家學習,很多網站沒有學習,比如說騰訊的網站多去看,實際上看出來的東西很亂,看不到好的東西,考驗基本功的東西都沒坐好。還不如流水線的方式,只做好一項工作,肯定不會出現此類問題。再看個人發展的東西,流水線上的工作其實可以接受,一個人可以在多個崗位工作。這樣同樣可以讓自己成長.其次如果按流水線上工作不需要跟人打交道,溝通上就不會浪費時間,只要做好工程圖。

主持人:如果把每個人當成釘子可能會阻礙個人發展;但是流水線工作可以減少溝通,這需要公司去衡量權重的。

克軍:流水線是一個流程,很多公司可以去沿用傳統的流水線工作,只需改造以下便可以兩者兼備。

R:你預計在豆瓣的前端規範架構什麼時候完成?在實現過程中用什麼手段推廣?制度規範與開發項目存在矛盾怎麼解決?
克軍:永遠沒有做完的一天,需求來自開發,而不是很理想的去創作,確實是從產品的開發特點及過程遇到的問題才產生的此圖。豆瓣是創業公司,看重項目實現,提出技術回收的觀念,很多積累是從實踐中提煉的,我們也要考慮加不加單元測試,但是變化是好是壞我們需要看需求,技術架構很艱難,但是需要堅持的。我兩年前在豆瓣的時候,沒有前端很多東西都是後端寫的,全站是統一的一個js所有的代碼耦合性太強,現在這個問題任然存在,我們集中所有前端工程師,每個人都去裁這個東西,但是我們不會去這麼坐,我們回去想寫個工具,建個架構,在後端編譯,之後把東西逐步裁出來,一是完善了基礎的架構,二是可以逐步改善。

C:淘寶頁面右邊登陸,之前用css sprites實現的,但是之後又改了為什麼呢?
主持人:這是具體應用時的實際實現考慮的,規範並不一定要死遵守,要看實際情況。

D:百度空間的編譯平台能不能開源,能否推廣出來?
李成銀:都是基於第三方開發的,但是整體沒有開源,包括編碼規範公司有差異,不可能遷移過來,大家就算去用很多也要花很長時間;

D:有沒有官方開發技術思路?
李成銀:目前沒有,但是會足部維護上,怎麼做之後都會更新好。

F:前端工程師學習是個階梯狀的發現自己很努力但是成果很少,怎麼轉換平穩度過?
李成銀:本身不是此專業,是後端php,發現前端可以應用,發現架構方面的東西很多不足。之後經常去逛論壇,去看網站,看網站訂閱,經過一段時間會發現有方向。

F:怎麼不落伍,又跟得上新技術?
李成銀:一個人精力有限,現在有個大前端的模式,很多東西我們都要去坐,但是技能是必須掌握,但是知識是可有可無。知識豐富的話機會就會很多,因此很重要的項目需要效能最佳化的時候,你就會能用的上把知識轉換為技能。

錢寶坤:技術淘汰遇到很多,新技術很多需要去思考,很多都是新瓶裝舊酒,很多東西只需要簡單看看就可以,需要基礎紮實;

主持人:前端技術看起來很淺,新人很迷茫,我是不是幹了幾年還切頁面,會意識到怎麼突破自己的瓶頸,就看你的基礎,資料結構,這些如果搞的好,會發現很多可以發揮的東西,新人好的師兄很重要,他會給你更多的指點,有人帶動會更好。

G:流程開發很多過程化,各環節估測時間出現問題,有沒有更好的方法?
克軍:很多公司的創業都是從基礎的地方,產品設計上階段越多越好,開始環節越少越好,產品設計應該有工程概念在裡面,設計出來的方案有工業思想在裡,這樣開發過程中會有基礎資訊庫的時候,在得出的方案會更合理,他得prd線框圖出來,後期就可以很容易構建出來,UI出來後考慮到UI的靈活性稍微改動就能滿足。前端後端效率非常高,最根源的是,設計方案得出,設計師腦海裡應該有工程開發的觀念,讓設計師弄髒自己的手;很多設計師排斥這種東西,我們要推動他改善,所有角色的人都要有工程的觀念;

主持人:產品經理不會去考慮,前端需要做到把這些空缺補上。
H:window清緩衝問題?前端跟後端問題的經驗?豆瓣為什麼沒有遊戲?

主持人:緩衝遵循http協議;瀏覽器自動快取頁面面,緩衝的時間跟http header的設定很有關係,告訴用戶端是否快取頁面面,通過http協議來設定緩衝,LastModified等方法在伺服器匹配,不想讓瀏覽器緩衝可以在伺服器端設定,使用cache-Control來控制,不發起請求;弱緩衝發送伺服器端返回是否需要清緩衝。等設定都可以實現,或是最長見的時間戳記等等,可以在網上找到很多解決方案。

克軍:產品的開發可以適當前端牽制後端來做,你應該給他們提要求。

克軍:看書,聽音樂,都是圍繞生活話題,遊戲不會跟生活並列;

H:程式整合測試是否有經驗?
錢寶坤:目前沒有很好的解決方案;

克軍:需求經常變化,我們的自動化測試,已小組的話題形式提交;

主持人:目前淘寶也只有kissy用到單元測試,測試案例,測試架構,當有核心內容改變時,應用之前的用例跑一邊就可以了。

L:css測試,瀏覽器安全色工作是否有必要?
錢寶坤:簡單應該和css盒模型匹配是否能測試到,視覺觀看沒有差異,但是自動化工具會拋問題,這個我們不需要測試。沒有必要報視覺css問題。

K:js單元測試怎麼做?
錢寶坤:js單元測試並不適用於所有團隊,如果對程式碼程式庫要求不高,其實不需要應該,我們做這個東西的目的是做一個方法,用一個比較懶的方式去解決問題;

六、最後的合影,組織AA腐敗,所有人都滿載而歸!



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。