參與AlphaCamp A+人才計劃短短六週的時間,轉眼間即將告一個段落!回顧過去這段期間,真的相當的緊湊及充實,每週的高強度刷題、練習技術面試題目、導師和助教的討論時間、專案的發想及製作開發、部落格的撰寫。在所有事情多管齊下進行之下,常常會有手忙腳亂的感覺,但也頓時發覺自己這些日子做了不少的事情,不論是學習新的技術、寫演算法題目的技巧、自主撰寫文章、抑或是時間的管理,自己感覺成長了不少。以下想要簡單分享一下自己在A+所開發的專案

Algorithm Visualizer

顧名思義就是一個演算法視覺化的一個平台,想法來自於每週定期的演算法題目練習,演算法種類百百種,有些可能是為了解決特定問題而產生的,有些則是極為抽象不易想通,有時候會佐以圖像化的方式來幫助思考和具象化,所以才決定以此發想來作為這次專案開發的主題,一方面幫助自己對於演算法的理解和練習、一方面則是專注於前端框架的使用和畫面。這次專案打算自我挑戰使用React作為主要的開發工具,除了是自己比較不熟悉的部分之外,也希望能藉此來了解其周圍的生態系,專案期間包含和導師前期討論、自行摸索技術和實際投入開發,到最終期末發表總共約五週的時間,期間有個期中的MVP(最小可行性產品)的展示,主要評審會根據其作品給予建議和後續能夠進行的方向,以下針對期間所做的修正進行簡單的敘述。

期中MVP ~ 後續

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

結語

這次專案當然後續還有許多值得開發和優化的地方,包含提供除了排序之外其他種類的演算法動畫,甚至加入使用者互動的部分,可以以此作為一個出發點,就當成是自己的side porject持續去開發跟改進。再來想要感謝AC這次的這個計畫,無償投入時間和資源,幫助大家精進自身技術力與求職能力,感謝維元老師每週兩個早上的演算法教學,從中學習到非常多的演算法觀念和解題技巧,以及楚玄和Eugene每週晚上的助教解題時間,許多困難的題目都能藉由兩位清楚的解說和畫圖迎刃而解,每一位真的都十分強大且熱心,真的獲益良多。再來感謝Yenting和Red兩位學習教練,當初選擇讓我加入這個計畫,而每天的進度報告和每週的提醒讓大家都能順利跟上進度,適時的加油打氣讓大家能堅持下去。還有堅強的教練群Gary/Wells/PJ/Ivan,我要特別感謝我的導師Ivan,即便是出國的前一天還願意撥出時間還和我討論,現在人在中南美洲的他要準備為當地人提供資訊科技的教學,這一點讓我十分欽佩,除了專案上的技術開發上的建議之外,更多的是職涯發展上的建議,以及如何在工程師之路上持續精進自己,也願意在之後專案結束後提供協助。最後是一群奮戰不懈的夥伴們T4/Danny/Harry/Justin/Carey/YuLiang,每個人都朝向自己的目標堅持下去,這樣的精神會都促自己也不敢怠慢下去,尤其每位夥伴都相當的優秀,學習能力和理解速度都很棒,我很欽佩也慶幸一己擁有一群很棒的夥伴一起學習成長,往後還有很長的一段路要走,希望大家都能保有初心,繼續朝著目標堅持走下去。