A Real ROCA using Bootstrap, JQuery, Thymeleaf, Spring HATEOAS and spring MVC

Http://www.tuicool.com/articles/ENfe2u

Https://github.com/tobiasflohre/movie-database

What's the best-to-build a Web application?

I know, tough question, and in the end, there cannot is one definitive answer, because otherwise there wouldn ' t exist an A Rmada of different architectures, frameworks and libraries. During The last years, single Page applications (SPA) based on JavaScript became more and more popular, and it seemed to M e a little bit like it's the only-to-go for the future. It makes sense to has no server-side session, for scalability (cloud! Commodity hardware!) On the one hand, and for the user experience on the other hand. And there's no-avoiding to accept JavaScript as a first class citizen anyway, so why isn't go JavaScript all the?
The other hand there's one word in the "single Page App" that makes me afraid:single. Everything in one page? Really? I mean, it could is really a lot. Think of a medium or big sized Web application with a lot of developers working on it. Initial loading times is a small problem compared to organizing the Work:client software design, namespaces, merging, TE Sting. Even if that's just new to us old Java developers, we still has one application for everything. It's not easy-to-exchange certain parts, it's not easy-to-integrate with the other applications, and it's not easy to Integrat e other applications into it.

roca–resource-oriented Client Architecture

So, do you have want to build a single page application? While working at a customer I came across ROCA (resource-oriented Client Architecture) which are a set of rules for a web AP Plication architecture. It's a short list, so before I repeat them here, please read them there.

Ready?

So now you know the rules, and that's doesn ' t mean you can instantly imagine how such a application would look like. At least I couldn ' t. I learned that there is and the important aspects:

RESTful style

RESTful communication is stateless, so we have no session state. We have meaningful bookmarkable URIs for each resource and sub-resource, and a resource ideally represents an object from Our domain, or a list of objects from our domain. I say ideally, because that's not a must. In a lot of use cases, a resource made for a Web frontend cannot is mapped 1-on-1 to domain objects, and if it does, our L Ife gets easier. To interact with those resources we use the four HTTP methods GET, POST, PUT and DELETE. So if our domain happens to is a movie database, usage could be:

• GET on/movies for displaying all movies
• POST on/movies for adding a movie
• GET on/movies/42 for displaying the movie with ID 42
• PUT on/movies/42 for updating the movie with ID 42
• DELETE ON/MOVIES/42 for deleting the movie with ID 42

A GET returns HTML markup (possibly through a template engine), put and DELETE are tunneled through a POST, and post, PUT and DELETE return a redirect URI to follow the post/redirect/get pattern.

Progressive Enhancement

By now we had a WEB 1.0 application that works perfectly without JavaScript. In a progressive enhancement style we can add all those little things this make up a WEB 2.0 application, like partial pag e rendering, inline-editing, search term suggestion, Instant Search, context menus, mouse over previews turning to a for M on click, and so on. It means that we probably need more than one representation of a resource, for example one that contains the whole page wi Th all menus, one of the contains just the content, and maybe one that presents the data in a popup style.
Progressive enhancement is a unobtrusive-in-a-do, so we don't have JavaScript generating HTML, we just use JavaScript For rendering, the history management, refreshing and validating based on server-generated data.

The movie Database–an example application

Learn the most if you try it out–so I built a Web application following the ROCA rules (with a little help and INSPI Ration of some people that know more on it than I do). It's a movie database, and you can find it here on Github. I used Bootstrap, JQuery, Thymeleaf, Spring HATEOAS and spring MVC for building it, and that's why:

Bootstrap

I really didn ' t have the much to does with CSS and web design in general before I does this project, so Bootstrap came as a Rescu E. Everybody can do good-looking user interfaces with Bootstrap. And in a real world project there would probably is someone professional doing the web design.

Jquery

I really didn ' t have the much to does with JavaScript before I does this project–wait, does I write this before? Sounds familiar. However, JQuery seems to is the library of choice when working with JavaScript, and it worked out well.

Thymeleaf

If you want to generate HTML on the server in a normal request/response, a standard-of-the-is using some kind of the template engine. Thymeleaf uses valid HTML as templates and adds template expressions as additional attributes with a th prefix. This is the can build working mock-ups and integrate them directly into your codebase. People specialised on web design may create CSS, HTML and JavaScript which can is used for presentations, and we can be Su Re, our product would look at the same in the end.

Spring HATEOAS

Spring HATEOAS is a library for dealing with the hypermedia part in RESTful applications. I guess it was intended-use in the RESTful Web services, but there are no reason for not using the it here. We have a domain objects delivered by our services. They has relations to other domain objects. In the browser, those relations is represented by links to another resource or sub-resource, for example the RESOURCE/MO VIES/42 have a relation to their list of comments, which can be found following the uri/movies/42/comments. To convert our domain object into a resource, we need to create those links. Spring HATEOAS brings structure into this process by providing a Link and a Resource class, where the latter may contain a Domain object and a list of Link objects. Furthermore it contains a Resourceassembler interface which can be implemented to build special domain-resource-converters For domain classes, doing the conversion in exactly one place. This it becomes a three-stepped process:gettingDomain data from a service, converting it to resources and inserting it into the template.

Spring MVC

I needed a Request/response style web framework, and Spring MVC is one of the them. I wanted to check if it fits well. And also I wanted to write a Web application without a line of XML, and since this ' s possible with Servlet 3.0 and Spring 3.1, I did it here. Note that you need a container capable of Servlets 3.0 to run the application (Tomcat 7 would do).

What's now?

I encourage you with a look at the code and let it run. Does It feel good? Or is a SPA maybe a better solution? Let me know to you think.

A Real ROCA using Bootstrap, JQuery, Thymeleaf, Spring HATEOAS and spring MVC