html5 vs. native apps
Post on 20-Jan-2015
4.781 Views
Preview:
DESCRIPTION
TRANSCRIPT
HTML5 vs.native Apps
2
• 3D Casual Game
• 200.000 Players world-wide
• critically acclaimed
• average rating of 4-5 stars
• featured on Apple‘s App Stores
evolution of the menu
PAPEO
6
Apps
7
Apps
8
iOSAndroid
Apps
9
iOS
AndroidSymbian
Windows Phone 7webOS
BlackberrySamsung Smart TV
Google TV
PS3
Xbox
Native Apps
10
Objective-C
JavaC / C++
C# iOS
Android
Symbian
Windows Phone 7
webOS
Blackberry
Samsung Smart TV
Google TV
PS3Xbox
HTML / JS
Native Apps
11
12
Code schreiben
kompilieren
native App
Yay!13
14
Objective-C
kompilieren
iOS App
15
Objective-C
kompilieren
iOS App
Java
kompilieren
Android App
16
Objective-C
kompilieren
iOS App
Java
kompilieren
Android App
C#
kompilieren
WP7 App
17
#import <stdio.h>
int main( int argc, const char *argv[] ) { printf( "hello world\n" ); return 0;}
18
public class HelloWorld{ public static void main(String[] args) { System.out.println("HelloWorld"); }}
19
using System;namespace HelloWorld{ class Hello { static void Main() { System.Console.WriteLine("Hello World!"); } }}
Vorteile von nativen Apps
20
•bessere Performance
• längere Akku-Laufzeit
•Zugriff auf die gesamte API des Gerätes
•native User Interfaces
Nachteile von nativen Apps
21
• auf jeweils eine Plattform beschränkt
• Memory Mangement Probleme
• Kompilieren ist zeitaufwändig
• hoher Aufwand bei der Portierung auf verschiedene Plattformen
• hoher Wartungsaufwand über die Lebenszeit der App
• hoher Lernaufwand für Neueinsteiger(insbesondere Objective-C)
22
Eine Alternative
23
24
Objective-C
kompilieren
iOS App
Java
kompilieren
Android App
C#
kompilieren
WP7 App
25
kompilieren
iOS App
Generic Code
kompilieren
Android App
kompilieren
WP7 App
26
iOS App
Generic Code
Android App WP7 App
27
iOS App
HTML
Android App WP7 App
28
iOS App
HTML5
Android App WP7 App
+ JavaScript+ CSS3
29HTML5 Logo by W3C
+ CSS3 + JavaScript
HTML5 / CSS3 / JavaScript
30
HTML5•Struktur• Inhalte
CSS3•Gestaltung
JavaScript•Logik
Wichtige Neuerungen in HTML5
31
• Erweiterung der Formularelemente(Date, Time, URL, E-Mail, Farbe etc.)
• Audio- und Video-Elemente• Canvas-Element• SVG-Support• Manipulation der History• Offline Support• Local Storage• Web Sockets
32
<!DOCTYPE html><html>!<head>!! <meta
http-equiv="Content-type" content="text/html; charset=utf-8">
!! <title>Hello World!</title>!</head>!<body>!! <p>Hello World!</p>!</body></html>
Wichtige Neuerungen in CSS3
33
•Transparenz / Transparente Farben•Ränder (Radius, Bilder etc.)•Schatten•Eigene Schriften (@font-face)•Transformationen / 3D Transformationen•Animationen
34
p { font-size: 10px; font-weight: bold; color: red; background: green;}
35
p { font-size: 10px; font-weight: bold; color: red; background: green; border-radius: 15px; box-shadow: 10px 10px 5px #888;}
JavaScript
36
•Scriptsprache•Objektorientiert• funktionale / prozedurale
Programmierung ebenso möglich•sehr flexible Programmiersprache
37
alert("Hello World!");
38
var world = {!hello: "Hello World!"}
alert(world.hello);
39
var world = {!hello: function() {!return "Hello World!"
!}}
alert(world.hello());
40
var World = function(){!return {!! hello: function() {!! !return "Hello World!"!! }!}}
var w = new World()alert(w.hello());
41HTML5 Logo by W3C
Apps
HTML5 Mobile Frameworks
42
•Sencha Touch• jQuery Mobile• jQTouch•etc.
Sencha Touch 1
43
• Android, iOS, Blackberry• nativ aussehende UIs• schnell auf iOS• langsam auf Android
und Blackberry• MVC-Architektur• großer Funktionsumfang
• Sencha Touch 2 viel schneller auf allen Geräten(noch Beta)
Quelle: http://www.sencha.com/products/touch/
44
45
jQuery Mobile
46
• viele Plattformen
• einheitliches UI, das nichtversucht nativ zu wirken
• nur Darstellung
• keine AnwendungslogikQuelle: http://jquerymobile.com/
Mobile Web Frameworks
47
•Backbone.js•SproutCore / Ember.js• jQuery•Zepto.js•XUI•etc.
48
iCloud.com by Apple
49
Google Docs by Google
50
Basecamp Mobile. Quelle: http://basecamphq.com/mobile
51
Browser / WebView
HTML5 + CSS3 + JavaScript
Vorteile von reinen HTML5-Apps
52
•viele Plattformen gleichzeitig möglich•einfachere Gestaltungsmöglichkeiten•Web-Anwendung direkt mit dabei•Geringer Wartungsaufwand bei
unterschiedlichen Plattformen•einfacher für Neueinsteiger•während der Entwicklung Live-Vorschau
im Browser ohne kompilieren
Nachteile von reinen HTML5-Apps
53
• schlechtere Performance• nur Zugriff auf eine geringe Anzahl nativer
Features• keine Installation über die App-Stores
möglich -> App wird nicht im Store gefunden
• kürzere Akku-Laufzeit• bei rechenintensiven Apps kaum einsetzbar
Hybride Lösungen
54
Reine HTML5-App
55
Browser / WebView
HTML5 + CSS3 + JavaScript
Phonegap-App
56
WebView
HTML5 + CSS3 + JavaScript
Phonegap Container
JS + native Plugins
Phonegap-App
57
•Zugriff auf viele native Features möglich
•Plugin-Architektur erlaubt einfache Erweiterung
•viele mobile Plattformen werden unterstützt
• rechenintensive Codeabschnitte müssen für jede Plattform nativ als Plugin erstellt werden
58
Rhodes-App
59
lokaler Webserver
HTML5 + CSS3 + JavaScript
Rhodes Container
Ruby VM native Plugins
WebView
Ruby App
Rhodes-App
60
Vorteile wie Phonegap und• rechenintensive Codeabschnitte müssen NICHT
für jede Plattform als Plugin erstellt werden (Ruby Bytecode)
• bessere Performance für Applikationslogik(Darstellungs-Performance unverändert)
Nachteil• höher Lernaufwand
Titanium-App
61
HTML5 + JavaScript
Compiler
iOS App Android App
Titanium-App
62
HTML5 + JavaScript
„Black Magic“
iOS App Android App
Titanium-App
63
Vorteile
• HTML + JavaScript wird zu nativem Code kompiliert
• Performance und Aussehen sehr ähnlich einer nativen App
Nachteile
• Debugging-Hölle
• Nur iOS und Android
• Keine Browser-App
Eigene Mischformen
64
WebViews
HTML5 + CSS3 + JavaScript
Eigener nativer Container
native Komponenten
65Quelle: https://www.facebook.com/media/set/?set=a.10150347425753380.353125.6628568379&type=3
66Quelle: https://market.android.com/details?id=com.facebook.katana&hl=en
67Quelle: http://itunes.apple.com/us/app/netflix/id363590051?mt=8
Zusammenfassung
68
? doPanic GmbHNeupfarrplatz 1693047 Regensburg
Telefon +49 (0) 941 280 461 10Telefax +49 (0) 941 280 461 11
Vortrag Daniel Dengler
E-Mail ddengler@dopanic.com Web www.dopanic.com
top related