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