Spartez Software has joined the Appfire family. Learn more

Great tools help us create great software

Agnieszka Józwiak
Agnieszka Józwiak
Apr 25th, 2016

Creating software should be easy. You should care only about business logic leaving all boilerplate to the frameworks and tools you use. That's why choosing technologies for your new project is so important. In our most recent product – Agile Poker for Jira Cloud we gave a try to Vue.js (front-end framework), Firebase (shared database) and Heroku (hosting service) and we loved it! We've found them easy to use and super effective, so we decided to spread the word.

Estimation tool for the Cloud

Agile Poker for Jira Cloud is an add-on for Jira issue tracker introducing well known estimating methodology for Agile teams:

  • the moderator selects the Story for discussion and voting,
  • team members place their estimate cards 'face down', to avoid bias,
  • when all have cast their votes, the cards are revealed, and
  • if all agree, the estimate is recorded, or
  • if the team members' views differ, they should explain their estimates. After a time boxed opinion exchange, the voting starts again.

The add-on is focused on interactivity and collaboration – changes made by one user are visible to all other users instantly. User interface looks great and is fully responsive. All of this thanks to the technologies under the hood which made the development process easier and fun.

Vue.js front-end framework done well

In the past we tried to work with several front-end frameworks – mostly with Backbone (also supported by Marionette) and AngularJS. The former turned out to be too simple – we spent a lot of time looking for Backbone plugins and integrating them all together. We've found the latter very powerful but also overcomplicated. That's why we started looking for something just as powerful as AngularJS but easier to understand and use. It turned out that Vue.js is exactly what we were looking for. There are several reasons why it is a good choice:

  • Awesome documentation coming in two forms:
    • Well structured guide with dozens of real life examples. After reading it you know exactly how the framework works.
    • Short and concise API description. Every available function is described there, so it's easy to find what you need.
  • Great examples created by the framework author. All common problems (project structure, nesting components, etc.) have already been solved there so you can focus on business logic in your application.
  • Surprisingly simple and smart template syntax. After ten minutes you will understand it completely.
  • Several satellite projects lead by Vue.js author. They are all designed to work well together, so there is no need to spend a couple of days trying to integrate them.

I strongly encourage you to give Vue.js a try in you next project. A good starting point is the guide mentioned previously.

Firebase as cloud storage

Creating backend is always a tricky task for front-end developers. In Agile Poker the main difficulty comes from the common state shared between poker session participants. For example when session scrum master selects an issue for voting, every other user should see this fact. Also, votes for each user story should be broadcasted between users. To handle communication we could create a server application mediating between session participants (probably using WebSockets or long-polling under the hood). It for sure will work, but developing such server is error prone and takes a lot of time. We've decided to use a tool which handles synchronization of shared state for us. Our choice was Firebase and now we think that it was a great choice.

Firebase is a super simple NoSQL database optimized for small, collaboration-oriented applications. To see how powerful it is let's take a look at the following snippet of front-end JavaScript code:

// Create a connection to your Firebase database
var ref = new Firebase("");
// Watch for changes in database
ref.on("value", function(data) {
var name = data.val().name;
alert("My name is " + name);

In the example above we first init a Firebase connection. Then we register a callback which will be called every time a piece data changes. It doesn't matter who actually changed the data – it could be either the current user or any other user connected to the same database. This super simple API allows to keep every user aware of the current data state.

On the other hand saving data to Firebase is as simple as follows:

// Create a connection to your Firebase database
var ref = new Firebase("");
// Save data
ref.set({ name: "Alex Wolfe" });

The beauty of Firebase is that you don't have to care about low-level communication – it's fully handled by the provided library. Other topics like authentication, access rights , offline mode etc. are covered as well. What you really need to care of is your application business logic. Take a look at great Firebase documentation for details.

Continuous deployment made easy with Heroku

Other tools we successfully use include webpack with vue-loader for packaging and Heroku as a hosting service. By using these tools, we reduced the build and deployment process to a single command: git push staging master. When a new feature is confirmed to work on staging environment it's deployed to production using Heroku pipelines . With this approach we were able to introduce the continuous deployment methodology – task cannot be marked as done until it is available for our clients on production.


Choosing the right tools for your project is absolutely crucial. I think the technologies I've mentioned are perfect for Agile Poker. At the same time the fact that something worked for us in one project doesn't mean it will be useful in another. Would I recommend using the same technologies in every project? For sure I recommend Vue.js. When it comes to Firebase, webpack and Heroku it heavily depends on the problem you are trying to solve, but there are cases when they are just perfect. This is the reason I recommend that you take some time to familiarize yourself with each of them.