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
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:
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.
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 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.
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.
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!