The next Angular

I hear this question so much these days. What is the next Angular ?
Or what JS framework would you recommend we use?
Tho which I always answer, there is no silver bullet, there never has been.

Screen Shot 2015-01-29 at 11.33.08 AM

Its all about the context in which the application is going to be developed. What good is it to build something in Angular with Node, or Ember with  Rails or Backbone with Python,  or what ever other stack if the people who are going to implement the code aren’t going to follow standards or simply, don’t know how to tie all the pieces together.

Some things permeate languages and libraries and that is what always should be sought after. A house is judged not by the hammer that built it, but by its architecture and livability.
Small methods, tested code, documentation, good use of memory etc. All these are examples of architecture and style not of tools.

The question we should be asking ourselves is how do we develop this application so we can pluck out pieces of it and put in newer/better pieces without having it fall apart.
It needs a solid base that is loosely coupled and well structured. Clear interfaces and code flow. Single priority methods, good analysis of cyclomatic complexity, multiple device testing automation etc.

In reality you can have your app be small pieces of a lot of things, so long as you can assert it does what its supposed to do and so long as they are all used for the right thing. Focus on having good people that know what they are doing instead of finding silver bullets. Focus on having good test coverage so that when you do pull the pieces out, you know exactly what is broken or what to fix.

In the world of corporate applications, tech is rarely the problem, normally its people and how they are managed or how competent they are at their job.



The beloved spinner

So many times we confront this issue.

In the world of AJAX where requests take time, we’ve come to develop a handful of incredible solutions such as promises and deferred responses in order to continue to execute JavaScript with out blocking the thread. This is an incredible achievement for true async comes to existence

But what about the user? The user doesn’t give a damn about your miraculous promises. The user wants the page to do as he/she says.. NOW!

A few months ago a colleague of mine was chasing a pretty interesting bug. We were trying to figure out why some database items were getting duplicated or erased every time a user would submit a form. It made no sense for we had a bunch of form submissions that were pristine, yet some were simply corrupted.

We debugged through the AngularJS code and it was pretty straightforward. The form was getting sent to a service and that service, responded with a 200 if it was saved o,r with the corresponding error code if it was not. So what the hell was going on?

Double click was the cause of the problem. Our users were a bit older around the ages of 50-60 and they are used to double clicking everything. Hence when they submitted the form they actually submitted it twice and this cause all kinds of unhandled issues in the back end. Yes in theory there should have been a check to make sure that user has or has not submitted a form and then updated accordingly but, the UI could have been a little bit more understanding of the crowd and helped out more in handling the situation.

image spinner
Sample spinner

A simple swap from button to spinner disables the user from being able to submit twice and informs the user that the system has noted his/her request and is working on it.

Some times its trickier. For instance when we have multiple events that can take place on the same page. In this particular case, a global method that detects whether a spinner is present in the DOM or not and if so alerts the user to hold on does the trick quite effectively and elegantly.

An example of a good interaction is Ladda. Here, as the event happens, the button gets injected a spinner right there.

Another cool spinner solution for all device, resolutions and browser versions is spin.js. You should definitely give it a spin (get it?).

Some word of advice, always think about spinners early in the development cycle, and include them in every action that can potentially have latency. Your users will thank you, and you’ll avoid having to debug very weird issues.

Happy hacking!


D3 Waterfall chart

When it comes to waterfall charts and d3 you have very few options.
1) Your are on your own, which means you are free to draw it how ever you want (which is pretty much the coolness of d3)
2) You use this repo which will give you a horizontal chart. Has a mix of ruby and coffescript
3) You use this plugin that resembles to what most jQuery users or Highcharts users are used to which is a config object that generates a chart.
Currently it only supports vertical waterfall charts. Feel free to use and contribute.