Home > Development > Doubly geeky stuff: AngularJS meets Marvel comics

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. 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?

The project has been published on Github. 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.

email
Send to Kindle
Categories: Development Tags:
  1. February 2nd, 2014 at 21:13 | #1

    Hi Nicolas !

    I have just forked your project on my github repositories : https://github.com/fduperier/marvel-front
    Like you do in every backend app, you should definitely separate your App configuration, controllers, etc in different files. Angular allows you to do it quite easily :)

    One more advise, you should put your marvel call configuration in an Angular Service, then inject this service in your controllers and use it from here.

    You can find the refactored code in the 2nd commit on my forked repo. Unfortunately, I cannot send requests to Marvel Server from my localhost, so end-to-end tests have not been performed… That’s why I didn’t ask for a pull-request but you can browse the code on my repo and test it your own way ;)

    Enjoy !

  2. Francis
    February 4th, 2014 at 19:37 | #2

    It looks like you are not very familiar with REST either. Hint: Never build URIs (like in characters/:id).

  3. February 4th, 2014 at 23:14 | #3
    1. I’m not the API builder
    2. Enlighten me, your comment is quite… light
  4. Francis
    February 5th, 2014 at 09:52 | #4

    @Nicolas Frankel
    It’s not about the API, it’s about how you use it. A true RESTful service provides you with the URIs you need. According to the docs the Character object has a “resourceURI”. You can use that URI directly instead of building it yourself.

  1. No trackbacks yet.