Moodle Mobile 2.0 spec

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

For development documentation about Moodle Mobile 2 please refer to: Moodle Mobile

Introduction

This document is about the future of the Moodle Mobile app, focusing on technical aspects exclusively.

This document describes the current problems and improvements needed by the app. It also discusses improvements to be done in the development process of the app.

It has been a long time since the first version of the app was designed; in 2012 the mobile scene was very different than today: Android 2.1, 2.3 and iOS 5 were the most used versions, HTML5 support in general terms was pretty limited, there were no frameworks for creating hybrid apps, Phonegap was in earlier versions, etc.

After an initial analysis, we chose to create our app using mainly jquery and backbone (avoiding all the current framework, libraries due to the performance problems). At the time AngularJS was also an option, but we discarded it since it wasn’t as popular as it is now—no one was using it for creating mobile apps back then: https://docs.google.com/document/d/15QQaBO176IDI97mfT0Fa8nWPeejOx3uO_EnM4fANPmA/edit

Today, Android 4 and iOS 7 are the dominant operating systems/versions. HTML5 support on those devices has improved significantly and there are several frameworks oriented to create hybrid mobile apps focused on performance.

The app has currently some technical problems that would be resolved with that framework (although not all). Some problems are related to the user interface, layout/design and usability of the application; others are more specific for javascript/devices/platforms and some problems will not be resolved choosing a different framework.

Design, usability:

All the design and usability patterns are done from scratch; we need a framework that will take care of that so nothing breaks in major platforms changes (as already happened with iOS 8, Android 4.4, Android 5)

Touch events responsiveness:

The current app does not deal with that satisfactory; we need to migrate to a library supporting touch events natively, capable of detecting the device correctly for using the correct events

Using Chrome simulators:

Due to the problem related to touch events, we can’t use Chrome simulator for testing the apps

Web components:

We do not use any library for web components (like lists) and every time we need to add something new we have to do it from scratch, testing that is works “properly” in all the devices we support

Support for CSP:

The app uses Backbone template system which is not compatible with CSP

Infinite scroll:

This can be categorized as a web component

Pull down refresh:

This can be categorized as a web component too

Animations performance:

We do not use hardware/CSS3 animations

Unit testing:

There is no support for unit tests

Security:

The app uses a global object that has access to the global scope and the plugins scope

RTL languages support:

The app doesn’t support RTL right now

Build process:

We should start doing some automatization of common tasks using Grunt, etc. Some tasks are currently done in shell scripts, php, but there is no process of continuous integration/testings

Storage:

The app uses localStorage limited to 5MB

Background processes:

The current app has some memory problems due to the current sync process that is done in the main thread

In this document I’m not going to do an analysis of all the available frameworks. There are tons of articles regarding this issue in Internet, we have chosen these two:

About mobile specific frameworks:

http://www.agingcoder.com/programming/2014/10/16/mobile-frameworks-onsenui/

About javascript frameworks:

http://www.airpair.com/js/javascript-framework-comparison?utm_source=javascriptweekly&utm_medium=email

Also, I’ve been in some local events related to Mobile frameworks (locals meetup in Barcelona, BarcelonaJS group, AngularJS Barcelona group) talking with people and analyzing the advantages and disadvantages of different mobile frameworks.

In conclusion, it seems that Ionic framework (based on AngularJS) is the right choice.

Reasons to use AngularJS/ionic framework

Object observer webkit implementation!!

http://georgestefanis.com/blog/2014/03/25/object-observe-ES7.html

AngularJS is a framework that supports all the functionalities currently covered by 3rd party libs
It’s focused in hybrid apps with Phonegap/Cordova
Components are tested in different Android and iOS versions
It’s very popular (big developer base): 20,000 aps per month are using it
Huge knowledge base, 1400 questions in stackoverflow
Because AngularJS was chosen by the Ionic framework “rival” Onsen components
AngularJS is supported by Google
It supports CSP (https://developer.mozilla.org/en-US/docs/Web/Security/CSP) so it’s a framework valid for creating Firefox OS compatible apps
Interesting functionalities: Unit tests coverage (Jasmine), CSP support, infinite scroll, pull down refresh, hardware accelerated transitions/effects,
MVC - Using directives (no more DOM manipulation):

It will reduce the code base to maintain

Ionic comes with emulators and extremely useful build and testing tools; we won’t need our simulator anymore

Very good integration with GruntJS, Yeoman, Istambul, Jasmine etc.

Disadvantages

Steep learning curve of AngularJS. For newcomers, AngularJS is a very popular framework between javascript developers, it can be easier to find AngularJS developers than developers knowing all the libraries currently used by the app.
In older devices the app may run slow (but according to the last Moodle Mobile survey, users of Moodle are mostly using new devices)
Angular is going to be rewritten for version 2.
Ionic is still beta (it was alpha a couple of months ago)
Angular only works for Android 4 and above. Firefox OS and Windows Phone seem not to be officially supported (although they are in the roadmap)

Conclusions

Ionic seems to be the best candidate as framework for the app.
It’s popular (don’t forget that Moodle popularity is partially due to PHP we don’t have to forget that Moodle becomes so popular by the use of PHP), it uses AngularJS that has a big learning curve (although due to its popularity there is plenty of documentation and javascript developers using it).
Moodle Mobile 2 release is planned for July/August 2015, so there will be less older devices and Ionic will not be a beta anymore. Angular 2 may have been published by then (and supported by Ionic) but even if it wasn’t, Google has more than a thousand of apps using Angular 1, so it will be supported for a few more years: http://eisenbergeffect.bluespire.com/all-about-angular-2-0/?utm_source=javascriptweekly&utm_medium=email

Roadmap

In order not to stop the current development of the app (http://www.joelonsoftware.com/articles/fog0000000069.html), a small team should do the migration in parallel.
An initial working prototype with static data should be implemented displaying all the current features of the app, supporting both phones and tablets.

This prototype must be validated by Martin and Barbara, and afterwards a new phase of technical analysis of how to migrate the current architecture should start. This analysis should evaluate (among others):

How to migrate the current plugin system to the AngularJS modules system
How to implement the current core api function that uses jQuery (mainly the ajax requests) (use factories, services, etc..)
Which storage system to use (keep localStorage, indexdb…)
Background processes using webworkers (now that is better supported in modern devices)
Continuous integration, testing, automatic tasks…