天天看點

《HTML5和JavaScript Web應用開發》——第 1 章 用戶端架構 1.1了解HTML5

本節書摘來自異步社群《html5和javascript web應用開發》一書中的第1章,第1.1節,作者:【美】wesley hales著,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

今天,用戶端開發顯然需要在html驅動應用架構中更多地思考和投資。随着web應用的發展,我們見證了從具有緊耦合模闆邏輯以及繁重的後端處理的傳統伺服器端架構向松耦合的javascript的轉變,實作任何時候不管是上線還是離線都能運作。

但是,這隻是過去的重複嗎?在20世紀八九十年代,我們不是已經經曆了胖用戶端時代(如圖1-1所示)嗎?

《HTML5和JavaScript Web應用開發》——第 1 章 用戶端架構 1.1了解HTML5

和20年前不同,浏覽器—如今的用戶端平台要強大得多,更不要說移動浏覽器了。此外,如今的用戶端能夠通過浏覽器和蜂窩網絡報告各種有趣的資料,例如你所在位置的經緯度。

推動浏覽器成為用戶端平台的另一個因素是許多公司,包括google、apple、mozilla和microsoft,每周對它們的混合胖用戶端技術平台進行數千種改進。

過去,建立嚴重依賴伺服器的應用程式大有益處,這使核心的後端開發人員無須擔心dom操縱和css。如果開發人員能夠獲得與後端代碼緊密相關的資料表格或者分頁元件,生成相容ie6到ie8的标記,就很了不起了(見圖1-2)。

《HTML5和JavaScript Web應用開發》——第 1 章 用戶端架構 1.1了解HTML5

但是,這種自動生成的标記是要付出代價的,特别是在當今快速變化、分裂的浏覽器世界。我們一直都需要靈活可控的标記。開放web的變化比任何時候都快,使用者界面不再允許伺服器成為過去的陳腐觀念和如前高速可伸縮的前端代碼之間的瓶頸,開發人員從未像現在這樣關心過浏覽器的性能。标記的顯示和異步資源的加載可能成就你的應用,也可能毀滅它。更輕快的前端等于更多的線索轉化、更高的seo排名和更低的資料中心成本。

在html5和移動裝置出現之前,前端(或者ui)開發人員不用關心使用者界面後面的架構,眼前充滿的是破解(crack)和專利的插件。許多開發人員專注于支援ie6、firefox、safari等少數幾種浏覽器,他們編寫清晰的語義标記,擔心xhtml的有效性,偶爾也會導入javascript程式庫,以建立一些漂亮的效果。

一旦開發人員處理完浏覽器的問題和給定應用程式的缺陷,剩下的事情就幾乎一樣了。進階web應用程式的架構主要在伺服器上被管理。應用程式依賴于入站http請求的速度以及标記顯示到使用者web浏覽器的速度。利用伺服器端模闆群組件架構,伺服器解析模闆,資料與正常的xhtml或者html标記交織在一起;對于java,則可以使用jsp、velocity、tiles、gwt或jsf來實作;對于ruby,可以使用erb、haml或者redcloth,這樣的架構還在不斷湧現。每個伺服器端web架構都有一個附屬或者可以選擇的ui模闆引擎,這就是過去十幾年的ui開發方法,而現在應該考慮建立新一代web應用的方法了。

你可能會問“為什麼我們需要改變前端的生成方式?”或者“為什麼我們要将所有代碼移到浏覽器中運作,而不是在伺服器上運作?”因為web浏覽器正在成為一個平台。我們的應用程式現在存在于比其前輩的能力提高了幾個數量級的平台(或者浏覽器)上。web應用程式就是這樣。我們不再建立網站,而是用html5、css和javascript建立可靠的應用程式。如圖1-3所示是html5标志。

《HTML5和JavaScript Web應用開發》——第 1 章 用戶端架構 1.1了解HTML5

現在,我們應該回頭看看應用程式的建構方法,為用戶端程式設計打下基礎。開發人員必須了解,為任何應用程式建構一個可伸縮、穩固的使用者界面需要的架構和方法。

繼續閱讀