Development Setup

Angular Dart

Some key things to get setup are angular.dart development environment, and cordova (phonegap) environment. Here are some steps to prepare:

For dart:

We prefer to setup angular.dart by installing the current editor environment release along with the dev release. Angular.dart is in enough flux that you might find something doesn't work in release, but is fixed in dev - it's convenient to have both environments readily available.

For Mac environments, we install in /usr/local/dart-rel and /usr/local/dart-dev, and link into /Applications. We also link the command line tools into /usr/loca/bin, so you should not need to modify your existing environment (for dart-dev, we link the tools to *-dev names, e.g. dart2js-dev).

Once the dart environments are installed, you should check and update from the "about" menu. Review the installation guide shown here: https://www.dartlang.org/tools/editor/

• Install the dart and dart-dev editor environments (first time only): make dart-install
• Explore the tutorial: https://angulardart.org/tutorial/ (see the "Getting Started" pages, here)

For Cordova:

• Setup Apache Cordova: http://cordova.apache.org/

• Explore the tutorial: http://coenraets.org/blog/cordova-phonegap-3-tutorial/

for android

We recommend installing Android Studio. You can then run the make command make android-activate to create the shell functions activate-android and deactivate-android to in your bash login scripts to modify your path so that the sdk commands are active.

Alternately, you can install the android sdk only.

• Get the Android SDK: http://developer.android.com/sdk/index.html
  • from the download for other platformssection, get the "SDK Tools only";
    • for example, for Mac OS X, download http://dl.google.com/android/android-sdk_r22.6.2-macosx.zip, unzip, and update per the instructions in the SDK Readme.txt
    • I unzip this into /usr/local/android-sdk;
    • add /usr/local/android-sdk/tools and /usr/local/android-sdk/platform-tools to path;
    • alternatively, you can install with make android-sdk-install(this will also check for some common blocking programs);
    • if you have trouble, check the Troubleshooting Setups page;
    • you will update and install android-sdk packages through the command line tool, android.
  • be sure you have ant installed for your platform;
    • you can download a binary or via your system installer; on OS/X you can install with brew;

Pulling angular.dart applications into the mix

The general development pattern is to develop your app incrementally in the dart editor, run the command-line tool dart2js and in an assortment of standard browsers to confirm correct operation, run initially in android thru the dart editor tools, then make cordova project=some-name to convert wrap the generated js and html to cordova form. From cordova, you will build and run in emulators (e.g. for ios, which uses Xcode) and then install and run on remote android and ios devices.

Screen control will use a dart port of twitter bootstrap libraries, using the bootstrap css - angular.dart.ui.

For dart >= 0.12, dart is relatively stable (in Summer 2013, Angular team moved development of angular.js to angular.dart, backporting releases to angular.js).

We know that dart does things which are exposed and confusing / inconvenient in angular.js. We know that you can mix/use any (many?) existing javascript library with your dart application. We know that you can compile dart2js so that things will run across browsers, and has been shown to work well with cordova. We have no experience, therefore no specific details yet with limitations of dart2js (but we do know that the angular team, working on angular 2.0, is targeting an upcoming release of ECMAScript, and using a compiler to back-port so people can beta-test, so we relatively have high expectations).

As for cordova - we are not initially targetting device interfaces (plugins) so our initial experience has been quite stable.

While we have limited first-hand experience with phonegap, some of the things which we were concerned with were:

• ability to distribute and install in standard ways for Android and iOS devices;
  • it appears, for android, learning to be selective about included dart packages will be important. Remember, our target is not just mobile-first, but more importantly disconnected mobile-first.
• wanting to shy away from native-compiled products, or device specific code (we want one solution for desktop & mobile; we're ok w/ multiple deployments and target tests);

Reading phonegap and ionic posts, we see that Adobe bought PhoneGap, and "donated" it to Apache. Ionic uses Cordova, the difference being the bundled plugins which Adobe supplies with PhoneGap (Ionic finds that Cordova plugin set sufficient for anything they use). So far, we have limited ourselves to [cordova][] and so far this seems fine. Also, Cordova's stated purpose is to obsolete itself - that is, provide mobile bridges until they appear in HTML5 and various extensions, until one-by-one the features are no longer needed in Cordova. HTML, CSS, and JS is what phonegap/cordova packages for running fullscreen on your mobile, rendered by a native mobile browser. The additional functions are APIs to give access to device specific utilities (camera, gps, microphone, etc.) which are expected to slowly appear in standards. This suits our objectives, and leads us to start with and focus on Cordova. We will generally avoid the temptation to use device specific hardware, but the opportunity to leverage what could also be useful on laptop/desktop seems reasonable.

We're also very interested in operation disconnected from a network, thus HTML5 local storage, capacity, and functionality to synchronize when connected. Fortunately, there is a dart library which selects the appropriate HTML5 data backend, depending on the version of device / browser you are running.

We hope this provides a good starting framework for your projects, and for you to contribute.

◀️	🔼	▶️