Yang Yang

有時候在跟別人聊天的時候，就會聊到redux這個東西到底為什麼需要用到它，不用他的話會如何？因此這篇文章將從Redux改善了什麼以前的問題去做討論。 常討論的問題為什麼要用Redux不用Context？我覺得這個問題也可以問，為什麼要用Redux不用Flux 關於StoreStore這個概念是從Flux開始出現的，由於Component都有各自的State，當要嘗試共用的時候就會衍生出很多問題，例如：原本該放在child的State為了共用，需要搬到parent State，最後設計出來的Parent Component你會發現變成了擁有一堆State的巨大怪物。當然，你說這樣不好嗎？其實倒也未必，這樣看團隊怎麼去定義Component的State怎麼設計，但是對有些團隊來說，他們認為這是一個不太自然的設計，child應該擁有自己的State才可以做到元件獨立化。 為什麼要用Redux而不是Flux讓我們來聽聽作者怎麼說：Redux is not that different from Flux. Overall it has same architecture, but Redux ...

為什麼要PromiseJS是單執行緒的程式語言，透過callback的方式實現出非同步的操作。日常生活中，我們時常都在Promise，我Promise你這件事會做到，完成或失敗就執行指定的任務。 Promise基本用法假設有一個實際情境，做完任務再拿獎金 12doTask(); // type: Normal FunctiontakeMyMoney(); // type: Normal Function 但是doTask需要時間呀，獎金也是要任務完成才能拿，如果接任務和拿獎金一起做，似乎不太好。因此doTask不應該只是一個Function，它應該要是一個Promise。而且做完任務才能執行以下的任務。 1234doTask() // type: Promise .then(() => { takeMyMoney(); // type: Normal Function }) 一定要確認doTask回傳為Promise型態才可以使用非同步，否則會噴錯錯誤的做法： 1234doTask() // type: Normal Funct ...

在設計畫面互動的時候，有時候需要撰寫一些事件處理，這邊將介紹其中的原理與在 React 中的一些小知識。 簡單介紹 要專業的處理 event 事件，就必須要了解擷取與冒泡事件，概念簡單但是特別重要。根據上圖，我們可以看到事件處理主要分為三個階段。 擷取階段 目標階段 冒泡階段 如果你覺得太複雜的話，你可以想像你是一位路跑選手，window 是起點與終點，目標是轉則點，你的目標是蒐集事件，而事件又分為冒泡事件和擷取事件，如果他是擷取事件，那你應該是在抵達轉折點之前蒐集，如果是冒泡事件則是在轉折之後蒐集。 理解這個概念之後就可以開始認識擷取與冒泡了。 DOM 元素事件addEventListener 的第二個參數可以控制這個參數是屬於擷取還是冒泡事件，如果標記這個事件屬於擷取事件，那麼這個 EventListener 就會在擷取階段被 trigger。 1234567891011121314151617181920<form> FORM <div> DIV <p>P</p> </div></form& ...

有些設計不是為了提升效能而出現的，而是為了提升開發者體驗，更容易開發與降低錯誤率而誕生的，以下就來以經典的immutable來介紹。 mutable與immutable從字面上的意思可以得知mutable是可變動的，而immutable是不可變動的。因此操作的行為我們可以用mutable與immutable來表示。這個設計原則是從OOP開始起來的，尤其是在Java上的object操作最為經典。如果你是第一次聽到這個名詞，我強烈推薦你花一些時間去研究，React官方也強調這個的重要性。 OOP的使用以Java為例，可以大致分為： Mutable: Date, StringBuilder, StringBuffer… Immutable: String class, Wrapper classes, int, float… Mutable可以在初始化之後，透過methods來改變物件，例如：getter與setter，因為可以透過method來改變，因此是unstable或是不可預期的資料。Immutable建立實體之後是無法改變的，可以透過getter來取得裡面的資訊，由於資料無法 ...

越是簡單的東西，有時候越是我們時常忽略需要注意的部分，這篇文章將會介紹setInterval與setTimeout一些小觀念卻重要的部分。 基本介紹setTimeout與setInterval都是始於web api提供的方法，可以透過window來查看。 setTimeout：只會執行一次 setInterval：輪詢執行多次 常見的使用範例如果將setTimeout放到迴圈內會發生什麼事情： 12345for(let i=0; i<10; i++){ setTimeout(function(){ console.log(i); },100);} 你猜到答案了嗎？輸出的i全部都會是10。 如果是這樣呢？ 1234567for(let i=0; i<10; i++){ (function(i){ setTimeout(function(){ console.log(i); },100); })(i); ...

之前曾經在不管是國內還是國外的社團都看過有人在討論這個話題，自己同時也對這塊較為疑惑，因此把自己研究的心得寫下來，也順便讓以選要的人參考看看這個觀點。 讓我們先思考一個問題，你認為token該放Cookie還是localstorage比較好呢？ 先說結論這是一個假議題，好，你可以關掉了（Ｘ 前情提要我們通常會從後端拿到token作為登入用的身份憑證，如果把token存起來，我就可以不用每次使用功能都要進行登入。 關於localstoragelocalstorage是一個web API，可以讓你簡單存取key-value。通常是用來存取簡單的資料，而不是文件或是龐大的object。 使用localstorage存取token在講token放哪的議題之前，先來簡單介紹產生方式。一般下面的步驟稱為：先授權，再驗證。 先進行authentication，從server取得token 12345678async function authenticate(email, password) { const response = await fetch('https://e ...

頁面的更新談渲染效能的時候，很多人會想到reflow和repaint，不過這次要來討論的是瀏覽器渲染畫面所要進行的lifecycle。從lifecycle的top-down視角看reflow和repaint，個人認為會比較有感覺。 渲染過程瀏覽器在渲染畫面的時候，會由搭配DOM與CSSOM渲染合成render Tree，可參考這個影片。 渲染時間大部分的裝置更新畫面頻率是60fps，如果畫面有執行animation, transition或是滾動畫面時，畫面會持續的更新。60fps的更新頻率大概是16ms（1 second / 60 = 16.66ms）所以你可以大膽的假設，只要畫面處理的程式縮減到10ms以下，就可以讓頁面使用起來很流暢。反之如果程式執行時間超過17ms以上，會讓畫面的使用體驗變得卡卡的。 關於渲染以下是Google developer網站提供的pipeline，主要顯示出五個步驟這裡寫了關於渲染的流程，以下抓一些比較重要的整理出來分享 基本上分成： JS/CSS：透過JS或CSS執行Visual changes。 Style：瀏覽器重新計算每個元素改變的styl ...

Figma結合了很多實用的特性，成為了最近熱議的共編協作設計神器，下面將會介紹Figma與一些實用的資訊。不管你是前端還是設計師，都該來好好認識這個強大的平台。 最早得知Figma的時間我最早聽到Figma這個詞是去參加英文口說團認識的一位離職的UI設計師聽到的，之後我又從一位矽谷新創的(x Figma傳教士)UI設計師交流得知，他近期也在台灣推廣Figma這套神器，確實在台灣還未很多人知道，不過仔細去研究之後，果然不得了！！要說是前端和設計師之間溝通的神器，真的不誇張。 蠻有趣的一點是，最近在跟新創的UI設計師交流的時候，有時候會被問：你知道Figma嗎？看完這篇文章之後，你就可以大聲的跟他說：我知道！！！！ 它的誕生Dylan在實習的時候，他認為Adobe Fireworks他是有夠難用的！！！！為什麼設計師設計出來的東西不能像雲端編輯器那樣即時更新？之後他在大學的時候認識一位熟悉WebGL的同事，開始一起研究Figma的道路了。不過過程中卻很艱辛，畢竟要做到像是Adobe那樣功能的產品是不容易的，因此他們花了大概三年的時間製作。Adobe雖然掛上Cloud這個詞，卻並不Cloud ...

隨著產品不斷地變大，在開發程式的時候多少會遇到上線的結果和預期中的樣子不太一樣，如果我們把一個大問題切割成很多個小問題去處理檢視，那麼就能降低測試上的負擔。今天要來帶大家經由撰寫簡單的單元測試來了解測試的原理是什麼。 為什麼要寫測試你可能會想說，前端主要都是以畫面視覺為主呀？使用者也都是再用前端介面呀，為什麼還需要寫測試？隨著modern web的發展，前端技術的含金量也越來越高，而且有些情境其實也很難保證一定寫對的。如果你團隊的成員都能回答以下的答案，那麼再考慮不要在前端寫測試這件事情： 附上當你發現JS到底是什麼鬼東西時的表情：⠄⠄⠄⠄⠄⠄⠄⠈⠉⠁⠈⠉⠉⠙⠿⣿⣿⣿⣿⣿這⠄⠄⠄⠄⠄⠄⠄⠄⣀⣀⣀⠄⠄⠄⠄⠄⠹⣿⣿⣿什⠄⠄⠄⠄⠄⢐⣲⣿⣿⣯⠭⠉⠙⠲⣄⡀⠄⠈⢿⣿麼⠐⠄⠄⠰⠒⠚⢩⣉⠼⡟⠙⠛⠿⡟⣤⡳⡀⠄⠄⢻到⠄⠄⢀⣀⣀⣢⣶⣿⣦⣭⣤⣭⣵⣶⣿⣿⣏⠄⠄⣿底⠄⣼⣿⣿⣿⡉⣿⣀⣽⣸⣿⣿⣿⣿⣿⣿⣿⡆⣀⣿什⢠⣿⣿⣿⠿⠟⠛⠻⢿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣼麼⠄⣿⣿⣿⡆⠄⠄⠄⠄⠳⡈⣿⣿⣿⣿⣿⣿⣿⣿⣿輸⠄⢹⣿⣿⡇⠄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿出⠄⠄⢿⣿⣷⣨⣽⣭⢁⣡⣿⣿⠟⣩⣿⣿⣿⠿⠿⠟哦⠄⠄⠈⡍⠻⣿⣿⣿⣿⠟⠋⢁⣼⠿⠋⠉⠄⠄⠄⠄齁 ...

目前主流的redux開發有redux-thunk, redux-saga與redux-observable，到底該使用哪個middleware呢？他們又各自解決了以前哪些開發上的問題呢？就讓我們一起來看看吧！ redux加入非同步的目的 copyright by Akshatha 當我們在討論為什麼需要在redux處理非同步這個議題的時候，我們要先討論為什麼我們需要在redux用非同步Redux主要解決了以下的問題： 將邏輯處理抽離出Component 需要共用部分資料 方便追蹤除錯問題 然而，其他middleware的出現也想試圖解決其他問題，讓我們繼續看吧！ redux-thunkredux-thunk是目前最易上手的redux套件，很多初學redux的同學們應該都碰過這個套件。所以一開始redux的使用方式，我會先以redux-thunk當作範例來示範給大家看。這邊也提供一個簡易的redux範例提供給大家看： 未使用redux-thunk之前如果你需要使用套件做非同步的話，需要從外部丟dispatch進去到redux裡面去使用如此才可以控制什麼時候該執行什麼運算： 1 ...