一文窺探蘇寧818“專注好服務(wù)”背后的前端研發(fā)

今年的蘇寧818注定與以往不同。

不久前的蘇寧818發(fā)布會上,蘇寧宣布由“零售商”升級為“零售服務(wù)商”,并全新升級了“專注好服務(wù)”的品牌主張。同時,家樂福1小時達等業(yè)務(wù)與全新升級的視頻、直播等平臺的接入,在今年的818共同為消費者打造更全面、更立體的服務(wù)。

當(dāng)下,消費的持續(xù)升級與市場的快速復(fù)蘇,將流量推向了更高層級。“專注好服務(wù)”,也對前端技術(shù)提出了更高的要求。經(jīng)過多年的積累,蘇寧已構(gòu)建出較為完備的前端技術(shù)體系,全力支撐覆蓋瀏覽器、APP、小程序矩陣等技術(shù)場景的“線上平臺+線下門店”各節(jié)點大促。在經(jīng)濟復(fù)蘇按下快進鍵的2020“818”,蘇寧“大前端”將會打出怎樣漂亮的組合拳?

業(yè)務(wù)、技術(shù)團隊的“發(fā)布之爭”

在電商大促中,一直存在著這樣一個矛盾:一方面,業(yè)務(wù)團隊希望促銷活動更靈活,適應(yīng)市場的快速變化,希望大促期間的活動頁面、場景玩法都能多發(fā)、快發(fā);另一方面,技術(shù)團隊則希望避免頻繁發(fā)布帶來的質(zhì)量風(fēng)險,所以傾向于在大促期間封板、禁發(fā)。

那么,蘇寧是如何應(yīng)對這個矛盾呢?

第一,前端基于Node.js對大量的系統(tǒng)進行改造,徹底實現(xiàn)前后端分離。在系統(tǒng)分層上,將展示層放在Node.js系統(tǒng)上,由前端同學(xué)維護,而對數(shù)據(jù)的處理,保留在服務(wù)端,由服務(wù)端同學(xué)處理。

第二,服務(wù)端提供微服務(wù),前端使用Node.js將服務(wù)組裝后,渲染為頁面,成為新的常態(tài)開發(fā)模式。通過這一方式,前端的多項操作就可以脫離服務(wù)端來做單獨發(fā)布,解決了絕大部分大促相關(guān)業(yè)務(wù)的快速發(fā)布和系統(tǒng)穩(wěn)定性的矛盾。涉及到數(shù)據(jù)操作相關(guān)的可以及早封板,保持穩(wěn)定。而大促相關(guān)的緊急需求可以通過Node.js來做快速發(fā)布,甚至一直持續(xù)到817-818當(dāng)天的爆發(fā)節(jié)點。

一文窺探蘇寧818“專注好服務(wù)”背后的前端研發(fā)

(圖 蘇寧廣泛的Node.js應(yīng)用,支持WAP/PC頁面快速發(fā)布)

快速搭建促銷會場的“泰坦”奇兵

蘇寧使用weex始于2017年,彼時被廣泛使用于APP的大促會場頁面上。得益于Weex的使用,蘇寧易購大促會場的渲染幀率從平均30FPS提升到平均55FPS,極大提升了用戶體驗。同時,weex頁面的轉(zhuǎn)化率也遠高于H5,可以說獲得了體驗和效益的雙豐收。

據(jù)了解,今年蘇寧818會場也同樣使用weex技術(shù),除定制化的大促主會場外,大部分的分會場及專用促銷頁,都可以通過蘇寧泰坦這一no code平臺搭建。

一文窺探蘇寧818“專注好服務(wù)”背后的前端研發(fā)

(圖 蘇寧泰坦平臺)

蘇寧泰坦平臺,支持了上百個H5/WEEX組件,支持“所見即所得”方式編輯會場、促銷頁。通過no code平臺,大促會場的開發(fā)量降低了60%,運營同學(xué)也可以在僅僅幾分鐘內(nèi)完成會場頁的配置。

一次開發(fā)、多端部署、流量共享的蘇寧小程序平臺

蘇寧小程序平臺,是蘇寧獨立實現(xiàn)的一個小程序架構(gòu),支持業(yè)務(wù)以小程序的方式運行在蘇寧系A(chǔ)PP上,如蘇寧易購、蘇寧小店、蘇寧金融、PP視頻、PP體育等,做到了一次開發(fā),多端部署。

通過小程序平臺,蘇寧得以實現(xiàn)多業(yè)態(tài)的流量共享和流轉(zhuǎn),用戶可以在蘇寧易購APP上看中超比賽,也可以在蘇寧體育APP上邊看邊購買商品,而同一個促銷玩法,可以同一時間部署到多個APP上,讓用戶一起來玩。

截止2020年818前,蘇寧已接入了包括微信、百度、頭條、支付寶等多個小程序平臺。大促的一次上線,往往要同時將代碼提交到3-4個小程序,開發(fā)成本很高,通過人工方式添加代碼確實難以為繼,于是SNT-小程序轉(zhuǎn)換器孕育而生。

SNT基于Babel,將微信小程序代碼轉(zhuǎn)化為百度、頭條、支付寶小程序代碼,轉(zhuǎn)化率超過80%,極大的降低了小程序的開發(fā)成本,前端工程師僅需開發(fā)微信小程序代碼,再通過SNT轉(zhuǎn)換器,就可以生成其他小程序的代碼。通過SNT,前端團隊僅花費微信小程序一半的人力成本,就支撐了百度、頭條、支付寶等小程序的迭代需求。

游戲玩法引擎化,大幅提升用戶體驗

隨著技術(shù)的進步和業(yè)務(wù)的發(fā)展,電商大促游戲玩法已經(jīng)不僅限于直接發(fā)紅包而是變得更具備互動性、傳播性、長期性。

經(jīng)過幾年的探索,蘇寧前端在2020大促玩法上,將渲染方案統(tǒng)一為pixi.js,并圍繞pixi.js開發(fā)了“鯨喜”和818晚會玩法,在新瀏覽器中開啟WebGL后,渲染性能有了一定幅度的提高,在pixi.js基礎(chǔ)上,通過骨骼動畫、粒子系統(tǒng)等插件,解決了以往開發(fā)中資源加載過多,核心庫過大等問題。

一文窺探蘇寧818“專注好服務(wù)”背后的前端研發(fā)

一文窺探蘇寧818“專注好服務(wù)”背后的前端研發(fā)

蘇寧818已迎來爆發(fā),但前端的技術(shù)之路沒有終點。

據(jù)悉,818后,蘇寧小程序平臺將進一步開放,提供開發(fā)套件給蘇寧體系外的技術(shù)開發(fā)者, 818后,XNPP也將面向廣大的Node.js開發(fā)者開源。未來,高復(fù)雜度的業(yè)務(wù)場景與大流量的訪問,將持續(xù)推動蘇寧前端技術(shù)朝著更高點前行,為蘇寧全場景智慧零售服務(wù)商升級提供更穩(wěn)健的技術(shù)驅(qū)動力。

(免責(zé)聲明:本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性,但不保證有關(guān)資料的準確性及可靠性,讀者在使用前請進一步核實,并對任何自主決定的行為負責(zé)。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏,概不負任何法律責(zé)任。
任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時,應(yīng)及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明,并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后,將會依法盡快聯(lián)系相關(guān)文章源頭核實,溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。 )