Sencha Architect: Visual HTML5, sort of

Sencha describes Sencha Architect 2, the latest incarnation of its visual Web development tool, as "a massive upgrade to Ext Designer," the previous version. The name change from Designer to Architect reflects the product's new focus. Instead of a tool for building Web UIs, Sencha says the new version is suitable for creating complete Web applications, both for UI designers and back-end developers. That's true up to a point.

I installed Architect Build 372 for Windows, a prerelease version, though it promptly updated itself to Build 412 and then Build 443. Architect also requires you to run a local Web server to test your project, though it doesn't seem to care which one. On Sencha's recommendation, I installed the XAMP open source server stack for Windows, which includes the Apache Web server. Priced at $399, Architect is also available for Linux and Mac OS X, which offer similar server options.

[ Also on InfoWorld: PhoneGap: Mobile development made easy | AppMobi: More style than substance for mobile developers | Test your wits with InfoWorld's JavaScript IQ test and programming languages quiz. | Keep up with key application development insights with Developer World newsletter. ]

Already you may perceive that Architect is not a product for novices. You'll need to know something about Web servers and their directory structures just to get it up and running. Furthermore, you'll need to know where and how to save your projects and what URLs to use to access them. The software doesn't hold your hand through any of this.

Neither is Architect a full-fledged Web IDE like Adobe Dreamweaver. It's not a tool for opening up existing Web applications and tinkering with them, and you won't use it for simple text editing. It's really meant for building new, JavaScript-enabled applications from scratch, with automatic code generation for either desktop Web browsers or mobile apps.

Code by Ext JS or Sencha TouchTo enable your apps' program logic, Architect relies on either Ext JS (for traditional Web applications) or Sencha Touch (for mobile apps). Both frameworks are Sencha products, though both are also available as open source software, licensed under the GPLv3.

As such, Architect will be most helpful if you're already using one of these frameworks or if you haven't chosen one yet. If you're already using something else -- say, jQuery -- the code Architect outputs shouldn't interfere with your existing code, but the extra JavaScript libraries will add to your application's download size.

Working in Sencha Architect 2 mostly involves navigating and setting configuration options. The WYSIWYG window (in the middle) isn't really WYSIWYG. It gives you the base layout, but you can see what the app will actually look like only by pulling it up in a browser.

Sencha says Architect saves developers' time by removing the need to type lots of boilerplate code. This is especially apparent in the initial steps of a new project. To lay out the base UI, you grab elements such as containers, charts, graphs, and other widgets from the Toolbox; drag them to the Design pane; and arrange them using a WYSIWYG view. For the most part, these widgets are attractive and professional looking. If you switch to the Code view, you can see that Architect has generated all the necessary files for you, and the code is clean and readable.

Unfortunately, this seems to be where the drag-and-drop aspect of Architect ends. To call Architect a visual development tool seems a little generous. Once the basic UI layout is set, the rest of the application development process mostly involves using the Inspector and Config windows to edit a Byzantine tree of property settings, until the widgets look and function the way you want them.

And there are lots of properties to edit. Some of them seem straightforward, such as width and height. Others are more obscure. What, I wonder, could be the meaning of selectedItemCls? Its default setting of x-view-selected doesn't yield much insight. Again, because Architect makes no attempt to conceal the inner workings of the underlying framework, the tool will be most useful for people who are already familiar with Ext JS or Sencha Touch development. Designers without any JavaScript experience may come away a little baffled.

There are so many properties to navigate, in fact, that the standard method of locating them is to search for them by typing their names into the Filter box. Of course, this means you need to know what the specific property you're looking for is called and under which level of the hierarchy it is located. At times, the process reminded me of nothing so much as editing the Windows Registry.

I would also have liked to see more wizardlike features to assist in setting up the most essential properties for widgets and components. As it stands, when you create a new component, Architect populates it with a dummy name, such as "MyDataStore," and fills its properties with default values. These will almost always be useless, so you must navigate to each property and adjust the value to what you want. Then when you want to link components, you must cross-reference component IDs in each others' properties, again by hand.

This can be incredibly tedious. Building one of Sencha's tutorial projects took me about two hours. Maybe that would be incredibly fast if I was really building a Web app from scratch, but I was just following a series of steps. Worse, when I reached the end of the tutorial, the app didn't render properly in the browser, leaving me to wonder which of the many property values or code snippets I had mistyped.

Switching over to the Code view, you can see how Sencha Architect generates code for all the things you create in the editor. The code is pretty clean and readable, all right, but that's really because of the Ext JS framework. If I wrote the same app by hand, I expect my code would look identical.

In fact, editing an Architect project can be so laborious that I have to question some of its claimed advantages over traditional development methods, boilerplate code and all. When I have to configure long lists of cryptic-sounding properties, is it really more efficient to do so by mousing back and forth in a GUI, rather than typing into a text editor? Architect just seems to trade one form of drudgery for another.

UI designer, meet MVCIts advantages for UI developers are also questionable. For example, Architect supports the Model-View-Controller (MVC) software design pattern, which is popular with back-end Web developers; Ruby on Rails, for example, is based on MVC. But front-end developers tend to be less concerned with such architectural matters, and they may have a hard time understanding how to connect Models, Views, and Controllers, or why. They're more interested in the visual aspects of Web development, which aren't really Architect's strengths.

None of this is to say that Sencha Architect is not a powerful tool. For what it does, it works well, and its GUI is well designed. But I think it's wrong to think of Architect as a general-purpose tool for WYSIWYG, drag-and-drop Web app development. Instead, think of it as a sophisticated browser and editor for Ext JS or Sencha Touch projects. If you're already using either of these frameworks, Architect will benefit you more than traditional IDEs because it understands the internals of the frameworks so well.

If you're the kind of person who's only interested in results, however, and you don't much care which framework gets the job done, Architect may not be for you. It's very much wedded to its underlying technologies. What's more, it can't read your mind and it doesn't try. You'll need to familiarize yourself with the various components and properties that make up an Ext JS or Sencha Touch project and how to make them work together. In fact, by the time you're fully proficient with Sencha Architect, you'll probably know enough to build the same Web apps without it.

Sencha says Architect's code generation capabilities are "like sitting next to a JavaScript expert." That may be true, and it's nice to know that the code it outputs is clean and correct. But to really get the most out of Architect, it helps if you're an expert yourself. If all you want is a "Web app construction set," look elsewhere.

Sencha's demo app running in Internet Explorer 9. As you click on the different cars, the photo in the center changes and the chart auto-updates to reflect the appropriate values. All of the data is being pulled in from a "proxy data store," which is really a JSON file accessed via URL.

This article, "Sencha Architect: Visual HTML5, sort of," originally appeared at InfoWorld.com. Follow the latest news in programming and mobile technology at InfoWorld.com. For the latest business technology news, follow InfoWorld.com on Twitter.

Read more about application development in InfoWorld's Application Development Channel.