Sencha Architect: Visual HTML5, sort of

Sencha's drag-and-drop tool for building Web and mobile apps is friendly to designers if they're also developers

Page 2 of 3

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.
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.
| 1 2 3 Page 2
From CIO: 8 Free Online Courses to Grow Your Tech Skills
View Comments
Join the discussion
Be the first to comment on this article. Our Commenting Policies