Tool Chain Options for Hybrid Mobile App Development

Total Page:16

File Type:pdf, Size:1020Kb

Tool Chain Options for Hybrid Mobile App Development 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.
Recommended publications
  • Full Stack Flex Program Curriculum Overview
    THE CODING BOOT CAMP FULL STACK FLEX PROGRAM CURRICULUM OVERVIEW The digital revolution has transformed virtually every area of human activity—and you can be part of it as a web development professional. The Coding Boot Camp is a part- time, 24-week Full Stack Flex course that gives you the knowledge and skills to build dynamic end-to-end web applications and become a full stack web developer. Courses are scheduled to fit into your life, whether you’re employed or attending college full-time, with convenient weekend and evening sessions. The program is rigorous and fast-paced and covers both the theory and application of web development. As you gain proficiency, you’ll use what you learn on real projects under the guidance of area employers. Plus, you’ll have an impressive Professional Portfolio and the confidence to succeed as a web development professional. © University of Denver Coding Boot Camp - In collaboration with Trilogy Education Services PAGE 1 © University of Denver Coding Boot Camp - In collaboration with Trilogy Education Services IS THE PROGRAM RIGHT FOR YOU? Are you creative, curious and looking to reinvent yourself professionally? If so—or if any of the following describes your situation—enrolling in our coding boot camp could be a smart career move: » You’re considering a career change but not sure how to take the first step. » You’re happy in your current field, but want to move to another company—or stay put but shift from a non-technical into a technical position. » You want to engage more deeply with your current job—or boost your earnings and broaden your experience with freelance work.
    [Show full text]
  • Web Developer (Jquery, CSS)
    Position Title: Web Developer (jQuery, CSS) Location: Denver, CO Compensation: Salary based on experience Company National Valuation Consultants, Inc. (NVC) is the largest privately held, commercial real estate valuation and consulting company in the United States, with offices in Denver, Morristown, Cincinnati, Atlanta, Chicago and Tampa. The Denver corporate headquarters office is currently seeking a fulltime Web Developer (jQuery, CSS). NVC’s Core Values Our core values make us who we are. As we change and grow, the beliefs that are most important to us stay the same—putting people first, pursuing excellence, acting with integrity and serving our world. We only hire candidates who are aligned with these values. For additional information about NVC, please visit the company website at: www.nvcinc.com. Duties Include: Construct, develop and maintain Web applications using a combination of HTML5, CSS including Bootstrap and JavaScript including jQuery. Develop APIs to communicate with the back end. Job Requirements: Bachelor's degree or greater in Information Systems, Computer Science or related concentration and/or two or more years of relevant experience in a corporate environment. Mastery of front end development skills such as HTML5, CSS3, JavaScript, and jQuery Experience in building and owning enterprise level front end and user interface code for large scale web applications Deep understanding of front end engineering principles and experience with front end technologies and frameworks Experience working with Back End engineering to integrate into the full product stack Required JS Skills: Excellent coding experience in JavaScript Working knowledge of jQuery Bootstrap and Responsive design techniques Browser compatibility issues Services-Oriented Architecture HTTP and RESTful services AngularJS, Knockout, or equivalent JS MVC and/or AMD frameworks Use best practices to document and write quality software.
    [Show full text]
  • Tutorial #1: Getting Started with ASP.NET
    Tutorial #1: Getting Started with ASP.NET This is the first of a series of tutorials that will teach you how to build useful, real- world websites with dynamic content in a fun and easy way, using ASP.NET and C#. ASP.NET pages can display HTML, collect user input, and interact with databases. Note that these tutorials are not meant to provide an in-depth training in ASP.NET programming. The goal is to walk you through the development steps of a simple project, which you may later follow in designing an interface to your own final database project for this class. If you are interested in further study of web development with ASP.NET, I recommend the book by Scott Mitchell, SAMS Teach Yourself ASP.Net in 24 Hours, Pearson Education, 2010, ISBN 978-0-672-33305-7. Step 1. Installing the Software Environment Prior to using ASP.NET, you will need to install the following software: • SQL Server 2008 R2 for the database engine. • SQL Server Management Studio Express for the client (SSMS) • Visual Web Developer Express 2010 for the IDE • The .NET framework 4 environment To install this software, visit the following website: http://www.microsoft.com/express/Downloads/ Click on Download then scroll down to 2010 Express products and click on Visual Web Developer 2010 Express. Because Visual Web Developer is designed for developing ASP.NET websites, installing it automatically installs the .NET Framework and other required ASP.NET tools. You can also optionally install SQL Server 2008 (just checkmark “Microsoft SQL Server 2008 Express Service Pack 1” when prompted).
    [Show full text]
  • Websydian Web Developer
    Websydian Web Developer THE WEB DEVELOPMENT TOOL FOR CA PLEX Web Developer provides the software patterns required for managing the challenges of browser-based development including user and session management, data integrity protection, and user access control. Also included are abstract solutions for typical data manipulation scenarios, complete separation between application appearance and functionality. Web Developer contains WebsydianExpress , which is a platform providing a running web site out-of-the-box. This web site comes with support for multiple language sites and a browser-based administration interface enabling maintenance by none-developers and facilitating quick and secure prototyping of new business processes using CA Plex with Websydian, CA 2E or RPG. COPORATE DEVELOPERS TAKE OVER WEB DEVELOPMENT To enable transfer of back-end development resources to web, Web Developer provides an integrated environment making it possible to build web applications integrated with back- end processes and databases using only a single set of development skills. FOCUS ON BUSINESS PROCESSES INSTEAD OF TECHNOLOGY Web Developer allows you to stay focused on business processes by isolating the "technical plumbing", i.e. HTML syntax details, communication protocols, database management, implementation language issues and the like. SEPARATION OF APPLICATION FUNCTIONALITY FROM VISUAL DESIGN The visual web design is independent of the functionality of the application. Outsourcing of the web design therefore poses no risk on application or production data, and the web designer can work simultaneously with you on the web application. WEB APPLICATIONS INDEPENDENT OF PLATFORM AND WEB SERVER SOFTWARE Websydian web applications are platform and web server independent. Should the need arise to transfer an implemented solution from one platform to another, you can do this without any application re-development.
    [Show full text]
  • Chapter 1 Web Basics and Overview
    Chapter 1 Web Basics and Overview The Web is an Internet-based distributed information system. Anyone with a computer connected to the Internet can easily retrieve information by giving a Web address or by simply clicking a mouse button. The Web is a great way to disseminate information and making it available 24/7. Information can also be collected from Web users and customers through online forms. Maintainers and administrators can control and update Web content from anywhere on the Web. All these make the Web a powerful tool for mass communication, e-business and e-commerce. Compared with TV, radio, news papers, and magazines, putting the word out on the Web is relatively simple and inexpensive. But a website is much more than such one-way communication media. It can be a virtual o±ce or store that is always open and supported by workers from anywhere. Web service companies o®er free Web space and tools to generate simple personal or even business Web pages. But, well-designed and professionally implemented websites are much more involved. Even then, expertly produced websites are still much more cost-e®ective than other means of mass communication. For business and commerce, the cost of a website is negligible when compared to building and operating a brick-and-mortar o±ce or store. Once in-place, a website is a store that never closes and that is very attractive. People take great pains in building an o±ce or store to project the right image and to serve the needs 7 8 CHAPTER 1.
    [Show full text]
  • PHP Web Developer Job Description
    PHP Web Developer Job Description Job Title: Web Developer Based At: EMSL, Arden Press House Reports To: Technical Director, EMSL Salary: £22,000 to £28,000 Job Summary The Web Developer uses expertise and experience to produce development work on a wide variety of web projects. Working with confidence and professionalism, they will maintain high standards ensuring the quality of web development services delivered to our clients. With a responsibility for the quality of work they produce, they will be accountable for delivery of projects according to agreed timescales as well as ensuring code is well- constructed, secure and suitable for the specific application. A good understanding of web development technologies across numerous platforms is essential. The Web Developer is a key position in a small Web Development Team at our agency, so they should expect to be involved in technical decisions, sharing knowledge and maintaining excellent relationships with colleagues. Primary Responsibilities: • Create website back-ends and web services using open-source technologies, particularly PHP. • Integrate back-ends with existing front-ends, using HTML / CSS / AJAX as needed • Participate in development process from specification and design through build to testing, release and maintenance. • Break down problems into viable actionable chunks, and solve them with clarity and precision • Deliver projects according to agreed timescales • Some basic website-related administrative duties, e.g. SSL and DNS management Qualifications, Skills, Experience:
    [Show full text]
  • Arcgis API for Javascript: Building Native Apps Using Phonegap and Jquery
    Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jQuery Andy Gup, Lloyd Heberlie Agenda • Getting to know PhoneGap • jQuery and jQuery mobile overview • jQuery and ArcGIS API for JavaScript • Putting it all together • Additional information Technical workshops at Dev Summit • Web - Building Mobile Web Apps with the ArcGIS API for JavaScript • Hybrid - You are here! • Native - Search the agenda for “Runtime SDK” Application comparison: Native vs. Web • ArcGIS Runtime SDK for Android • https://developers.arcgis.com/android/guide/native-vs-web.htm • ArcGIS Runtime SDK for iOS • https://developers.arcgis.com/ios/objective-c/guide/native-vs-web.htm Hello Cordova and Resources Lloyd Heberlie Enable Safari remote web inspection What is PhoneGap? • Application container technology • Core engine is 100% open source • Web view container, plus JS API • HTML5, CSS3, JS = Native App PhoneGap PhoneGap architecture PhoneGap PhoneGap Application Native Plugins Code App PhoneGap Plugins PhoneGap Plugin options Setup a developer machine Code quality and verification web server Source Control Preparing for PhoneGap Installing PhoneGap and Apache Cordova Check versions of PhoneGap and Apache Cordova Updating PhoneGap and Apache Cordova Creating your first PhoneGap CLI project phonegap create path/to/my-app "com.example.app" "My App" Hello Cordova (cont.) Lloyd Heberlie PhoneGap: Featured Apps Featured Apps: Tripcase, Untappd Agenda • Getting to know PhoneGap • jQuery and jQuery mobile overview • jQuery and ArcGIS API for JavaScript •
    [Show full text]
  • Front-End Web Developer
    Front-End Web Developer The Front-End Web Developer Program Education & Certification The Front-End Web Developer with Ruby on Rails program is ➢ Student should have or be pursuing a high school diploma designed to prepare students to function as web application or GED. developers in multiple technical, business, and healthcare ➢ Students who complete this program this comprehensive settings. Web developers serve roles with job titles such as Web course would be prepared to sit for the Microsoft Site Developers, Web Applications Developers, Web Designers Technology Associate (MTA) 98-375: HTML5 and Web Masters. Application Exam national certification examination. The purpose of this program is to prepare students to design and Detailed Course Topics Covered develop websites, design and develop web applications so that o Creating a basic website using HTML, CSS, styles, HTML users can perform specific tasks, and maintain websites so they elements, and links, video, and images continue to meet user needs. This course covers the following key o Installing and configuring JavaScript areas and topics: o Using basic JavaScript syntax including conditional statements ➢ The Web: Understanding how the Web works, how it is and loops to develop web applications structured, how it is coded, and how common web tools are o Using basic JavaScript syntax including arrays array methods, used for specific purposes strings, and expressions o Using functions and function programming in JavaScript ➢ Web Design: Designing websites using appropriate fonts,
    [Show full text]
  • Apache Cordova Training
    Apache Cordova Cross-Platform Mobile Application Development Duration: 3 Days (Face-to-Face & Remote-Live), or 21 Hours (On-Demand) Price: $1695 (Face-to-Face & Remote-Live), or $1495 (On-Demand) Discounts: We offer multiple discount options. Click here for more information. Delivery Options: Attend face-to-face in the classroom or remote-live attendance. Students Will Learn The jQuery Mobile Toolkit Introduction to Apache Cordova (PhoneGap) Style Class Manipulation Using the Contacts Database API DOM Manipulation Using the the Cordova File API Introduction to Ajax Accessing the Camera with Cordova Using jQuery Mobile Lists, Forms, Buttons and Themes Using the Accelerometer Overview of Geolocation Course Description Apache Cordova (formerly PhoneGap) is an open-source is a mobile application development framework. It utilizes HTML5, CSS3 and JavaScript to create apps for a variety of mobile platforms. Students will learn how to build applications using jQuery Mobile and Apache Cordova that run on a variety of mobile platforms including iOS, Android and Windows Mobile. Comprehensive hands on exercises are integrated throughout to reinforce learning and develop real competency. Course Prerequisites Knowledge of HTML and JavaScript equivalent to attending the Website Development with HTML5, CSS and Bootstrap and JavaScript Programming courses. Course Overview The Mobile Landscape Technology Stack Devices Types HTML5 Main Objectives Browser-Side Data Storage Smartphones Tablets Declaring HTML5 Device Convergence Detecting Support for HTML5
    [Show full text]
  • Website, Content, and Design Terminology
    Website, Content, and Design Terminology ACCESSIBILITY: Relates to web design/coding standards and refers to how easy it is for everyone to use your website, including people who are visually impaired or in any way physically handicapped, or limited by older or less common computers and software. These days with the smaller screen sized tablets and smart-phones, accessibility for use on all devises is important; especially with the growing number of people using smaller screen devices to go online. ADDRESS BAR: The white bar towards the top of your computer screen. It will normally have something typed in it that starts with "http://" This is where you type in the address of a website that you want to visit. ANCHOR TEXT: The text a link (hyperlink) uses to refer to your web page. These make a difference in your search engine results. BACKLINKS: Links from other website pages to yours. Backlinks are used to increase a site’s popularity with search engines and to get more people to visit your site. The quality of a backlink and its anchor text is factored into Google’s algorithm when deciding how much importance to place on it. BANDWIDTH: It may help if you read "traffic" first, but very simply, bandwidth relates to how much a resource is used. An analogy would be a freeway. The wider the freeway, the more traffic (users) it can handle. The narrower it is, the less people can use it at once (without problems). When a website gets a lot of visitors, it will use a lot of bandwidth.
    [Show full text]
  • Voyager Mobile Skin Developed Using the Jquery Mobile Web Framework
    Voyager Mobile Skin Developed Using the jQuery Mobile Web Framework By Wes Clawson University of Rochester Libraries Contact: Denise Dunham - [email protected] en_US Rochester Original Mobile skin After Adding jQuery Mobile How We Did It We needed to make some simple changes to a few XML/XSL files. To start using jQuery Mobile You need three new things: jQuery JavaScript - jQuery Mobile JavaScript - jQuery CSS These are placed in frameWork.xsl To make things easier: We trimmed down an original skin first. By getting rid of features that we knew weren’t going to be used on mobile devices, we had a lot less to worry about when we added jQuery Mobile. Generates a divider with collapsible content Button shape and color can be based on existing jQuery Mobile themes Generates a clickable button When the page is loaded by a browser, jQuery Mobile makes changes to markup that has been indicated with special tags. These special tags were added to markup where we wanted jQuery to form certain types of elements. Collapsible Divider (closed) Collapsible Divider (open) Stylized Drop-down Menus Value Slider Stylized Buttons In the end, roughly 27 files were modified to include jQuery-specific markup tags, giving a sleek, simple, yet robust mobile interface. Why We Did It jQuery Mobile save a lot of the time and resources that are normally needed to develop stylistic graphics and formatting. Items are auto-generated! Buttons Search Box Active Item Styling Icons Button Icons (standard jQuery Mobile) 3rd party icons also available! The jQuery Mobile framework allows developers a fast and simple way to create skins that are easily accessible on mobile devices.
    [Show full text]
  • Web Developer/Software Engineer
    Web Developer/Software Engineer O’Shaughnessy Asset Management (OSAM) is seeking an experienced and ambitious Web developer with a strong background in ASP.net/Microsoft MVC to join our team. Candidates should have knowledge and ability to build highly distributed web applications and robust desktop software, with mobile development being a plus. The position provides an excellent opportunity for candidates eager to gain exposure to the financial services industry as a technical professional. Candidates will also be responsible for developing and supporting a broad range of financial applications including client/server web portals, portfolio construction software, performance reporting, etc. OSAM is a firm that values the development of its employees, and the hired candidate will receive ongoing mentoring from experienced industry professionals, and opportunities for career advancement within the field of financial services. Competencies: • 3 to 5 years+ of experience with ASP.Net, Microsoft MVC, HTML, CSS, Javascript (jQuery), Visual Studio, C# and SQL Server • Ability to manage, plan, and prioritize multiple concurrent projects in a fast-paced environment • Proven experience in systems solution development from design through production and on-going maintenance/upgrades • Experience with Python, API and Microservices development, Web Services, WCF, and Service Oriented Architecture a plus • Understanding of Software Development Life Cycle and Agile methodologies • Excellent communication, math, and problem-solving skills • Computer science degree or relevant experience • Experience in finance a plus but not required • Any experience with Azure would be huge plus Please send all inquiries to [email protected] * As of 4/30/20. The AUM and AUA combined total represents $4.65 billion of O’Shaughnessy Asset Management assets under management and $0.44 billion of assets under advisement.
    [Show full text]