Using ionic without ionic CLI

Written by

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.

Preparing to code with MobileCaddy Codeflow

Written by

Preparing to code with MobileCaddy Codeflow is the next step after being introduced to it’s components.

In this screencast I take you through using the Codeflow tools to set up a development environment, install one of the MobileCaddy seed apps and set it running in the Codeflow Emulator. This last step includes authentication against Salesforce and querying of live data on the platform. This means our application is initiated with live configurations and real platform data.

There are a couple of dependencies that need to be installed before using Codeflow, these are listed here along with links to installation instructions and/or their project homepage. These dependencies only need to be installed once and perhaps you even have one or some already installed.

In this example we’re using the MobileCaddy Time & Expenses demo application written using Ionic and AngularJS. The MobileCaddy SDK and our APIs though are framework agnostic and we’ll be releasing further shell apps using other frameworks such as BackboneJS.

In the next screencast from me we’ll see how we can mobilise some new fields and modify our shell app to support these. We’ll see how our grunt tasks can make our lives easier. Of course feel free to leave us some feedback or get in touch to let us know what else you might be interested in seeing us cover.

Introducing MobileCaddy Codeflow

Written by

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.