全新單頁JavaScript框架Amaple

時間 2019-11-10

標籤全新單頁 javascript 框架 amaple 欄目 JavaScript 简体版

原文原文鏈接

單頁Web應用做爲新一代Web模式，爲用戶提供了更流暢的體驗知足感。早在Chrome五、IE8和Firefox3的年代就能夠經過hash技術實現單頁Web應用，而HTML5新history API的出現讓單頁Web應用從幕後迅速走向臺前。 Amaple 做爲一款體驗優先的JavaScript單頁框架，能夠在不依賴其餘工具的前提下快速開發單頁Web應用，這也意味着那些只掌握了前端基礎知識的開發者也能很容易上手開發。在開始具體聊Amaple單頁框架前，咱們先聊聊單頁Web應用自己，從簡介紹，單頁Web應用一般由一個主頁面及若干個模塊構成，在頁面跳轉或表單提交期間不會刷新瀏覽器（人爲刷新除外），使用起來它更像桌面應用，導致許多著名的互聯網公司都在不斷地轉向它，如Google、Twitter、Facebook，國內的有百度搜索、百度翻譯、阿里巴巴淘寶網的商品列表頁、阿里媽媽控制檯等。css

單頁Web應用與傳統Web對比

# 體驗

普通的Web應用跳轉受限於瀏覽器，它將會丟棄整個頁面並從新加載一個新的頁面，此時會出現短暫的頁面空白，而單頁Web應用一般在跳轉時只更新部分模塊的內容，既不會出現空白現象，還能達到更快的頁面渲染速度，從而提供更流暢的體驗。
普通Web應用在加載時顯示的動畫只能固定爲瀏覽器的加載圖，但單頁應用的跳轉是無刷新的，所以能夠像桌面應用和App同樣自定義加載數據時的等待樣式，你能夠編寫一個有趣的加載等待動畫，或是進度條等，讓你的Web應用更加多姿多彩。

# 架構

單頁Web應用一般不須要與服務器端代碼混合，它們使用數據API進行通訊，徹底實現了先後端的分離，甚至先後端代碼能夠不在同一臺服務器中，這也更加接近桌面應用和App的機制，這意味着你不用爲Web應用單獨開發一套服務端代碼，並且爲將前端代碼放在CDN上提供了可能，這些在後端渲染的普通Web應用上是作不到的。前端

# 性能

不得不認可，單頁Web應用在性能上也有它的瓶頸，相比於普通Web應用，由於它的模塊視圖一般是js動態建立的，而且視圖和數據的請求也相互獨立，因此單頁Web應用在加載時每每須要更多的http請求次數，並且動態建立與數據請求是串行執行的，這其實也是單頁Web應用不利於SEO的緣由所在。但另外一方面，正由於單頁Web獨有的代碼級頁面緩存，能夠實現更快的頁面渲染表現，而SEO也可使用現有技術來消除。node

談談單頁Web應用的將來

# Web的天生優點

跨平臺、響應式、免安裝與易編寫等，這些都是Web的天生優點，這些優點能讓它快速蔓延並在任何場景下使用。微信爲了利用這些優點，將它們與Native App進行結合推出了功能較全體驗較好的小程序，Facebook爲了統一Android、IOS與Web的編寫方法創造了React Native，選擇以HTML、JavaScript和CSS來生成兩大移動端App的代碼。webpack

# 單頁Web應用的機會

Google爲了推動Web的發展也推出了PWA和AMP，讓Web應用的體驗更加接近Native App，可見，Native App與Web的發展趨勢就像藝術同樣相互融合，相互吸取，目的是爲了避免斷提升應用的體驗效果，和尋求一種更加開放統一的生產方式。單頁Web應用也恰好符合這些趨勢，這種技術徹底有Web自己的優點，而且在提供了更好體驗的同時，也在不斷推動服務端API的統一。在將來，可能產生更多類型的終端，如VR、AR等，這意味着Web跨平臺和自適應的優點會更加明顯，而不只限於PC和手機端。但目前來看，單頁Web應用在技術實現和體驗上還有更大的發展空間，而這就是 Amaple 所要推動的。git

在 Amaple 上快速構建單頁應用

日益強大的Web體系催生了 Amaple，它的定位是讓單頁Web應用體驗更流暢，構建更簡單，即便初級前端開發也能順利掌握和使用，根據這些， Amaple 的設計有如下特色：github

# 遵循Web的原生設計原則

下降學習成本的一個特色是沿用原生Web開發的標準，這樣能夠最大化符合具備必定基礎的開發者的認知範圍，這也是 Amaple 的設計原則之一。在 Amaple 單頁應用中，依舊使用href屬性跳轉頁面，使用<form>設置action屬性提交表單，只是它們是瀏覽器無刷新的跳轉，甚至能夠建立像ShadowDOM那樣的組件，在組件內使用特定子元素，看起來就像<video>和<source>、<select>和<option>的關係同樣。Amaple 還推薦在DOM元素設置onclick屬性綁定點擊事件等web

# 數據驅動

2005年Ajax的出現使Web與服務端的通訊不再用刷新頁面，Web的體驗也經過Ajax技術攀升了一個層次，但前端開發的工做卻不斷地複雜起來，他們必須更多地和DOM元素打交道，將服務端的數據更新到頁面中，這催生了jQuery，它讓DOM操做更加便捷，但其實本質沒變。爲了更好地解決這個問題，2010年出現了最先的MVVM框架knockout，它能屏蔽幾乎全部的DOM操做，使開發者專一於業務數據，這也是業界認可的最佳界面開發方式。Amaple也提供了更簡潔的動態模板引擎，支持開發者使用模板指令將數據綁定到視圖，並經過數據驅動視圖的自動更新。算法

# 模塊化

【頁面模塊化】

單頁Web應用的特色之一是將頁面劃分爲多個模塊，URL跳轉時更新模塊的內容。在 Amaple 中存在模塊（Module）和組件（Component）兩種模塊化單位，模塊是單頁Web應用更新的最小單位，它管控URL跳轉時的內容替換、參數更新等一系列變化，並且容許開發者定義任意層級的任意多個模塊及子模塊；而組件的定位是擁有特定功能的封裝塊，它有本身的獨立視圖、狀態數據和組件行爲。與其餘單頁庫相比，它們的職責更清晰，也易於理解。小程序

【編寫模塊化】

JavaScript的模塊化遠遠不如服務端語言，直到AMD、CMD兩種模塊化規範的出現使模塊化才得以逐漸發展。隨後W3C在ES6中也啓用了import關鍵字來推進原生的模塊化發展，因瀏覽器廠商可憐的支持慢慢催生了nodejs平臺的webpack、browserify、rollup等模塊打包工具的誕生，這讓JavaScript的模塊化更加成熟，但同時也帶來了更大的開發複雜度。 Amaple 爲了解決這個問題，內嵌了模塊化功能，它容許將模塊文件、組件文件和插件文件單獨編寫並分類保存，這讓不熟悉nodejs構建工具的開發者也能編寫模塊化的JavaScript，而對於熟悉nodejs構建工具的中高端開發者，你也徹底可使用webpack、babel、scss/less等工具輔助開發。segmentfault

# 體驗更流暢

Amaple 的另外一個目的是構建體驗更加流暢的單頁Web應用，所以，Amaple 從如下三個方面的優化來保證更有體驗感的單頁Web應用：

【更流暢的動畫效果】

隨着移動終端配置的不斷提升及操做系統的優化，讓Web應用在移動端表現出更優秀的動畫效果成爲可能。
Amaple 也但願利用這一趨勢提供更加高效便捷的解決方案，它容許你在不操做DOM元素的狀況下實現模塊的切換動畫、組件動畫，甚至能夠像App那樣實現複雜的動畫及幀動畫，你能夠爲你的單頁應用掛上一個帶有酷炫動畫的Loading組件，也能夠將全部可點擊的按鈕設計成Loading組件，觸發http請求的按鈕將啓用Loading功能。

【使用更好的虛擬DOM】

相比其餘帶有虛擬DOM的庫， Amaple 實現了性能更好的虛擬DOM，在元素移動的時候，它再也不須要開發者爲它提供識別的key標誌，也能自動判斷移動的元素，並自動計算出最優的移動步驟進行移動。

【更快的頁面更新】

當前的單頁Web應用存在預加載和懶加載兩種形式，預加載在使用過程當中較爲流暢，但每每在首屏加載須要較長的時間，而懶加載更接近於普通的Web應用，每一個頁面的訪問時間也較爲平均。可是否能結合這兩種形式的優勢，在使用過程當中既能更流暢，還能使首屏加載時間趨近於正常呢？這也是 Amaple 所要解決的。

開放式

和其餘JavaScript框架或庫相同， Amaple 也但願經過社區的力量來豐富本身，因此 Amaple
的插件模塊除了支持自身的插件格式外，還支持符合AMD和iife規範的插件，這也就意味着你可使用如lodash、socket.io等幾乎全部工具類js庫。同時還會推出一些輔助工具讓開發者更方便發佈本身的插件或組件。

無薪招募夥伴

若是你是一位熱愛並具備豐富經驗的Web前端工程師，那你必定但願創造一款優秀的JavaScript框架或庫，由於這樣才能凸顯出你高超的編碼設計能力，也爲你的人生成績單上重重地劃上一筆，那恰好，如今就是你的機會，來成爲 Amaple Team 的夥伴吧。
正如你所看到的，咱們是無薪招募夥伴而非招聘員工，因此不須要你將全部時間都花在這，你照樣能夠繼續你的本職工做，而咱們但願加入咱們的是真正熱愛並但願致力於創造一個優秀js框架的人，固然，咱們也不會讓你一無所得：