HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
Morgens halb zehn in Deutschland: Der Puls Ihrer Anwender ist mittlerweile im dreistelligen Bereich und die ersten User denken ernsthaft darüber nach, den PC aus dem Fenster zu werfen. Ursache: Die von Ihnen entwickelte webbasierte App bremst die Nutzer stets an den entscheidenden Stellen aus. An produktives Arbeiten ist kaum noch zu denken und Überstunden stehen auf dem Tagesprogramm. Doch so weit muss es gar nicht kommen. Glückliche Anwender sind nur wenige Handgriffe entfernt. Und genau diese Handgriffe, wird Ihnen André Krämer in diesem Vortrag zeigen. Gemeinsam werden wir den Ursachen langsamer Web- und Mobile-Apps in den Bereichen JavaScript, CSS und Co. auf den Grund gehen und diese Schritt für Schritt eliminieren.
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
Kurzbeschreibung
Beschreibung: Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet. Dozent: Peter Hecker, GFU Cyrus AG
Inhalt
- Einführung und Motivation
- Die WebKit-Plattform
- Überblick "mobile" Frameworks
- Zusammenfassung und Fazit
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK und Apache Cordova ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Plattform Entwickler auf.
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)André Krämer
Morgens halb zehn in Deutschland: Der Puls Ihrer Anwender ist mittlerweile im dreistelligen Bereich und die ersten User denken ernsthaft darüber nach, den PC aus dem Fenster zu werfen. Ursache: Die von Ihnen entwickelte webbasierte App bremst die Nutzer stets an den entscheidenden Stellen aus. An produktives Arbeiten ist kaum noch zu denken und Überstunden stehen auf dem Tagesprogramm. Doch so weit muss es gar nicht kommen. Glückliche Anwender sind nur wenige Handgriffe entfernt. Und genau diese Handgriffe, wird Ihnen André Krämer in diesem Vortrag zeigen. Gemeinsam werden wir den Ursachen langsamer Web- und Mobile-Apps in den Bereichen JavaScript, CSS und Co. auf den Grund gehen und diese Schritt für Schritt eliminieren.
Cross-Apps-Entwicklung für iPhone, Android und Co.GFU Cyrus AG
Kurzbeschreibung
Beschreibung: Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet. Dozent: Peter Hecker, GFU Cyrus AG
Inhalt
- Einführung und Motivation
- Die WebKit-Plattform
- Überblick "mobile" Frameworks
- Zusammenfassung und Fazit
Roadshow: Einstieg in die Hybrid-App Entwicklung mit dem Intel XDK und Apache...Gregor Biswanger
Die Entwicklung von Apps ist nicht einfach und jede "Systemwelt" hat ihre eigenen Tools und Anforderungen. Ob mit Java und Eclipse für Android, mit Objective-C und Xcode für iOS, oder mit den Microsoft-Tools für die Windows-Welt. Bei diesem Vortrag lernen Sie die vielfältigen Möglichkeiten der App-Entwicklung für alle gängigen Plattformen mit nur einer Programmiersprache kennen: HTML5 und JavaScript. Sie steigen mit den Grundlagen des kostenlosen Intel XDK und Apache Cordova ein und werden dann mit den wichtigsten Frameworks und Vorgehensweisen vertraut gemacht. Mit diesen Infos steigen Sie rasch zum versierten Cross-Plattform Entwickler auf.
Wartbare Oberflächentests mit Open-Source-SoftwareOliver Libutzki
Das Erstellen und Verwalten von Tests stellt im Software-Engineering eine komplexe und zeitaufwändige Disziplin dar. Nicht selten überschreiten die Aufwände, automatisierte Tests zu schreiben, den eigentlichen Implementierungsaufwand. Und noch viel schlimmer: Tests müssen gepflegt werden. Bei fachlichen oder technischen Änderungen der getesteten Software müssen auch die Tests angepasst werden.
Nils und Oliver zeigen am Beispiel von Oberflächentests wie man lesbare, wartbare und dokumentierte Tests schreiben kann, damit sich die Aufwände amortisieren. Sie zeigen dabei, dass man weder teure, kommerzielle Produkte einsetzen noch sämtliche Komponenten selbst implementieren muss. Durch die Kombination etablierter Java-Frameworks und -Tools ist es möglich, ein Test-Werkzeug zu schaffen, das das Erstellen und vor allem die Wartung von Oberflächentests extrem vereinfacht.
Chromebooks for Work entsprechen den Chrome-Geräten für Privatanwender, mit folgendem Unterschied: Mit dem Erwerb der Chrome for Work Management Console, können Administratoren die Chrome-Geräte Ihrer Organisation über die Verwaltungskonsole per Remote-Zugriff verwalten. Damit lassen sich rund 120 Sicherheits- und Geräterichtlinien konfigurieren. Mit der Chrome-Geräteverwaltung lassen sich in Unternehmen Chrome-Funktionen für die Nutzer konfigurieren, Zugriff von Chrome-Geräten auf VPNs und WLAN-Netzwerke einrichten, Chrome-Gerätelieferungen nachverfolgen, Chrome-Apps und -Erweiterungen vorinstallieren und vieles mehr. Administratoren können jede Einstellung auf eine Organisationseinheit oder auf die gesamte Organisation anwenden. Die meisten Einstellungen beinhalten die Option, eine bestimmte Konfiguration festzulegen oder dem Nutzer die Wahl zu überlassen.
.NET Usergroup Oldenburg 23. April 2015 - von Christopher Wennhold und Hilmar Bunjes -Mobile Anwendungen mit Apache Cordova.
Apache Cordova (früher Phonegap) ist eine Plattform für Apps auf mobilen Geräten (Windows Phone, Windows 8+, iOS, Android, Blackberry, WebOS, Bada, Symbian). Mittels HTML/JS können Apps gebaut werden, die mit minimalen Anpassungen auf allen Plattformen laufen können.
Wir zeigen die Idee hinter Cordova und Möglichkeiten, mit Cordova Apps zu entwickeln. Dabei wird Visual Studio als IDE verwendet, welches durch die "Visual Studio Tools for Apache Cordova" eine herausragende Plattform für hierfür geworden ist. Ebenfalls gibt es eine kurze Einführung in das Debugging und den Aufbau von Plugins für Cordova.
Über die Sprecher:
Christopher Wennhold leitet die mobile Entwicklung bei erminas in Oldenburg. Cordova ist dabei die erste Wahl, wenn es um plattformübergreifende Apps geht. Zusätzlich ist er .NET und Open Text WSM Entwickler, insbesondere im Web-Bereich.
Hilmar Bunjes ist Gründer und Geschäftsführer von erminas. Ein Schwerpunkt sind mobile Apps im B2B-Bereich (u.a. mit Cordova). Daneben entwickeln wir Web-Applikationen mit .NET und Open Text WSM.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?
Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
GWT wird verwendet um moderne, komplexe Rich Internet Applications zu erstellen. Durch die Generierung von JavaScript aus Java Code können alle Vorteile von Java genützt und gleichzeitig die immer größer werdenden Anforderungen der Web-Benutzer in Bezug auf Style, Performance, Interaktion und Browser-Kompatibilität von Webseiten abgedeckt werden. In dem Vortrag wird GWT vorgestellt und auf dessen Einsatz in der Praxis eingegangen.
Wartbare Oberflächentests mit Open-Source-SoftwareOliver Libutzki
Das Erstellen und Verwalten von Tests stellt im Software-Engineering eine komplexe und zeitaufwändige Disziplin dar. Nicht selten überschreiten die Aufwände, automatisierte Tests zu schreiben, den eigentlichen Implementierungsaufwand. Und noch viel schlimmer: Tests müssen gepflegt werden. Bei fachlichen oder technischen Änderungen der getesteten Software müssen auch die Tests angepasst werden.
Nils und Oliver zeigen am Beispiel von Oberflächentests wie man lesbare, wartbare und dokumentierte Tests schreiben kann, damit sich die Aufwände amortisieren. Sie zeigen dabei, dass man weder teure, kommerzielle Produkte einsetzen noch sämtliche Komponenten selbst implementieren muss. Durch die Kombination etablierter Java-Frameworks und -Tools ist es möglich, ein Test-Werkzeug zu schaffen, das das Erstellen und vor allem die Wartung von Oberflächentests extrem vereinfacht.
Chromebooks for Work entsprechen den Chrome-Geräten für Privatanwender, mit folgendem Unterschied: Mit dem Erwerb der Chrome for Work Management Console, können Administratoren die Chrome-Geräte Ihrer Organisation über die Verwaltungskonsole per Remote-Zugriff verwalten. Damit lassen sich rund 120 Sicherheits- und Geräterichtlinien konfigurieren. Mit der Chrome-Geräteverwaltung lassen sich in Unternehmen Chrome-Funktionen für die Nutzer konfigurieren, Zugriff von Chrome-Geräten auf VPNs und WLAN-Netzwerke einrichten, Chrome-Gerätelieferungen nachverfolgen, Chrome-Apps und -Erweiterungen vorinstallieren und vieles mehr. Administratoren können jede Einstellung auf eine Organisationseinheit oder auf die gesamte Organisation anwenden. Die meisten Einstellungen beinhalten die Option, eine bestimmte Konfiguration festzulegen oder dem Nutzer die Wahl zu überlassen.
.NET Usergroup Oldenburg 23. April 2015 - von Christopher Wennhold und Hilmar Bunjes -Mobile Anwendungen mit Apache Cordova.
Apache Cordova (früher Phonegap) ist eine Plattform für Apps auf mobilen Geräten (Windows Phone, Windows 8+, iOS, Android, Blackberry, WebOS, Bada, Symbian). Mittels HTML/JS können Apps gebaut werden, die mit minimalen Anpassungen auf allen Plattformen laufen können.
Wir zeigen die Idee hinter Cordova und Möglichkeiten, mit Cordova Apps zu entwickeln. Dabei wird Visual Studio als IDE verwendet, welches durch die "Visual Studio Tools for Apache Cordova" eine herausragende Plattform für hierfür geworden ist. Ebenfalls gibt es eine kurze Einführung in das Debugging und den Aufbau von Plugins für Cordova.
Über die Sprecher:
Christopher Wennhold leitet die mobile Entwicklung bei erminas in Oldenburg. Cordova ist dabei die erste Wahl, wenn es um plattformübergreifende Apps geht. Zusätzlich ist er .NET und Open Text WSM Entwickler, insbesondere im Web-Bereich.
Hilmar Bunjes ist Gründer und Geschäftsführer von erminas. Ein Schwerpunkt sind mobile Apps im B2B-Bereich (u.a. mit Cordova). Daneben entwickeln wir Web-Applikationen mit .NET und Open Text WSM.
Cross-Apps-Entwicklung für iPhone, Android und Co.Peter Hecker
Mit der Veröffentlichung von iPhone, iPod Touch sowie iPad und dem iPhone OS hat Apple den Markt für mobile Endgeräte massenfähig gemacht. Google liefert mit dem Android-Betriebssystem ebenfalls eine stetig wachsende Plattform. Einer der Erfolgsfaktoren ist der auf beiden Systemen verfügbaren Browser "Mobile Safari" bzw. die technologische Basis WebKit. Diese freie HTML-Rendering-Bibliothek wird nicht nur von Apple und Google eingesetzt, sondern auch von anderen Unternehmen, wie Nokia, Adobe und Blackberry verwendet: Einführung und Motivation, Die WebKit-Plattform, Überblick "mobile" Frameworks, Zusammenfassung und Fazit
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEEBenjamin Schmid
Serverseitige Web-Technologien waren lange Zeit das Mittel der Wahl für Java-basierte Webanwendungen. Der Trend jedoch geht immer mehr zu JavaScript-basierten und damit Clientseitigen Web-GUIs. Wir werfen dazu einen Blick auf Google's AngularJS und erläutern an plastischen Beispielen seine Kernkonzepte und Funktionsweise. Was zeichnet AngularJS für die Realisierung der im Java-Umfeld häufig vertretenen, datengetriebenen Anwendungen besonders aus und wie fühlt sich die Entwicklung damit im direkten Vergleich dazu an?
Ein konkretes Fallbeispiel aus der Praxis, bei dem wir durch den Wechsel von einer JSF/Portlet-basierten Portal-Lösung hin zu einem AngularJS-basiertem Ansatz bei identischem JEE-Backend und Funktionalität Performance-Gewinne im Bereich von Zehnerpotenzen realisieren konnte, zeigt dabei auf, daß sich dieser Paradigmentwechsel durchaus lohnen kann!
Javascript auf Client und Server mit node.js - webtech 2010Dirk Ginader
node.js erlaubt die Ausführung von Javascript auf dem Server. Zusammen mit YUI3 gibt es jetzt auch noch einen echten DOM und plötzlich macht alles Spass :-)
GWT wird verwendet um moderne, komplexe Rich Internet Applications zu erstellen. Durch die Generierung von JavaScript aus Java Code können alle Vorteile von Java genützt und gleichzeitig die immer größer werdenden Anforderungen der Web-Benutzer in Bezug auf Style, Performance, Interaktion und Browser-Kompatibilität von Webseiten abgedeckt werden. In dem Vortrag wird GWT vorgestellt und auf dessen Einsatz in der Praxis eingegangen.
HTML5 im Überblick - semantisches HTML, Geolocation, Offline-Webanwendungen, ...Karionis
Auch wenn die Spezifikation von HTML5 noch nicht abgeschlossen ist, werden die Features dieses neuen Standards der Auszeichnungssprache HTML das Internet der unmittelbaren Zukunft bestimmen. Erfahren sie, wie nun semantisches HTML, Geolocation, Offline-Webanwendungen, Video- und Audio-Elemente, Drag and Drop und Vektorgrafiken in Webseiten integriert werden können.
Mittlerweile als moderne Technik etabliert, beschreiben zahlreiche Tutorials Umsetzungsvorschläge für Responsive Webdesign; dennoch stößt man in Projekten mit einem skalierbaren Layout auf immer gleiche Schwierigkeiten. Häufig haben mobile Geräte eine deutlich schwächere technische Ausstattung als der heimische Desktoprechner, sodass Fragen der Performance auf unterschiedlichen Devices in den Vordergrund gerückt werden. Gerade bei Bildern tauchen Begriffe wie "Responsive Images" oder "Adaptive Images" immer wieder auf. Welche Lösungen wann Sinn ergeben und wie man mit Retina-Screens umgeht, wie der aktuelle Stand des HTML5-Responsive-Image-Elements ist und wie man eine schlanke Bilder erstellt, werden in der Präsentation gezeigt.
Lange Wartezeiten und mangelnde Responsivität unserer Webapplikation führen zu unzufriedenen Benutzern, was sich in hohen Absprungraten und Abwanderung zur Konkurrenz oder einfach der Weigerung, die Applikation zu verwenden, niederschlägt. Das Problem einer langsamen Applikation lässt sich jedoch leider nicht ganz so einfach lösen. Wichtig für eine nachhaltige Lösung ist das Verständnis der Abläufe im Browser. Aus diesem Grund beschäftigen wir uns hier mit Konzepten wie dem Critical Rendering Path und einigen Charakteristiken der JavaScript-Engines. Im Zuge dieses Vortrags werden einige der häufigsten Problemstellungen von Webapplikationen analysiert und Lösungsansätze und Best Practices zur Behebung der Performanceprobleme vorgestellt.
5. Herausforderungen mobiler Webseiten
Herausforderung:
• Wie schaffe ich es, eine
Vielzahl von Geräten mit
unterschiedlichen
Betriebssystemen
unterstützen, und diese nicht
native zu programmieren und
sorge dabei für eine korrekte
Darstellung und
Funktionsweise von
Applikation auf Geräten mit
unterschiedlichen Möglichkeiten
(beispielsweise Displaygröße)
14. Offline Storage
• Application Cache
• Local Storage
• Web SQL
• Online / Offline Events
15. Application Cache
• Spezifieren des Cache:
<html manifest=“meinCache.appcache">
...
</html>
• Auflistung zu cachender Dateien
CACHE MANIFEST
# version 1.0.0
CACHE:
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png
NETWORK:
*
16. Application Cache
// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value);
window.localStorage.setItem('timestamp', (new
Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');
17. Web SQL
var db =
window.openDatabase("DBName", "1.0", "description", 5*1024
*1024); //5MB
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM
test", [], successCallback, errorCallback);
});
18. Online und Offline Events
document.body.addEventListener(„offline“, function () { ...
}, false);
document.body.addEventListener(„online“, function () { ...
}, false);
23. Geo Location (3/3)
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map:
map});
map.setCenter(latLng);
}, errorHandler);
}
24. Camera API (Phonegap)
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Failed because: ' + message);
}
25. Contact API (Phonegap)
function onSuccess(contacts) {
alert('Found ' + contacts.length + ' contacts.');
};
function onError(contactError) {
alert('onError!');
};
// find all contacts with 'Bob' in any name field
var options = new ContactFindOptions();
options.filter="Bob";
var fields = ["displayName", "name"];
navigator.contacts.find(fields, onSuccess, onError, opti
ons);
26. Connectivity: Web Sockets
var socket = new
WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
27. 3D, Graphics & Effects
• Canvas
• CSS3 3D Features
• WebGL
• SVG
28. Javascript Frameworks
• JQuery Mobile
• Sencha Touch
• Jo
• jQTouch
• Xui
• Lawnchair
• EmbedJS
29. JQuery Mobile
• Touch-optimiertes Web Framework für Smartphones und
Tablets
• Auf JQuery aufgesetzt
• Unterstützt iOS, Android, Blackberry, ...
30. Was ist Phonegap? (1/2)
• Werkzeug, um mobile Applikationen mit Webtechnologien zu
bauen
• HTML5 für das Layout
• Javascript für den Zugriff auf Geräte-Funktionalitäten
• CSS3 für das Design
31. Was ist Phonegap? (2/2)
• Eine Sammlung von Tools und eine konsistente geräte-
übergreifende API
• Die gleichen Javascript Aufrufe um Geräte Funktionen
aufzurufen.
• Beispiel: navigator.notification.vibrate();
• Funktioniert mit JQuery Mobile zusammen
32. Phonegap: Unterstütze Plattformen
• iOS
• Android*
• Blackberry
• webOS!
• Symbian*
• MeeGo*
• Windows Mobile
• Windows Phone
• Samsung Bada
33. Architektur einer Phonegap App
• Javascript ruft via XHR Daten beim Server in Form von JSON
Daten ab
• HTML/JS/CSS + Grafiken sind auf dem Device
, zusammengepackt beim Build Process.
• JavaScript kann abgerufene Daten in einer SQLite Datenbank
im Browser zur Offline-Bearbeitung speichern
• JavaScript kann auch Bilder cachen