淘寶app是基于Hybrid技術(shù)開發(fā)的，既包含了native和web技術(shù)兩部分。

1. Native 部分

Native 部分主要包括以下模塊：

1.1 UI框架

淘寶app的 UI 主要使用的是 Weex 框架，該框架基于 Vue.js 開發(fā)，可以直接生成 Native 的 View 控件或者 H5。可以減少原生 Android 或 iOS 開發(fā)的工作量。

1.2 CMS系統(tǒng)

淘寶app使用了自己的CMS系統(tǒng)來管理頁面的數(shù)據(jù)和運營配置。通過這個系統(tǒng)，淘寶可以動態(tài)地修改頁面元素，從而實現(xiàn)一些運營功能。

1.3 H5容器

淘寶app還使用了自己研發(fā)的 H5 容器，該容器將 H5 頁面作為一個內(nèi)嵌的WebView 打開，這樣可以在 H5 頁面運行時，調(diào)用 Native 的API，支持一些特殊的交互方式，比如頁面跳轉(zhuǎn)，登錄等操作。

1.4 設(shè)備能力

淘寶依賴原生 Native 的能力來完成一些特殊的操作，例如設(shè)備的復(fù)制、分享、發(fā)短信、打電話、截屏等功能。

2. Web 部分

淘寶app的 Web 部分主要使用的是 H5 技術(shù)，并且是基于針對移動端優(yōu)化的 WebView 來開發(fā)的，因此在頁面性能和用戶體驗方面都有了明顯的提升。

2.1 SPA架構(gòu)

淘寶app是采用單頁應(yīng)用程序(SPA)架構(gòu)開發(fā)的，這種架構(gòu)可以提高頁面的呈現(xiàn)速度，因為只是局部的數(shù)據(jù)刷新，不需要整個頁面重新加載。

2.2 數(shù)據(jù)通訊

淘寶app使用的是 RESTfulAPI 來進(jìn)行數(shù)據(jù)通訊，這種API具有與設(shè)備獨立無關(guān)，可讀性高等優(yōu)點。同時，通訊數(shù)據(jù)也采用了JSON格式，因為JSON格式相對比較輕量，能提高網(wǎng)絡(luò)傳輸速度。

2.3 自適應(yīng)頁面

淘寶app中，前端開發(fā)人員優(yōu)先采用了自適應(yīng)屏幕設(shè)計，根據(jù)頁面的不同設(shè)ios中嵌套h5做的app備和瀏覽器，自動適應(yīng)不同的分辨率和屏幕大小。

2.4 緩存技術(shù)

移動設(shè)備存儲空間的限制，淘寶app依賴于瀏覽器緩存來提高頁面的呈現(xiàn)速度，這種緩存技術(shù)可以將頁面源文件和資源緩存在本地，極大的提高了頁面的呈現(xiàn)速度。

總的來說，淘寶app采用了多種技術(shù)手段來構(gòu)建，在前端開發(fā)中，使用Hybrid技術(shù)可以更好的將H5和Native因素進(jìn)行整合，同時這種技術(shù)還能極大的降低開發(fā)成本，從h5制作app排行而達(dá)到更好的用戶體驗和開發(fā)效率。