HTML5 vs. native Apps

5,223 views
5,083 views

Published on

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

No Downloads
Views
Total views
5,223
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
58
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML5 vs. native Apps

  1. 1. HTML5 vs.native Apps
  2. 2. 2
  3. 3. • 3D Casual Game• 200.000 Players world-wide• critically acclaimed• average rating of 4-5 stars• featured on Apple‘s App Stores
  4. 4. PAPEOevolution of themenu
  5. 5. 6
  6. 6. Apps 7
  7. 7. Android Apps iOS 8
  8. 8. Samsung Smart TV PS3 Blackberry Android SymbianXbox Apps Google TV iOS webOSWindows Phone 7 9
  9. 9. Samsung Smart TV Android Objective-C PS3Xbox webOS C# Native Apps iOSWindows Phone 7 HTML / JS C / C++ Google TVJava Blackberry Symbian 10
  10. 10. Native Apps 11
  11. 11. Code schreiben kompilieren native App 12
  12. 12. Yay! 13
  13. 13. Objective-Ckompilieren iOS App 14
  14. 14. Objective-C Javakompilieren kompilieren iOS App Android App 15
  15. 15. Objective-C Java C#kompilieren kompilieren kompilieren iOS App Android App WP7 App 16
  16. 16. #import <stdio.h>int main( int argc, const char *argv[] ) { printf( "hello worldn" ); return 0;} 17
  17. 17. public class HelloWorld{ public static void main(String[] args) { System.out.println("HelloWorld"); }} 18
  18. 18. using System;namespace HelloWorld{ class Hello { static void Main() { System.Console.WriteLine("Hello World!"); } }} 19
  19. 19. Vorteile von nativen Apps• bessere Performance• längere Akku-Laufzeit• Zugriff auf die gesamte API des Gerätes• native User Interfaces 20
  20. 20. Nachteile von nativen Apps• 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) 21
  21. 21. 22
  22. 22. Eine Alternative 23
  23. 23. Objective-C Java C#kompilieren kompilieren kompilieren iOS App Android App WP7 App 24
  24. 24. Generic Codekompilieren kompilieren kompilieren iOS App Android App WP7 App 25
  25. 25. Generic CodeiOS App Android App WP7 App 26
  26. 26. HTMLiOS App Android App WP7 App 27
  27. 27. + JavaScript HTML5 + CSS3iOS App Android App WP7 App 28
  28. 28. + CSS3 + JavaScript HTML5 Logo by W3C 29
  29. 29. HTML5 / CSS3 / JavaScriptHTML5 JavaScript • Struktur • Logik • InhalteCSS3 • Gestaltung 30
  30. 30. Wichtige Neuerungen in HTML5• 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 31
  31. 31. <!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> 32
  32. 32. Wichtige Neuerungen in CSS3• Transparenz / Transparente Farben• Ränder (Radius, Bilder etc.)• Schatten• Eigene Schriften (@font-face)• Transformationen / 3D Transformationen• Animationen 33
  33. 33. p { font-size: 10px; font-weight: bold; color: red; background: green;} 34
  34. 34. p { font-size: 10px; font-weight: bold; color: red; background: green; border-radius: 15px; box-shadow: 10px 10px 5px #888;} 35
  35. 35. JavaScript• Scriptsprache• Objektorientiert• funktionale / prozedurale Programmierung ebenso möglich• sehr flexible Programmiersprache 36
  36. 36. alert("Hello World!"); 37
  37. 37. var world = {!hello: "Hello World!"}alert(world.hello); 38
  38. 38. var world = {!hello: function() { ! return "Hello World!"!}}alert(world.hello()); 39
  39. 39. var World = function(){!return {!! hello: function() {!! ! return "Hello World!"!! }!}}var w = new World()alert(w.hello()); 40
  40. 40. AppsHTML5 Logo by W3C 41
  41. 41. HTML5 Mobile Frameworks• Sencha Touch• jQuery Mobile• jQTouch• etc. 42
  42. 42. Sencha Touch 1• Android, iOS, Blackberry• nativ aussehende UIs• schnell auf iOS• langsam auf Android und Blackberry• MVC-Architektur• großer Funktionsumfang Quelle: http://www.sencha.com/products/touch/• Sencha Touch 2 viel schneller auf allen Geräten (noch Beta) 43
  43. 43. 44
  44. 44. 45
  45. 45. jQuery Mobile• viele Plattformen• einheitliches UI, das nicht versucht nativ zu wirken• nur Darstellung• keine Anwendungslogik Quelle: http://jquerymobile.com/ 46
  46. 46. Mobile Web Frameworks• Backbone.js• SproutCore / Ember.js• jQuery• Zepto.js• XUI• etc. 47
  47. 47. iCloud.com by Apple 48
  48. 48. Google Docs by Google 49
  49. 49. Basecamp Mobile. Quelle: http://basecamphq.com/mobile 50
  50. 50. HTML5 + CSS3 + JavaScript Browser / WebView 51
  51. 51. Vorteile von reinen HTML5-Apps• 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 52
  52. 52. Nachteile von reinen HTML5-Apps• 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 53
  53. 53. Hybride Lösungen 54
  54. 54. Reine HTML5-App HTML5 + CSS3 + JavaScript Browser / WebView 55
  55. 55. Phonegap-App HTML5 + CSS3 + JavaScript WebView JS + native Plugins Phonegap Container 56
  56. 56. Phonegap-App• 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 57
  57. 57. 58
  58. 58. Rhodes-App HTML5 + CSS3 + JavaScript WebView lokaler Webserver Ruby App Ruby VM native Plugins Rhodes Container 59
  59. 59. Rhodes-AppVorteile 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 60
  60. 60. Titanium-App HTML5 + JavaScript Compiler iOS App Android App 61
  61. 61. Titanium-App HTML5 + JavaScript „Black Magic“ iOS App Android App 62
  62. 62. Titanium-AppVorteile• HTML + JavaScript wird zu nativem Code kompiliert• Performance und Aussehen sehr ähnlich einer nativen AppNachteile• Debugging-Hölle• Nur iOS und Android• Keine Browser-App 63
  63. 63. Eigene Mischformen HTML5 + CSS3 + JavaScript native Komponenten WebViews Eigener nativer Container 64
  64. 64. Quelle: https://www.facebook.com/media/set/?set=a.10150347425753380.353125.6628568379&type=3 65
  65. 65. Quelle: https://market.android.com/details?id=com.facebook.katana&hl=en 66
  66. 66. Quelle: http://itunes.apple.com/us/app/netflix/id363590051?mt=8 67
  67. 67. Zusammenfassung 68
  68. 68. ? doPanic GmbH Neupfarrplatz 16 93047 Regensburg Telefon +49 (0) 941 280 461 10 Telefax +49 (0) 941 280 461 11 Vortrag Daniel Dengler E-Mail ddengler@dopanic.com Web www.dopanic.com

×