自從11.11這個曾經普通的日子被阿里塑造成一年一度的消費者和商家的節日, 阿里的技術小二們就多了一個每年練兵的好機會. 在經歷了峰值流量的考驗后, 雙十一對于阿里更成為一個打破部門間隔閡,推動業務和技術更新的絕好機會. 且日期恰逢年關將近, 我想這也是總結團隊一年來技術演進的好機會.
工程化
我們在13年底完成了開發模式上的前后端分離, 從那時起前端項目就不再僅作為Web項目的一部分進行管理. 獨立于服務端的開發和發布過程也催生出了我們的前端項目工程化之路.
14~15年兩屆雙十一之間,在構建技術上,我們在新項目中逐步使用Gulp替代了Grunt, 并且引入了commonJS/NPM機制配合 browserify /webpack 來管理代碼依賴.
我們發布到阿里NPM平臺的一個業務組件
在代碼發布方式上,由于支撐平臺和工具的完善, 我們除了能做到在命令行中直接發布構建好的JS/CSS靜態資源外,在今天我們能根據業務類型在發布平臺上選擇引用或內聯某個資源,甚至通過一個命令把全部資源內聯后發布頁面到預發環境.
在前端測試技術上, 我們在這兩屆雙十一期間把之前散落各處并難于部署的casperJS ,mocha,chai匯聚到了云端,現在只要一個命令上傳測試用例,就能在終端或瀏覽器里看到項目的單元測試執行情況.
截圖為我們自研的云端測試平臺
React
選擇React有推動團隊框架技術升級的內部動力也有和兄弟團隊合作共建的外部原因. 到目前,除了在新項目上全面采用React外,我們正逐步把一些類似H5收藏夾,H5購物車,H5地址薄等生命周期過長的項目更換為一致的React代碼基礎, 以提高基礎業務的穩定性和長期可維護性.
這個過程中我們的主要挑戰是如何進行組件管理和關聯數據源, 在經歷了幾次選型和嘗試后,我們最終基于flux思想自己實現了一套組件管理方案.
目前,我們正在嘗試基于React Component建設適用于手淘基礎業務的組件庫, 希望在保持高度易用性的同時能和集團甚至業界其他React組件庫實現復用.
截圖為正在興建中的手淘React組件庫 Valkyrie
CSS/Flex
如果說要從這兩年前端技術領域百花齊放般出現的新技術中選擇最接近銀彈的一種, 我的答案是flex布局技術.
在15年內隨著市場的自然更新和手淘支持基線的上移, 我們開始大規模的在業務中使用flex進行布局. 這種布局方法對我們實踐界面自適應提供了強大的支持,且特別適用于電商業務中大量出現的商品展示類頁面.
通過flex我們可以看到Web平臺從文檔展示往APP界面邁進的堅實一步. 值得一提的是在這個時間段內 Apple 在自家生態圈引入了新一代 AutoLayout 布局技術. 嘗試從AutoLayout中進行借鑒或許是未來Web布局再進化的一種方向.
我們團隊著名前端布道師 @大漠 關于Flex技術的實踐文章
使用Flexible實現手淘H5頁面的終端適配
Javascript/ES6
跟隨HTML5 和 CSS3 , ES6也在這一年來到了我們的開發實踐中.
這一年里,我們通過啟用Promise改進了對異步流程和異常狀態的處理, 通過新的類和函數語法(Class / Arrow Function)把代碼重構得更便于閱讀和維護. 通過虛擬屬性(property set/get)讓項目中的數據抽象變得更加自然. 同時這個過程和React一起讓JS代碼預編譯( Babel based )從一年前少數幾個嘗試CoffeeScript的項目延伸到接近覆蓋我們的整條業務鏈. 這種趨勢發展之下,我想未來的前端程序員或許會覺得直接寫JavaScript是一種復古行為藝術.
標準化
自從手機淘寶興起, 很長一段時間內,開發同學們手頭的測試機無論機型怎么變, 支持的系統一直只有IOS和Android兩大平臺. 從今年的雙十一開始, 手機淘寶的業務終于擴張到了新的平臺 WindowsPhone之上, 由于WindowsPhone 10 版手機淘寶今年雙十一前才新近發布,大量的業務需要通過降級到H5頁面來進行支持, 基礎業務范圍這樣的情況尤其多.但這沒有對我們的雙十一開發帶來太多的挑戰,原因是我們的大量業務在年中就進行了Web標準改造.
由于webkit內核長期領先于標準實現新特性,很長一段時間內前端同學都習慣了在代碼中僅僅使用webkit前綴來進行屬性聲明. 這種情況是移動端頁面標準化改造過程中最多的問題點, 解決方法也很簡單: 使用sass 函數進行屬性聲明 + 使用 Firefox / IE 進行回歸測試.
在交付真機測試前我們會在Microsoft Edge , Firefox , Chrome 上調試我們的頁面.
HTTPS
在往年的雙十一中, 精心制作的頁面內容在傳輸過程中被劫持篡改是每一個阿里前端同學的痛苦,同時這也給公司帶來了商業上巨大的風險. 為了避免這種情況再次出現, 我們在今年花了很大的精力進行了全業務范圍的HTTPS升級改造,同時為了進一步提高性能,我們還要在這個過程中對引用的資源進行域名收斂改造.
對于基礎業務線龐雜的項目來說,這項變更最為繁復. 這種情況下,我們開發了自動化的腳本工具來進行輔助,同時充分實踐了CodeReview機制. 并和后端，測試，CDN等多部門的同學一起艱難的把默認環境更換為HTTPS才最終在雙十一前建立起手淘前端頁面的安全訪問環境.
我們通過Git Merge Request流程進行CodeReview
其他
在上面提到的技術點之外, 手機淘寶前端團隊在最近兩屆雙十一之間還在性能優化,Hybrid/Native領域做出了嘗試并積累了豐富的經驗和成果, 由于會有專文介紹,我在這里就不進行贅述了.
筆者就職于阿里手機淘寶團隊,負責手機淘寶基礎業務的前端開發支持.
自從11.11這個曾經普通的日子被阿里塑造成一年一度的消費者和商家的節日, 阿里的技術小二們就多了一個每年練兵的好機會. 在經歷了峰值流量的考驗后, 雙十一對于阿里更成為一個打破部門間隔閡,推動業務和技術更新的絕好機會. 且日期恰逢年關將近, 我想這也是總結團隊一年來技術演進的好機會.
工程化
我們在13年底完成了開發模式上的前后端分離, 從那時起前端項目就不再僅作為Web項目的一部分進行管理. 獨立于服務端的開發和發布過程也催生出了我們的前端項目工程化之路.
14~15年兩屆雙十一之間,在構建技術上,我們在新項目中逐步使用Gulp替代了Grunt, 并且引入了commonJS/NPM機制配合 browserify /webpack 來管理代碼依賴.
我們發布到阿里NPM平臺的一個業務組件
在代碼發布方式上,由于支撐平臺和工具的完善, 我們除了能做到在命令行中直接發布構建好的JS/CSS靜態資源外,在今天我們能根據業務類型在發布平臺上選擇引用或內聯某個資源,甚至通過一個命令把全部資源內聯后發布頁面到預發環境.
在前端測試技術上, 我們在這兩屆雙十一期間把之前散落各處并難于部署的casperJS ,mocha,chai匯聚到了云端,現在只要一個命令上傳測試用例,就能在終端或瀏覽器里看到項目的單元測試執行情況.
截圖為我們自研的云端測試平臺
React
選擇React有推動團隊框架技術升級的內部動力也有和兄弟團隊合作共建的外部原因. 到目前,除了在新項目上全面采用React外,我們正逐步把一些類似H5收藏夾,H5購物車,H5地址薄等生命周期過長的項目更換為一致的React代碼基礎, 以提高基礎業務的穩定性和長期可維護性.
這個過程中我們的主要挑戰是如何進行組件管理和關聯數據源, 在經歷了幾次選型和嘗試后,我們最終基于flux思想自己實現了一套組件管理方案.
目前,我們正在嘗試基于React Component建設適用于手淘基礎業務的組件庫, 希望在保持高度易用性的同時能和集團甚至業界其他React組件庫實現復用.
截圖為正在興建中的手淘React組件庫 Valkyrie
CSS/Flex
如果說要從這兩年前端技術領域百花齊放般出現的新技術中選擇最接近銀彈的一種, 我的答案是flex布局技術.
在15年內隨著市場的自然更新和手淘支持基線的上移, 我們開始大規模的在業務中使用flex進行布局. 這種布局方法對我們實踐界面自適應提供了強大的支持,且特別適用于電商業務中大量出現的商品展示類頁面.
通過flex我們可以看到Web平臺從文檔展示往APP界面邁進的堅實一步. 值得一提的是在這個時間段內 Apple 在自家生態圈引入了新一代 AutoLayout 布局技術. 嘗試從AutoLayout中進行借鑒或許是未來Web布局再進化的一種方向.
我們團隊著名前端布道師 @大漠 關于Flex技術的實踐文章
使用Flexible實現手淘H5頁面的終端適配
Javascript/ES6
跟隨HTML5 和 CSS3 , ES6也在這一年來到了我們的開發實踐中.
這一年里,我們通過啟用Promise改進了對異步流程和異常狀態的處理, 通過新的類和函數語法(Class / Arrow Function)把代碼重構得更便于閱讀和維護. 通過虛擬屬性(property set/get)讓項目中的數據抽象變得更加自然. 同時這個過程和React一起讓JS代碼預編譯( Babel based )從一年前少數幾個嘗試CoffeeScript的項目延伸到接近覆蓋我們的整條業務鏈. 這種趨勢發展之下,我想未來的前端程序員或許會覺得直接寫JavaScript是一種復古行為藝術.
標準化
自從手機淘寶興起, 很長一段時間內,開發同學們手頭的測試機無論機型怎么變, 支持的系統一直只有IOS和Android兩大平臺. 從今年的雙十一開始, 手機淘寶的業務終于擴張到了新的平臺 WindowsPhone之上, 由于WindowsPhone 10 版手機淘寶今年雙十一前才新近發布,大量的業務需要通過降級到H5頁面來進行支持, 基礎業務范圍這樣的情況尤其多.但這沒有對我們的雙十一開發帶來太多的挑戰,原因是我們的大量業務在年中就進行了Web標準改造.
由于webkit內核長期領先于標準實現新特性,很長一段時間內前端同學都習慣了在代碼中僅僅使用webkit前綴來進行屬性聲明. 這種情況是移動端頁面標準化改造過程中最多的問題點, 解決方法也很簡單: 使用sass 函數進行屬性聲明 + 使用 Firefox / IE 進行回歸測試.
在交付真機測試前我們會在Microsoft Edge , Firefox , Chrome 上調試我們的頁面.
HTTPS
在往年的雙十一中, 精心制作的頁面內容在傳輸過程中被劫持篡改是每一個阿里前端同學的痛苦,同時這也給公司帶來了商業上巨大的風險. 為了避免這種情況再次出現, 我們在今年花了很大的精力進行了全業務范圍的HTTPS升級改造,同時為了進一步提高性能,我們還要在這個過程中對引用的資源進行域名收斂改造.
對于基礎業務線龐雜的項目來說,這項變更最為繁復. 這種情況下,我們開發了自動化的腳本工具來進行輔助,同時充分實踐了CodeReview機制. 并和后端，測試，CDN等多部門的同學一起艱難的把默認環境更換為HTTPS才最終在雙十一前建立起手淘前端頁面的安全訪問環境.
我們通過Git Merge Request流程進行CodeReview
其他
在上面提到的技術點之外, 手機淘寶前端團隊在最近兩屆雙十一之間還在性能優化,Hybrid/Native領域做出了嘗試并積累了豐富的經驗和成果, 由于會有專文介紹,我在這里就不進行贅述了.
筆者就職于阿里手機淘寶團隊,負責手機淘寶基礎業務的前端開發支持.