Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Mobile Web Apps

Wird geladen in …3

Hier ansehen

1 von 42 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (17)


Ähnlich wie Mobile Web Apps (20)

Aktuellste (20)


Mobile Web Apps

  1. 1. Introduction According to a recent study  more than 1 billion people use mobile phones and tablets as primary computing devices  68% of customers prefer mobile websites over full desktop versions  There are several approaches to developing mobile Web apps, but given the fast speed of mobile software evolution, it’s crucial to understand the basic technologies.
  2. 2.  Apps developed with os provider’s language and frameworks.  Binary executable files on the device.  Can access all API’s made available by OS vendor.  SDK’s are platform-specific.  Each mobile OS comes with its own unique tools and GUI toolkit. * IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper
  3. 3. Different tools, languages and distribution channels associated with leading mobile operating systems
  4. 4. PROS Easy low-level hardware access services. Easy access to high level services important to personal mobile experience. Full use of all functionalities that modern mobile devices have to offer. High usability. CONS Code Reusability : Low Development & maintenance: Time- consuming & expensive. Designers are required to be familiar with different UI components of each OS. Upgrade flexibility: Low.
  5. 5.  Use standard web technologies such as HTML 5, CSS 3 & JavaScript.  Features of HTML 5 - Advanced UI components, access to rich media types, geolocation services & offline availability.  Increasing popularity of HTML 5 in rendering engines such as WebKit.  Runs on a standalone mobile web browser.  Installed shortcut, launched like a native app.  UI logic resides locally; makes the app responsive and accessible offline.
  6. 6. ADVANTAGES:  Multiplatform support.  Low development cost.  Leverage existing knowledge. DISADVANTAGES:  Limited access to OS API’s.
  7. 7.  Combines native development with web technology.  The web app runs inside a thin wrapper native app.  Hybrid apps are mobile Web applications packed into a native app. They behave like a native app in that they’re installed from a Web store and have access to the same capabilities as a native app, but they’re developed using the same tools used to develop Web applications—mainly, HTML5, CSS, and JavaScript.  The communication between web app and native app normally happens over JavaScript via custom built API’s.
  8. 8. ADVANTAGES:  Flexibility of web apps combined with feature richness of native apps.  Simplified deployment and immediate availability.  Leverage existing knowledge. DISADVANTAGES:  Poorer user experience as compared to native apps.  Access to advanced device capabilities normally restricted.
  9. 9. PROS Code Reusability Plugins Easy for web developers Reduced development costs Support for enterprise & cloud services Easy Deployment CONS Might not support every feature of OS Cannot use own tools/IDE Slower. High end graphics & 3D support limited Vendor lock-in
  10. 10. Technical Considerations  There isn’t a single solution for choosing which mobile application type will be best for every situation.  Several technical criteria can help us narrow down our options to select the most suitable development approach for a given situation.
  11. 11. Platforms and version support What we have to consider  platforms and versions to be supported  Range of devices to support  Devolopment stack for each of them  Platform’s browser capabilities  Our own devolopment skills
  12. 12.  If the goal is to build an app once with support for multiple platforms, a hybrid or a mobile Web approach is a better choice than a native app, which must be developed specifically for each mobile platform.
  13. 13.  We also need to consider which device capabilities are needed.  If the app needs access to camera, a barcode scanner, the file system, or a Bluetooth peripheral, we’re better off using a native or hybrid approach because they have direct access to these features.  The latest browsers support hardware- accelerated animation properties, but they still can’t fully use device capabilities such as native graphics or other device-specific interfaces included in the native device API.
  14. 14. User Experience  Later, we’ll list different Web frame-works that provide libraries for mobile Web and hybrid apps to imitate native mobile interfaces and behaviour.  However, native apps still provide a richer, more compelling experience with a more responsive interface and superior interaction because users can open them faster and use device specific hand gestures.
  15. 15.  Moreover, mobile apps still face challenges in accessing a device’s native features across all mobile browsers, which keeps users from achieving the same level of experience as when using a native app.  Hybrid apps offer an important trade-off in terms of the depth of experience. They allow the HTML code to have access to native APIs—although this comes at the cost of a non-native user interface due to the Web technologies involved.
  16. 16. Performance  Performance is one of app developers’ chief concerns.  If the user interfaces are graphic-heavy or require excessive data processing, the mobile and hybrid app approaches have more difficulties in achieving high performance because they’re running on top of additional layers, which consumes computing resources.  At any rate, before completely developing any app, developers should test performance by using a preliminary prototype or testing similar existing apps.
  17. 17. Frameworks  Although it’s possible to develop a mobile Web, hybrid, or native app without a framework, using frameworks can simplify and reduce the development process effort.  There are frameworks available for just about any develop- ment option  Most frameworks are for HTML5 development. However, if we choose to develop for a hybrid or native ap-proach with a cross-platform develop-ment frame in mind, we have different options that we should consider.
  18. 18. * http://setandbma.files.wordpress.com/2011/12/wora-platforms.png
  19. 19. TECHNICAL ARCHITECTURE:  Web approach using hybrid model.  Single source codebase written HTML 5, CSS 3, JavaScript running on a mobile browser embedded in a native app wrapper.  Device capabilities accessed through device-independent JavaScript API. SUPPORTED PLATFORMS:  iOS, Android, Blackberry, WP7, Symbian, Palm, Samsung Bada IDE USED:  MAC OS X & XCODE for iPhone & iPad.  Google Android SDK, Eclipse ADT Plugin, Ant as well as Eclipse IDE for Android. * http://www.adobe.com/devnet/phonegap/articles/creating-apps-with-phonegap-lessons.html
  20. 20. STRENGTHS:  Native wrapper source code is provided so it can be customized further.  Simple ‘drop-in libraries’ concept makes it easier to develop.  Lowers barriers of adoption for web developers. WEAKNESSES:  Lack of support for native UI components, design patterns & development tools.  The capabilities offered by the framework is limited to what a “WebView” can do.  Different projects for different platforms  Different JavaScript files on each platform for PhoneGap itself and plugins  No native UI support  Java, Objective-C or C# requirement to create new plugins  No built-in support for push notifications
  21. 21. iOS Android
  22. 22. Below is a summary of each platform and whether it offers adequate support for a given area. (Scored 2 or better in that criteria) * http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/
  23. 23. Recent Developments
  24. 24. Adobe AIR  Adobe Integrated Runtime, also known as Adobe AIR, is a cross-platform run-time system developed by Adobe Systems .  It used for building Rich Internet applications (RIA) that can be run as desktop applications or on mobile devices, programmed using Adobe Flash, Apache Flex(formerly Adobe Flex), HTML, and Ajax.  The runtime supports installable applications on Windows, Mac OS and some mobile operating systems such as BlackBerry Tablet OS, iOS and Android.  It also originally supported Linux, but that support was discontinued.
  25. 25.  “ The Adobe AIR runtime enables developers to package the same code into native applications and games for Windows and Mac OS desktops as well as iOS and Android devices, “  According to adobe “AIR reaches over a billion desktop systems and 500 million mobile devices”
  26. 26. That was fast: Chrome Apps ready to go mobile  The cold, hard walls between mobile native apps and HTML5 wobbled a bit on Tuesday morning, as Google announced that Chrome Apps will now work on the two most popular mobile platforms.  Google introduced developer preview of the Apache Cordova "toolchain" for wrapping Chrome Apps in code native to Android and iOS.  Cordova lets developers write apps in HTML5, CSS, and JavaScript, then wraps the app in the native coding languages for iOS and Android, connecting APIs from HTML5 to the native code as best it can. Since it's only being released as a developer preview right now, developers can expect improvements in Cordova. 
  27. 27. Kik’s Cards content html5 platform  An HTML5 app that Koa.la built on Kik’s Cards content platform, surpassed one million downloads within 24 hours.  The app playfully connects users with existing and new friends by letting them draw on each other avatar’s using a Draw Something-like guessing game.
  28. 28. Boot TO Gecko (firefox OS)  B2G is an opensource smartphone os devoloped by mozilla. This new platform is backed by major mobile network operators, and its development is based on HTML5.  I got to use an early version of Boot to Gecko, running on a flashed Samsung device that used to run Android, and it was really great.
  29. 29.  The operating system only uses very low amount of ram and processing power.  Firefox os really have the potential to make low end devices more capable……..
  30. 30. B2G screen shots
  31. 31. Are Web apps the future of mobile?  Canonical recently introduced ubuntu touch mobile os with integrated web applications support.  Individual developers and many companies like google and apple say and show that HTML5 is the standard for mobile Web development.
  32. 32. So Are Web apps the future of mobile? There’s no definite answer, of course. But it seems to be a safe bet.
  33. 33. References: 1. “mobile web apps”-Nicolás Serrano, Josune Hernantes, and Gorka Gallardo Ieee software magazine- september/october 2013 (http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=6588524) 2.Y. Chen et al., “Adapting Web Pages for SmallScreen Devices,” IEEE Internet Computing, vol. 9, no.1, 2005, pp. 50–56. 3. R. Nixon, HTML5 for iOS and Android, McGraw-Hill, 2011.
  34. 34.  4. R. Rodger, Beginning Mobile Application Development in the Cloud, Wrox, 2011  http://www.onlinesolutionsdevelopment.com/blog/mobile- development/why-mosync-could-be-a-better-alternative-to- phonegap/  http://mashable.com/2012/02/16/cross-platform-app-design-pros- cons/  http://floatlearning.com/2011/07/which-cross-platform-framework-is- right-for-me/

Hinweis der Redaktion

  • Choose a mobile strategy depending on the budget, project timeframe, target audience & app functionality.
  • Can take full advantage of particular os feautures
  • Once the app is installed, it interacts with the underlying operating system through proprietary API calls that the OS exposes. These are divided into 2 categories – Low-level API’s & high level API’s. Through low-level API calls, the app can interact directly with the touchscreen or keyboard, render graphics, connect to networks, process audio received from the microphone, receive images & video from the camera, access the GPS etc.
    Higher level services include processes like browsing the web, managing calendar, contacts, photo album, the ability to send and receive phone calls etc.
  • Another increasingly popular approach is to develop mobile web apps which run on the user’s mobile browser. These are different from mobile-optimized websites which detect when they are being accessed from a mobile device and serve HTML pages that have been designed to provide a comfortable touch experience on a small screen size.
    This involves using standard web technologies such as HTML, CSS, JavaScript to build the application & make it look and behave like a native app. It is possible due to the advanced capabilities of HTML 5 including embedded SQL databases, local storage (application cache to reduce page startup time and enable offline features), animations, canvas (avoid transferring images), websockets, video playback, geolocation services etc. Mobile Google Search uses the HTML5 Geolocation API to show location-aware results. Google Maps for Mobile and Mobile Gmail both use the canvas tag to avoid transferring images.
    This approach may be appealing for many applications such as ebooks, mobile banking, social interaction & email. However it may not be suited for highly interactive, CPU-intensive, visually rich applications like games, augmented reality browsers & videoconferencing.
  • The bridge enables the hybrid app to take full advantage of all the features that modern devices have to offer.
    App developers can choose to code their own bridge or use ones provided by many of the cross-platform development frameworks such as PhoneGap.
  • Major frameworks, including Appcelerator and PhoneGap offer easy access to plugins and modules that can easily plug into other services or tools.
    Do not have to invest in a team or developer specific to that ecosystem.
    In addition to plugins and modules for specific functions, most frameworks also have the option to directly integrate with cloud services, including Salesforce.com, AWS, Box.net and others.
    Deploying and compiling apps is much faster in a cross-platform scenario. This is especially true with many of the new cloud-based build tools that various frameworks are starting to push out.

    If Google, Apple or Microsoft adds a new feature, the framework you are using will need to be updated to support those new additions.
    Most frameworks want users to use their own development tools and suites, and that can mean that a developer has to forgo his or her own IDE preferences and use something else.
    Most of the cross-platform frameworks build using their own subsets of JavaScript, which means that if you want to switch to another platform, that code you wrote before is likely not going to be reusable without a lot of work.

  • Best suited when you have an existing web application you wanna port to a mobile environment
  • Drop libraries in the right place and begin coding with a familiar web stack to produce a functional application quickly.

    Imposes little structure and/or guidelines on how to best develop applications with it. This means users are free to architect their solutions in a
    way that best suits their needs. This can be a blessing for experienced developers but can create confusion and promote bad designs within novice users.

    PhoneGap does nothing to emulate the native device UI. Left the users with
    the task of styling the markup to mimic a native app. Fortunately there are loads of open source
    libraries specialized in exactly this. Therefore it’s not unusual to see Phonegap being used in
    conjunction with other libraries like XUI and Sencha Touch.

    PhoneGap API runs on a very extensible plugin architecture. If PhoneGap doesn’t already support the feature you need, you can easily write a plugin yourself. To extend PhoneGap through plugins one must know how to program in the native language of each platform.

    The burden for that increases when there is a need to use multiple PhoneGap plugins because you need to search and update different files on each platform.
  • Screenshots of a foursquare app develped on both ios and android using phonegap.