Ascheriit

Migrated to logdown

Mon, 16 Dec 2013 10:30:00 +0800

Octopress 雖然很棒但是每次換環境都要重弄實在太麻煩了，所以我偷偷的轉移到 logdown 一段時間了。

http://alivedise.logdown.com

Welcome to visit!

[COSCUP 2013] Audio competing in FxOS

Tue, 6 Aug 2013 17:40:00 +0800

I gave a presentation about how we implement the audio competing in FxOS in COSCUP.

[FxOS] Plan: Window Management decoupling (CONT.)

Thu, 18 Jul 2013 17:33:00 +0800

Following are the plan about why and how to split current Gaia:System:Window Manager.

Sources/Links

Current main functions in Window Manager

App Window Management
Wrapper Window Management
Inline Activity Management
Homescreen Management
MozBrowser Element Generation
Orientation Management
Visibility Management
Resize Management
App Screenshots Management [deprecated]
System Message Handler
Open app transition
Close app transition
FTU Management [deprecated! Become standalone FTU Launcher already!]

So which could be pulled out to reduce the heavy weight?

Inline Activity Management –> App Window

Inline Activity Management should belong to the activity caller.

If app A opens a page(open.html) of app B as an inline activity, the life cycle of activity callee is based on app A instead of app B.

Thus, if app A is killed or closed, the activity opened by app A should be killed.

But if app B(index.html) is killed, activity B(open.html) shouldn’t be affected.

Resize Management

Resize is another duty of the app window instance itself.

If we’re moving the activity into the app window, we could

Recursively call current activity callee’s resize function until the last callee is found.
Resize all activity callee on top of current app window.

in the app window’s resize function.

Visibility Management

App window would have 2 kind of “child-like” window instance: * var child = window.open * Activity

[Fx OS] Background media play

Tue, 16 Jul 2013 19:16:00 +0800

If you want to have you own media playing app to be able to run at background, and/or has the ability to interrupt other playing audio, please view this article for what to do.

Audio Channel Permission

You need to specify this permission in the manifest of your app.

And yes, this means we don’t allow a web page without the manifest to play at background.

"permissions": {
  "audio-channel-content": {}
}

The content represents the name of the audio channel.

Note: Video’s permission also uses the same audio-channel-content.

Audio Channel Types

We have five audio channels currently:

normal: Default channel of any media element, including video.
content: Especailly stands for content like music.
notification: Include desktop-notification sounds
ringer: Incoming call ringer
alarm: Alarm has a specific requirement to interrupt any other channel above.
telephony: Voice.

Volume Settings

Normal and content channel are sharing the same volume settings.
Notification and ringer are another set.
Other has its own settings key.

Audio Competing Rules

We’re interrupting the lower channel when higher channel occurs.
If the same channel are playing and using content channel, the one who gets visibility (go to foreground) would be the winner.
The foreground page/app is always playable. However the channel type decides it could interrupt background playing content or not.
The background page/app is playable if and only if the background is causing by screen off, and the page/app is the current displayed one.

I would explain the rules more in another article ;)

[Statically] HTML Media Element

You could assign audio channel type to the media elements in HTML.

<audio mozaudiochannel="content"></audio>
<video mozaudiochannel="content"></video>

Please keep in mind you need relevant channel permission.

Note: It’s mozaudiochannel instead of mozaudiopchanneltype here.

[Dynamically] Javascript

Sometimes we need to dynamically generate the player element:

var audio = new Audio();
audio.mozAudioChannelType = 'content';

// Set audio channel type before setting src to avoid decoder confuses.
audio.src = 'xxx.ogg';

Change the channel of the audio to another type is not allowed.

You should create another audio/video instance if you want to be played in another channel.

(OPTIONAL) If you want to know you’re interrupted by higher channel

Add mozinterruptbegin/mozinterruptend event handler if you need to do something with interruptions.

  var player = document.getElementById('audio#my-player');

  // ...
  // The event is fired on the media element. 
  player.addEventListener('mozinterruptbegin', function onInterrupted() {//do sth....}); 
  player.addEventListener('mozinterruptend', function onResumed() {// do sth....}); 

Notices

Even if your are developing a HTML5 video playing app, and we all know that video shouldn’t be played at background due to strange UX, you should also consider to set content channel because video is expected to interrupt the current background playing media.

Reference

Proposal: System Modulization Plan

Wed, 10 Jul 2013 18:04:00 +0800

Source

https://github.com/mozilla-b2g/gaia/tree/master/apps/system

Issues with Modulization-less

Some modules directly invokes others.
‘LockScreen is undefined.’ message appears oftenly right after device boots up.
Memory concern – Most of the modules are not always needed. Most of the UI view doesn’t need to live in the DOM tree at first.
Performance concern – device bootup time is getting longer and longer.

Proposal: Core modules and side modules

We could figure out what’s definitely necessary in an operating system and what’s not. For example, Window Management relevant modules should be a core module but Captive Portal shouldn’t be.

The main idea is the same as any other app performanace tuning: Lazy load anything on demand.

The key to this idea would be to establish the following rules: * Any side module would have a main event by interest. * An event dispatcher as a core module to gather all main events of side modules and then lazy load them. For example, lazy load the Captive Portal:

window.addEventListener('mozChromeEvent', function(e) {
  if (e.detail.type == 'captive-portal-login' && typeof(CaptivePortal) == 'undefined') {
    lazy-load('captive-portal', function onReadyCallback() {   // lazy load captive portal and its HTML part.
      CaptivePortal.handleEvent(e);  // Pass the event
    });
  }  // If we have already load the CaptivePortal, the event listener inside CP would catch the event by itself.
});

So another rule would be: * expose handleEvent in any side module for Event Dispatcher to invoke when they are firt time loaded by Event Dispatcher.

With this, we could even lazy load lockscreen, because if lockscreen is disabled by the user, we don’t need to load it when the device boots.

IMO there’re only few core modules now:

Window Management
- App Window
- Browser Frame
Utility-tray
Statusbar
Init Logo Handler (But this is useless after device boot finishes.)
Screen Management (Exactly, it’s indeed Wake Lock Management)
Applications (API Wrapper for mozApp)

The following are API wrappers which I believe is also important enough to be a core module.

Hardware Button Management (Many other modules’ execution route is started here.)
Battery Management (UI-less but more like an API wrapper for mozBattery so I would put this into core module.)
Airplane Mode (API Wrapper of mozSettings: radio.enabled)
Bluetooth (API Wrapper for mozBluetooth)
Cost Control (It already lives inside an iframe.)
Ftu Launcher (Necessary only for one time when device is first time booted.)
Keyboard Management
mouse2touch
Notifications
Orientation observer (API Wrapper for deviceorientation event)
Sound manager (There are too many events involed here.)
Update Management

Chanllenge

If we want to “unload” the module and its view using iframe, we need a way for modules inside iframe to communicate. The first thing come to my mind is window.parent.postMessage

Second, we need to consider dependency problems if it’s too complex.

[Window Management] Transition state machine

Fri, 5 Jul 2013 14:53:00 +0800

The article is inspired by Tim’s CSS Classes State Machine Puzzle.

We had some frustrations all the times, on animating a window correctly.

Recently I try to dedicate on solving the puzzle. But at first I need to apologize for my poor knowledge and thought about css transitions using class names.

In the past I usually thought it was stupid to use class list to control the style. I thought it was ambiguous and strange if we ran into a situation that there’re more than one classes of same type put on one element. And an element full of different class names for different purposes may conflict. Recently I see Effeckt and know this is the trend: a simple class name stands for a kind of animation.

The real problem is that we should never put wrong class on the DOM element, in javascript. So this now turns to be a pure javascript puzzle.

We know, that, in certain moment, the app window is always in a specific state A, not B nor C. So what’s the problem? It’s how could we switch the state correctly.

Let’s create a real state machine in javascript!

So far it doesn’t take times for us to figure out that a window should have 4 basic transition state: closed, opening, opened, closing.

A basic transition life cycle of a window could be:

(initial) -> closed -> opening -> opened ——> closing -> opening ——> ….

Now we have 4 states, the next is what’s the trigger to states switching?

In finite state machine, what triggers state change is named for ‘event’.

We know that at least we have 2 events: ‘open’ and ‘close’.

‘open’ would trigger closed switches to opening
‘close’ would trigger opened switches to closing
If we sends ‘open’ event into the state machine continously, the second event would be ignored. (Exactly it depends on what policy we choose. For example, we could devide ‘opening’ state into ‘opening-part-1’ and ‘opening-part-2’ states. And implement the async state change. But if we need s two-state opening, it sounds like a CSS design problem to me. Let’s discuss this later if necessary.)
In order to gurantee the transition does really end and thus being independent from the ‘animationend’ event(The event here is HTML DOM Event), we need to add a timer between ‘opening’ and ‘opened’ state. Also between ‘closing’ and ‘closed’ state.
Let’s call the new event ‘timeout’, the timing we set the timer is right after the transitioning from ‘closed’ to ‘opening’, and from ‘opened’ to ‘closing’ successfully occurs.
For some use case we may want to cancel the transition. The ‘cancel’ event is only valid in ‘opening’ and ‘closing’ state.

So far, the state machine for transition we have:

Now the problem is, how to represent this machine in javascript?

My anwser is put every transition relevant functions/attributes in another mixin object, which would be mixed into appWindow.prototype:

(function(window) {
  'use strict';

  function capitalize(string)
  {
      return string.charAt(0).toUpperCase() + string.slice(1);
  };

  /**
   * This object declares all transition event enum:
   *
   * * OPEN
   * * CLOSE
   * * FINISH
   * * END
   * * CANCEL
   *
   * @static
   * @namespace TransitionEvent
   * @type {Object}
   */
  var EVT = {
    OPEN: 0,
    CLOSE: 1,
    FINISH: 2,
    END: 3,
    CANCEL: 4
  };

  var _EVTARRAY = ['OPEN', 'CLOSE', 'FINISH', 'END', 'CANCEL'];

  /**
   * Describe the transition state table.
   *
   * @example
   * var toState = transitionTable[currentState][event];
   *
   * The value "null" indicates that the transition won't happen.
   * 
   * @type {Object}
   */
  var transitionTable = {
              /* OPEN|CLOSE|FINISH|END|CANCEL */
    'closed':  ['opening', null, null, null, null],
    'opened':  [null, 'closing', null, null, null],
    'closing': ['opened', null, 'closed', 'closed', 'opened'],
    'opening': [null, 'closed', 'opened', 'opened', 'closed']
  };

  /**
   * This provides methods and attributes used for transition state handling. It's not meant to
   * be used directly.
   *
   * The finite state machine of transition is working as(being from normal state):
   * 
   * * `closed`  ---*event* **OPEN** ----------------> `opening`
   * * `opening` ---*event* **END/FINISH/CANCEL** ---> `opened`
   * * `opened`  ---*event* **CLOSE** ---------------> `closing`
   * * `closing` ---*event* **END/FINISH/CANCEL** ---> `closed`
   *
   * If you want to reuse this mixin in your object, you need to define these attributes: `this.element`
   *
   * And these method: `this.setVisible()` `this.publish()`
   *
   * The following callback functions are executed only when the transition state are successfully switched:
   * `_onOpen`
   * `_onClose`
   * `_onEnd`
   * `_onFinish`
   * `_onCancel`
   * `_leaveOpened`
   * `_enterOpened`
   * `_leaveClosed`
   * `_enterClosed`
   * `_leaveClosing`
   * `_enterClosing`
   * `_leaveOpening`
   * `_enterOpening`
   *
   * Every callback here is for internal usage and would be executed only once.
   *
   * However you could utilize inner event in other functions.
   * 
   *
   * @mixin WindowTransition
   */
  /**
   * @event AppWindow#_onTransitionOpen
   * @private
   * @memberof AppWindow
   */
  /**
   * @event AppWindow#_onTransitionClose
   * @private
   * @memberof AppWindow
   */
  /**
   * @event AppWindow#_onTransitionEnd
   * @private
   * @memberof AppWindow
   */
  /**
   * @event AppWindow#_onTransitionFinish
   * @private
   * @memberof AppWindow
   */
  /**
   * @event AppWindow#_onTransitionCancel
   * @private
   * @memberof AppWindow
   */

  var WindowTransition = {
    TRANSITION_EVENT: EVT,

    /**
     * _transitionState indicates current transition state of appWindow.
     *
     * @memberOf WindowTransition
     * @default
     * @type {String}
     */
    _transitionState: 'closed',

    /**
     * Record the previous transition state.
     *
     * **Only updated if the state changes successfully.**
     * 
     * @type {String|null}
     * @memberOf WindowTransition
     */
    _previousTransitionState: null,

    /**
     * Handle the transition event.
     * @memberOf WindowTransition
     */
    _transitionHandler: function aw__transitionHandler() {
      this._cancelTransition();
      this._processTransitionEvent(EVT.FINISH);
    },

    _cancelTransition: function aw__cancelTransition() {
      this.element.className.split(/\s+/).forEach(function(className) {
        if (className.indexOf('transition-') >= 0) {
          this.element.classList.remove(className);
        }
      }, this);
    },

    _enterOpening: function aw__enterOpening(from, to, evt) {
      /**
       * @todo set this._unloaded
       */

      this.resize(null, null, true);
      if (this._unloaded) {
        //this.element.style.backgroundImage = 'url(' + this._splash + ')';
      }

      // Turn of visibility once we're entering opening state.
      this.setVisible(true);

      // Make sure the transition is terminated.
      this._openingTransitionTimer = window.setTimeout(function() {
        if (this._previousTransitionState &&
            this._previousTransitionState == from &&
            this._transitionState == to) {
          this._processTransitionEvent(EVT.END);
        }
      }.bind(this), this._transitionTimeout*1.2);

      /**
       * @event AppWindow#appwillopen
       * @memberof AppWindow
       */
      if (from !== 'opened') {
        // Only publish |willopen| event when previous state is "closed".
        this.publish('willopen');
      }
      this.element.classList.add('transition-opening');
      this.element.classList.add(this._transition['open']);
    },

    _enterClosing: function aw__enterClosing(from, to, evt) {
      // Make sure the transition is terminated.
      this._closingTransitionTimer = window.setTimeout(function() {
        if (this._previousTransitionState &&
            this._previousTransitionState == from &&
            this._transitionState == to) {
          this._processTransitionEvent(EVT.END);
        }
      }.bind(this), this._transitionTimeout*1.2);

      /**
       * @event AppWindow#appwillclose
       * @memberof AppWindow
       */

      if (from !== 'opened') {
        // Only publish |willclose| event when previous state is "opened".
        this.publish('willclose');
      }
      this.element.classList.add('transition-closing');
      this.element.classList.add(this._transition['close']);
    },

    _processTransitionEvent: function aw__processTransitionEvent(evt) {
      var to = transitionTable[this._transitionState][evt];

      if (to === null) {
        return;
      }

      var from = this._transitionState;

      this.leaveState(from, to, evt);
      this.onEvent(from, to, evt);
      this.enterState(from, to, evt);

      this._previousTransitionState = from;
      this._transitionState = to;
    },

    enterState: function aw_enterState(from, to, evt) {
      var funcName = '_enter' + capitalize(to.toLowerCase());
      if (typeof(this[funcName]) == 'function') {
        setTimeout(function(){
          this[funcName](from, to, evt);
        }.bind(this), 0);
      } else if (this[funcName] && Array.isArray(this[funcName])) {
        this[funcName].forEach(function(func) {
          setTimeout(function(){
            func(from, to, evt);
          }.bind(this), 0);
        }, this);
      }
    },

    leaveState: function aw_leaveState(from, to, evt) {
      var funcName = '_leave' + capitalize(from.toLowerCase());
      if (typeof(this[funcName]) == 'function') {
        setTimeout(function(){
          this[funcName](from, to, evt);
        }.bind(this), 0);
      } else if (this[funcName] && Array.isArray(this[funcName])) {
        this[funcName].forEach(function(func) {
          setTimeout(function(){
            func(from, to, evt);
          }.bind(this), 0);
        }, this);
      }
    },

    onEvent: function aw_onEvent(from, to, evt) {
      var funcName = '_onTransition' + capitalize(_EVTARRAY[evt].toLowerCase());
      this._invoke(funcName);
    },

    _enterOpened: function aw__enterOpened(from, to, evt) {
      this._cancelTransition();
      if (this._openingTransitionTimer) {
        window.clearTimeout(this._openingTransitionTimer);
        this._openingTransitionTimer = null;
      }
      this.element.classList.add('active');
      /**
       * @event AppWindow#appopen
       * @memberOf AppWindow
       */

      if (from == 'opening') {
        // Only publish |open| event when previous state is "opening".
        this.publish('open');
      }
    },

    _enterClosed: function aw__enterClosed(from, to, evt) {
      this._cancelTransition();
      if (this._closingTransitionTimer) {
        window.clearTimeout(this._closingTransitionTimer);
        this._closingTransitionTimer = null;
      }
      this.element.classList.remove('active');
      this.setVisible(false);

      /**
       * @event AppWindow#appclose
       * @memberof AppWindow
       */
      if (from == 'closing') {
        // Only publish |close| event when previous state is "closing".
        this.publish('close');
      }
    },

    /**
     * Set the transition way of opening or closing transition.
     * @param  {String} type       'open' or 'close'
     * @param  {String} transition The CSS rule name about window transition.
     * @memberOf WindowTransition
     */
    _setTransition: function aw__setTransition(type, transition) {
      if (type != 'open' && type != 'close')
        return;

      this._transition[type] = transition;
    }
  };

  AppWindow.addMixin(WindowTransition);
}(this));

The state machine’s usage and notes

A single app window instance would send ‘open’ and ‘close’ event due to user action: transitionStateMachine.processEvent(‘open’); transitionStateMachine.processEvent(‘close’); Note, app window doesn’t need to know current state of the state machine.
The state machine itself is the one who creates/removes the timer which triggers timeout event. I am also thinking about moving this out of the state machine and do this in another mixin, only have the callback functions provided by the state machine. But I am not sure.
The state machine has some callback for others(other state machine!) listed below:
- Enter a state successfully.
- Leave a state successfully.
- When an event triggers state switch successfully. In all these callback we would get the previous state and current state, and the event who triggers them.
The CSS class for real UI closing animation is added in enterClosing and removed in enterClosed. Or else we could do that in leaveOpened and leaveClosing. I have no strong opinion here. Maybe we could define the level of the callback into three here, according to the callback order.
The CSS class for real UI opening animation is added in enterOpening and removed in enterOpened.
We could also move out (4) and (5) to another mixin to purify the state machine.

Finally, back to the problems addressed in Tim’s article:

Do we need intermediate state?
- I don’t think so, at least for now. If we really need to goto next state when we successfully from state A to state B, we could call _processEvent again in the inner callback of the state machine. This doesn’t violate the policy that only state machine ifself could decide its next state.
- If the intermediate state needs to acquire other type of state — just fetch the current state of the other state machine. Or, if we need, register an one-time callback if the current state doesn’t meet our requirement.
How about state conflict between two apps?
- That won’t happen if we deal with the state changes correctly and independently in each app’s scope. I hope so.

HTML5 Page visibility on Fx OS

Fri, 5 Jul 2013 04:23:00 +0800

在桌面版本的網頁開發中，我們可以透過 HTML5 的 page visibility API 來知道目前的網頁是否為使用者焦點，或者目前不可為使用者所見，來達成某些目的：如停止 UI 更新，資料交換…等，範例程式如下：

function handleVisibilityChange() {
  if (document.hidden) {
  // Pause UI update
  } else {
  // Begin UI update
  }
}

document.addEventListener("visibilitychange",
  handleVisibilityChange, false);

我們將這個 API 帶到 Firefox OS 中，並賦予了它更深一層的意義：

應用程式判斷自己在前景/背景的依據，類似 android 的 onPause/onResume
系統底層 Low Memory Killer 的參數之一：背景應用程式在可用記憶體過低時會優先被 kill
在電力消耗變成一個必須優先考量要點的手持裝置上，透過進入背景時停止更新 UI 對電力節約有很大幅度的幫助。
然而，在手機系統上，並不像在桌面瀏覽器一樣單純的是透過頁面切換 (onPageShow/onPageHide) 來決定要不要對某個 web page/app 做前景背景切換，而是要根據系統 UI hierarchy 以及當前介面中層級較高的其他元件的狀態來維持 visibility 的協調性。

聽起來很抽象嗎？先來張系統模組介面架構圖： Gaia System Architecture Diagram (source from https://docs.google.com/drawings/d/18DnhTgQBK3M0KBeLGJkWW1hfiYBB6GgTmfdbUnT2SLs/edit?usp=sharing)

簡單的說，手機系統介面在特定狀態下會將目前已經是前景的 app 設定為背景狀態，其優先層級如下：

Screen off (螢幕關閉)
Call screen (電話中介面)
Lockscreen on (手機鎖定介面啟動)
Inline activities (app內嵌 web activities 作用中)
App transition end (app 切換結束)
Back to home (回到 homescreen)

而這些事件又可能會同時發生而產生互相影響，如：inline activity 作用時電話打進來，多重 inline activities 中第一次產生的 activity frame 會被第二次的 activity frame 蓋掉…等。

這些決策發生在哪呢？與桌面瀏覽器不同，決定這一切的是發生在 Gaia，也就是 Firefox OS 的 UI 層：換句話說，是以 JavaScript 撰寫的噢。而實現的方式是系統中各個模組對各個底層 moz-* API 的 callback 重新包覆並以 custom event 的形式通知其他模組，最後集中給 system app 中的 Window Manager 來做統一管理。

這樣做最大的原因是：只有 Gaia 本身最了解與 UI 相關的一切，而既然 Gecko 將 API expose 出來，只要你對 API 夠熟悉，想要自己用 JavaScript/HTML 實現一個瀏覽器是可能的。

這部份我們可以用一個實例說明：「裝置從進入閒置狀態，到使用者按下電源鍵，之後解開鎖定螢幕 (LockScreen)」對 visibility 影響的過程：

Screen is off by idle timeout:

(Gaia) [Screen Manager] mozPower.screenEnabled = false
(Gaia) [Screen Manager] send custom ‘screenchange’ event
(Gaia) [Lockscreen] get ‘screenchange’ event, check the settings of “lockscreen.enabled” and dispatch custom ‘lock’ event
(Gaia) [Window Manager] get ‘lock’ event, and then set visibility = false for current app(focused one).
(Gonk) [/sys/power] See mozPower.screenEnabled is modified and send ‘sizemodechange’ to simulate the content window is minimized.
(Gecko) [shell] Get ‘sizemodechange’ event, set visibility = false for the whole system app

Turn on screen:

(Gecko) Get keypress event of sleep-button, and then send mozChromeEvent to gaia
(Gaia) [Hardware Button Manager] Get mozChromeEvent with type = “sleep-button-press”, wrap the event to ‘wake’ event
(Gaia) [Screen Manager] mozPower.screenEnabled = true
(Gecko) [shell] Get ‘sizemodechange’ event, set visibility = true for the whole system app [NOTE] the current app is still invisible now, but the system app is visible.

Unlock the lockscreen:

(Gaia) [Lockscreen] Send custom ‘unlock’ event.
(Gaia) [Widow Manager] Get ‘unlock’ event and turn on the active app’s visibility.

對 App 開發者來說，其實你只要適當地註冊 visibilitychange event handler 去分別處理前景與背景的任務，而維持 visibility state 的正確性與一致性則是作業系統的責任，這也是開發 website/web application 與 web-based OS 之間最大的不同吧：必須同時考慮到過去（已經存在的網頁）/現在（我們正在開發中的內建app）/未來（即將到來的 FirefoxOS app）。

P.S. This is posted at moztech first. See here

My first year at Mozilla

Fri, 5 Jul 2013 02:31:00 +0800

Achievements

第一次出國，第一次出差。
工作關係出差四次去了三個國家（美國兩次，德國，西班牙），自己自助旅行去了日本。
變成module peer。
參與了一些以前沒有被發明過的WebAPI的設計或討論。
有了當面試官的經驗。
第一次參加全公司的出遊活動。
對Firefox的layout engine: Gecko送了幾次patch，簽了Level 1 Committer賣身契。
寫了數百個各種patch，解了數百個各種bug。
看到很多以前沒有遇過的pattern，現在回去看一年前寫的東西感覺又不同了。
當然也看到一些不好的設計，很希望有機會能夠改變它。
認識一些除了我之外在工作之餘還是對技術玩意很有熱忱的人。

目前身分是自由球員，理論上被允許去做任何我想做的事，不太被干涉，我非常，非常喜歡這件事。也很感謝我的主管”縱容”我。
養了叫bug的貓。
在COSCUP 2012給過talk。
今年還有一次跟FxOS有關的talk。
在柏林的時候人生第一次看到雪。

Canvas

MountainView

San Francisco

Berlin – Snow!

Spain

Japan

自助旅行 – 是的，這其實跟工作無關，不過也因為是在這裡，請長假出國玩絕對不是太困難的事情。
我在日本期間去了日本Mozilla辦公室 – 位在六本木，一個很棒的空間。

While (true) {

還想多用javascript寫一些不同的pattern。
想培養持續玩一些小的side probject的習慣。
想把自己bug track list裡面的bug通通吃完。
想了解gaia裡面某些至今還沒有看完的複雜的應用做了什麼，為了什麼，可以學到什麼。
繼續寫blog吧!
想改變我想改變的事情。
}

Recent side projects: Alvitr, Lucifer, GaiaSystemAPIDOC

Tue, 18 Jun 2013 12:33:00 +0800

Alvitr

Alvitr(艾爾薇妲）是北歐神話中戰女神的其中一名，其名意為「全知」。

最近對某個遊戲(Puzzle & Dragon)很沉迷，但是在網路上遍尋不著產生簽名檔的服務，於是就興起了想要自己做的念頭。

Alvitr

大概花了一個禮拜的時間，本來想用Amazon AWS + node.js的組合來用伺服器端產生圖檔，但是遇到了不少問題如： 1. AWS初始化實在太煩人了。 2. node.js跑起來會莫名的crash，錯誤訊息看起來像是c語言的某個函式。（我不是在寫js嗎？！)

後來還是決定用client端javascript application的形式做，至少IE9可以支援Canvas。

Canvas templating

因為目標是把使用者輸入的資料轉成不同大小內容配置也不同的圖片，

於是我在想可以針對不同大小圖片弄一個像是configurtaion的物件，每次配置選擇改變只要換掉configuration就好了。

最後成果client.js

繪圖元件配置不外乎：x, y, weight, height, color等的參數，所以要創造一個新的配置物件只要複製貼上再去微調就好了。

Lucifer

明亮之星，早晨之子啊，你何竟從天墜落？你這攻敗列國的何竟被砍倒在地上？你心裡曾說：我要升到天上；我要高舉我的寶座在神眾星以上；我要坐在聚會的山上，在北方的極處。我要升到高雲之上；我要與至上者同等。然而，你必墜落陰間，到坑中極深之處。

Lucifer

拿某篇文章來開的小玩笑，主要是用了ejs template engine來亂數產生一些怪物資料在文章內。

Gaia System API Documentation

Gaia System JSDOC JSDOC3 bootstrap template 不知道為什麼jsdoc2我電腦一直裝不成功，jsdoc3倒是很簡單的用npm就裝好了。

找了一下找不到專門給jsdoc3用的好看template…我就自己套bootstrap上去了，成果如上。

其他

我還有一兩個一直很想做的probject…不過總是因為懶惰作罷:P

回首到Mozilla也一年了，感覺自身還有很多不足…. 督促自己寫side project只是開始而已，還要再努力阿！

Javascript從變形矩陣反推scale以及rotate

Mon, 27 May 2013 15:41:00 +0800

原文： http://css-tricks.com/get-value-of-css-rotation-through-javascript/

今天在追一個跟CSS3 transform有關的bug，過程中懷疑是transform沒有正確應用到element上。

最後想到用一個Mutation Observer去觀察元素的變形矩陣的某個值（在此例為scale)的變化，因為transform沒辦法直接用element.style直接拿到scale的值，所以要用getComputedStyle拿出變形矩陣後算出來：（skew跟translate的值原文沒有提供算法，看了一下網路文章似乎沒辦法逆推。）

  /**
   * Construct a mutation observer.
   * See https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
   */

  /**
   * var target = document.querySelector('#id');
   */
  var target = document.querySelector('#id');
  /**
   * create an observer instance
   */
  var observer = new MutationObserver(function(mutations) {
    /**
     * We could iterate the mutations here,
     * but I don't really care it now.
     */
    var st = window.getComputedStyle(target, null);
    var tr = st.getPropertyValue("-webkit-transform") ||
             st.getPropertyValue("-moz-transform") ||
             st.getPropertyValue("-ms-transform") ||
             st.getPropertyValue("-o-transform") ||
             st.getPropertyValue("transform");

    console.log('Matrix: ' + tr);

    // rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

    var values = tr.split('(')[1];
    values = values.split(')')[0];
    values = values.split(',');
    var a = values[0];
    var b = values[1];
    var c = values[2];
    var d = values[3];

    var scale = Math.sqrt(a*a + b*b);

    // arc sin, convert from radians to degrees, round
    // DO NOT USE: see update below
    var sin = b/scale;
    var angle = Math.round(Math.asin(sin) * (180/Math.PI));

    // works!
    console.log('Scale: ' + scale + ';Rotate: ' + angle + 'deg');
  });
  /**
    * Configuration of mutation observer.
    */
  var config = { attributes: true, childList: true, characterData: true };

  /**
   * pass in the target node, as well as the observer options
   */
  observer.observe(target, config);

From browser to browser. (1)

Sat, 23 Feb 2013 17:40:00 +0800

Firefox OS

System app

Exactly, Firefox OS, also known for boot 2 gecko, is having only one app/one page. It’s the system app, which controls all web app’s life cycle. When FirefoxOS is booted, it would load the system app from system/index.html. Then system app would take care of the remaing stuff.

Load modules
Init homescreen app
Etc.

Window Manager

Window Manager is the core of Firefox OS, the core of system app, which is in charge of creating/maintaining/killing apps. An app, indeed, is a web page.

We use a magic, calling browser API, to make a web page act like an app.

Browser API

See https://developer.mozilla.org/en-US/docs/DOM/Using_the_Browser_API

A browser here means that the web page acts like it is living in a browser frame. We are replacing nearly every XUL-based UI with HTML to port the WEB to the phone.

Module Pattern

Module pattern is the way Window Manager being imeplemented. A module pattern looks like:

var WindowManager = (function() {
  var _id = 0;
  var _running = {};
  function createApp() {
     var app = new App();
     _running[_id] = app;
     _id++;
     return app;
  }

  function killApp(id) {
    delete _running[id];
  }

  return {
    create: createApp,
    kill: killApp
  }
})();

Thus the Window Manager object only has 2 public attributes. This looks fine, but it would be a nightmare if this pattern grows to over 2000 lines. And it’s having countless private functions now.

This module now is not unit testable nor maintainable.

Break it!

From the browser to the browser

Let’s define a new object to contain and manage itself in its own scope.

It’s called browserFrame.

The responsibility of browserFrame

It would create an iframe with all attributes needed for BrowserAPI.

'use strict';

/* Define a basic mozbrowser iframe class.
 * It creates a mozbrowser iframe,
 * and finally returns the DOM element it just created.
 */

var BrowserFrame = (function invocation() {
  function BrowserFrame() { // This constructor function is a local variable.
    this.element = null;
    this.id = nextId++;
    this.callbacks = {};
    createFrame.apply(this, arguments); // All arguments are values to createFrame
  }

  BrowserFrame.className = 'browser';

  // These are helper functions and variables used by the methods above
  // They're not part of the public API of the module, but they're hidden
  // within this function scope so we don't have to define them as a
  // property of Browser or prefix them with underscores.
  function createFrame(url, origin, name, manifestURL, oop) {
    var browser = document.createElement('iframe');
    browser.setAttribute('mozallowfullscreen', 'true');

    // Most apps currently need to be hosted in a special 'mozbrowser' iframe.
    // They also need to be marked as 'mozapp' to be recognized as apps by the
    // platform.
    browser.setAttribute('mozbrowser', 'true');

    if (oop)
      browser.setAttribute('remote', 'true');

    if (manifestURL)
      browser.setAttribute('mozapp', manifestURL);

    if (origin)
      this.origin = origin;

    if (name)
      this.name = name;

    browser.src = url;

    browser.id = this.className + this.id;

    browser.classList.add(BrowserFrame.className);

    // Store the element
    this.element = browser;
  };

  var nextId = 0;
  // The public API for this module is the Browser() constructor function.
  // We need to export that function from this private namespace so that
  // it can be used on the outside. In this case, we export the constructor
  // by returning it. It becomes the value of the assignment expression
  // on the first line above.
  return BrowserFrame;
}()); // Invoke the function immediately after defining it.

Mocha: MockMozActivity與global leak

Sat, 23 Feb 2013 16:56:00 +0800

之前在寫單元測試時，需要測到MozActivity的呼叫。

當我們嘗試去取代window object中的MozActivity時，會遇到：

0) Feed "before all" hook: Error: global leak detected:

解決方法：

在程式前面加上mocha.setup({ignoreLeaks: true});

最後加上mocha.setup({ignoreLeaks: true});

碰到這個錯誤是在嘗試加入假的MozActivity給window時。

因為要被測試的module中有如下的程式片段：

  new MozActivity({
    name: 'view',
    data: { type: 'url', url: url }
  });

去呼叫browser app開啟某個特定網頁，

但是mocha跑的環境中有可能：

並沒有window.MozActivity這個物件。
有MozActivity但是我們無法知道他是否被呼叫。

這時候需要塞一個MockMozActivity給window，暫時取代掉原本的MozActivity，

然後從MockMozActivity裡面留個變數記錄被呼叫的參數狀況來判斷程式是否正確的執行呼叫activity。

'use strict';

var mockMozActivityInstance = null;

var MockMozActivity = function MozActivity(configuration) {
  for (var property in configuration) {
    this[property] = configuration[property];
  }
  mockMozActivityInstance = this;
  return this;
};

之後寫的測試內容：

// Captive Portal Test
  test('system/captive portal login w/o manual enable wifi', function() {
    CaptivePortal.handleEvent(event);
    MockSettingsListener.mCallback(true);
    assert.equal(mockMozActivityInstance.name, 'view');
  });

人生第一個單元測試程式完成 \O/

Javascript memorization

Sat, 22 Dec 2012 00:28:00 +0800

As you know, function in javascript is also an object, you could use a property of the object to keep function result. This is called Memorization.

Today I have a chance to utilize this skill.

Please read codes below first:

} else if (getOffOrigin(app.frame.dataset.url ? app.frame.dataset.url : app.frame.src, origin)) {
  var subtitle = document.createElement('p');
  subtitle.textContent = getOffOrigin(app.frame.dataset.url ? app.frame.dataset.url : app.frame.src, origin);
  card.appendChild(subtitle);
}

getOffOrigin has to use some logic to compare the two arguments and return a string. The result wouldn’t change if the arguments are the same. Therefore, to avoid calling the function many times, the result could be stored in the function itself.

  function getOffOrigin(src, origin) {
    // Use src and origin as cache key
    var cacheKey = JSON.stringify(Array.prototype.slice.call(arguments));
    if (!getOffOrigin.cache[cacheKey]) {
      var native = getOriginObject(origin);
      var current = getOriginObject(src);
      if (current.protocol == 'http:') {
        // Display http:// protocol anyway
        getOffOrigin.cache[cacheKey] = current.protocol + '//' + current.hostname;
      } else if (native.protocol == current.protocol &&
          native.hostname == current.hostname &&
          native.port == current.port) {
        // Same origin policy
        getOffOrigin.cache[cacheKey] = '';
      } else if (current.protocol == 'app:') {
        // Avoid displaying app:// protocol
        getOffOrigin.cache[cacheKey] = '';
      } else {
        getOffOrigin.cache[cacheKey] = current.protocol + '//' + current.hostname;
      }
    }

    return getOffOrigin.cache[cacheKey];
  }
  getOffOrigin.cache = {};

If we only have one arguments we could use it as the key to cache directly. But we have multiple arguments in this case, we then use stringilized JSON to be the key.
Hence we don’t need to do the same thing every time we enter this function if the arguments are used before.
Have fun with your function cache!

Web activity

Tue, 4 Sep 2012 15:45:00 +0800

Web activity是由Mozilla設計並開發，用來使web app之間共享資源的框架。在Firefox OS中已經存在Platform/UI上的實作，並且有一些內建的主要Web app已經利用Web activity來達成跨應用程式溝通的目的。（如：Gallery使用它來讓其他程式從它挑選圖片，也用同一技術來實現圖片分享到不同應用）

以下介紹如何使用這個新穎的技術。

Request

假設今天E-mail應用程式需要從圖片集中挑選圖片來寄送，那麼它必須新增一個Activity物件如下：

  var a = new MozActivity({
    name: 'browse',
    data: {
      type: 'image/png',
      url: '...'
    }
  });

type欄位是用來當filter用的在data中的其他欄位可以傳你想要的資料給接收方。

當收到資料後，處理回呼函數的方式：

  a.onsuccess = function on_success() {
    var image = a.result;
  };
  a.onerror = function on_error() {
    console.warn('error when picking!');
  }

Reciever

接受某個Activity的App必須在Manifest.webapp中宣告：

"activities": {
   "pick": {
     "filters": {
       type: ["image/png", "image/gif"],
     },
     "disposition": "window"
   }
 }

並且在自己的javascript檔中寫好當Activity產生時的處理函式

navigator.setMozMessageHandler('activity', function(a) {
  var image = getImageToReturn();
  if (!image) {
    a.postError("NoImage");
    return;
  }
  a.postResult({ type: "image/png", url: image });
});

data/type的用法

如聯絡人程式可以接受同一個叫做pick的Activity，但是電子郵件程式需要的是’email’這類資料，而電話程式需要的是’號碼’這類資料，對於這兩類資料需要呈現的UI與最後傳回去的資料當然會是不一樣的。

解決方法就是利用不同的data type來區分同種activity的不同需求：

  // Email app
  var a = new MozActivity({
      name: 'pick',
      data: {
        type: 'web-content/email'
      }
  });

  // Dialer app
  var a = new MozActivity({
      name: 'pick',
      data: {
        type: 'web-content/numbers'
      }
  });

在聯絡人程式中

navigator.setMozMessageHandler('activity', function(a) {
  switch(a.source.data.type) {
    case 'webcontacts/numbers':
      // ...
      break;
    case 'webcontacts/email':
      // ...
      break;
  }
});

如此一來就可以分開處理UI變化及後續回傳資料的部分。

多於一個可以處理的Reciever?

比如圖片應用程式可以分享的對象有兩個以上的時候， Firefox OS的系統UI便會自動列出可用的應用程式清單，如圖：

結論

Web activity是一個實驗中的新功能，雖然還有一些地方未盡完善，但是看著它從spec到platform implementation到UI implementation，就好像親身參與了網路/網頁進化的過程一樣。

[gaia] HTML5 Window Shade

Thu, 5 Jul 2012 13:58:00 +0800

Window Shade

我手上的Samsung Galaxy S3的作業系統是Android 4.0.4。

當我收到facebook/google+/…等程式通知的時候，最上面那條bar會出現對應的圖示。

這時候可以透過將bar「滑下來」的動作拉出一個UI，裡面會有

快速設定
通知項目詳細列表

這個UX，Google把它稱為Window shade

神奇的地方在於當你在拉下或拉上面板的同時，快速設定與通知項目是會先「掉下來」到底端，到了項目的頂端出現之後才會黏在頂部。（相信我你沒有特別注意這件事情，而且用久了會覺得理所當然）

GAIA也有notification panel

Firefox OS的UI – GAIA裡面也有定義功能列以及通知面板這件事，這個功能正在開發中。

有一天我們收到某個contributor提交的pull request：

Gaia pull request#1898 節錄重要的修改如下：

  onTouchMove: function ut_onTouchMove(touch) {
    var screenHeight = this.overlay.getBoundingClientRect().height,
        gripBarHeight = this.gripBar.getBoundingClientRect().height,
        dy = -(this.startY - touch.pageY),
        newHeight;
    if (this.shown)
      dy += screenHeight;
    dy = Math.min(screenHeight, dy);

    if (dy > gripBarHeight) {
      var quickSettingsHeight = this.quickSettings.getBoundingClientRect().height;

      if (dy < quickSettingsHeight + gripBarHeight) {
        newHeight = screenHeight - quickSettingsHeight - gripBarHeight;
      } else {
        newHeight = screenHeight - dy;
      }
      this.quickSettings.style.MozTransition = '';
      this.quickSettings.style.MozTransform = 'translateY(' + newHeight + 'px)';
    }

    var style = this.overlay.style;
    style.MozTransition = '';
    style.MozTransform = 'translateY(' + dy + 'px)';
  },
  //....skiped...
  show: function ut_show(dy) {
    var alreadyShown = this.shown,
        trayStyle = this.overlay.style,
        quickSettingsStyle = this.quickSettings.style;

    trayStyle.MozTransition = '-moz-transform 0.2s linear';
    trayStyle.MozTransform = 'translateY(100%)';

    quickSettingsStyle.MozTransition = '-moz-transform 0.2s linear';
    quickSettingsStyle.MozTransform = 'translateY(0px)';

    this.shown = true;
    this.screen.classList.add('utility-tray');

    if (!alreadyShown) {
      var evt = document.createEvent('CustomEvent');
      evt.initCustomEvent('utilitytrayshow', true, true, null);
      window.dispatchEvent(evt);
    }
  }

原作者提到他做這件事是要讓quick-setting更快的出現。這段code也已經被merge了。

不過就在昨天同事發現了一個關於功能列的issue

於是我開始看發生了什麼事。然後上面那兩個function耗費了我一個下午….XD

@colinfrei其實做了一件非常有趣但是很難從code裡面看出端倪的事情。甚至也很難用語言來描述，不過我想試著說明發生了什麼事，怎麼做到的。

簡單的說，他利用兩個「不同」區塊的CSS3的Transition「同步化」來實現剛剛所提的Window Shade的行為。

CSS: Transition

參閱MDN: transition

CSS: Transform

參閱MDN: transform

真相其實是：

utility-tray是一個絕對定位的div，平常位置定在螢幕上方-moz-calc(100% – UTILITY_TRAY_HEIGHT)。
當你開始Touch的時候，根據你的移動距離計算translateY，使它產生位移

你可以把-moz-transform: translateY(px)當成是top: px在CSS3的新招。它提供了更快速的rendering — 當你想利用-moz-transition: -moz-transform來做位移動畫的時候。這件事情可以另外寫一篇文章來說（挖洞的意味）。
當你放開拉bar的時候而且如果已經超過「要讓通知面板掉下來的合法距離」：
- 設定一個MozTransition給utility-tray-overlay
- 再設定一個MozTransition給quick-setting

4.讓utility-tray整個以某個定速掉下來到螢幕底端 + 讓quick-setting以同樣的定速往上移動到utility-tray的開端

= 於是就造成了quick-setting似乎黏在通知列下方不動但整個面板是往下掉的假象！

the story continues

不過可惜的是似乎沒有考慮到當通知面板要滑上去的時候，

「有物件的部份也應該留在頂端直到被拉bar撞到一起彈上去」這件事

於是我也仿造這個作法另外送了一個pull request

GAIA pull request#2181

  case 'transitionend':
    if (!this.shown) {
      this.screen.classList.remove('utility-tray');

      var overlayStyle = this.overlay;
      var firstShownStyle = this.firstShowStyle;
      firstShownStyle.MozTransition = '';

      if (this.phase2hide) {
        firstShownStyle.MozTransition = '-moz-transform 0.2s linear';
        firstShownStyle.MozTransform =
          'translateY(' + this.firstShownPosition + 'px)';
        overlayStyle.MozTransition = '-moz-transform 0.2s linear';
        overlayStyle.MozTransform = 'translateY(0)';

        // Check the transition event is triggered at firstShown.
        // If so, turn off the flag which represent for
        // 'The overlay has already reached the bottom of quick-setting'
        if (evt.target == this.firstShown)
          this.phase2hide = false;
      } else {
        // Reset position of this.firstShown
        this.firstShown.style.MozTransition = '';
        this.firstShown.style.MozTransform = 'translateY(0)';
      }
    }
    break;

利用transitionend event callback，透過連續兩次的Transition來：

讓utility-tray先定速往上移動/讓quick-setting定速往下移動到底端。
等到utility-tray的transition結束時，會收到transitionend的事件。這時候再讓utility-tray進行第二次transition…而目的地就是螢幕頂端。同時quick-setting就不再動作了，讓它跟著utility-tray一起被往上卷走。

transitionend

參閱MDN: transitionend

the end?

其實UX還沒有定義這個行為，所以pull request本身沒有被接受。不過…I did learn something from these codes:)

[WEB] Web Application Core

Sun, 10 Jun 2012 17:06:00 +0800

最近看到這篇文章Backbone Aura難得的有提到一個web application core該做些什麼事情？跟我想的蠻相似的，這邊將他列出來： * 管理widget的life cycle的能力。 * 低階DOM操作處理 * 提供publish/subscribe的溝通管道給應用程式的各部位互相溝通

以下是我流解析。

管理widget的life cycle

Core是應用程式的進入點(entry poing)，它必須在適當的時機init需要的widget/application part起來做事情，也只有Core才知道什麼時候必須做這些事情。當然也包括在適當的時機讓widget沈睡或消滅。

低階DOM操作

這有點像jQuery library主要在做的事情，不過世界上不是只有jQuery一種library，也不是任何情況下都可以用jQuery，有一個可以快速操作DOM的方法是必要的。

提供publish/subscribe的溝通方式

解耦後的application part/widget當然不能直接呼叫別人的attribute function（不然還解什麼耦），那要怎麼叫別人做事？行之有年的publish/subscribe機制在jmvc已經被整合進去，backbone上面還欠缺方法，backbone aura把這件事做出來了。

然後因為好奇它怎麼做的就看了一下source，在aura/www/js/aura/mediator.js裡面定義了：

/**
 * Subscribe to an event
 * @param {string} channel Event name
 * @param {object} subscription Module callback
 * @param {object} context Context in which to execute the module
 */
obj.subscribe = function (channel, callback, context) {
    channels[channel] = (!channels[channel]) ? [] : channels[channel];
    channels[channel].push(this.util.method(callback, context));
};

/**
 * Publish an event, passing arguments to subscribers. Will
 * call start if the channel is not already registered.
 * @param {string} channel Event name
 */
obj.publish = function (channel) {
    var i, l, args = [].slice.call(arguments, 1);
    if (!channels[channel]) {
        obj.start.apply(this, arguments);
        return;
    }

    for (i = 0, l = channels[channel].length; i < l; i += 1) {
        channels[channel][i].apply(this, args);
    }
};

看起來是利用一個變數來根據widget name儲存callback function進array裡面。

[javascript] function hoisting應用

Sun, 10 Jun 2012 16:17:00 +0800

function hoisting是什麼？

一個不說你也不會知道的js語言特性，是指js看到function xxx(){}這種宣告時會把定義搬到scope最頂端的行為，hoisting的意思是提昇。

自從在Javascript Patterns這本書上面看到hoisting的時候，就一直在想到底有什麼場合可以用到這個奇妙的語言特性？想不到還真的遇到了，雖然其實是個反例XD

原文出自PTT Web_Design版「[問題] jQuery 參數的問題~」，這名網友問為什麼下面的js不能用？

$("#test").bind("click", aaa);
var aaa= function () {
  alert("yo");
}

好傻好天真？

雖然不知道為什麼提問者堅持要把函數宣告放在用它之前，不過既然他問了，剛好這情況可以利用function hoisting來做，只是要修改一些小地方。

$("#test").bind("click", aaa);
function aaa() {
  alert("yo");
}
/* function expression instead of function declaration */

我另外寫了一個jsfiddle來測試：

做的到，只不過真的有必要嗎？

真的有太多理由不建議這樣做。原po在我回文後也沒出現，看來也無從得知他這樣做的理由了。

把assignment變數轉成JSON格式

Thu, 31 May 2012 10:53:00 +0800

從Server端收到的資訊是如下格式

user_i0_name=alive
user_i0_gender=male
user_i0_age=27
user_i0_company_c0_name=VIVOTEK
user_i0_company_c1_name=Mozilla
system_model=ABC1234
network_hostname=abc1234

但是這些資訊很難使用，想透過某個統一的方法把它轉成object來用。另外存回去的時候要把object轉回跟上面一樣的assignment。

Step#1: eval拆解進區域變數

為了避免污染全域變數，前後取代原本的字串：

var object = {};
var string_rev_1 = (('object[\''+string).replace(/\r\n$/,'').replace(/\r\n/gi, '\r\nobject[\'').replace(/=/gi, '\']='));
eval(string_rev_1);
console.log(object)

現在得到了一個只有一層的object，是好用了一點，但是能不能切出多層來？

Step#2: 用底線切object

var string_rev_2 = string_rev_1.replace(/_/gi, '\''][\'');

但是這樣會有undefined的問題，如

user_i0_name=alive

會變成

object['user']['i0']['name']=alive

eval後會出現i10 is undefined. 所以要想辦法解決這種超前reference的狀況。

一個辦法是用\r\n切分assignment後個別eval，再用try catch區塊判斷是否發生超前定義的情況。假設發生了就個別處理該assignment。

(待續)

CanJS簡介

Wed, 30 May 2012 17:33:00 +0800

CanJS是什麼？

CanJS是JMVC團隊把MVC這一塊獨立出來的結果，並且做了一些改良。以往談到JavascriptMVC跟Backbone的時候，其實這兩個框架的目的是不同的。 JMVC除了MVC還提供其他的case solution，而Backbone只專注在MVC身上。另外一個不同點是JMVC當時的MVC framework只能綁定在jQuery上面，Backbone可以把核心抽換成zepto(一個類似于jQuery但輕量化的js lib)，這也是有手機網頁app使用backbone卻沒有人使用jmvc的原因。

CanJS

CanJS官網以下節錄幾個要點：

核心可抽換成Zepto, jQuery, YUI, Dojo, Mootools。
非常快，比較令我訝異的是backbone竟然沒有live binding功能？
安全的Model。jqueryMX一個缺點是常常會有內容相同的model instance，CanJS解決了這點。它保證相同內容的Object只會有一個instance。
View可以做live binding了，直接對應Model change。

展望

以往JMVC為人詬病的就是本身提供的東西太複雜，不會有全部學完的動力。看來CanJS可以在專心這件事上趕上Backbone。

「WEB」我也有一個故事要說。

Wed, 30 May 2012 04:15:00 +0800

這個部落格在我的定位中是純技術取向，但這篇應該會是唯一一篇非關技術的文章。

文長。

我在確定得到新工作的那一天，在ptt soft_job以及web_design版發表了那段時間的面試心得，內容是有關前端工程師的工作面試經歷。（文章在http://www.ptt.cc/bbs/Soft_Job/M.1335873183.A.F23.html）因為那篇文章我收到很多回應，也很感謝所有來信的人的鼓勵。就在明天我將要離開現在的公司然後到新公司報到，我想在這邊簡單寫下一個平凡的網頁工程師一路走來的心路歷程。一些細碎片段構成的過往。

0

我是一個普通的大學畢業生，大學混了六年才畢業。相當然爾在就業市場上只能任人魚肉，剛退伍時進入了一間要做嵌入式系統的公司。而我幾乎什麼也不會，就只有一個在學歷上跌倒的經驗而已。

1

如前文所講，沒寫過網頁之前我很看不起寫網頁的人。現在呢？真的覺得WEB很有意思。技術發展很快又很廣，隨便找一項鑽研都能玩很久。每天睜開眼都有新的東西產生。你永遠不會覺得無聊。

大家都知道新人就是要打雜，而寫網頁這件事本身在某些公司就是一種雜務。不幸的是在公司某些部門內，網頁都會丟給新人負責，新人來了再給新人。裡面充滿着陳舊不堪參疵不齊的程式碼，那個年代jQuery剛崛起，會看到js檔內有部分jQuery寫法，有部分是javascript原生寫法。而我第一個案子就是接手這樣的網頁開發新功能。結束之後仍然不知道自己會了什麼。

第二個案子是作一個很龐大的web application，而這個案子一拖就是快兩年，也是我初嘗開發網頁快樂與痛苦的來源。

2

題外話，你們知道嗎，IPAD上有一款app叫zite，它會根據你看文章的喜好來決定要給你什麼material。唯一的缺點是不支援中文，文章source都是英文，不過英文資源本來就多於中文。所以當你看完一篇在寫css hack的文章，旁邊就有選項問你喜不喜歡，順便列出跟css相關的tag給你toggle。你會收到越來越多你想要的相關知識。我有一陣子睡前會躺在床上抱著ipad看新技術文章看到睡著。

即使是最漫長的那段日子也是一樣。

3

我認為部落格的蓬勃發展很大的促進了技術分享這件事。當你遇到問題的時候你會google，而解決你的問題的通常是來自某個熱血的開發者的部落格的某篇獨門心得。我一開始只把這些部落格當成解決問題的手段，平常沒事不會去看。

但後來有天我突然覺得沒有他們日子會很難過，而這時候我也確定自己想走web這一塊。我開始注意每個web developer的部落格，其中提到非技術的部分。很大一部分在說自己對於這一塊的熱情與期望。 檯面上的技術心得文，檯面下往往是要十倍百倍於文字量的熱情支撐。

比如熱血的前Y!前端工程師Josephj(我從他的部落格知道F2E這個字的意義。)

比如版上很熱心的TonyQ大大在版上的每篇熱心文章。

比如我剛進前公司時發現公司裡面有個好人前輩有在經營部落格分享自己在open source的知識跟經驗，那時候就很想認識他但覺得自己不是個咖所以沒膽去搭訕認識。

比如這個中國人寫的部落格：酷殼，作者是Amazon中國研發經理，裡面的文章不一定全都跟Web相關，我第一次讀是從這篇開始：哥是玩程序的。但後來我發現更有價值的東西不只是javascript相關的有趣文章，而是他的工作思想，是他提倡將工作提升到事業層次這個想法，如：程序員因為女孩而美麗！，做個環保主義的程序員，三個事與三個問題

然後我也開始自己寫部落格，是因為有天看到某篇文章說，現在工程師面試需要的是：自己經營的技術部落格，github上的帳號等等。然後我就這麼做了，申請github帳號，先用自己的NAS架wordpress，後來覺得很難用，看到XDite等前輩在推octopress，剛好github也可以玩，就轉到github pages發展了。

以上這些跟我的工作其實都沒有直接關係，都是利用下班的空閒時間做的。

4

然後就是那個一直被傳頌的故事。

我不知道是不是每一間公司都有保全系統。我們公司跟中X保全簽約，每一天必須關門的時間是半夜12點。這半年來我每一天幾乎都超過12點下班，今年初變本加厲到凌晨3,4,5,6,7,8點，然後隔天依然九點半上班。我每天晚上都會打電話給中x保全說我要加班，請延長保全時間。到後來他們都知道了，只要我們公司過了半夜兩點還沒設定保全，他們會直接打電話到我私人手機問我在不在公司。

而我通常都在。

嗯，我知道你要問為什麼？

前公司並不是很重視WEB技術，但這個專案的規格跟複雜度遠遠超出他們的輕蔑。對當時的我來說，我覺得以自己當時的知識完全不足以開發出那個大型Web Application，但也只能硬著頭皮幹。隨著專案時間越拉越長，無止盡的會議，UI上的功能需求越改越多，越來越複雜，到我離開的時候整個網站介面翻掉了七次之多。就像OSDC中那個需求變更的lighting talk講的好，權威人士握有對你的東西的最高指導權。而你毫無反應，只是個底層的前端工程師。連Interface Designer都可以決定你的生死(畫一個很難實現的按鈕/對話框/視窗你就準備寫CSS寫到爽了)。到最後其實案子已經有點失控，所以我就跳出來說：「好吧，如果沒人想寫下並定好這些規格那我來寫。」

這是去年十月的事情，而，這是地獄的開端。

每天白天跟作風非常強勢的QA用電話討論UI spec細節，晚上利用空檔寫functional spec，一邊改網頁到符合spec。這段時間平均下班時間是11點~1點，直到某天公司總務發群體信說中X保全抱怨我們超過時間，我才知道原來要加班要先打電話給保全。寫了兩個月終於完成spec第一版，圖文並茂六萬字word。但是根本沒有時間去補足那千餘個功能，因為只有我一個人在做WEB。然後有趣的是上頭很急著進測，他們認為spec寫完就是完成了一切，當然不是。進測結果很糟糕，大部分是未完成功能與ui文字拼寫等UI bug。

我在這段期間還一邊接觸了一些新的技術，因為我想利用MVC框架來解決那些我在這個web application上遇到的種種奇特困難。案子被QA退回後，上頭重新檢討認為是spec不夠詳細嚴謹，於是兩位主管級跳下來接手spec重寫。我自己利用這段時間拼命研究各種網路上的資源。

5

我選擇的技術叫JavascriptMVC，是一個total solution client side MVC framework。與它相似的東西是Backbone.js，而最近這段期間我也體悟到其實backbone比較多人在用。也很多人問我為什麼當時不用backbone? 我的答案很簡單，當時花了兩天熬夜做不出一個簡單的起始範例，backbone的文件實在令我費解，就放棄了，

我並沒有太多時間。

當然不只backbone跟jmvc，為了解決問題我也看了YUI, extJS, 甚至zk。我還花時間研究extJS的對話框是怎樣用div拼出來的，那噁心的東西。還有我順便買了一台Synology的NAS回家研究他們怎麼做出那麼漂亮的東西。

6

選定JMVC之後一切就順利了嘛？當然不是。這東西在台灣甚至大陸根本沒人在用，網路上清一色都是用backbone。連英文資源也不多。我遇到問題只能到官方forum用破爛英文問作者這功能是什麼？還被嫌棄過我寫的字句他看不懂:D

斷斷續續利用工作空檔時間看jmvc doc兩三個月之後我終於動手對那個改不動的噁心網頁做了refactor。整個砍掉重寫。這次花了三個月的時間寫了五萬行code。重點是，主管並不支持我做重構這件事。而我認為不重構的話某些該死的複雜功能根本無以實現。

我們的想法有衝突，而我只是個想把這件事情做好的死心眼的傢伙。我就在幾乎得不到任何support的情況下開始了進階版的地獄：平均下班時間延長到凌晨兩三點。有段時間每個禮拜會有一天通宵然後隔天不請假繼續上班。

支持我的信念只是相信自己辦的到。但，我曾有很多次在凌晨四五點回到家，洗澡的時候跌坐在地上任熱水沖淋，問自己「這一切到底有何意義？」即使是現在，我也不認為自己是因為那段時間的拼命而獲得一份好的工作，你知道的，努力跟回報從來都不是成正比。但當你真心愛某件事，過程才是重點。

7

最痛苦的事情不是每天加班，而是你的主管在這段期間不但沒幫你，還處於某種狀況之下導致常常對自己發動言語精神攻擊。
畢竟我只是個人微言輕的小工程師，沒有拿出成果之前，一切都是白搭，不管你多有熱情，對其他人來說「做不到」他們要的東西，你講話就不會有分量。
「孤立無援」是一句成語，可以用來造句。對我來說是殘酷的現實。因為最後實做的人是你，不管你有什麼困難，都是你家的事。不管你rhino debugger多難用Makefile多難寫dir-based namespace pattern多難改resize event delegation在IE8出了什麼問題收不到對話框多難刻用js模擬dbus請求多難搞同時採用不同來源data model並行多難做多重ActiveX callback多難整按鈕不同尺寸css sprite多難寫，別人只看得到UI最後的模樣，你做不出來就是你無能，你說做得出來就是「不管我壓什麼時間都做得出來」。

「你到底有沒有珍惜這份工作？」某天晚上七點主管把我叫進會議室檢討。他不滿意我的進度，給了我很爛的評價。你知道眼前坐在椅子上不發一語的我，昨天趕你要的東西沒睡覺嗎？我就算不是你最強的員工，也是你最拼命的員工，你該珍惜的不是別人給你的案子的評價，而是身為你員工的我。

8

然後我趕上了不可能的deadline，終於覺得累了， release的隔天我便打開104更新履歷然後放著。

9

原本只是想換一間重視技術也重視web的公司待，沒有預期自己一定會去哪。收到Mozilla的面試邀約，我很驚訝他們有要找Frontend，當然被他們錄取我更suprise。直到現在我依然不得不壓抑自己內心的激動，畢竟，那可是Mozilla。身為一個F2E Newbie，竟然可以在那邊跟全世界的高手們cowork，並且有機會見到一些此領域的大師級人物（jQuery的創始者John Resig曾經待過Mozilla）。

而Mozilla本身想要做某些事情來改變網際網路的未來讓網路變得更好，而，改變網路就幾乎等於著手改變這個世界的未來。

有幸參與這個過程，怎能叫人不興奮？

但，你知道的，激情並不是能永久持續的狀態。我現在必須努力把這份激動壓抑下來，然後希望自己永遠莫忘初衷。

以上是一個剛起步的小小前端工程師的一段經歷，希望對讀到這篇文章的人有幫助。

Alive Kuo@20120530

Q&A

有人問第4段的那張手寫日期表是什麼？最後一個下班者拿走公司鑰匙的簽名。被我懶得寫跳過的平常日期是：沒回家。假日來公司：不會記。