Skip to content

Latest commit

 

History

History
82 lines (72 loc) · 6.44 KB

README.md

File metadata and controls

82 lines (72 loc) · 6.44 KB
Raw

TODO-List-app


The purpose of this project is to write a To Do Tasks List using:

  • Spring Boot (v1.3.2)
  • REST
  • Hibernate (Using Spring Data JPA)
  • HTML5
  • AngularJS (v1.5.3)
  • Bootstrap (v3.2.0)

Spring Boot Overview.

Spring Boot aims to provide Quick Start development in production level Spring applications and services. Basically, with a couple of clicks you get your configuration, tools and libraries started and you are ready to develop your application.
In the case of this project, since this is a Web-App I used Spring Boot 1.3.2 and selected JPA, Web and H2. Spring boot downloaded and configured all Spring and 3rd party libraries for me, in a matter of minutes. Normally, setting up all technologies we are going to use required a lot of time and unnecesary effort.

  • Spring Boot provided Spring framework dependencies and embed Tomcat, JPA, H2, JDBC, log4j over slf4j, Jackson, Hibernate, jUnit, Dom4j 3rd party dependencies.
  • No more XML hard to understand configuration files, but Annotation Based configuration.
  • Included also security, metrics, health checks, externalized configuration so our app is ready for production.
  • Very useful 'starter' POMs for Maven with a plug & play effect almost, to add any external tools we want.

Spring Data Overview.

Spring Data adds a very convinient extra layer of abstraction on top of our JPA provider that simplifies persistence. This layer of abtraction is called Repository and reduces the amount of repetitive code needed to implement data access significantly, for more details.
The implementation option are:

AngularJS and REST Overview.

AngularJS is a front-end open source web application framework developed by Adam Abrons and Misko Hevery and now maintained by Google.

  • AngularJS makes "Single Page Applications" extending HTML by using Directives to express the behaviour of our app. Also separating Client and Server, allowing us to develop and test each Side independently.
  • The only way the Front End communicates with the Back End is through JSON.
  • Since each element is loaded once, bandwidth usage is decreased significantly, also improving response speed, in comparison to classic request and response cycles in Client-Server technologies.
  • AngularJS makes the browser look more like a WebApp than a WebPage using JavaScript that is executed in the browser.
  • To explain AngularJS further I created this repository. AngularJS-samples. For official documentation, tutorials and information about AngularJS.

* **[ngRoute](https://docs.angularjs.org/api/ngRoute)** : Is a module that provides single page application functionality using routing and deeplinking services and directives. Basically, I included angular-route.min.js to my index.html and included ng-view directive. Then I added **[$routeProvider](https://docs.angularjs.org/api/ngRoute/provider/$routeProvider)** and **[ngRoute] (https://docs.angularjs.org/api/ngRoute/service/$route)** dependency to my app.js file. And finaly I used routeProvider and route to deep link controllers with views (htmls). As a result my webapp is now a single page app that can switch views without requesting new data to the server.
* **[ngResource](https://docs.angularjs.org/api/ngResource)** : is a module that interacts supporting RESTful services such as my back-end. I included angular-resource.min.js to my index.html. **[$resource](https://docs.angularjs.org/api/ngResource/service/$resource)** is a factory that helps me to avoid interacting with $http so it simplifies and assist me work with RESTful data from my server.
The front-end of this project is structured this way:

/public
----------/controllers
--------------------Controller1.js
--------------------Controller2.js
----------/css
--------------------boostrap.min.css
----------/fonts
--------------------glyphicons
----------/js
--------------------angular.min.js
--------------------angular-route.min.js
--------------------angular-resource.min.js
----------/services
--------------------serviceOrFactory1.js
--------------------serviceOrFactory2.js
----------/views
--------------------View1.html
--------------------View2.html
----------app.js
----------index.html

Separation of concerns and best practices:
  • AngularJS does not oblige us to follow best practices, but it helps us to build applications that respect a standard.
  • So in this project I used all the best practices for a medium size app.
  • --- Controllers manage Flow Control.
  • --- Services in this case I used Factories mostly, manage output and input of data.
  • --- DataTasksFactory a Factory that contains information of all tasks and methods to retrieve and store the instance data.
DateTimePicker
  • Added Angular UI Bootstrap Date Time Picker by zhaber, angular-js-bootstrap-datetimepicker
  • I customized a little bit this project to make it fit to my TODO-List-app. I'm very happy with the outcome. The tool works on Chrome and Firefox, gonna test it on other browsers also.
  • Basically I use DateTimerPicker in my AddTask and EditTask functionalities. The result is an elegantly embedded calendar and timer.