Development

Doubly geeky stuff: AngularJS meets Marvel comics

Let’s face it: despite us having very serious titles like Principal Consultant, Senior Software Architect or Team Leader, most of us are geeks through and through. Each shows it in a different way; some fiddle with machines, some like cosplay, me I like comic books. When I learned that Marvel Comics provided a developers REST API, I couldn’t resist playing with it.

• 2 min read

Let’s face it: despite us having very serious titles like Principal Consultant, Senior Software Architect or Team Leader, most of us are geeks through and through. Each shows it in a different way; some fiddle with machines, some like cosplay, me I like comic books.

When I learned that Marvel Comics provided a developers REST API, I couldn’t resist playing with it. I’m more of a backend guy, and though I love Vaadin, using it to call REST services would be like proxying with no added value. Though I’ve no prior experience with AngularJS, this is a much more relevant option in this case. This article is by no mean a how-to article, on the contrary, it contains many questions and some answers I’ve come across. In no particular order, those are the following:

Using webjars with Maven

Front-end is front-end, period. I used Maven with webjars to get AngularJS and Bootstrap dependencies, but it doesn’t add anything. Worse, it adds an unecessary build process. It would have been to better to use a relevant tool like Bower. Lesson learned: use tools tailored to your language.

Using Tomcat inside IntelliJ IDEA

Likewise, using a back-end tool means no added value value but instead added complexity. It only slows down the development process. A simple web server would have been good enough.

Knowing about $resource

After using $http for a few hours, I learned about $resource. It is much better and more usable than $http. However, this requires an optional AngularJS module, ngResource, which in turn needs an additional <script> include in the HTML page.

AngularJS and Bootstrap integration

I’ve used Bootstrap for styling, because I suck at doing style sheets myself. Fortunately, there’s an dedicated Bootstrap directive for AngularJS, but I didn’t use it.

Fragment cache

I used ngView to create a Single-Page Interface application. However, AngularJS has some powerful caching features, that prevents the rendered page to be updated. In order to bypass caching, I used Firefox’s private window.

Paging synchronization

The Characters list REST service has paging capabilities. Using $index in ngRepeat for numbering with $resource fetching, I get some de-synchronization between the renumbering that occurs nearly instantly and the resource fetching.

Variable columns

I have tried multiple combinations of ngClass, ngSwitch and ngIf directives to have div columns spanning different Bootstrap units…​ to no avail. Any suggestion?

Pull-requests are welcome, as well as advices, so I can improve. In all cases, please provide the reason behind, I’m an engineer after all.

The complete source code for this post can be found on GitHub.