Introduction to Sencha Touch 1.0

Foreword

Sencha Touch (ST) is a library for developing websites and web services, focused on iPhone, iPad and Android. It was developed by Sencha, Inc. , a well-known supplier of the ExtJS library for the high-tech browser interface market.

The main goal of ST is to mimic the standard interface and behavior of the elements of the interface of iOS, as far as possible, by providing programmers with a flexible API.
')
The core of the library is written in JavaScript, CSS3 and html5 (in the interpretation of WebKit-engines). FireFox 4 and IE 9 are missing from the list of supported browsers.

Accordingly, an ST application is a common client-server development, Safari or Chrome browser acts as a client, and any web service that can “respond” in JSON, XML and a few other formats acts as a server.

Spheres of application

Yes, ST, after some perversions, you can make it work on desktop systems (remembering the restriction on browsers), but still the developers created the library strictly for mobile “touch” devices.

Working with the touch interface on the desktop is a rather dubious pleasure, and although the scroll bars can be returned, it is better to abandon the idea of ​​doing something serious for the desktop using ST.

Therefore, the main sphere is applications that should be in the proprietary Apple interface, but work from the browser.

Building a complex business logic on ST for quite a long time, because their niche is all sorts of “clients” to Twitter and other text services.

It’s also worth keeping in mind that the mobile Internet is not always cheap, and ST, despite all the tricks, is still quite a big calf, at 370 KB (not counting the graphics).

The second point, which should not be forgotten - is the resource-intensive application. In the course of work, the library actively works with the DOM tree of browser objects, as a result of which, after long work, the browser can eat off a significant amount of memory.

Precautionary measures

What should be remembered when starting development:
• The library code is quite raw, despite the version number and replete with various kinds of errors. As an example, we can mention a wonderful build 1.0 in which the submit form handlers were not called — that is, it was impossible to know about the results of sending the form to the server. On the forum, the patch was posted pretty quickly, but the aftertaste remains.
• API in minor versions can change quite strongly, up to declaring components as deprecated.
• If you are writing your own components, then updating the version will most likely lead to the need to refactor the element template.
• Documentation is inaccurate. If the behavior of real elements is different from what is written on the official website, you need to look inside the library. Fortunately, the code there is well formatted and you can understand it.
• Read the forum regularly. Despite the presence of strongly promoted paid subscriptions, most problems are solved by the community, and not by the developer.

What to develop and debug

Since ST is a browser library, Google Chrome with its developer tools will come down for relatively comfortable development. Yes, this is not a FireBug, but still better than nothing at all.

To evaluate the appearance on the "native" device, you can completely use the "Safari". Of course, for some "chips" such as automatically changing the orientation of the screen (from horizontal to vertical and vice versa), you will have to search for either Macintosh with an iPhone emulator (iPad) or run MacOS in a virtualizer.

Of the buns - the appearance in the Safari at a resolution of 1024 x 768 browser windows in 99% of cases will not differ from the same, only on iPad.

Introducing the core

The library developers had several tasks:
1. Facilitate the transition to the new core of the vast ExtJS community
2. To maximally facilitate the core of the component rendering and the library's “total weight” as a whole, since the monstrous size of the “progenitor” and its leisurelyness have long become the talk of the town.
3. Keep the API simple
4. Explanatory documentation.

It can be seen that they tried very hard: many conceptual things like a template engine, work with data, the issues of inheritance of elements were either seriously redone or even written from scratch.

The library core is presented to the developer as a super-global Ext object with a set of methods for initial initialization of the application.

Each of the components is derived from a more basic one, which makes it easier to understand and, more importantly, the interchangeability of components, since access interfaces, for example, to the Storages, are unified.

The kernel splits into several sets of classes:
• Data - all sorts of work with data, storages, data conversion and work with data arrays, filtering, checking, etc. The authors tried to introduce the concept of data model (from MVC) and validation rules (validation), including many-to-one relationships. The benefits of this innovation are rather doubtful, since on the server side you will still need to re-check, but still.
• Form - interface elements. The text field, drop-down list, calendar, regular list, radio buttons and checkboxes are all here.
• Layout - The part of the kernel that is responsible for rendering items in a browser window. In theory, a form can be one on a page or be part of a tab bar, elements can be pressed to the top or bottom of a form.
• Lib - the basic components of the kernel.
• Util - all sorts of utilities and classes that should not be called directly.

The concept of an object in ST

Any library component is in fact a Javascript object with a set of methods and properties. The division into hidden and public methods or properties is very conditional and only at the documentation level.

In addition to methods and properties, most objects have events for which you can hang handlers and an output template for visual elements.

There are a lot of events in the world of ST: in fact, every sneeze in this world is an event: from creating an element and adding it to a page, drawing it and ending with destruction.

In particular, the endless walking of message queues and calls to handlers explains the slowness of the working application. Such is the fee for universality.

Events can invent your own. In particular, the authors of the library emulated touch events using browser javascript events about clicks and pointer movement.

In the most general case, the application cycle using ST is divided into:
• Initial initialization (calling Ext.setup)
• Waiting for data from the server
• Interaction with the server

All interaction with the server and generally inside the application will occur at the event handler level.

Writing your own components

The most terrible and fascinating task is to write your own components, since the library provides a rather limited set of them out of the box, and some of them do not work quite the same as in the original iOS.

Realizing this, the developers went along and built a template engine into the library. Now, each of the form elements within itself carries a certain html-template, which dictates the display of the element in the browser window.

A template is a fragment of the usual html-markup, in which special markers are replaced with object attributes. It should be noted that when an object is rendered, not all of its possible attributes are transferred to the template, but only part of it that is strictly specified by the programmer.

Also in the template there is a rudimentary possibility of conditional rendering of its part (if the value of attribute A is set to show line B, otherwise show line B). There is the possibility of simple arithmetic operations as a condition for drawing.

A good tone for the form element is to spawn a new element from either Ext.form.Field or from any of its descendants.

Thus, the new component will behave well, just like “native”.

Work with data

Out of the box library can work with data in JSON, YQL and XML formats. Able to make AJAX requests to the server and correctly interpret the response.

The concept of a repository has been introduced in ST - that is, a set of data formally united by some feature. For example, a table in a database can serve as an analogue of the Vault, and each table entry can be an instance of the Model of the Vault.

Stores are able to filter, when editing records in it - mark them as "edited" and many other useful things.

Lists, in particular, are used as the source of data for the Vault.

Summary

Sencha Touch is a powerful library for developing browser solutions in the iOS interface, with a good architectural concept but a raw implementation.

Is it worth the money requested by the developers? You decide.
In the process of solving it is possible, however, for non-commercial things to use the open source version.

What to read and where to look

• The official website of the product is http://www.sencha.com/products/touch/
• Interface Demonstration - Kitchen Sink Demo
• Sencha Touch API