Events

Spicing Up a Music Event

Topics
music contest, spice program, ios, android, react native

As the red-white A320 descends towards Helsinki-Vantaa Airport on the 12th of March, a familiar view unfolds beneath my window. Having both work and family ties to the Finnish capital, I am no stranger to this flight route, and yet the sight of Helsinki excites me more than usually. For the first time since 2006, my old love “Jugend musiziert” is back in town, with around 200 international guests and a whopping seven days of music at five different venues.

The event, commonly known as Jumu among insiders, is an annual music competition for children and teenagers that’s almost as old as my parents’ generation, taking place all over Germany and at selected German schools abroad. As a young pupil at Helsinki German School, I first took the stage as a participant in 2000, then moved behind it six years later to join the organizing team. As participant numbers grew, we had to come up with new ways of storing and syncing information, and so I took my first steps in software development while designing and building a digital signup form, which gradually evolved into a full-fledged CMS and reporting system (and, incidentally, helped land me my first full-time job).

The German School, awaiting its international guests

This year Jumu celebrates its 20th birthday in the region of Northern & Eastern Europe, which Helsinki belongs to, and so in mid-February I decided to build a little present. Even better, I would open-source it under the Spice Program to combine code wizardry with art and education, both topics that the program is expanding towards. Given the time constraints, I focused on the most important feature for participants, audiences and organizers alike: Who is performing when, where and what?

Building an iOS app

Being an expert in iOS development, I started with the most familiar platform and was soon surprised how much can be achieved in little time when one is equipped with domain knowledge and in control of the mobile API. There were a few hiccups related to developers’ favorites such as localization and time zones, but overall the journey was smooth and after 36 hours of work spread across three weeks, I submitted the app to Apple’s reviewers. It was accepted five days later, a week before my flight to Helsinki.

Having the iOS app ready felt great, but also incomplete. Surely there would be plenty of Android users, especially among the participants? My Android experience was limited to a single project many years ago and Java isn’t exactly fun either, but there was that new kid on the block that some colleagues (and other famous people) couldn’t stop talking about: React Native. I had shied away from it earlier because of JavaScript’s hackiness, but with one week left, a little bit of hackiness was exactly what I needed…

Porting the app to Android

Developing with React Native was a wholly different experience. Some things were trickier: Instead of getting friendly advice from the Swift compiler, I often found myself debugging JS syntax through the not-so-friendly red screen in the emulator. Then again, being able to reload the app like a website is a huge time-saver, and the wealth of third-party libraries available for React Native is impressive. After some searching, I even found a somewhat decent replacement for iOS’s native UISegmentedControl, which I use to switch between days and venues.

On the day before all the guests arrived, I finally had something potentially shippable on my emulator. But sending it off before ever trying it on a real device felt a bit too badass, and I couldn’t get the signing to work either. Luckily the German School is just one block away from the Futurice office, and with my colleague Andre’s help, the app went live a few hours later! The required effort was 13 hours from setup to store submission.

Later that week, I took a break from the hustle and bustle of the organizing team and came over to the office again for an interview at Futurice’s wwweeklies. Check it out if you want to hear the full story!

Here are the codebases for iOS and Android.

The iOS app in action

What's next?

Now that the dust has settled, I’ll try to find some time to focus on the biggest selling point of React Native, which is supporting both Android and iOS natively from the same codebase with only the most platform-specific elements kept apart. It will be interesting to see how much effort it takes to add iOS support to my current React Native codebase, using the native app as a benchmark. If it works as advertised, it would mean saving precious time for adding the features that music lovers want and need.