Ohdio Loves JavaScript
This article is re-posted from my (now repurposed) Medium blog. Original post date: Dec 13, 2013
This is an article I’ve been wanting to write for quite some time and now I finally got the time. There are several reasons why I wanted to tell people, especially the local web development community, about Ohdio.fm’s tech stack. First of all, I wanted to share the technologies we use, so that other aspiring/established startups might gain some insight, or perhaps inspiration, from what we’re doing. Secondly, I personally am quite proud of what we have achieved in Ohdio.fm,- technology-wise -, from the backend technologies to the front-end development.
For you who haven’t heard us, Ohdio.fm is an online radio that let you listen to curated playlists of Indonesian music. We are currently available via the browser (desktop/mobile), a Windows Phone app, and a newly launched Android app.
When I first started planning for the development of Ohdio.fm, there are 3 important issues that I must address:
- The web-app needs to be developed as a Single Page Application (SPA). This was a number #1 priority because we need to let users browse the web app without interfering with the music player.
- A loosely-coupled system that will support the web app as well as future mobile apps.
- A streamlined development environment. Because I will code most of the app, I need to develop it without having to change mindsets between the backend and front-end.
Front-end
Given the situation that we needed to develop the web-app as an SPA, obviously I started to look into Backbone.js. But being new to this framework, I started to search for its documentations and “getting started” articles on the web. I was a bit surprised that my search returned no good results.
Prior to development of Ohdio.fm, I’ve been a fan of the MVVM (Model View View-Model) JavaScript library Knockout.js. So when one of my web developer colleague (*shout out to @leksa!) told me about Durandal.js, an SPA framework built using Knockout, Require and jQuery, I immediately took interest. It didn’t took me long to decide that I would use Durandal as Ohdio.fm’s front-end framework.
Because Durandal uses Require and Knockout, we could easily separate the logic and the view modules easily. Thus I can work with the JavaScript files independently, while Ohdio.fm’s amazing UI/X developer (*bow to @eggstone*) work with the HTML files.
For the mobile browser version we opted to use jQuery Mobile as the framework of choice.
Backend
The fact that the front-end development was already JavaScript heavy, the decision to choose Node.js as the server came to me much easier. I’ve read many great reviews about its performance. But in the end, the fact that I wanted to also use JavaScript as the backend development language became a major factor.
Ohdio had used MongoDB on its previous version, so we opted to keep using it. Working with MongoDB is pretty much like working in JavaScript, because its documents are formatted in JavaScript Object Notation (JSON). So, a much more streamlined development environment.
I wanted Ohdio.fm’s backend server to work not only with the main web applications, but also for our future mobile applications. So I decided early on to develop the server as a REST API server. I used Express.js as the middle-ware between the API requests to the database models written using the Mongoose library (*thanks for the info, @ziyadbazed*).
I also wanted the CMS to be served by a web server separated from the main Ohdio.fm servers. So we developed the CMS using Code Igniter (PHP) hosted on a separate Apache machine.
Media Stream
At first we wanted to develop our own streaming server, but time (and budget) wasn’t on our side. Ohdio had use Java-based proprietary Wowza Media Server software as its streaming server before. It has an excellent performance and work seamlessly with our media player of choice, JWPlayer. So Wowza stays.
JWPlayer is a Flash-based media player with HTML5 fallback that uses RTMP (Real Time Messaging Protocol), Macromedia’s proprietary protocol for multimedia streams. It has a JavaScript API that works like a charm with Knockout. Integrating JWPlayer’s JavaScript API into Ohdio.fm’s front-end logics was a breeze.
Mobile
Currently there are two Ohdio.fm mobile applications, each for the Windows Phone platform and the Android operating systems. All these native mobile applications uses the API also used by the main web application.
Development-wise, there are still many things we needed to work on at Ohdio.fm. I personally think there are many parts that we can optimize further in terms of efficiency and security.
“If you are not embarrassed by the first version of your product, you’ve launched too late.” ~Reid Hoffmann
After the launch, we did have some glitches with the streaming server. There were also problems with RTMP ports. Not to mention working with Node you can easily found yourself inside a callback nightmare. But we managed to overcome those obstacles in time, re-factored the codes, and used better libraries. We even had the time to add some new features on Ohdio.fm since its inception on late June 2013.
Like the words of LinkedIn founder Reid Hoffmann: “if you are not embarrassed by the first version of your product, you’ve launched too late”. At the time, we believe that Ohdio.fm was ready, and we were so excited to share it with the rest of the world.
So when the CEO said “fuck it, ship it”, Ohdio.fm was born, and so was our technological scion.
Codes, Colours, Chemistry 