Another todo list application? Why bother...?
All the todo list applications I've seen have the purpose of showing the "easy to use" a framework are. In this case I simply don't want to proof that a framework is better than other.
Of course I'm not perfect, the application can have errors or something could have been done in a better way. This is my second motivation, to learn. I expect to get some feedback to enhance this sample application ! I can lear too new ideas and techniches.
Finally I'd like to explore some frameworks and how to use them in an efective way.
Framework agnostic architecture
A well designed architecture should give you the freedom of switching the framework used without impacting most of your code. In this project I'd tried to decouple most of the code from any framework.
DOM Access Layer
The DOM Access Layer decouple the core of the application from the specifics of DOM manipulation. In this case I use "view models" to implement this layer. There is an implementation of these "view models" using knockout.js, and other using Zepto/jQuery. Switching from one framework to another is only matter of switching the "view model" library used. If in the future we wish to change the presentation framework we only need to implement a new "view model" library.
It's interesting comparing both implementations of the DOM Access Layer. Clearly knockout.js seems more powerful, the view layer is very simple to code. With Zepto/jQuery the view layer is more complex, but I don't need to modify the HTML and I can use the same document as provided by the web designer. Another advantage of Zepto/jQuery is that the final result has less footprint and less start up time, specially in the case of Zepto.
Data Access Layer
The Data Access Layer decouples the models from the specifics storage mechanism used. Currently there is only support for local storage. I plan to add more storage systems (AJAX, WebSockets...) only need to implement a new storage library. The rest of the code won't need to be changed.
The core of the application code is fully unit tested. Furthermore there exists end to end integration tests for most of the use cases scenarios of the application. I didn't use any fancy BDD framework, but just Jasmine and PhantomJS.
The tests are integrated in a build script and generate JUnit XML report files, so I hope it will be easy to integrate with a CI server in the future.
To build this project follow these steps:
- If not on your system, install Node.js. It has already installed NPM.
- If you plan to run the BDD integration tests install PhantomJS
3 Uninstall old version of grunt
npm uninstall -g grunt
- Install grunt-cli:
npm install -g grunt-cli
- Download this project to your computer
- Install all the packages needed to build this application, it's easy,
simply run the command
npm installin the root of the project
- Execute the following command
npm testfrom the root folder of this project.
This project is now integrated with travis CI. Have a look at the
.travis.yml file and the
package.json file at the root of the project
After building the project, simply open in your browser either
.html. Do this from the
The project is structured in the following directories:
package.jsonThe node information used by npm and Travis-CI when you want to build this project with them
.travis.ymlThe Travis-CI configuration file for this project
karma.conf.jsThe karma configuration file (for BDD test suite)
Gruntfile.jsThe grunt configuration file
dist/The output directory
src/The source code for the application
css/Simple CSS for the applications
img/Some images (the ajax loader)
lib/The source code for the runtime
common/The source code of the core of the application, decoupled from the DOM/Presentation framework used. The unit tests cover this files, except store.js.
utils.jsEvent & observable fields (whenever I do not have knockout)
model.jsA Task & Tasks (task list) model. Decoupled of the specific persistence/storage mechanism
controller.jsThe high level application controller
widgets.jsReusable controllers/widgets. Decoupled from the specific presentation framework
store.jsA simple in memory storage.
knockout/The view models implemented with Knockout.js
zepto_jquery/The view models implemented with Zepto/jQuery
tests/The source code for the tests
bdd/End to end tests of the application (BDD test suite)
vendor/Third party libs used for testing (jQuery, jQuery-simulate & jQuery-simulate.key-sequence)
main.jsThe entry point for the tdd
adding-tasks.jsThe BDD test suite about creating new tasks in the application
consulting-tasks.jsThe BDD test suite about consulting the existing tasks in the application
doing-tasks.jsThe BDD test suite about marking tasks as done or undone.
page-objects.jsA wrapper around the application's UI using jQuery, jQuery simulate and jQuery simulate key-sequece
test-doubles.jsA test double (mocks/spies/stubs) library for the application
*-tests.jsThe unit test suites
Not yet done (in the roadmap)
There are a lot of things left to do !
- Use bower for client-side dependencies
- Use application cache manifest
- Edit the description of the task (click to edit)
- Task filters (view only done/todo)
- Task filters (matching description)
- A better web design (somebody help me with those damned CSS!)
- Responsive design
- An storage based in a remote REST service using AJAX
- An storage based in a remote service using WebSockets
- An robust storage able to switch to local storage when there is no connectivity and resync with the server when it is online again
- Explore other presentation frameworks (ember.js, jquerymobile...?)
Feel free to experiment