PIXwallet_工作心得分享

Transcript

1. PIXwallet 工作心得分享 2017/04/07 技術部例會 前端組 CypressKuo
2. PIXwallet 簡介 • 整合痞客邦 PIXNET 所提供的各項與金錢相關的服務。 • 帳戶管理 ◦ 管理使用者資料 ◦ 支票寄送、銀行匯款 ◦ 手動扣款、自動扣款 • 檢視收益紀錄與狀況 2
3. PIXwallet 使用者介面 3
4. SPA 4
5. SPA (Single-page application) 簡介 單頁應用程式 (SPA) 是一種網頁應用程式或網站，適合單個網 頁，目的是提供一個和桌面應用程式相似的使用者體驗。 在一個單頁面應用中，無論是所需要的程式碼是 HTML、 JavaScript 還是 CSS 都在一次頁面載入中獲取，或者通常根據用 戶動作動態載入合適的資源並按需要加入到網頁中。 5
6. 傳統頁面與 SPA Lifecycle 比較 https://msdn.microsoft.com/en-us/magazine/dn463786.aspx 6
7. 工具的選擇(舊版) betapanel Blog 新後台 React Angular 7
8. 工具的選擇(新版) 8
9. 最後... 9
10. 選擇 Vue.js 原因 • 我比較喜歡劉備 • 學習曲線平緩 • 成長快速 ◦ 2016 GitHub 拿到 26.4k 星星數是 JavaScript 類別第一名 ◦ 廣大的生態圈（各種套件） • Laravel 從第 5 版開始內建 Vue.js ◦ 連 laracasts 也有 vue 的免費課程 • 作者是中國人（Evan You） ◦ https://twitter.com/youyuxi https://risingstars2016.js.org 10
11. 第一次用 Vue 就上手 11 HTML JS Web https://jsfiddle.net/chrisvfritz/50wL7mdz/
12. 第一次 debug 就上手 Chrome extension for debugging Vue.js applications 12 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
13. 三位一體 13
14. 遇到的問題 • D3.js • Data two-way binding • Lifecycle-update（無窮迴圈） • PM 換了 4 個 14
15. Q&A 15
16. 謝謝您的耹聽 16