If you’ve discovered Sencha Touch you probably know it can create cross platform mobile applications from a single code base. If you’ve looked into it a little more, you might know that Sencha Touch uses HTML5, CSS and JavaScript to achieve this. But how is it exactly that this works behind the scenes? How is it Sencha Touch can create mobile applications, which are typically reserved to the native language of the device, with web technologies?
To put it simply Sencha Touch uses the devices browser as an engine to run the application, rather than running directly on the device itself. We can run the application in two ways:
- As a web application
- As a native applications
The first approach involves hosting the mobile app on the Internet just like any other web application. Users can access the app by navigating to it from the devices web browser. Typically there is also the option to save it to their home screen, which looks and acts like a normal app icon. The disadvantage of this approach however is that it requires an Internet connection to load and it can not be installed through app stores.
The second approach allows the app to be installed just like any other ‘normal’ application. But Sencha Touch needs to run through a web browser, how can it be installed as a native application? The answer is that it still is running through a web browser, it’s just hidden. When creating a native application with Sencha Touch, Sencha Touch creates a native application for the target platform which has the sole purpose of launching a web view. The Sencha Touch application is then loaded into this web view to be displayed to the user. The user will not be aware of this however, as the web view is not visible. To them it will seem as though it is a normal, natively coded, application.
This should help give a basic understanding of how everything works behind the scenes. The web approach does have a lot of advantages and disadvantages though, some of which will be discussed in future posts.