Advances in Computer Science and Information Technology (ACSIT) Print ISSN: 2393-9907; Online ISSN: 2393-9915; Volume 2, Number 9; April-June, 2015 pp. 6-8 © Krishi Sanskriti Publications http://www.krishisanskriti.org/acsit.html Tool Chain Options for Hybrid Mobile App Development Saurabh Kumar Singh BITS Pilani E-mail: [email protected] Abstract—Gartner says ‘by 2017, mobile users will provide Hybrid mobile applications provide a way for developers to personalized data streams to more than 100 apps and services re-use their existing skills in web development. Developers everyday’. In today’s world, from entertainment content to don’t like the prospect of getting locked into proprietary productivity services, from quantified–self to home; there is a mobile platforms. This includes the programming languages and applications for practically anything a connected consumer is SDKs provided by platform vendors (more on this later). looking around. To address this increasing need for user-friendly mobile applications, enterprises are looking to leverage applications Hybrid mobile application development looks appealing to an across multiple platforms. The need for content awareness in mobile organization’s bottom line. This approach saves the overheads apps has increased with the capabilities of mobile devices, causing of hiring a developer for each platform when you can hire one developers to consider both native and hybrid architectures. Generally app developers purchase a framework and do not explore developer and target all of them through HTML, CSS, and the open source options, which is not a good approach. There are JavaScript instead. Below are some of the famous companies numerous cross platform frameworks available in the market today. working with hybrid mobile apps : One must look at popular frameworks available in the open source community. This is important as each mobile app has different Netflix requirement and can be optimized with a good choice of framework. Amazon This paper presents the research work that highlights the importance Evernote of framework selection for mobile app development. The research Feedly covers the framework that savors the backing of a huge developer community. As a part of our research, examination is done for mainly Native mobile app development though new has already three frameworks: Sencha Touch 2, jQuery Mobile and Backbone + become full of options in context to available framework in Twitter Bootstrap. The above mentioned frameworks have been the market. The biggest hurdle a mobile app developer faces is compared from the point of view of a developer on multiple parameters. This comparison of cross-platform mobile app the dilemma of which framework to go with. development framework is helpful for any developer as it stems the This paper takes a holistic approach to analyze three tool chain selection process of a correct tool chain to create app out of an idea. options and comes up with cases of when to use what. What The results of the research shows that for a developer with “mobile first” approach shall use Sencha Touch 2, developer with “web first” this paper does not say is which tool chain is better than the approach must pick jQuery Mobile and a developer who wants to other. create a MVC based mobile app must go for Backbone+Bootstrap. 2. TOOL CHAIN ANALYSIS 1. INTRODUCTION 2.1 Tool Chain A The world of app development is an exciting, yet sometimes This tool chain is Sencha Touch 2 based. The tool chain is confusing place. There is no definitive answer as to which widely popular among hybrid app developers. This tool chain type of app you should go for. Your choice will depend on has the following components:- you, your budget and time-scale. Currently this world is divided between native and hybrid apps. Hybrid apps have Sencha Touch 2: The framework based on MVC structure has created a following within a small span of time due to all the components that are needed right from designing the numerous reasons. Like the websites on the internet, hybrid app to packaging it. This provides a commercial free license. mobile apps are built with a combination of web technologies Sencha Architect: It is paid IDE by Sencha and is very handy like HTML, CSS, and JavaScript. The key difference is that as it provides a full blown developer environment. hybrid apps are hosted inside a native application that utilizes a mobile platform’s web view. This enables them to do things Google Chrome: All the hybrid apps are run and tested on a like access hardware capabilities of the mobile device. webkit based browser. Here Google Chrome is a personal Tool Chain Options for Hybrid Mobile App Development 7 choice as Chrome Developer Tools are very helpful. This Architect- -MVC structure. -Out of the box -MVC structure component covers the following roles in the tool chain:- ure JavaScript based MVC not -jQuery based development. supported. framework Testing -Multiple JS files -No established -Backbone based Debugging with a single architecture. structure. HTML loader -jQuery based 2.2 Tool Chain B page. framework. jQuery is This tool chain is jQuery Mobile based. The tool chain is very markup based. popular among the open source community as it is a sub set of the famous jQuery framework. Learning -Steep learning -Very easy to -Decent learning Curve curve. learn. curve. jQuery Mobile: It is a subset of jQuery optimized for -Challenge to -Productive -Web developers touch devices. developers new to from day one. get an upper jQuery: Is the legendary Javascript library for web JS. hand. technologies. Docume-- -Good official -Decent official -Decent official JS Editor: There are a lot of free JS editors available out ntation documentation. documentation documentation of which Aptana Studio 3 and Brackets are pretty nice. -Bad third party -Excellent third -Not much third Google Chrome: Chrome developer tools provided by the support and party party support for forums. information Bootstrap. Google Chrome browser are also present in this tools -Official support coverage. -Decent third chain. Chrome can be considered the winner in this genre is paid. -Good book party support for hands down so it will be common in all of our tool chains. coverage. Backbone. 2.3 Tool Chain C Ease of -Very hard to -Easy syntax -Easy syntax. This tool chain is jQuery based with MVC structure. A lot of Use debug. -Any JS IDE -Any JS IDE can frameworks are these days built over jQuery. Bootstrap is a -JS based can be used. be used. development can material based framework that depends internally on jQuery be confusing. and provides a set of themes and common widgets out of the Paid IDE. box. The app structure is created using Backbone which is UI -Extremely fast -Classic web -Bootstrap has well known among the web developer community. Features and fluid on based UI. jQuery based mobile devices. -Web first Material Design. Twitter Bootstrap -Limited widgets approach. -Bootstrap is Backbone.js available. -UI is easily Much easier to Other JS libraries -Based on mobile extendable. customize. JS Editor first approach. -Large number -Bootstrap has a Google Chrome -Not many third of third party good collection party widgets widgets of existing Developers can find numerous article on the internet that available. available. themes. present comparisons between popular frameworks but the Extendib- -In house app -Cordova as -Cordova as app comparison chart in figure 1 is followed by specific developer ility wrapper support. app wrapper. wrapper. oriented section. In this section issues with each tool chain -Support for -Support for Support for while developing is discussed and also use case for each tool themes is themes. themes. chain is proposed. This provides clarity about the usability available. -Lot of tools -Lot of tools along with pros and cons.\ -Paid IDE and options options available official support. available in the in the market. Table 1 shows the comparison chart of the three tool chains market. across eight critical parameters. This comparison chart is incomplete without deep dive into the frameworks that each 3. FRAMEWORK ANALYSIS tool chain uses. 3.1 Sencha Touch 2 Table 1: Tool Chain Comparison Parameter Tool Chain A Tool Chain B Tool Chain C “The leading cross-platform mobile web application Platform -Compatible with -Cross browser -Cross browser framework based on HTML5 and JavaScript for creating Support WebView compatibility. compatibility. universal mobile apps.” Browsers only. -Cross platform -Cross platform -Supports and cross and cross device Sencha Touch has the most prominent features of Webkit Android and iOS. device compatibility. support and Native UI feel for respected platforms. As a compatibility. developer one spends time in learning this framework but each hour pays off. The downside here is that Sencha Touch has a Advances in Computer Science and Information Technology (ACSIT) Print ISSN: 2393-9907; Online ISSN: 2393-9915; Volume 2, Number 9; April-June, 2015 8 Saurabh Kumar Singh limited set of UI widgets that come out of the box. This means javascript into the mix. Backbone is good for mobile as it that each app built will look similar to the other. Third party provides light weight MVC structure widgets are available but they are not optimized and slug on the mobile. As ST2 is company owned product, it falls behind 4. KEY POINTS when compared to developer community support for open source technologies like jQuery. Another key point about ST2 As stated earlier, there is no best tool chain. What is important is that it does not fall under the category of cross platform, is that the developer knows what he wants to create and while cross device, cross OS version which becomes very critical designing the architecture of the app picks out the tool chain when it comes to Android.