An analysis of the best front-end JavaScript library to be used for implementing a Video News responsive mobile application.
In order to decide which library to use in the front-end development of MICO Video News Showcase [SC-02], we first reviewed our objectives as stated in this initial presentation of the requirements SC-02:
- mobile first, responsive approach
- manage multimedia enriched data (video, images, text, maps)
- container model driving the user experience: organize in independent, autonomous and recombinable widgets
- continuity and integration with HelixWare and WordLift (these two modules one providing access to an online video platform and the other one adding dynamic semantic publishing functionalities to WordPress will interact with the MICO architecture in the backend adding cross-media analysis and recommendation)
We need to identify a Javascript library capable of respecting these priorities. The candidates we consider are Famo.us, Three.js, AngularJs and jQuery.
As far as licensing goes it’s important to know that Famo.us is covered by the MPL2 license whille all others use the MIT license.
What are these libraries really designed for?
The main purpose of each library is different. Famo.us is a rendering engine with a focus on graphic layouts and animations. Angular is a MVC (Model View Controller) framework, covering the wider spectrum of use cases in which a single page application is a must. We consider DOM manipulation via jQuery (plus plugins and jQueryUI) as the bottom line of our choices. Threejs is a pure 3D library, potentially useful though requiring an excessively low-level complexity when it comes to user interfaces.
Which devices are truly supported by these libraries?
This is the main issue and the hardest to figure out. Famo.us is young and support is poor and still quite unpredictable. Angular should be well supported on the majority of desktop and mobile browsers.
A bottleneck we shall also consider in order to publish our user generated micro recording video app Shoof on the Application Stores of Android and Apple, is the WebView used by Apache Cordova to pack the web app as a pseudo-native application. As soon as Famo.us releases its own wrapper (chromium based) the problem may vanish. Still, we have to stream videos for all devices passing by this WebView, so it’s the most important technical issue. To conclude, in terms of support the winner is the universal jQuery, followed by Angular.
Is Famo.us mature enough these days?
Famo.us is still a quite immature library. This lack of maturity might lead us to unexpected, undocumented problems and less community support. This is well known to Famo.us creators that are investing a significant amount of money to overcome this issue and build a growing community around their library (and the 25M USD, recently secured Series B investment will help also in this direction).
How about the innovation value of these library?
Since Famo.us is so recent and has a divergent approach to web development in respect to rendering and positioning of elements, it represents an innovative choice.
Despite Angular being older, it also is considered as the ‘advanced’ side of web development. Threejs is very innovative for gaming and art projects. jQuery is universally used across the web, so far from being innovative it probably represents the most conservative option.
famo.us | three.js | angular.js | jquery (bottom line) | (notes) | |
license | MPL 2 | MIT | MIT | MIT | |
technology | rendering engine | 3D library | single page app framework | DOM manipulation | the purpose of the libraries is different and a direct comparison is difficult. Famo.us is a graphics engine, threejs a 3D library, angular is a single page application framework. |
support | low | low | medium | high | three.js and (in the next months) famo.us are both capable of working with webGL but do not require it. Famo.us uses CSS3 3D transforms to speed up the calculations, this is a strong point in favour. |
maturity | low | high | high | high | famo.us was released this year, so documentation, examples and the library itself are not yet mature. |
innovativity | high | medium | high | low | famo.us and angular are both recent efforts and fit well the web trends: mobile first, client-side focus |
utility | medium | medium | high | low | both famo.us and angular are meant to help designing front-end user interfaces. Famo.us has a stronger focus on graphics and animation, whereas angular is focused on the application architecture. |
integration | medium | good | medium | high | Famo.us is doing an effort in direction of an integration with angular: http://famo.us/integrations/angular/ |
Is Famo.us truly useful and aligned with our objectives?
Famo.us is useful mostly for being able to speed up the graphics. Both Famo.us and Angular provide a set of ready made layouts/directives on top of which we can build our widgets, but we should keep in mind that Famo.us is visually-oriented while Angular works primarily on the application level. For example Famo.us offers a handy HeaderFooterLayout and a ScroolView that suggest a rapid prototyping of the user interface, but is not a complete MVC framework as Angular. Angular in turn provides great separation between view and control but does not offer visual layouts out of the box. If device support is sufficient, we should consider combining Famo.us and Angular together.
Threejs is useful as a 3D library, and as such is not directly suited to user interface design. jQuery could be very useful if used to build custom widgets, but as the application grows it may be difficult to keep a clean architecture.
Are the libraries integrated between each other?
As reported above, Famo.us already supports Angular and the collaboration may lead to good results.
Our final conclusion
The discussion so far can be concluded in three possible choices:
- Risky choice: Famo.us
- Equilibrated choice: Angular
- Conservative choice: jQuery
As we’re working in an EU co-funded project we are expected and well inclined to innovate for the benefit of our clients and for the overall Web developers community – while our traditional decision (for a paid project) would be jQuery here we’re choosing to invest on innovation. Having said so relying completely on Famo.us nowadasy could cause unpredictable drawbacks and we still need to create valuable prototypes that we and others can re-use in the future.
For these reasons we opt to develop the application architecture in Angular, to exploit the library’s maturity, wider support and to build on a solid MVC pattern. The ‘V’ in MVC will be developed with Famo.us in the hope they will gain momentum and become a more reliable choice. This will provide the innovation we need for making our products better.
If Famo.us proves to be unreliable even as a rendering engine we will still have a solid MVC architecture ready to be used with other graphics libraries.
To conclude, our choice for a development platform resolves to the combination of Angular with Famo.us.