mobile apps mit angularjs und plain old html5 (linuxtag 2013, berlin)
DESCRIPTION
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.TRANSCRIPT
Mobile Apps mit AngularJS und Plain Old HTML5
212.04.2023Copyright © 2010 – akquinet AG
Über uns
Philipp [email protected] Competence Center
Till [email protected]
Mobile Competence Center
312.04.2023
akquinet AG
Copyright © 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 (BusinessRules Management)
SAP Consulting CRM, SCM, SRM Logistik, Finance
SAP Development
SAP TechnologieSAP Basis
Open Text
412.04.2023
Agenda
1. Mobile Web Frameworks
2. AngularJS + HTML5: Eine Alternative
3. Bewertung und Fazit
Copyright © 2013 – akquinet AG
512.04.2023
Anwendungsklassen mobiler Anwendungen
Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile Anwendungen
612.04.2023
Anwendungsklassen mobiler Anwendungen
Copyright © 2013 – akquinet AG
(1) Mobile Web (2) Native Shell
(3) Hybrid (4) Native
Mobile Anwendungen
712.04.2023
HTML5: Mobile Frameworks
Copyright © 2013 – akquinet AG
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 }});
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
Mobile Apps mit AngularJS + HTML 5
Demo
1212.04.2023
Eine Alternative
Copyright © 2013 – akquinet AG
Grundlegende Eigenschaften von AngularJS
Model View Controller Modularisierungskonzept Dependency Injection Gute Integration von Unit- und Ende-zu-Ende-Tests
1312.04.2023Copyright © 2013 – akquinet AG
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>
1512.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
UI Komponenten
Mobilspezifika
AngularJS
1612.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
UI Komponenten
UI Komponenten
AngularJS
1712.04.2023
Was fehlt für mobil?
Copyright © 2013 – akquinet AG
Mobilspezifika
UI Komponenten
AngularJS
1812.04.2023
Frameworks aus unserem Beispiel
Copyright © 2013 – akquinet AG
iScroll, Hammer.js
Bootstrap
AngularJS
1912.04.2023
Bewertung und Fazit
Copyright © 2013 – akquinet AG
Kontrolle
Wartbarkeit
Performance
2012.04.2023Copyright © 2010 – akquinet AG
Links
http://blog.akquinet.de/
http://angularjs.org/
http://twitter.github.io/bootstrap/
http://cubiq.org/iscroll-4
http://eightmedia.github.io/hammer.js/
@akquinet