Posts

Technical articles about software engineering, system design, and development practices.

9 min read

The Main Flow of Rendering Engines

前言：

最近在寫 CSS Animation 部分，於是比較深入的看瀏覽器渲染流程，希望在進行 Animation 時可以更加地流暢。

The Main Flow of Rendering Engines

在寫 HTML 的時候，我們很理所當然地寫出這樣的頁面：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="styles.css">
  <title>My Website</title>
</head>
<body>
  My Website
  <script src="./main.js"></script>
</body>
</html>

這時候就會有個疑問，那瀏覽器是如何讀懂這些檔案？又如何將頁面呈現在我們眼前呢？首先，瀏覽器要渲染出網頁頁面，需要幾個主要步驟：

Read more →
6 min read

Angular - Reactive Form

前言

在建立表單的部份，Angular 與 AngularJS 最大的不同就是多了 Reactive Form 的方式。由於 Reactive Form 比起一般 Template-Driven Form 更具彈性且好掌控，所以就來大致介紹一下與 Reactive Form 相關的流程機制。

FormControl

FormControl 是 reactive form 中最基本且必要的角色。它是一個完全獨立的 Instance，裡面包含了 value / validators / status 等重要 member variables。想像一下，如果我們需要一個輸入暱稱的 input 欄位，而 formControl 的任務就是要儲存使用者所輸入的暱稱，以及操作內部的 Validators 對輸入的暱稱字元進行驗證。

FormControl 運作流程

下圖簡單地介紹 FormControl 的內部機制，首先在建立 FormControl Instance 時，我們可以透過 constructor 初始化 value 和設置想要的 validators function。舉例來說，我們提供給使用者修改暱稱的欄位，需要在欄位上先填好使用者原本的暱稱，以及設置好暱稱驗證方式。

Read more →
8 min read

Angular - ng-template & ng-container

前言：

昨天剛好在看 Angular CDK Overlay (Overlay Document) 這部分，因為 Overlay 是 CDK 中 Portal 的ㄧ種，而 Portal 又和 Angular 中的 Template 機制有關係，這才發現自己對於 Angular 的 ng-template 和 ng-container 概念不是很清楚，所以特別再看了一下這部分的實作原理和應用方式。

<ng-template>

在說明 ng-template之前，先從我們很常用到的 *ngIf 來說起，在 Angular 中 * 星號代表 ng-template 的 sugar syntax，讓開發者簡化語法。所以下面的語法：

1

<div *ngIf="condition">Hello World!</div>

實際上就是下面語法的縮寫：

Read more →
6 min read

Understanding Router in Angular 6

前言：

這陣子在看 Reactive Extension (Rx) 和 Angular ，而 Angular 中常使用的 Router 內就有些 Observable Type 的 instance，因此就打算從這邊深入了解一下 Angular Router 的流程和 Observable 應用方式。

Router Navigation

Overview

![router.png]({{ site.url }}/assets/images/router.png)

首先，先來說一下大致流程，當使用者點擊設有 routerLink attribute 超連結時（或是在 component 裡面 trigger router navigation），設置的連結會先經過分析步驟，然後透過 Router 找出對應的 Component，再將此 Component 呈現在設置好 <router-outlet></router-outlet> 的地方。

Read more →
5 min read

How Does JavaScript Engine (V8) Optimize JavaScript code - Fast Property Access

Properties Access in V8

前言

傳統的 JavaScript 引擎，在抓取 object 內的 property 位置時，常常是利用 object 內的 hash table 來取得對應 property (通常稱為 dictionary )。不過這樣需要花費搜尋時間，相對來說效率就不是太好。也因此在現代的 JavaScript 引擎，會根據 object 內的 property 架構來進行不同方式的效能處理，避免一直使用 hash table，而是改採其他更有效率的結構，來達成快速得到 property 的目的。

Property definition in V8

  • Property: 命名不為 indexed integer 的 property。 const student = {id: 'B123456'}
  • Elements: 命名為 indexed integer 的 property。 const students = {1: 'student1', 2: 'student2'}

為了有效率地讀取 property，V8 會使用不同的方式來儲存 property 位置。首先會依據 property 的命名方式，如同上一篇有提到，V8 將 indexed integer property 視為 elements，elements 和 一般 property 就會以不同架構來處理。在這邊僅討論一般命名之 property。

Read more →
6 min read

How Does JavaScript Engine (V8) Optimize JavaScript code - Elements

前言

JavaScript 是種弱型態語言，而 JavaScript Engine (V8) 透過對於 JavaScript object 的型態強化來提升 JavaScript 執行效率。

Elements Kinds in V8

What is Elements

JavaScript 的 object 可以有任意個 property，而這些 property 的命名又可以是任意字元，例如：

1
2
3
4

const student = {
  id: 1234, // property name is a string
  1: 2 // property name is an integer
}

在 V8 引擎中，將這些整數命名(integer names)的 property 稱為 Elements。其中最常見的就是透過 JavaScript Array contructor 所產生 object 的 property。

Read more →
5 min read

JavaScript - Pass Params Into Functions

前言

這篇文章起源於我為了瞭解瀏覽器的運作原理，以利針對瀏覽器進行效能優化時，所延伸出來的基礎文章。剛開始學習切入點是 Chrome 的 V8 JavaScript Engine，看到有一位作者仔細地說明 V8 Engine 如何 Compile JavaScript 的流程，進而引發我對 JavaScript Memory Allocation 的興趣。此外，剛好最近也在用 TypeScript 寫類 static type object，所以想更清楚知道使用 TypeScript 這個 pre-processor，在瀏覽器中會怎樣提高 JavaScript Compile 的性能。

以下內容會使用 ECMA-262 的標準來做探討。

Call by value & Call by sharing

在 ECMA-262的實作規範中，JavaScript 主要採用 Call by sharing 和 Call by value 的方式來傳遞參數。

Read more →
7 min read

Cypress & Cucumber Introduction

Cypress E2E Testing Framework

Features

  1. No more async hell
    Cypress automatically retries the query until the element is found.
  2. Real time reloads
    Cypress automatically reloads whenever you make changes to your tests.
  3. Spies, stubs, and clocks
    Verify and control the behavior of functions, server responses, or timers.
  4. Run with native browsers
    Keep fast, consistent and reliable tests.

運作方式

![Screen Shot 2018-01-27 at 20.34.59.png]({{ site.url }}/assets/images/Cypress-usage-process.png)

Read more →
7 min read

AngularJS - angular-formly study notes

Angular formly 運作原理

將 form 中的每個 field 獨立出來寫成共用 template，並供整個 app 使用。使用者先在 angular-formly 中進行 configuration，包含設定 type 和 wrapper ，接著只要在 component 的 controller 中建立指定 type 的 field objects 之後，angular-formly 就會結合之前設定好的 field template 和 objects， render 出完整的表單。 ![study.png]({{ site.url }}/assets/images/angular-formly-usage-1.png)

Angular-formly field render source code

Angular-formly 套用 field template 的順序流程：

Read more →
9 min read

AngularJS - Two way data binding

前言

最近開始接觸前端技術，預計以Angular和NodeJS為主。之前其實有稍微點一些網頁相關技能，不過大概都才Lv.1，知道大概怎麼使用，卻不太清楚背後的原理和概念。所以這次在學習的時候，會著重在框架理論和實作方式上，希望自己除了能應用這些框架之外，還可以了解這些框架背後的原理，並且進而有能力比較各框架之間的好壞。雖然Angular目前已經出到v5.1.0，但起點會從Angular1開始學起，之後文章預計會去比較新版的Angular和Angular1有怎樣的差異，以及新版的運作方式可以帶來怎樣的好處。

Angular1主打特色之一包含 Two-way data binding (這邊先不在意這種方式帶來怎樣的壞處xD)，這篇文章紀錄 Two-way data binding 的原理和實現方式，以及對網站來說會帶來怎樣的影響。文章將不會示範如何去應用 Two-way data binding，因為我覺得隨便 Google 就可以找到很多例子，就不特別介紹了。

One-way data binding & Two-way data binding

One-way data binding

Angular 官方給的 One-way data binding 說明是指 template system 結合 model data 所產出的結果網頁，也就是說，我們會按照 template engine 要求來編寫一份 template file，然後當 browser 接收到資料時（可能是透過Ajax），就會透過 Template engine 將 data 放入指定的欄位中，並 render 出完整的 HTML file。 One-way data binding

Read more →