June 24, 2015
Creating of a hybrid Webapp – Calendar for Trello
Due the missing feature of Trello to show cards beyond all boards in the same calendar we decided to help ourselves and started developing our own application that would fits in smoothly in our own workflow. Main goal was to achieve a simple calendar view and not to replace any features Trello already provides. In addition to a browser version, there is a mobile version that may be deployed to Android, iOS and Windows Phone via Cordova.
Cordova + Ionic or Cordova + Angular Material
The calendar was intended to be made with Ionic, Bootstrap and AngularJS. Halfway through the development Ionic and Bootstrap were replaced by Angular Material. The switching to and the development with Angular Material was very fluently since the framework provides a huge load of directives that could easily be connected to the internal application services which provide the calculation of the calendar and api features.
Differ App and Browser
The real challenge is that even with a hybrid application there are a few restrictions across the devices. Performance, screen width or resolution may vary extremely. Therefore it may be appropriate to use various templates and functions. To detect whether the app is running in a browser window or in a mobile WebView (Cordova App) you can simply parse the protocol. Either it is “http/https” for browser or “file” for Cordova.
Angular code to check whether its browser or Cordova:
|
1 2 3 4 5 |
module.run(/*ngInject*/ function ( $location, $rootScope) { if($location.$$protocol !== 'http') { $rootScope.mobil = true; } }); |
Mobile Performance
Since the application was terrible slow when running as Cordova app we did some resaerch. While calculating the whole year in javascript was very fast, the painting of a single month would be very slow. But only for the cordova application, running the app in chrome on mobile devices shows no performance issues. To speed the painting process up the DOM-Elements were reduced. To reduce the AngularJS watches and speed up the digest cycle some bindings were replaced by one-time-bindings.
Error Logging
To receive errors that appear on the (remote) client side Sentry is connected to the the application trough RavenJS. Any occuring error will be logged to a Sentry instance running on one of our servers. Since the application is minified there will be a source map generated when building the application (this feature is provided by fabs, see build tools for more information about fabs), Sentry will parse the sourcemap and display the unminified line of code.
Build System
For developing the application fabs (Fabulous AngularJS Build System) is used. Its a grunt based build system for AngularJS applications and integrates very well with cordova. It provides many features such as LiveReload, Annotating your dependencies or minify CSS and JS files.
Conclusion
Angular Material replaces three components (Ionic, Bootstrap and AngularUI-Bootstrap) but is still under heavy development. This means you are going to have to deal with some breaking changes while developing your application. In return Angular Material offers a lot of components and aims implementation of the full Material Design specification.
Ionic does not provide any magic and may be replaced by Angular Material. Basic essential is Cordova with its plugins to connect your app to the native features of a mobile device. Ionic provides ngCordova which has a lot of great angular wrappers for those – but there is no ionic needed to run them with your application!
The source code of our Calendar is open source, furthermore we have a hosted version:
theCodeCampus
Developer at 
Our knowledge is not simply gained through reading - it is trained, tested and constantly being expanded. Because first and foremost, we are all developers at W11K. The know-how that we acquire here as developers, consultants and information architects flows immediately into our training courses and articles for theCodeCampus.