SlideShare ist ein Scribd-Unternehmen logo

Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)

Mit Sencha Touch, jQuery Mobile und Co. gibt es viele Spezialframeworks für die Entwicklung mobiler Anwendungen und Hybrid-Apps, alle mit unterschiedlichen Vor- und Nachteilen. Jedes fügt der Architekur eine zusätzliche Komplexität hinzu. Und noch löst keines das Versprechen echter Plattformunabhängigkeit ein. Warum also nicht gleich auf reines HTML5 gehen und mit einem allgemeinen MVC-Framework kombinieren? AngularJS ist ein Framework von Google zur Entwicklung von Rich Web Applications und hilft, typische Wartbarkeitsprobleme im Umgang mit HTML und JavaScript einzudämmen. Aber eignet sich AngularJS auch für mobile Apps? Dieser Vortrag stellt AngularJS zunächst vor und zeigt anhand einer Beispielapp, wie sich auf Basis von AngularJS und HTML5 mobile Anwendungen erstellen lassen. Insbesondere wird dabei untersucht, in wie weit solche Lösungen plattformunabhängig und wartbar sind.

1 von 19
Downloaden Sie, um offline zu lesen
Mobile Apps mit AngularJS und Plain Old HTML5
Über uns
228.05.2013Copyright © 2010 – akquinet AG
Philipp Kumar
philipp.kumar@akquinet.de
Mobile Competence Center
Till Hermsen
till.hermsen@akquinet.de
Mobile Competence Center
akquinet AG
328.05.2013Copyright © 2013 – akquinet AG
Business Consulting
JAVA
Business Solutions
‒ JBoss
‒ Websphere
‒ OSGi
Mobile Solutions
‒ Android
‒ iPhone
Innovative Solutions
User Experience
‒ Analyse
‒ Konzeption
Open Source
Microsoft / .NET
Dynamics NAV
Dynamics AX
Dynamics CRM
Sharepoint / .NET
Branchenlösungen
‒ care concept
‒ easy san
‒ opus curare
Telematik
Internationale
Projekte
Outsourcing
IT-Consulting &
Projekte
Outsourcing &
Services
RZ-Betrieb
Business Process
Outsourcing
SAP
SAP-Security &
Compliance
BRM/BRO (Business
Rules Management)
SAP Consulting
CRM, SCM, SRM
Logistik, Finance
SAP Development
SAP Technologie
SAP Basis
Open Text
Agenda
1. Mobile Web Frameworks
2. AngularJS + HTML5: Eine Alternative
3. Bewertung und Fazit
428.05.2013Copyright © 2013 – akquinet AG
Anwendungsklassen mobiler Anwendungen
528.05.2013Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile
Anwendungen
Anwendungsklassen mobiler Anwendungen
628.05.2013Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid
Mobile
Anwendungen
Anzeige

Recomendados

Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...
Mobile UX: Interaktions- und Designmuster auf Android und iOS (Linuxtag 2013,...philippkumar
 
Zukunft individueller Software in Unternehmen
Zukunft individueller Software in UnternehmenZukunft individueller Software in Unternehmen
Zukunft individueller Software in UnternehmenPOINT. Consulting GmbH
 
Microsoft Azure in der Unternehmenspraxis
Microsoft Azure in der UnternehmenspraxisMicrosoft Azure in der Unternehmenspraxis
Microsoft Azure in der UnternehmenspraxisPOINT. Consulting GmbH
 
Splunk Discovery Day Düsseldorf 2016 - Use Case GDIS
Splunk Discovery Day Düsseldorf 2016 - Use Case GDISSplunk Discovery Day Düsseldorf 2016 - Use Case GDIS
Splunk Discovery Day Düsseldorf 2016 - Use Case GDISSplunk
 
20160130_Cassini_C_Seiler_Connected_Car_Erfahrung
20160130_Cassini_C_Seiler_Connected_Car_Erfahrung20160130_Cassini_C_Seiler_Connected_Car_Erfahrung
20160130_Cassini_C_Seiler_Connected_Car_ErfahrungChristian Seiler
 
Forms 11g und das iPhone - OPITZ CONSULTING - Gerd Volberg
Forms 11g und das iPhone - OPITZ CONSULTING - Gerd VolbergForms 11g und das iPhone - OPITZ CONSULTING - Gerd Volberg
Forms 11g und das iPhone - OPITZ CONSULTING - Gerd VolbergOPITZ CONSULTING Deutschland
 
ISARCAMP: Cassini / Christoph Baumeister - die vision, der rote faden für ihr...
ISARCAMP: Cassini / Christoph Baumeister - die vision, der rote faden für ihr...ISARCAMP: Cassini / Christoph Baumeister - die vision, der rote faden für ihr...
ISARCAMP: Cassini / Christoph Baumeister - die vision, der rote faden für ihr...ISARNETZ
 
Develop hybrid apps with Ionic Framework and Angular Js - Alessio Delmonti
Develop hybrid apps with Ionic Framework and Angular Js - Alessio DelmontiDevelop hybrid apps with Ionic Framework and Angular Js - Alessio Delmonti
Develop hybrid apps with Ionic Framework and Angular Js - Alessio DelmontiAlessio Delmonti
 

Más contenido relacionado

Destacado

Hybrid app development
Hybrid app developmentHybrid app development
Hybrid app developmentHyunjin Shin
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Power Point PKN Bab Persamaan warga negara
Power Point PKN Bab Persamaan warga negaraPower Point PKN Bab Persamaan warga negara
Power Point PKN Bab Persamaan warga negaraNafisatul Layli
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksJuarez Filho
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkCihad Horuzoğlu
 

Destacado (7)

Hybrid app development
Hybrid app developmentHybrid app development
Hybrid app development
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
Hybrid HTML5 Apps
Hybrid HTML5 AppsHybrid HTML5 Apps
Hybrid HTML5 Apps
 
Power Point PKN Bab Persamaan warga negara
Power Point PKN Bab Persamaan warga negaraPower Point PKN Bab Persamaan warga negara
Power Point PKN Bab Persamaan warga negara
 
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocksIonic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
 
Hybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic FrameworkHybrid Apps with Angular & Ionic Framework
Hybrid Apps with Angular & Ionic Framework
 

Ähnlich wie Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...Oliver Busse
 
Rapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSRapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSOPITZ CONSULTING Deutschland
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.Johannes Waibel
 
Microprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EEMicroprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EEMichael Hofmann
 
Migration von Aftersales Systemen auf eine Cloud Plattform
Migration von Aftersales Systemen auf eine Cloud PlattformMigration von Aftersales Systemen auf eine Cloud Plattform
Migration von Aftersales Systemen auf eine Cloud PlattformQAware GmbH
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)die.agilen GmbH
 
Erp in der zukunft: über die funktionen hinaus
Erp in der zukunft: über die funktionen hinausErp in der zukunft: über die funktionen hinaus
Erp in der zukunft: über die funktionen hinausDedagroup
 
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit Agorava
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit AgoravaJavaLand: Quantified Social - Fitness-Geräte und -Portale mit Agorava
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit AgoravaWerner Keil
 
Sicherheitsaspekte bei der Einführung von BYOD in Unternehmen
Sicherheitsaspekte bei der Einführung von BYOD in UnternehmenSicherheitsaspekte bei der Einführung von BYOD in Unternehmen
Sicherheitsaspekte bei der Einführung von BYOD in Unternehmenphilippkumar
 
Oracle Mobile Cloud Service im Einsatz
Oracle Mobile Cloud Service im EinsatzOracle Mobile Cloud Service im Einsatz
Oracle Mobile Cloud Service im EinsatzVolker Linz
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Manfred Steyer
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Manfred Steyer
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...Marc Müller
 
Building Blocks for Mobile
Building Blocks for MobileBuilding Blocks for Mobile
Building Blocks for MobileGil Breth
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UIgedoplan
 
SnT DataCenter Services
SnT DataCenter ServicesSnT DataCenter Services
SnT DataCenter ServicesS&T AG
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5kkramhoeft
 
Das Mobile Prozesse Team - Mobilität für Ihr Business!
Das Mobile Prozesse Team - Mobilität für Ihr Business!Das Mobile Prozesse Team - Mobilität für Ihr Business!
Das Mobile Prozesse Team - Mobilität für Ihr Business!AFF Group
 

Ähnlich wie Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin) (20)

DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
DNUG 38: "Einen Rahmen schaffen: Vorteile durch Frameworks in der Domino-Webe...
 
Rapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJSRapid Application Development mit Grails und AngularJS
Rapid Application Development mit Grails und AngularJS
 
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen. 2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
2016 - Mobile Revolution - Fachvortrag an der FHS St.Gallen.
 
Microprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EEMicroprofile.io - Cloud Native mit Java EE
Microprofile.io - Cloud Native mit Java EE
 
Migration von Aftersales Systemen auf eine Cloud Plattform
Migration von Aftersales Systemen auf eine Cloud PlattformMigration von Aftersales Systemen auf eine Cloud Plattform
Migration von Aftersales Systemen auf eine Cloud Plattform
 
Angular 2 Slides
Angular 2 SlidesAngular 2 Slides
Angular 2 Slides
 
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)jQuery Mobile Kompakt  - das Kompendium - über 150 Seiten (typovision)
jQuery Mobile Kompakt - das Kompendium - über 150 Seiten (typovision)
 
Erp in der zukunft: über die funktionen hinaus
Erp in der zukunft: über die funktionen hinausErp in der zukunft: über die funktionen hinaus
Erp in der zukunft: über die funktionen hinaus
 
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit Agorava
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit AgoravaJavaLand: Quantified Social - Fitness-Geräte und -Portale mit Agorava
JavaLand: Quantified Social - Fitness-Geräte und -Portale mit Agorava
 
Sicherheitsaspekte bei der Einführung von BYOD in Unternehmen
Sicherheitsaspekte bei der Einführung von BYOD in UnternehmenSicherheitsaspekte bei der Einführung von BYOD in Unternehmen
Sicherheitsaspekte bei der Einführung von BYOD in Unternehmen
 
Oracle Mobile Cloud Service im Einsatz
Oracle Mobile Cloud Service im EinsatzOracle Mobile Cloud Service im Einsatz
Oracle Mobile Cloud Service im Einsatz
 
Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015Angular 2 Workshop November 2015 von der w-jax 2015
Angular 2 Workshop November 2015 von der w-jax 2015
 
Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015Angular 2 Workshop Oktober 2015
Angular 2 Workshop Oktober 2015
 
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
DWX 2017 - Alternativen zu Visual-Studio-Testtools: Wann lohnt es sich auch m...
 
Building Blocks for Mobile
Building Blocks for MobileBuilding Blocks for Mobile
Building Blocks for Mobile
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
SnT DataCenter Services
SnT DataCenter ServicesSnT DataCenter Services
SnT DataCenter Services
 
Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5Mobile Webentwicklung mit HTML5
Mobile Webentwicklung mit HTML5
 
Das Mobile Prozesse Team - Mobilität für Ihr Business!
Das Mobile Prozesse Team - Mobilität für Ihr Business!Das Mobile Prozesse Team - Mobilität für Ihr Business!
Das Mobile Prozesse Team - Mobilität für Ihr Business!
 

Mobile Apps mit AngularJS und Plain Old HTML5 (Linuxtag 2013, Berlin)

  • 1. Mobile Apps mit AngularJS und Plain Old HTML5
  • 2. Über uns 228.05.2013Copyright © 2010 – akquinet AG Philipp Kumar philipp.kumar@akquinet.de Mobile Competence Center Till Hermsen till.hermsen@akquinet.de Mobile Competence Center
  • 3. akquinet AG 328.05.2013Copyright © 2013 – akquinet AG Business Consulting JAVA Business Solutions ‒ JBoss ‒ Websphere ‒ OSGi Mobile Solutions ‒ Android ‒ iPhone Innovative Solutions User Experience ‒ Analyse ‒ Konzeption Open Source Microsoft / .NET Dynamics NAV Dynamics AX Dynamics CRM Sharepoint / .NET Branchenlösungen ‒ care concept ‒ easy san ‒ opus curare Telematik Internationale Projekte Outsourcing IT-Consulting & Projekte Outsourcing & Services RZ-Betrieb Business Process Outsourcing SAP SAP-Security & Compliance BRM/BRO (Business Rules Management) SAP Consulting CRM, SCM, SRM Logistik, Finance SAP Development SAP Technologie SAP Basis Open Text
  • 4. Agenda 1. Mobile Web Frameworks 2. AngularJS + HTML5: Eine Alternative 3. Bewertung und Fazit 428.05.2013Copyright © 2013 – akquinet AG
  • 5. Anwendungsklassen mobiler Anwendungen 528.05.2013Copyright © 2013 – akquinet AG (1) Mobile Web (2) Native Shell (3) Hybrid (4) Native Mobile Anwendungen
  • 6. Anwendungsklassen mobiler Anwendungen 628.05.2013Copyright © 2013 – akquinet AG (1) Mobile Web (2) Native Shell (3) Hybrid Mobile Anwendungen
  • 8. Mobile Apps mit AngularJS + HTML 5 Ext.define('User', { extend: 'Ext.data.Model', config: { fields: [ {name: 'id', type: 'int'}, {name: 'name', type:'string'} ] } }); Model Ext.define('MyApp.controller.Main', { extend: 'Ext.app.Controller', config: { refs: { nav: '#mainNav' } }, addLogoutButton: function() { this.getNav().add({ text: 'Logout' }); } }); View Controller Ext.define('MyApp.view.Welcome', { extend: 'Ext.Panel', config: { html: 'Welcome to my app', fullscreen: true } });
  • 9. Mobile Apps mit AngularJS + HTML 5 <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>jQuery mobile</h1> </div> <ul id="result" data-role="listview"> <li>Dolor Ultricies</li> <li>Ligula Vulputate</li> <li>Parturient</li> </ul> </div> HTML Template $.ajax({ ... success: function(response) { $.each(response.items, function(i, item) { $("#result").append("<li>" + item.name + "</li>"); }); } }); JavaScript
  • 10. Mobile Apps mit AngularJS + HTML 5 Demo
  • 12. Grundlegende Eigenschaften von AngularJS  Model View Controller  Modularisierungskonzept  Dependency Injection  Gute Integration von Unit- und Ende-zu-Ende-Tests 1328.05.2013Copyright © 2013 – akquinet AG
  • 13. Mobile Apps mit AngularJS + HTML 5 angular.module("MyApp", []). controller("MyController", [ "$scope", function($scope) { $scope.model = { name: "world“ }; } ]); Model angular.module("MyApp", []). controller("MyController", [ "$scope", function($scope) { $scope.model = { ... }; $scope.formSubmit = function(data) { //... }; } ]); View Controller <div ng-controller="MyController"> <form ng-submit="formSubmit()"> <input type="text" ng-model="model.name"> </form> {{ model.name }} </div>
  • 14. Was fehlt für mobil? 1528.05.2013Copyright © 2013 – akquinet AG UI Komponenten Mobilspezifika AngularJS
  • 15. Was fehlt für mobil? 1628.05.2013Copyright © 2013 – akquinet AG UI Komponenten UI Komponenten AngularJS
  • 16. Was fehlt für mobil? 1728.05.2013Copyright © 2013 – akquinet AG Mobilspezifika UI Komponenten AngularJS
  • 17. Frameworks aus unserem Beispiel 1828.05.2013Copyright © 2013 – akquinet AG iScroll, Hammer.js Bootstrap AngularJS
  • 18. Bewertung und Fazit 1928.05.2013Copyright © 2013 – akquinet AG Kontrolle Wartbarkeit Performance