Choosing AngularJS and more

Enrico Icardi —  October 23, 2013

Choosing the right technology stack when starting to write an application from scratch is always kind of challenging and confusing because of the number of options available. But it can be fun, too!

I’m going to share with you the process that we went through, before starting the development of ShareDesk’s main browser application starting from a previously defined product. Fact: if you have already defined a blueprint for your application, defining goals becomes quite simple. I’ll provide an example of a high-level list of goals that we followed

Non-tech goals:

  1. Provide an application that allows serviced offices to easily manage their inventory (meeting rooms, offices, coworking spaces, desks, and other workspaces)
  2. Serve an application (in browser and mobile environments) that allows realtime reservation of those workspaces.

Tech goals:

  1. Create an intuitive User Interface to allow users to create/edit/cancel reservations in matter of seconds and managers to quickly create/edit/delete/import resources.
  2. Provide a fluid User Experience (because the UI should also work well, not just look good)
  3. Decouple client and server side (to be better structured and scalable)
  4. Version the source code and provide current and future developers with wiki/documentation (for new developers to join the project)

We built the graphics of ShareDesk Optix that we defined earlier (and started working on HTML+CSS). We started to think about creating a Single Page Application to offer a better UX, created an API (in PHP because that’s what we know best) to serve any kind of client side application and versioned using bitbucket (because they offer couple of free private GIT repos).

This gave us the foundation to start and, at the same time, things started to get confusing.

Framework(s) or not?

If you’re coming from an “old school” way of organizing application, you’re mostly used to work with server side web frameworks so it’s not easy to just switch to client side frameworks and make right decision….and reading long lists of choices is like trying to hire someone because of his/her name: not cool.
Backbone.jsAngularJSEmber.jsKnockoutJSDojoYUIAgility.jsKnockback.js and CanJS are only the first 9 names of MV* framework that you can choose today from an infinite list that Addy OsmaniSindre SorhusPascal HartigStephen Sawchuk are maintaining on TodoMVC -so, which should you chose?

Setup, Test, and Repeat.

We took some time to setup different environments and test different solutions (2-3 weeks?) before we could eventually find our favourite framework. It is called AngularJS and it’s currently the best choice to help us get started, and ideally develop a mobile version (using PhoneGap) in a very near future.

Once we picked AngularJS we realized that it was going to be fun. Documentation for AngularJS, at the current time, is missing big parts and it’s easy to find yourself dealing with a bunch of outdated lines of code that don’t work with the latest version (or the one you have on your machine).
Also, reading blog posts, tutorials and stackoverflow answers simply are not yet the best ways of getting to what you’re trying to achieve for many different reasons (outdated code, wrong way of implementing the AngularAPI, etc.) although, of course, you can find exceptions.

Fact: the time you’ll spend researching on this is definitely worth it…and you’ll eventually find good resources.

Once we made it through this, we found ourselves happy with using a free tool (that two nice guys came up with) called linemanjs. That helped us quite a bit. Still, we were not 100% familiar with the environment, but thanks to this tool (and this great series of videos) we were able to have something up and running in literally no time. It might not be the ideal scenario for the application that you’re trying to build, but quoting a mail received from David Mosher after my question “is this the right way to go?“:

There are probably some other things you can think of, but again, because Lineman is not prescriptive in this area it should be pretty easy to customize with whatever scheme you devise

…and so far we’re still happy with the path that we chose! :)

Execute

This is what’s going on in the ShareDesk’s DEV dept., and since we realized that AngularJS (as well as choosing the right MV* framework) is becoming a hot topic, we wanted to share our experience to help developers with lessons learned.

Next Steps

Thinking about next steps is crucial. We need to deliver the same application not only on browser but also on mobile devices (as many as we can cover) while trying to keep our code clean, lean, scalable and maintainable (from a very small team). That is our next challenge (and a story that we will soon share).

Sounds interesting? Work with us.

We are looking for experienced developers to join our team, in order to help us build our new mobile application (using our API, AngularJS and PhoneGap). Read more about the job description here.

Thanks!

– Enrico I

Tweet about this on Twitter2Share on Facebook0Share on Google+0Share on LinkedIn1Share on Tumblr0Share on Reddit0Digg thisEmail this to someone

Enrico Icardi

Posts