A Word about Application Craft

What's so great about Application Craft?

I've been working with Application Craft for several months now and thought I should summarize my thoughts about why I like it so much.

Cloud based development  

Application Craft provides me a development environment everywhere I go. All I need is access to the internet and even in the public library, I can do web application development.

• No need for messy installs of development tools and scripts and following build processes.
• No downloads to manage and updates to install as the tool set matures. I simply log on to AC website and all the projects I'm working on are there, immediately available.
• No need to install and set up a web server to host the application

It's the easiest development environment setup on the market!

Cloud based development environment

Source code management

Most tools don't address this issue and it's a death blow to a project when ignored. If the developer doesn't establish a process to save the code and the computer crashes or a deletion accidentally occurs, all the work is loss. With AC this is all addressed and the developer has to do nothing to set it up – it's there revisioning the source code every time it's saved.

• Source code re-visioned on every save
  
• Revisions can be restored
  
• Code is persisted
  

Visual component drag and drop – web & mobile

For me, this is where AC really shines and established them as visionaries. The development environment consists of a palette of components that the developer can simply drag and drop on to the canvas and visually manipulate. No messy API documents to read through and ugly HTML code to dig through – each component has Properties that are easily controlled through a visual dialog. The visual settings are easily configured during design time and the changes are visually displayed. Change the width of the component via the Property dialog and the component changes width visually.

• Drag and drop onto canvas
  
• Configure via property sheet
  
• Visually size and align and distribute with mouse gestures
  
• No HTML – no CSS!
  
• An example of the HTML is necessary here. Imagine having to write by hand the following and get each character perfect in syntax and following the documented API
  
• <a href="foo.html" data-rel="dialog">Open dialog</a>
  

An example of the associated CSS to adjust the width that has to be written by hand. After consulting the docs to discover the tags necessary the developer updates the CSS file with something like this:


.ui-dialog .ui-header, 
.ui-dialog 
.ui-content, 
.ui-dialog 
.ui-footer {

       max-width: 500px; 

       margin: 10% auto 15px auto; 

}


But instead of slinging that CSS code above, you just drop your component on the canvas and then work with the property dialog and set the appropriate values.  

Components  Drag and Drop onto Canvas

Some example properties of the selected component

Source code editor – ACE Cloud 9

The heart and soul of application development revolves around the source code. Everything depends on the code being correct and maintainable. All the tools that surround the development environment are focused on making the code more efficient by reducing that amount of code that is required. For example, rather then have lines and lines of code that interact with the widget setting the various properties and display characteristics, the components have a property dialog that abstracts this away from the code. But the developer still has to write the business logic.
Application craft integrates the marvelous ACE Cloud 9 editor into the development environment. This provides the developer is first class source code editor. The developer can have multiple files to manage the code base and there is a tree layout component visualizing the files and contained functions so that the developer can quickly and easily navigate the source code. Included in the tools is JSLint - a tool that highlights possible syntax errors with the JavaScript code.

• Visual display of files and functions
  
• Integrated Javascript syntax checker (JSLint)
  
• Stable and efficient editor for source code

Source code editor with tree view of functions

Responsive design

One of the visions of AC is that the application developed will be able to run both as a web application and as a hybrid mobile application without changing the source code. One of the challenges in accomplishing this is to have the components re-size appropriately given the view port – the visual size of the display screen. If running within a desk top browser, the components can be dynamically aligned and distributed to fill the screen. That same app, when deployed to the mobile, needs to change the layout to be more vertical as the horizontal display with has decreased. When the developer follows the easy guidelines of responsive design, the components align themselves within the view port correctly.

• View port aware
  
• Components sizing adapts to view port
  
• Same source code for desktop and mobile
  

As an example of how AC abstracts out complex HTML and CSS issues, consider that a typical developer might purchase a book like the following book and apply the lessons learned versus a few easy steps that AC provides: Responsive Web Design with HTML5 and CSS3

Unified Component API

AC has introduced a simple API for the components that drastically reduces the necessity to constantly refer to the docs for how to interact with the component. Rather then each component having a unique set of API calls, a facade is provided that is consistent across all components for data and property access. This reduces complexity and increases programmer efficiency and productivity.

• Consistent API across components
  
• Access to component data and properties
  
• Increased Programmer productivity

Integrated browser debugger

When working with AC, the JavaScript code can easily be debugged within the browser for client side development. By adding one statement to the code ('debugger') and then launching the browser's debugger, the developer can easily and quickly start the debug process.

• Easy access to start debug process
  
• Client side built in debugger

Source code debugger

Integrated 3^rd party development tools

A few very important tools assist with the development of mobile apps, namely the Ripple Emulator and Phone Gap.
The Ripple Emulator provides an environment where the application can be simulated as running on a specific targeted mobile device. If the developer wants to confirm that the components utilize the responsive design goals, the application can be brought up in the RE and verified. This is the only tool that first needs to be installed on the client workstation for development purposes only.
Phone Gap provides the ability to take the web application and generate a installable mobile application. Again, as AC is famous for, nothing has to be installed on the development workstation to enable Phone Gap. AC provides an screen dialog to invoke the Phone Gap build process and it's a one click action. The result is that the developer is provided all the web application builds that can be deployed to the target device.

• Ripple Emulator simulates mobile device appearance and functionality
  
• Phone Gap generates mobile applications that can be deployed to target device.
  

Phone Gap built apps ready for download

SSJS Data access

AC initially focused on client side development – namely that the components would work consistently across the desktop browsers and also when deployed to the mobile device. Accessing corporate databases such as Oracle, MS Sql, MySQL etc were not possible from the server side code but only through a client side framework that was somewhat immature – the one weak point of AC. But that is being addressed now and looks to be again, another visionary AC solution.
The implementation of database access from the Server Side Javascript code will allow the developer to securely and stably access corporate databases with a unified query and update syntax. AC is introducing a SSJS facade over the low level database specific access API to relieve developers of low level data access details. This also positions the developer that if the client wants to switch databases, the code will not be impacted. In this case the developer would simply update the connection definition for the new database and the code would continue to work unmodified.

• Unified data access API
  
• Simpler, generic access across all DBMS platforms
  
• Server side JavaScript

SSJS access to RDBMS

Javascript Everywhere

In today's modern development tool sets for desktop and mobile deployment, developers are required to learn multiple languages for a single application. And each mobile device may require a specific language. For example, to develop for the iPhone, the developer must learn Objective-C. For the Android, the developer learns a special version of Java. For the desktop browser, the client side is Javascript while the server can be PHP, Java, Perl, C# or any other web enabled language. But with application craft, the entire development environment, both client and server, are one language: Javascript. The developer only has to learn a single language to build all the target devices. This is a tremendous advantage when considering the deployment of a single solution to multiple mobile devices.

• Single language for all development: JavaScript
  
• Increased programmer productivity
  

Hows it compare to other tools?

The following are some points that with AC are negated. The developer doesn't have to be concerned about all the various requirements that other development environments place upon their users. AC abstracts these concerns away and helps the developer focus instead on the business solution rather then the technical requirements of establishing and maintaining the development workstation.

Install

A typical development workstation requires multiple software tools to be installed. The list of tools may consist of the following:

• SDK (Software development kit)
• Component library (ie Jquery Mobile)
• Editor – language specific (Objective-C, Java, etc)
• HTML Editor
• CSS Editor
• Web hosting server
• Source control repository
• Source control tool (command line or visual)
• Debugger
• Database
• Build and deployment tools
• Hybrid development tools (ie Phone Gap)

Source code

The developer has to address how the source code is managed – how is it saved and recovered if lost. A typical solution these days is GitHub. This requires a learning process where by the developer learns how to create a repository, how to interact with it, how to setup a secure connection, what tools are required, etc.

• Establish repository
  
• Install repository tools
  
• Check in code on every save (most developers don't follow this guideline)
  

Components

The developer has to select the component library they want to work with. For example, on the Android, do they want to use the standard components the SDK provides or instead use DroidUX or Steema or some other. In any case, they have to install the component library and learn the API.

• Research existing and available component library
  
• Download and install and integrate into dev environment
  
• Upgrade library and code as new releases are available
  

Is AC a visionary product?

I've done a lot of research into the web application and hybrid development space and have concluded that indeed, Application Craft is revolutionary and a visionary product. There are a thousand choices a developer can make when deciding on which tools to pick from when considering web and mobile development. The choices are mind boggling and require careful thought as to the dependencies each tool places upon the other and how it all comes together.

Some developers prefer a “Best of Breed” approach where by within each category of development tool requirement, the best tool is selected. Once all the tools are selected the developer is left with the integration challenge – how to get them all working together in a seamless manner. Other tools are then researched to help with the integration or scripts are created to minimize repetitive tasks. What results is a one of a kind solution that is difficult to scale. As new developers are added to the team, setting up the workstation becomes difficult. Which version of all these tools is required? Where are they located?

Some developers prefer “Single vendor”. This developer decides that one vendor provides all the best tools or acceptable tools and they hang their business shingle on that decision. A typical example of this is a Microsoft or Apple devotee. They utilize the tool set provided by the vendor and master their environment and produce their solutions accordingly. Typically these are closed systems and cost some amount of money.

Other developers, like my self, prefer an “Integrated Suite”. In this category, a vendor such as Application Craft, chooses the best tools for the job and integrates them seamlessly into a development environment. With this approach the developer gains the best of both worlds: the best tools are available and they work together without the developer having to “stitch” it all together.

In my opinion, this is where Application Craft is visionary. Their choice of tools and the seamless way they are integrated frees the developer from mundane tasks and allows the developer instead to focus on solving the development task instead.

• Integrated Suite
  
• Hosted environments
  
• Nothing to install
  
• Best of breed tools seamlessly integrated
  
• Vendor supported environment providing painless upgrades