Angular+Flask搭建一個記錄工具

平時用的最多的文本編輯器就是Notepad++，不少東西都是經過Notepad++直接記錄的：

• 沒有看完的網頁連接
• 要整理、收藏的網頁
• 讀書筆記
• 要處理的事情
• 待看/看過的文檔和電子書
• 等等。。。

隨着內容愈來愈多，就不方便管理和查看了。

因而決定本身實現一個簡單的記錄工具來管理這些信息，工具就叫Remember。

關於Remember

本身平時工做主要用Python，而且對前端方向一直頗有興趣，因此Remember的開發就使用了Angular和Flask，分別實現了前端的頁面邏輯和後臺的RESTful API。

另外，Remember開發中主要用到了下面的工具：

• 經過pylint、jshint進行Python、JavaScript代碼的靜態檢查
• JavaScript的單元測試使用karma和Jasmine
• 前端包管理使用bower
• 前端構建使用gulp

下面就看看Remember中提供的一些功能。

管理任務

Markdown編輯/預覽

管理便籤

管理文件

一些感想

在開發Remember的過程當中遇到了一些問題，也開始更加註意一些事情。

編碼風格很重要

每一個開發人員都有本身的編碼習慣和風格，不能說誰的編碼風格就是最好的。

可是，對於一個項目，編碼風格的統一很重要，統一風格的代碼將更方便的管理、查閱，下降維護成本。

在開發Remember的時候本身也是儘可能去按照Python和JavaScript的style guide去編碼，主要有如下參考。

對於Python，主要參考：

• PEP 0008 -- Style Guide for Python Code
• Google Python Style Guide

對於JavaScript和Angular，主要參考：

• Crockford style
• angular-styleguide

即便有了統一的風格，對於Python和JavaScript這些解釋性的語言，靜態檢查也是頗有必要的。因此Remember中就使用了pylint和jshint進行靜態檢查。這種靜態檢查能夠進一步保持統一的代碼風格，同時幫忙發現一些代碼錯誤。

單元測試

因爲本身是邊開發邊使用Remember，因此常常有一些改動，可是改動以後沒有進行測試，有時候相關的功能就不正常了，就須要查看最近的提交記錄。

因此對一些基本的功能模塊，編寫單元測試仍是很必要的。

Remember中主要使用karma和Jasmine進行JavaScript單元測試，可是測試的coverage仍是不多，須要慢慢補上。

使用工具簡化流程

開發過程當中接觸了一些工具，很大程度上方便了開發。

記得之前須要什麼前端庫的時候，都是直接搜索，而後下載相應的js/css文件。不只工做效率低下，對於這些庫的管理也是一個很大的問題。因此去了解了一下bower這個工具，而後就能夠方便的獲取和管理須要使用的庫了。

另外就是使用了gulp進行一些自動化構建，之前不少手動的工做如今都簡化成了一個簡單的命令。經過gulp合併、壓縮js/css/html以後，加載首頁的對比：

• 壓縮合並前：

　　

• 壓縮合並後：

　　

尋找和利用一些工具來簡化流程是十分必要的，每每會有事半功倍的效果（Ps：如今前端開發的工具實在太多了）。

總結

Remember開發過程是邊開發邊使用，到如今已經能夠知足個人需求了，並且如今已經習慣了使用這個工具進行各類記錄工做。可是還有不少能夠增長、改進的地方，就慢慢來吧。

雖然對JavaScript有一些瞭解，可是Angular是開始作這個工具時候現學的；關於JavaScript的單元測試工具，經過bower管理前端庫，經過gulp構建前端項目等等都是邊學邊使用，因此收穫仍是挺多的。

 

項目源碼已經託管到Github上了，若是你也剛開始學習Angular或Flask，但願項目的源碼可以對你有所幫助。

若是你也須要一個記錄工具，不妨試試Remember，或者基於Remember定製一個符合你習慣的工具。

 

Remember on Github：https://github.com/WilberTian/Remember

Gif 製做工具：ScreenToGif