Using Angular JS with OpenTok

Introduction

We’re big fans of Angular JS at TokBox and we have been using it internally to build applications for quite some time. It’s a fantastic framework for building Single Page Web Applications – since all OpenTok Applications are Single Page Web Apps they work really nicely together. This post is going to be based largely on our experience writing meet.tokbox.com, our own video meeting tool we use internally. The code for meet.tokbox.com can be found at https://github.com/aullman/opentok-meet

meet.tokbox.com includes several other libraries and components that we wrote to piece it together including:

• opentok-angular – A library for making working with OpenTok more Angular-ish.

• opentok-layout-js – A library which automatically lays out your Publishers and Subscribers within a box, utilising the maximum space available.

• opentok-whiteboard – A Shared Whiteboard component that works with OpenTok.

• opentok-editor – A real time Collaborative Editor component for OpenTok using CodeMirror and ot.js .

Declarative User Interfaces

One of the beauties of Angular is that it brought back the declarative way of building your interfaces in single page web applications. This was the original dream of the separation of HTML and JavaScript. This dream was lost in early single page web applications which were filled with jQuery spaghetti code injecting HTML into pages. Angular has brought this back by allowing you to define your User Interfaces using HTML again.

To allow this to work with OpenTok we wrote a small library, opentok-angular. This library includes directives which allow you to declaratively define the layout of your Publishers and Subscribers.

So instead of:

You can do:

Note that there is no JavaScript in the second example, you are just defining that the ot-subscriber element should repeat for every stream in the list of streams and where to put the publisher. The nice thing about this way of defining your components is that you have a much clearer description of the layout of the application. All in one place. There’s no JavaScript behind the scenes doing surprising things and injecting things into the page. Well, to be fair, there is JavaScript doing magic behind the scenes, but at least it’s clearer what’s going on and there is a defined consistent framework. You can look through the HTML and see what the application is supposed to look like and where the elements are coming from.

Directives (Components)

Another great thing about Angular is the ability to create components using Directives which makes building and maintaining applications a lot easier. This is something that the people at ReactJS have been stressing a lot. Components are a great way to separate concerns in your application. When you split your application into separate modular components and define all of the logic for that component in one place (including CSS, HTML and JavaScript) with clearly defined interfaces it makes development a lot easier. The reasons are four-fold:

• Different people can work on different components without worrying about stepping on one another’s toes (as long as they keep the interfaces consistent).

• New contributors to the project can quickly get onboarded and become useful by learning one component at a time. It’s a lot easier to reason about these smaller modular pieces than one giant application.

• You can easily swap out components or rewrite them.

• And of course you can reuse the components in other projects.

This is what we tried to do with meet.tokbox.com. The different features of OpenTok were split into separate self-contained components. They’re all included in the main project using bower which helps with versioning and dependency management.

opentok-whiteboard

The opentok-whiteboard is a very simple whiteboard that uses an HTML5 Canvas element and the OpenTok signaling API to share the drawings between participants in a Session. It just lets you free draw on the canvas with the mouse and whatever you draw shows up on everyone else’s Canvas. When new people join they see what’s on there too.

opentok-editor

opentok-editor is a collaborative text editing component. It’s great for editing code collaboratively with other people. We use it a lot internally for code reviews and technical interviews. I wrote extensively about the opentok-editor in an earlier blog post.

Testing

Yet another great advantage of using Angular is that testing has been built into the framework from the beginning. The dependency injection of Services and Factories makes mocking things out in your unit tests really easy. The Angular team really has been thinking about testability right from the start, they even include writing unit tests and end-to-end tests in their tutorials. They have also invested a lot into end-to-end testing with the Protractor end-to-end testing framework.

The result is that it is easier to write automated tests for Angular applications. This is important because developers are lazy (I know I can be ) and they’re only going to write automated tests if it’s simple.

Something that is really important when writing end-to-end tests for OpenTok applications is the ability to write tests that allow you to create multiple participants. With your standard single page web applications it’s fine to test just one browser window, but OpenTok applications are all about interactions between multiple browsers. Fortunately Protractor has the ability to test multiple browsers at the same time using .

An example of a test that we wrote to test multiple browsers can be found here. This test verifies that two browser windows connect to one another and that their publishers and subscribers load correctly in only 20 lines of code.

Conclusion

AngularJS makes OpenTok web applications quicker and easier to build, more reusable, more maintainable and of higher quality. If you haven’t started building your app, we highly recommend you give it a try.

Now it’s time to rewrite everything in React and write a blog post about that!