Tag Archives: unobtrusive

儘量不使用 JavaScript 的前端設計...

在「A JavaScript-Free Frontend」這邊看到的,目前看起來還是很辛苦啊...

首先是可以看到他對 Asana 的抱怨:

First, I live in a rural area with only 2 Mbit/s down Internet connection. With a warm cache it takes 14 seconds for the Asana UI to become usable. Second, you can see below that the app is comprised of over 10MB of uncompressed JavaScript. That is a huge amount of code to execute. How is this acceptable?

現在前端頁面的 JavaScript 愈來愈大,除了下載時間之外,其實最卡的應該還是瀏覽器要處理編譯的時間。作者試著用現有的元素開發他的產品 Slimvoice,然後把心得整理出來... 其實還蠻考驗對 CSS 的基本功,有些東西是你根本不知道存在,另外有些東西是支援度的問題。

這個概念應該就是十多年前倡導的 Unobtrusive JavaScript,不過在這幾年前端框架雨後春筍般冒出來後就不太有人在管了 (一堆站台關掉 js 就不會動),而這也大幅「促進」了瀏覽器對 js 執行速度的改善...

Google Analytics 推出 Autotrack 工具幫助整合

Google Analytics 推出了 Autotrack 工具,讓開發者更容易整合:「Introducing Autotrack for analytics.js」。

可以看到有些地方是將 Unobtrusive JavaScript 的概念拿出來用,像是 Declarative event tracking 這邊用 data attribute:

<button data-event-category="Video" data-event-action="play">Play</button>

對於還沒有針對 Google Analytics 客製化整合的人都會有幫助:

While anyone could use and benefit from autotrack, the library is primarily geared toward sites that do not customize their current analytics implementation and would like to take advantage of the features described in this article.

GitHub 上的說明可以看到預設了非常多常用的功能,像是 socialTracker 預設就有提供 FacebookTwitter (咦,你們自己家的 Google Plus 呢?)

不過這個軟體有免責條款,不屬於 GA 的正式產品:

The autotrack library is not an official Google Analytics product and is not covered by Google Analytics Premium support. Developers that choose to use this library are responsible for ensuring that their implementation meets the requirements of the Google Analytics Terms of Service and the legal obligations of their respective country.