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
- After using
$httpfor 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
ngRepeatfor numbering with
$resourcefetching, I get some de-synchronization between the renumbering that occurs nearly instantly and the resource fetching.
- Variable columns
- I have tried multiple combinations of
ngIfdirectives to have
divcolumns 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.