[觀點]沒有javascript的前端

這幾年隨著瀏覽器強大起來,新的API不斷的普及,前端開發已經演化成獨立複雜的系統,各種framework百花齊放,像我以前主要處理後端,前端都是靠jQuery搞定,對於這種狀況,我的心情就像這篇鬼故事一樣 – [在2016年學javascript是一種什麼樣的體驗]

對於前端我也不是懵懂無知,只是沒想到後端的MVC,到了前端,花樣多了起來,不過一個工具誕生,必定有它的發揮的地方,像是:

  1. 狀態複雜的SPA或Web APP
  2. 使用者體驗至上,絕不能換頁閃爍中斷
  3. 系統高擴展高穩定的微服務架構

隨便列舉幾樣,好像都是高大上的應用,平常似乎接觸不到的感覺,只有第一項,工作中曾遇到類似的案子,是一個地圖應用的Web APP,負責的工程師是位新手,而我也沒有現代前端的經驗,再加上時程壓力,只能教他jQuery硬上,他也很爭氣地做出來了,但果不其然,維護確實很頭痛,各種狀態錯綜複雜,真是辛苦他了~

除了以上列舉的應用情境,其他一般的網站呢?最近看到一個返璞歸真的觀點,對!就是本文的標題,不過是篇英文文章,A JavaScript-Free Frontend,作者認為現在網頁肥大的問題越來越嚴重,而緩解方式像是預先讀取或者快取等方式,實質上對低網速使用者非常不友善,並不能真正解決問題,尤其作者住在網速只有2M下載的地方,體悟更是深刻。

他舉自身的例子,原本使用Angular開發初版網站,後來大改UI並改用React重新開發,最後突然頓悟了,當初改版是目標希望做到

  1. 用好的設計提供驚艷的使用者體驗
  2. 大幅度降低程式複雜度並提升可讀性
  3. 減少每次閱讀網頁的負擔

可是改完才發現與初中背道而馳,因此心一橫,就把javascript全砍了!除非萬不得已,不然就不使用,不僅減少了流量,因為不需要額外運算javascript,反而能更快速的渲染出畫面,不再需要讀取中的圖示,作者還拿出證據,開發者工具顯示的時間就是鐵證,無快取時25.2K,0.83秒,有快取7.7K,0.14秒,完全秒殺任何SPA網頁開啟速度!

接著作者還提供了許多技巧,不使用javascript仍有不錯的動態效果,這部分未來會在你其實不用javascript系列文中不斷更新

參考來源

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

您的留言將使用 Google 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s

Create a website or blog at WordPress.com

向上 ↑

%d 位部落客按了讚: