source: https://static.accupass.com/eventbanner/2011050545591971886609.jpg

Algorithm Visualizer

Main page preview

期中MVP ~ 後續

  1. 專案程式碼重構:這次專案前前後後經歷了兩次的大幅度修改,起初在接觸學習React的時候,使用React class component的寫法來開發,後來經過導師的建議後,改用業界較常用的React Hook的方式,全部改成React functional component的寫法,並趕在期中能夠有個展示,但是在評審的建議之下,針對動畫的呈現可以再加入更多的細節,讓使用者能夠更清楚整個演算法的過程,但是後續在進行修正優化的過程中就碰到貧頸了,當初動畫的產生,程式碼撰寫的部分不夠有彈性,經過和導師的討論後,他建議可以採用Redux的方式,將動畫的各個部分拆解管理,於是自己再去研究Redux並決定將整個專案再次打掉重練,採用React-Redux的方式將專案重新撰寫,最終也如願在動畫中加入了許多的細節,達成評審當初所給的建議,即便當初開發的程式碼都被捨棄了,但是在過程中也學到了React從早期到最新的一些開發方式,以及如何能在早期就事先規劃好等等的一些事項。
  2. 使用者體驗:作為純前端的作品,畫面的流暢度自然是重點之一,這次採用拖拉條來產生隨機數字作為排序圖表和提供輸入欄位來讓使用者自行輸入數字,其中隨機數字的大小不一,產生的長條圖也會高矮不一,所以起初在手動拖拉拖拉條的時候,會造成畫面上下的抖動,另外在拖拉條和圖表連動之下,每拖拉一下,畫面就會重新渲染,也間接造成效能上的問題,後續再和導師跟前輩的討論下,發現最外層的高度因為沒有給值,導致內層高度不斷在改變,畫面也就隨之感覺像是上下震盪,後續就在最外層給定一個值,讓畫面比較穩定;再來效能問題上有得到建議是使用debounce,給定一個時間過後才去產生新的圖表,故在使用者快速拖拉的期間是不會產生新的,直到停止拖拉才會產生新的圖表。

結語

  • Redux 是個給 JavaScript 應用程式所使用的可預測 state 容器
  • 讓組件管理 state 更方便,且確保整個專案的資料都來自同一個地方
  • Flux 首先為 Facebook 提出的一個架構,用以方便管理 React 錯綜複雜的 state 及 action 關係;然而 Redux 則大幅簡化了 Flux 的概念。
Redux 運作流程

Redux 三大原則:

  1. 唯一真相來源:整個應 …

意志力*李紹唐-在跑馬拉松般的人生,該帶上什麼欣賞沿途風景

  1. 發現內心真正想做的事
  2. 這工作對自己是有意義的(Meaningful)
  3. 喜歡這份工作(Pleasure)
  4. 自己有優勢(Strength)
  5. 盡全力去了解公司

關於React:

  • React為JavaScript的一個函式庫(library),並非完全是個框架(framework)
  • 集中在打造使用者介面(User Interfaces)
  • React 提供聲明式 (declarative) 的 API,讓開發者在使用 React 時,只需要描述畫面該怎麼呈現,React會幫忙將這些聲明式的敘述轉譯 …

source: https://www.accupass.com/event/2008130336293046018940

Javascript Data Type

專案設計目的及啟程

  • 基本功能:必須能夠將 user stories 轉化成實作步驟、在 MVC 架構下思考如何設計元件,以及面對其他各種細節的獨立判斷,才能達成Simple Twitter 的基本需求。
  • 挑戰功能:在目前的課程裡並沒有告知如何實作出功能,需要自行定義規格,解決技術問題,查找資料。

專案進行的過程

透過拖拉卡片至不同區域,和勾選已完成的項目來增加成就感!

日期顯示以及日期套件的選擇:

老爸的私房錢

報名動機

課程內容

總結

YuCheng

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store