April 16th, 2008 · Posted by Nolan Wright ·

Introducing Appcelerator 2.1

We are very excited about the 2.1 release of Appcelerator. It provides a solid foundation upon which we can start to realize our full vision for RIA + SOA. In addition to providing detail about our 2.1 release, I want to provide a general overview of the Appcelerator Platform and highlight its unique capabilities.

What is Appcelerator?

Appcelerator is a fully integrated open source platform that enables the creation of RIA + SOA applications, where RIA represents a rich client and SOA represents the services that it consumes. The platform provides developers with everything they need to build both the RIA and SOA pieces of a rich web application.

The foundation of Appcelerator is its message-oriented architecture. In Appcelerator, standard HTML elements can both produce and consume messages. These messages can be sent locally within the browser or to remote services. The diagram below demonstrates the flow for local messaging within the browser. In this example, one DIV element generates a local message when a click event is received, and the other two DIV elements are subscribed to that local message. The Appcelerator Message Broker takes care of the message routing between elements.

Local Messaging

The next diagram demonstrates the flow for remote messages. Remote messages can be sent to both HTML elements in the browser and to remote services. The Message Broker in the browser handles communication with the server-side Service Broker. The Service Broker is responsible for routing service requests and data marshalling. Our integrated services platform provides Service Brokers (or SOA Integration Points) for Java, Ruby, PHP, .NET, Python and Perl.

messaging_remote.png

Three Key Technologies

In addition to our message-oriented architecture, Appcelerator is powered by three key technologies:

  • Web Expression Language
  • Unified Widget Platform
  • Integrated Services Platform

The architecture diagram below demonstrates how these technologies fit together with our message-oriented architecture.

arch.png

Web Expression Language

The Web Expression Language turns standard HTML elements into powerful RIA components. The syntax for the Web Expression Language is simple:

on="[condition] then [action]"

Conditions can be messages or one of our predefined conditions like: click, focus, blur, and mouseover. For a full list of supported conditions see our condition reference documentation. Actions can also be messages or one of our predefined actions like: show, hide, effect[effectName]. For a full list of supported actions see our action reference documentation.. These simple web expressions can be added to any standard HTML element. Enough talk, let’s look at some examples:

<div on="click then r:login.request">I am a div</div>
Send a remote message when the DIV is clicked
<img src="images/indicator.gif"  style="display:none" on="r:login.request then show"/>
Show an image when the remote message is received
<div on="r:login.response then effect[Move,x=250]">Move Me</div>
Move the DIV 250 pixels to the right when the message is received

The Web Expression Language is powerful because it seamlessly integrates the three primary RIA programming tasks:

  • Event Handling
  • Ajax
  • DOM Manipulation

into one easy to use expression language that does not require a single line of Javascript. Alternatively, if you are comfortable with Javascript, we do provide a way to define “unobtrusive” expressions directly via Javascript. The benefit of this approach is that you can provide a clean separation between your HTML markup and its dynamic behavior. Here’s an example of a Web Expression defined via Javascript:

<img id="login_indicator" style="display:none" src="images/indicator.gif"  />
 
$('login_indicator").on("r:login.request then show").on("r:login.response then hide");
Hide/show an image using “unobtrusive” expression

The integrated RIA programming model provided by the Web Expression Language is extremely powerful, yet easy to learn. It greatly simplifies the heavy lifting normally required to create rich user interfaces by removing the need for Javascript (NOTE: you can still use as much Javascript as you like, and we provide a mechanism for executing JS based on an web expression). The ultimate result is faster development with significantly less code.

Unified Widget Platform

Our Unified Widget Framework not only makes it easy to create new widgets, it enables you to wrap existing widgets from third-party providers. The 2.1 release of Appcelerator contains widgets from Yahoo (Yahoo Map and YUI Calendar), ExtJS (GridPanel and TreePanel), and even one from Adobe Flex. This is significant because it provides developers with a single integrated platform for creating and using widgets, which removes the burden of having to integrate and manage multiple widgets from multiple providers.

Appcelerator widgets are also easy to use. They don’t require the use of Javascript. Instead, you use a simple markup syntax. Here’s an example of how you can use the YUI Calendar widget within an Appcelerator RIA:

<app:calendar inputId="date" on="l:show.calendar then execute"></app:calendar>
<input type="text" on="click then l:show.calendar" id="date"/>

Here’s a demo of an Appcelerator Flex widget on the Google cloud. The entire demo is less than 20 lines of code (do a “view source” to see the code).

Finally, as the calendar example above demonstrates, Appcelerator widgets are integrated with Appcelerator’s Web Expression Language, which enables widgets to participate in Appcelerator’s message-oriented architecture.

Integrated Services Platform

The Appcelerator Platform comes with SOA Integration Points for Java, PHP, Ruby, .NET, Python and Perl. SOA Integration Points provide developers with a simple, but fully integrated service creation environment. They handle service request routing and data marshalling, which enables developers to focus solely on building service logic, instead of writing service gluecode. The example below demonstrates how to create a service in Java:

public class MyService
{
   @Service(request=”search.request,response=”search.response)
   public processSearch(Message request, Message response)
   {
	// get request data
	String searchKey = request.getData().getString(“searchKey”);
	// perform search
	List users = usersDAO.findByName(searchKey);
	// send response
	response.getData().put(“users”,users);
    }
}

In the example above, we added a simple @Service annotation to a POJO method to turn it into an Appcelerator service. This example also shows how you can place a Java object or a collection of Java objects into a response and Appcelerator will automatically handle the data marshalling.

2.1 Features

Now that I’ve provided an overview of the Appcelerator Platform, we can discuss what’s new in 2.1. As mentioned earlier, we have integrated new widgets from YUI (calendar and map), ExtJS (grid and tree) and Adobe Flex as well as several other widgets from smaller projects. In addition to widgets, we have released the following:

SOA Integration Points

We have released two new integration points. One for the popular PHP Zend Framework and the other for Merb. As with all of our SOA Integration Points, these endpoints are fully integrated with our message-oriented architecture, and they handle service routing and data marshalling.

Appcelerator CLI

Appcelerator is now bundled with a cross-platform CLI (command-line interface) that handles all of your Appcelerator software needs. It’s modeled after Ruby gems, and it enables you to do the following:

  • Download Appcelerator software
  • Create new Appcelerator projects for a specific programming language
  • Download and install Appcelerator Plugins
  • Download and install Appcelerator Widgets
  • Upload new custom widgets
  • Update to the latest version of Appcelerator products

The goal is to provide developers with one consistent experience for managing their Appcelerator software distribution and their Appcelearator projects regardless of the programming languages they use.

Google AppEngine Integration

Using our CLI and our SOA Integration Point technology, we have created a seamless integration with Google’s AppEngine. You can now use Appcelerator to build RIAs with Python services and deploy them to the Google cloud. This is an exciting integration because it demonstrates that Appcelerator is a natural fit for serving as the RIA + SOA part of the cloud computing stack. Check out our blog post to learn more about how to use Appcelerator on AppEngine.

Plugin Architecture

Appcelerator’s new Plugin API enables developers to package, distribute and install software that integrates with the Appcelerator Platform. It’s the technology that will power our new Appcelerator Plus program, which promotes the integration of Appcelerator with existing technologies from other software providers. Our first plugin provides integration between Appcelerator and the Spring Framework. Installing this plugin enables developers to take full advantage of the Appcelerator Platform within a Spring/Hibernate project. We are also working on integrations with Mule’s ESB platform, Struts, and many others.

Plugins can also distribute and install resources like pre-built Appcelerator RIAs and services, which makes code reusability easier. For example, if you develop a set of generic application components, you can package these as an Appcelerator plugin and easily distribute them to multiple projects. In the near future, you will also be able to submit your plugin to the Appcelerator Developer Network so that everyone can get the benefit of your work.

RIA Developer

RIA Developer is an Eclipsed-based IDE that is powered by Aptana. It provides code-assist and code completion capabilities for the following:

  • Web Expression Language
  • Widgets
  • Validators and Decorators (for client-side validation)

RIA Developer also allows you to create new Appcelerator projects for your preferred programming language (i.e., Java, Ruby, PHP, .NET, Python or Perl) directly from Eclipse. RIA Developer’s project creation feature is integrated with the Appcelerator command-line utility .

Appcelerator Developer Network

Finally, we have released the first version of our developer network. The developer network was built using Appcelerator, and we were able to go from whiteboard to production in just 8 weeks (with one developer). It incorporates light social networking features in order to create a more valuable experience for our developer community. We will continue to refine the network over time in order to better serve the needs of our developers.

Well, as they say, that’s a wrap.

Popularity: 18% [?]

Tags: Announcement

Leave a Reply