單頁應用SPA是個錯誤 - gomakethings

banq發表於2022-03-03
Go

多年來，我們行業的趨勢一直是構建單頁應用程式或 SPA。
使用 SPA，整個網站或應用程式都存在於單個 HTML 檔案中。初始載入後，應用程式的所有內容都由 JavaScript 處理。從理論上講，這應該會導致 Web 應用程式感覺與原生應用程式一樣快速和快速。
 

SPA適合什麼？
首先，讓我把這個問題說出來：有幾個狹義的例子說明SPA有意義，是正確的選擇。

YouTube是一個很好的例子。當你探索其他影片時，能夠保持影片的播放是非常好的。像SoundCloud這樣的音訊網站也是如此，在那裡你可以在瀏覽和探索其他藝術家時繼續播放一首歌曲。所以......媒體網站，真的。

不過，一般來說，SPA作為一種行業趨勢或 "最佳實踐 "是錯誤的。
 

我們不斷地重新發明輪子
瀏覽器為你免費提供了大量的東西：直接內建，開箱即用。
SPA打破了這一切，並迫使你用JavaScript重新建立它。
大多數開發者都做錯了，而對於那些做對了的人來說，這導致了大量的額外程式碼來重新建立瀏覽器已經免費給你的功能。

在SPA中，當有人點選一個連結時，你需要...

  • 確定該連結是指向當前網站還是一個外部位置。
  • 如果是當前網站，則將URL路徑與內容相匹配。
  • 如果是API驅動的內容，則透過fetch()請求獲得它。
  • 更新URL路徑和瀏覽器歷史記錄，不觸發頁面過載。
  • 將內容渲染到頁面上。
  • 如果URL中有一個錨定連結，滾動到錨定元素。
  • 將焦點轉移到文件的頂部，或錨定元素（大多數SPA都會犯這個錯誤）。
  • 向螢幕閱讀器使用者宣佈頁面載入/內容改變（許多SPA也會犯這個錯誤）。
  • 如果你正在執行的任何指令碼依賴於特定的DOM結構，或附著於特定的元素，請重新初始化它們。

 
你還需要檢測使用者何時點選瀏覽器的前進/後退按鈕，並重覆上述大部分步驟作為回應。

在傳統的MPA/網站上，幾乎所有這些東西都是由瀏覽器為你完成的。其中一些很容易。有些則是複雜而微妙的，或者容易出錯，或者容易忘記。所有這些都給你的網站增加了大量的程式碼。

結果是，我們建立的東西很脆弱，很容易損壞。我們得到了 "改進的使用者體驗"，當所有的星星都完美地排列在一起時，我們就走上了這條路，而在一些邊緣情況下，使用者體驗會差很多很多。

SPA是一個錯誤。
明天，我將向你展示我們如何建立和SPA一樣效能的MPA，而且複雜性和脆弱性更低。

相關文章