Cross-Platform Mobile App
Mobile App Development Choices

2013 Hong Liu, ( hong.liu@live.cn / @honglio )
Why a Mobile App?

2
Reasons for apps
Time Spend

• Entertainment

42.86%

• Watching video

9.39%

• Listening music

15.64%

• Playing games
...
Let’s start to build an App!

4
Native App

5
Native App
Android

Windows
Phone

iOS

Java

C#, VB.net, VB

Objective C / C

UI Framework

Java App
Framework

SilverLig...
Objective-C Apps

HTML 5, CSS,
JavaScript Apps

Cocoa Touch UIKit, Animation, Multitasking, Gesture Recognizers,
PushNotif...
Native App Workflow
Mechanism: UI + some application logic

Native App

Device

Pro: native style guides, easy to learn, d...
Implement native apps for all
platforms, add cost to your project.

11
The solution is the Mobile Web.

12
13
Web App

14
Server-side Web App



Mechanism: Just a renderer

Web Browser

Device

Pro: No learning curve, as we already
know it.
Co...
Yahoo!’s 14 Performance Rules
1. Minimize HTTP Requests
2. Use a Content Delivery
Network

8. Make JavaScript and CSS
Exte...
Client-side Web App
Mechanism: UI+ some application logic

Web Browser

Device

Pro: No learning curve, as we already
know...
Client-side Web App Full-stack Workflow
HTTP
Request

RequireJs
jQuery

Twitter
Bootstrap

Handlebars

REST API

Backbone
...
Appearance Side-by-Side Comparison

Web App

Native App

Web App

Native App

19
Client-slide Web Apps Frameworks

20
Hybrid App
Native App
JavaScript
Interpreter

Mechanism: UI+ some application logic

Device

Pro: new tool chain (takes ge...
Hybrid Apps Frameworks

22
Question?
Cross platform mobile app
Cross platform mobile app
Upcoming SlideShare
Loading in...5
×

Cross platform mobile app

781
-1

Published on

List all choices of mobile app development. Compare the performance and appearance of each choice.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
781
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Core OS. This level contains the kernel, the file system, networking infrastructure, security, power management, and a number of device drivers. It also has the libSystem library, which supports the POSIX/BSD 4.4/C99 API specifications and includes system-level APIs for many services.Core Services. The frameworks in this layer provide core services, such as string manipulation, collection management, networking, URL utilities, contact management, and preferences. They also provide services based on hardware features of a device, such as the GPS, compass, accelerometer, and gyroscope. Examples of frameworks in this layer are Core Location, Core Motion, and System Configuration.This layer includes both Foundation and Core Foundation, frameworks that provide abstractions for common data types such as strings and collections. The Core Frameworks layer also contains Core Data, a framework for object graph management and object persistence.Media. The frameworks and services in this layer depend on the Core Services layer and provide graphical and multimedia services to the Cocoa Touch layer. They include Core Graphics, Core Text, OpenGL ES, Core Animation, AVFoundation, Core Audio, and video playback.Cocoa Touch. The frameworks in this layer directly support applications based in iOS. They include frameworks such as Game Kit, Map Kit, and iAd.
  • This is the biggest fundamental difference that sets Sitecatalyst apart from other tools. Unfortunately, it’s also difficult to articulate succinctly. This gives Sitecatalyst a lot of its power and flexibility, in that it involves the highest amount of control right at the point where the user action occurs. The downside is that it requires a lot of up-front thought and planning to implement the tool in a way that makes use of that control, and it’s easy for an implementation to degrade quickly if someone who understands the rationale behind the eVar, prop, and events configuration isn’t available to keep an eye on things. In my experience, the staunchest supporters of Sitecatalyst are the first ones to point out that most implementations of the tool aren’t up to their standards, and, thus, aren’t delivering the value that they could.
  • http://www.slideshare.net/eljefe/jquery-mobile-for-fun-and-profithttp://www.slideshare.net/davyjones/html5-is-the-future-of-mobile-phonegap-takes-you-there-todayhttp://www.phonegap.com/apps
  • This is the biggest fundamental difference that sets Sitecatalyst apart from other tools. Unfortunately, it’s also difficult to articulate succinctly. This gives Sitecatalyst a lot of its power and flexibility, in that it involves the highest amount of control right at the point where the user action occurs. The downside is that it requires a lot of up-front thought and planning to implement the tool in a way that makes use of that control, and it’s easy for an implementation to degrade quickly if someone who understands the rationale behind the eVar, prop, and events configuration isn’t available to keep an eye on things. In my experience, the staunchest supporters of Sitecatalyst are the first ones to point out that most implementations of the tool aren’t up to their standards, and, thus, aren’t delivering the value that they could.
  • This is the biggest fundamental difference that sets Sitecatalyst apart from other tools. Unfortunately, it’s also difficult to articulate succinctly. This gives Sitecatalyst a lot of its power and flexibility, in that it involves the highest amount of control right at the point where the user action occurs. The downside is that it requires a lot of up-front thought and planning to implement the tool in a way that makes use of that control, and it’s easy for an implementation to degrade quickly if someone who understands the rationale behind the eVar, prop, and events configuration isn’t available to keep an eye on things. In my experience, the staunchest supporters of Sitecatalyst are the first ones to point out that most implementations of the tool aren’t up to their standards, and, thus, aren’t delivering the value that they could.
  • My time is up!
  • This is the biggest fundamental difference that sets Sitecatalyst apart from other tools. Unfortunately, it’s also difficult to articulate succinctly. This gives Sitecatalyst a lot of its power and flexibility, in that it involves the highest amount of control right at the point where the user action occurs. The downside is that it requires a lot of up-front thought and planning to implement the tool in a way that makes use of that control, and it’s easy for an implementation to degrade quickly if someone who understands the rationale behind the eVar, prop, and events configuration isn’t available to keep an eye on things. In my experience, the staunchest supporters of Sitecatalyst are the first ones to point out that most implementations of the tool aren’t up to their standards, and, thus, aren’t delivering the value that they could.
  • Cross platform mobile app

    1. 1. Cross-Platform Mobile App Mobile App Development Choices 2013 Hong Liu, ( hong.liu@live.cn / @honglio )
    2. 2. Why a Mobile App? 2
    3. 3. Reasons for apps Time Spend • Entertainment 42.86% • Watching video 9.39% • Listening music 15.64% • Playing games 14.44% • Taking photographs 3.42% • Marketing and Sales 28.59% • Messaging on social networks 17.49% • Writing emails 11.1% • Access to information 28.55% 3
    4. 4. Let’s start to build an App! 4
    5. 5. Native App 5
    6. 6. Native App Android Windows Phone iOS Java C#, VB.net, VB Objective C / C UI Framework Java App Framework SilverLight Cocoa Touch Game Library AndEngine XNA Cocos2D 3D OpenGL ES DirectX OpenGL ES Location based Google Map Bing (Google Map) Google Map Program Language 6
    7. 7. Objective-C Apps HTML 5, CSS, JavaScript Apps Cocoa Touch UIKit, Animation, Multitasking, Gesture Recognizers, PushNotification MEDIA CoreGraphics, Text, OpenGL ES, Core Animation, AVFoundation, Core Audio, video CORE Services string, collection, network, contact, GPS, compass, accelerometer, gyroscope CORE OS kernel, file, network, security, power, device drivers
    8. 8. Native App Workflow Mechanism: UI + some application logic Native App Device Pro: native style guides, easy to learn, direct access to all sensors. Con: Vendor lock-in, device-specific optimizations Mechanism: Central application logic Web Server Backend Pro: data model can be stored into multiple place. (SQL databases). Con: Vendor lock-in Database 10 K 
    9. 9. Implement native apps for all platforms, add cost to your project. 11
    10. 10. The solution is the Mobile Web. 12
    11. 11. 13
    12. 12. Web App 14
    13. 13. Server-side Web App  Mechanism: Just a renderer Web Browser Device Pro: No learning curve, as we already know it. Con: Limited access to HW feature & APIs, Create complex behavior by chaining pages K Mechanism: UI and application logic Web Server Backend Pro: Break Vendor lock-in. Con: Inferior performance. Database 15
    14. 14. Yahoo!’s 14 Performance Rules 1. Minimize HTTP Requests 2. Use a Content Delivery Network 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 3. Add an Expires or a CacheControl Header 10. Minify JavaScript and CSS 4. Gzip Components 12. Remove Duplicate Scripts 5. Put Stylesheets at the Top 13. Configure ETags 6. Put Scripts at the Bottom 14. Make Ajax Cacheable 11. Avoid Redirects 7. Avoid CSS Expressions 16
    15. 15. Client-side Web App Mechanism: UI+ some application logic Web Browser Device Pro: No learning curve, as we already know it. Con: Limited access to HW feature & APIs Mechanism: Central application logic Web Server Backend K  Pro: Break Vendor lock-in, Con: None Database 17
    16. 16. Client-side Web App Full-stack Workflow HTTP Request RequireJs jQuery Twitter Bootstrap Handlebars REST API Backbone Authorization DOM Update Front-End Back-End Node.js JSON MongoDB Search Stream Https AJAX Proxy Sign-on Logger 18
    17. 17. Appearance Side-by-Side Comparison Web App Native App Web App Native App 19
    18. 18. Client-slide Web Apps Frameworks 20
    19. 19. Hybrid App Native App JavaScript Interpreter Mechanism: UI+ some application logic Device Pro: new tool chain (takes getting used to). Con: direct access to all sensors. Mechanism: Central application logic Web Server Backend K  Pro: Break Vendor lock-in, Con: None Database 21
    20. 20. Hybrid Apps Frameworks 22
    21. 21. Question?

    ×