Using ionic without ionic CLI

You may want to use the ionic JavaScript framework without having to use Cordova or the ionic CLI. This was just what we wanted to do in one of our seed applications to demonstrate how to build robust offline mobile applications that use Salesforce as their backend, so it make sense to share how we went about this.

Ionic without the CLI

Not only did we want the nice CSS framework that the (awesome) ionic guys have put together but we also wanted to use their angular directives. The approach we took is pretty simple, at least that’s what I think.

The solution

Our development setup was already using bower to install dependencies for our app… these included the handy Underscore JS JavaScript utility library and our own MobileCaddy SDK which enables full Salesforce offline capabilities. With this in mind we re-used bower to pull in the ionic assets too. Here is the line from our bower.json file that lives in the devDependency section

This line informs bower to download the 1.0.0-beta.13 release of ionic.

The next step is to enhance our existing Grunt tasks to copy the resources into our existing project structure. This is so that the SCSS is included in the Sass processing and the JS and other assets (fonts, etc) end up being included in our deployable code bundle. In our case our bundle is pushed to the Salesforce platform to be used within our mobile application. The below is a modified version of our Gruntfile.js which only includes the copy tasks needed to support this Ionic use.

And that’s it. Our offline mobile Salesforce application can now be built using the ionic Framework, without the use of Cordova or the ionic CLI.


Introducing MobileCaddy Codeflow

At MobileCaddy we’re always trying to make things simpler and easier, with the aim that our time and energy can go into delivering value to our business and to our customers. This is what we want for our customers too, and so we have been working on MobileCaddy Codeflow. 

MobileCaddy Codeflow is a set of tools and application skeletons to allow for swift project initialisation and ongoing development and maintenance. It gives us an extensible file structure and supports us through the development process, right through from initial coding, to test, debug and deployment.

Codeflow Components

Each component of Codeflow has been developed and included to reduce the amount of time spent on mundane tasks.

Project Initialisation

Starting a new project to create a robust offline Salesforce application, optimised for mobile, can be achieved by downloading one of our shell or seed applications from our git repos. Once downloaded there are just a handful of commands to run to install the third-party tools and dependencies and get the project structure all setup.

Codeflow grunt task to optimise project iniitialisation

 

Codeflow Emulator

The emulator is made up from a set of JavaScript libraries and HTML files that allow the behaviour of the MobileCaddy applications to be closely emulated within your desktop browser. This includes;

  • Salesforce authentication
  • Application database creation
  • Salesforce platform querying so our application can use real configuration and data.
  • An offline local data mode to support broad failure case testing
  • SmartStore emulation – the soups/tables can be interrogated and modified via browser developer tools.
Using the Codeflow Emulator to view Soups

 

Codeflow currently uses the ForceJS library by Christophe Coenraets to perform the local environment interaction with Salesforce. This is a startlingly simple library that can be used to consume the Salesforce REST APIs, but unlike ForceTK it does not have a dependency on jQuery. We hope to continue contributing to this project as we’ve had nothing but joy when using it.

Task Automation

We have initially used Grunt as our task-runner. This is used during the project initialisation phase to pull the dependencies into our application  structure. It is also used for common web-app-dev tasks such as running our Sass processing, Javascript hinting and general file minification.

We also have some Grunt tasks defined, as part of Codeflow, to create a single archive (zip) file that is pushed to Salesforce as a static resource to deploy our application code.

As we carry on building out the tools we’d also like to implement a Gulp version for Codeflow too, this is on our to-do list.


We’d love to hear what you think of Codeflow and how it can be improved to further release time for developers to do what they do best.