BDD with AngularJS, Webstorm, and Karma Runner

My DevTO talk had me building an attendance list application in 15 minutes. It was quite successful but not a good example of proper development practice. I decided to put together a behaviour driven development example and show off all the great testing tools built around AngularJS. Using the same application I cowboy coded live at DevTO, now I’ve got a version that I would be happy to be part of a project I had to maintain.

Karma Runner is a great test runner that runs your unit tests on every file save, perfect for doing BDD. It runs tests in the various target browsers to ensure you’re actually testing in the engine that will be running the javascript.

Webstorm also gives you fantastic Karma integration on top of the world class javascript support in the IDE.

All of my source is available at https://github.com/AlanHietala/BDDWithAngular

You’ll notice that I make mistakes in my development but the important thing is that my tests actually end up catching those logical errors. This is why BDD is such a powerful tool. Even the best developers make lots of mistakes while writing code, the tests catch them and ensure that your code base is always improving and not getting worse.

My AngularJS Toolchain

I had some questions come up about my toolchain after my DevTO presentation. I thought I would put together a video walking though some of the key aspects of it.

My Workflow is based around Yeoman which includes three great tools. Yo, Grunt, and Bower. Yeoman provides a scaffolding / boilerplate generator, Grunt is a task runner that powers a lot of the actual dev workflow including the connect based live reloading server. Bower is used for dependency management of all my javascript libraries.

The above video tutorial assumes that you have nodejs, yeoman and the generator-angular package installed.

 

AngularJS Talk at DevTO

I gave an AngularJS talk last night at DevTO and feel it went pretty well. It was my first tech event speaking engagement and was a fantastic experience. I built a small app live coding the whole way and while I did run into murphy’s law, it worked itself out in the end.

Looking forward to doing more of that sort of thing in the future if the opportunity arises. Big thanks to DevTO for taking a chance on me.

I have a screencast of the talk up on youtube:

Presentation:

Q&A:

and full source for people to play at:

https://www.github.com/AlanHietala/DevTO

Always looking for feedback on how to improve.

Nodejs user authentication example

I’ve written up a sample user authentication app in express using the great bcrypt library and mongoose as the ODM layer. It’s currently pretty bare bones but covers all of the basics for user authentication and password resets.

You can grab it on my github page.

All the good stuff is happening in the /models/usermodel.js file. Here we handle the password hashing, password reset generation and password validation.

To create an account in the demo you first need to hit /users/new

To Log in hit /sessions/new

I’ve tried to keep useful auth related functions in my middleware directory so they can be chained in any route definition. For example in the app.js file you will see:

app.get('/users/:id', isLoggedIn, andIsOwner, user.show);

Which helps keep those common pieces of logic for checking if a user is logged in and is the owner of something nice and DRY.

I’ll probably be adding in the reset password functionality but that would require some dependencies on email and the like so for now I’ll leave that in the unit tests and as an exercise for implementation.

Mac Mini and Jenkins as a Phonegap Build Server

Over the last day or so I’ve been putting together a Jenkins CI server to handle all of our mobile applications. We’re building out on HTML5 using Phonegap/Cordova currently targeting iOS, Android and Blackberry OS7 / BB10. It was a relatively smooth process with a few gotchas along the way. This guide assumes using phonegap/Cordova 2.2 or greater. This version’s create scripts make automated building much simpler on the iOS side of things.

Installing Jenkins

The Jenkins install itself is very straight forward. Simply download the osx installer from the Jenkins site. Use the default install options which will set Jenkins up to run under a user named unsurprisingly, jenkins. Once Jenkins is up and running you’ll want to install the xcode plugin which is available within jenkins by going to Manage Jenkins -> Manage Plugins and then select the xcode plugin from the available plugins section. Android and BB10 will use standard ant builds so there are no additional plugins required to build for those platforms.

iOS Build Setup

To get your iOS build going you’ll need to get a few things in place. Firstly the user that Jenkins created does not have a default keychain nor the directories for provisioning profiles. This will be needed to sign your applications and create IPA files for distribution. Lets first create the directory structure that are standard for the keychain

sudo su jenkins
cd /Users/Shared/Jenkins
mkdir Library
cd Library
mkdir Keychains
security create-keychain login.keychain
security default-keychain -s login.keychain

now you have a couple of options. You can go the super secure route as detailed in this great writeup on stack overflow which generates a jenkins specific cert that can be easily revoked in the event of server compromise. I deemed this overkill and opted to use an existing developer cert that was in my iOS provisioning portal. I downloaded the cert and now I need to install it for the Jenkins keychain.

security unlock-keychain
security add-certificate mycert.cer

I also need the provisioning profile that will let me create an IPA of my app. I include this in my repo that Jenkins checks out as there is a field in the xcode Jenkins plugin that lets you define the path to this provisioning profile.

You should be able to build your app using the jenkins account using xcodebuild now. If that works great then all you need to do is fill out the appropriate sections in the build step in jenkins and you should be off to the races.

Don’t be tempted to leave blanks where you know the actual values to fill in for the jenkins build steps. I ran into a problem because I didn’t have my CONFIGURATION_BUILD_DIR set and since phonegap/Cordova relies on building a sub project first, its compiled resources weren’t available to the final app if I didn’t fill out that section. See the image below as a sample. The relevant line is the Output Build Directory in the Jenkins plugin. Fill this out, just do it.

 

Android Build Step

The android build was much simpler to get up and running. Android is all ant based so Jenkins is right at home. If you haven’t set up your android project to use ant yet there is a great guide on the Jenkins site that details what to do.

I’ve summarized the steps below as I didn’t need all of the guide for my app.

set up your project for ant builds if you haven’t already. Using the developer tools you’ll want to run:

android update project -p <projectPath>

next you need to set up Jenkins. This is really straight forward as all you need to do is:

create a freestyle project
add a build step to use ant
fill out the sections for checking out your code
for the ant step section set the target to release
click advanced and add the following to the properties section

sdk.dir=<android sdk location>
key.store=<keystorefile.keystore>
key.alias=<keystore alias>
key.alias.password=<aliasPasword>
key.store.password=<storePassword>

You should now be able to build your application from Jenkins. One thing to note is that both the keystore and the SDK need to be in a location that is readable by the jenkins user.

This will create a signed apk ready for release.

Windows 8, Why you kill productivity?

I’ll admit it, I bought windows 8 on release. Maybe I’m a masochist, maybe I was swayed by beautiful TV ads or perhaps it was my morbid curiosity.

I tried to like it, I really did. Then I realized it was a thing of pure evil.

The Start Menu: A Procrastinators Worst Nightmare

First off there is no visual indicator there is even a start menu. You just have to know there is a hidden interact-able element in the bottom left corner. This is where one flips from the windows desktop to  ”we’re not calling it metro”. The UX is pretty bad and everyone and their mother has written about it. I recommend Jakob Nielsen’s analysis if you want a rehash.

This context switch to “we’re not calling it metro” is disorienting but that’s not the worst part. When I go to launch another application I’m usually trying to get work done not have 10 different sources of information pop up and suggest, no, beg me to click on them.

The start menu of windows is designed around showing you all the “cool” stuff happening in the hyper connected world around us. Twitter feeds, Email, whats new on netflix, world news, and pictures of cute animals immediately cry out “click on me! Look how fun it is over here!” They’re animated, they flash, they use the same tricks that make 5 year old’s pay attention by bombarding them with flashing lights and loud noises.

The worst part of it is Microsoft actively encourages the user to customize this giant wall of time wasting when they first start windows. They are even sending out emails about how to optimize the giant wall of time suckage to suck even more.

I can see this alone being responsible for a not so insignificant drop in productivity for companies that roll out windows 8. I hope I’m wrong but I do believe that in an attempt to improve their UX they have generated a billion lost hours in productivity to people reading the latest news on TMZ or looking at funny pictures of cats.

Infinity Creator Updated

The usual suspects that help me maintain infinity creator have updated it with all of the recent army lists. If you encounter any errors let me or atis52 know and we’ll get it sorted out right away.

Some recent stats:

  • more than 30,000 lists created to date
  • more than 2500 active accounts
Some pretty decent stats for a game that only boasts 3700 accounts on their official forums.

 

 

Spotify, HTTC, and Guilds

Spotify recently shared how they stay agile with so many employees on techcrunch recently. The concept of their guild really hit home for me as this is the exact structure I was experimenting with back in my world of warcraft days.

Back in the early 2000′s I was leading raids in World of Warcraft with a rag-tag bunch of players comprised of many different guilds. I had created a raid coalition called Horde to the Core and set in place the organizational structures to ensure its success.

The problem faced was that WoW raids needed 40 competent members and most traditional guilds only had a few. Many guilds had decided to form alliances to attempt to put a full roster together but power struggles were often the downfall of these traditional alliances.

The solution was to create an organization that operated at arms length and could draw from the top talent that existed in guilds that couldn’t quite tackle the big raid content.

I was so impressed with the success of this structure that I gave a talk about it at barcampearth in 2006. The premise was building highly targeted teams to accomplish a goal from a bunch of existing teams that individually were not suited to the task.

It was quite successful creating a guild of guilds and had some great side effects. Knowledge was transferred down to the base groups which improved their overall efficiency. As we got stronger we would bring along weaker members and be able to train them up extremely quickly.

How does spotify fit into all this? If you read about their hierarchical structure in their recent slideshare presentation you’ll see what I had created was exactly the guild structure they use.

 

Scaling Agile @ Spotify

Having arrived at this type of structure myself through a lot of trial and error I can categorically say that it works extremely well. Members of the HTTC “guild” were all interested in raiding, but the vast majority of their WoW playing time was spent doing things within their own tribe. Everyone was happy because they got to spend most of their time with the people they wanted while still being able to push end game content with some like minded people a couple nights a week.

It was the loose coupling of the “guild” that made it work. One could be a member of a guild, a tribe and a squad and not have those memberships conflict. If anyone has any experiences with this type of organization I would love to get your feedback on what worked and what didn’t.

 

Hackpad a hackTO joint

I was at hackTO yesterday and had a real blast. There were all kinds of great APIs to use for the event including Yellow Pages, Context.io, Freshbooks, Twilio, TinEye, Atomic Reach to name a few. All have great services and rockstar level APIs and documentation.

I was planning on working solo for this one so I knew I was at a large disadvantage to some of the other teams in terms of sheer developer power. What I would have to create would need to have impact on the crowd, be achievable within 6-7 hours of work, and above all be a real hack.

 

From the HackTO site:

We believe that a hack is “an appropriate application of ingenuity”.

For me this meant take something that was offered and break it, warp it into something that it wasn’t designed for and make it awesome. I pretty much knew from the start that I wouldn’t be winning any of the sponsor prizes because its hard to turn a true hack into an example app / testimonial.

I’m trying to think about how to achieve the above and all of a sudden I hear Mobb Deep, Survival of the Fittest come over my headphones.

http://www.youtube.com/watch?v=JxDdN-puo3g

I start to nod my head to the track and realize I want the audience to get that same feeling during my presentation so I decided on SoundCloud.

After poking around SoundCloud for awhile I realized there is a disproportionally large amount of Dubstep. That got me thinking about electronic music and the LaunchPad.

The nice thing about this type of thing is that once you create one trigger / loop creation tool you just create 16 of them and put them in a grid for a whole instrument. My Hack will scale to look impressive at the click of a button. Parallelism for the win.

I set a cutoff for 4pm for coding issues and gave myself an hour to prepare the presentation. I was going to be creating a loop and then have an effect pad to mash all in the course of 3 minutes.

Of course Murphy’s Law was in full effect and at 3:30 I realized the HTML5 version of the SoundCloud widget would automatically stop any other running widgets on ANY page when you started a new widget.

This was not a problem in their Flash widget as there was a flag you could set to explicitly permit this. with 30 minutes to go before my self imposed deadline I realized I wouldn’t have time to create an awesome presentation and port over to the flash API. Thinking back to the Mobb Deep song that started the whole thing one lyric stood out.

I’m goin out blastin, takin my enemies with me

and if not, they scarred, so they will never forget me

It didn’t matter that stuff wasn’t working 100%. Focus on strengths, hide your weaknesses, and keep swinging until your either victorious or you’ve taken the 10 count on the mat. Either way people will never forget you.

Demoing the app to the team at my table, A great guy named Wyatt suggested incognito mode might be a way around my problem. It worked. Holy crap who would have thought incognito would be useful for something other than porn.

The presentation went really really well. I was early in the order and the first SoundCloud app. I knew I had hit one out of the park when the audience started grinning and nodding their heads after hearing the first loop.

I ended up taking second place.

Full source, warts and all is available at https://github.com/AlanHietala/HackPad

It’s all Javascript written in backbone.js

Sinonjs to the rescue

I’m working on some new webapps in backbone with a json service backend right now. The backend wasn’t written when I started the project with my team and early I decided to mock out the server in sinon.

This let the team build quickly independent of the backend development as long as we kept the interface between the two parts clearly defined.

Today while integrating the front and backends we had some DB problems that took down our main test DB. Within minutes the frontend team had switched back to our stubbed out backend. total downtime for them? About 5 minutes.

At the onset of the project the value of creating a fully stubbed out server in sinon was questioned. We can just use json objects to simulate the data right?

Wrong. You’re not using xhr requests to service that data, and can’t write any code that chains their events off of the actual xhr requests. This gives you a far wider gap when it comes to integration.

the DB eventually came back up and we were able to switch back to using it for our xhr requests but it wasn’t a work stoppage event.

Sinon.js is awesome just for the record.