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

By Neil McAllister, InfoWorld |  Software, HTML5

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.

Originally published on InfoWorld |  Click here to read the original story.
Join us:






Answers - Powered by ITworld

Ask a Question