Keep It Modular
Talko Web Libraries That Enable Our Modular Design
With the launch of Talko for iOS we also introduced the call share feature. This feature allows users to share calls with others by sending a unique URL via e-mail or SMS. In order to have the call experience work on many devices and screen sizes we had to select web libraries carefully. They had to have great community support, be fairly compact and hopefully AMD compliant. In this post we’ll go over some of the libraries we chose and our reasoning behind those choices.
RequireJS
Our module loader of choice is RequireJS. There are many reasons to use a module loader and for us it boiled down to simplifying our project structure and being able to package the various modules for re-use. Our core call playback is actually built as a module that will be imported into our upcoming Talko web app.
In addition to the high modularity RequireJS provides us, we take advantage of a couple plugins in Require-Text and Require-CSS which allow us to load our HTML templates and CSS files asynchronously. The power of RequireJS is in the r.js optimizer which allows us to package our modules and optimize the Javascript and CSS code. We currently have this integrated as a task in Grunt right before deployment.
Backbone/Marionette
Contrary to popular belief, Backbone is not a web framework. It’s more of a toolset for building web applications. Backbone provides a lot of functionality in a very small package size. The toolset provides simple views and router classes, but very powerful models/collections and declarative event handling. One could build a web application purely using the classes and APIs provided by Backbone. This experience can quickly turn into a lot of boilerplate code for view management (rendering, unbinding, hierarchies). If not done properly developers can end up with a lot of ghost views which can be incredibly problematic.
In our search for the best Backbone design patterns, we discovered Marionette and instantly fell in love with their composite application design patterns, lightweight package and documentation. Some of our favorite features are LayoutViews and CollectionViews.
LayoutViews are great for rendering multiple subviews in a large application. As can be seen in the code below we defined a standard layout with 2 Regions. We then pass 2 instantiated views to the show() method. The Region then takes care of rendering, appending the view and setting up any listeners. Once you’re done with a view (ie. User clicks on another task) you can simply call show() with another view or call empty(). The Region takes care of all the unbinding and cleanup for you. Magic!
CollectionViews are perfect for outputting a collection of models. It iterates through a collection’s models and creates ItemViews for each. It then takes care of the setting up view parenting and appending. Additionally, CollectionViews automatically re-sort on changes using the collection’s comparator. Double Magic!
We’ve used Marionette since v1.1.0 and it’s been amazing to see it evolve into its current state in v2.2.x. We’re excited for future changes in Marionette 3.0 led by Sam Saccone and the rest of the project contributors.
Howler
The most important part of a Talko call is being able to use your voice. Therefore audio playback is an important feature we needed to support well on the web. There are a number of APIs for audio playback. There’s WebAudio, a powerful system for controlling audio, and the HTML audio element which is a simple interface for playing back audio. WebAudio is a favorite solution but unfortunately it’s not presently supported in all browser. In order to easily support audio playback on many platforms and browsers we searched for an audio library that would prefer WebAudio, but gracefully fall back to HTML audio while maintinaing the same API.
After many tests with other libraries we settled on Howler. Howler is incredibly lightweight, offers a great API for loading, caching and controlling playback. Additionally it supports multiple file formats for browser fallbacks when the manufacturer does not have the proper MP3 licensing.
We’re very pleased with how Howler has performed. We’re currently running the pre-release 2.0 version and think that James Simpson and Goldfire Studio have done a great job growing the project.
Conclusion
It’s been almost 2 years since we started work on the web codebase, and we are still very pleased with our current set of libraries. This is a very hard thing to achieve in the ever evolving world of web development. In that timespan a new trendy alternative has emerged for each one of the libraries listed above. As a web developer community we need to slow down our eagerness to start fresh and re-invent the wheel. Many old projects have great communities and plugins built around them. This takes a long time to develop and many take that for granted. We feel very thankful to the project contributors listed throughout this post for building some solid libraries.
Let us know what libraries you’re using for building your web experiences and how you like them. Feel free to comment here on Medium, on Twitter or e-mail. If you’re a Backbone.js fan like us, you can find me at this year’s BACKBONECONF in Boston, MA.
Finally, if you’re not already a Talko user, get the app, share a call to the web, and let me know what you think of the experience!
