Rich Internet Applications – @ SAE Institute – Bjoern Zapadlo

View Github Repository Open presentation in a new window

gmb2012

See all presentation from gmb2012

Rich Internet Applications – @ SAE Institute – Bjoern Zapadlo

0 0

sae-ria

On Github gmb2012 / sae-ria

Rich Internet Applications

8.09.2015 @ SAE Institute

Bjoern Zapadlo

About me

Bjoern Zapadlo Konstanz36 Jahre

Team Manager / Lead Developer HolidayCheck AG

Informatik Studium 1999 - 2002 3 Agenturen in Stuttgart

HolidayCheck International Websites / new Framework Neckermann / Thomas Cook

Dozent an der SAE, Dualen Hochschule Stuttgart, Hochschule Furtwangen

PHP, Java, Scala, Javascript, CSS, Html,MySQL, MongoDB, Elasticsearch, ...

Seit über 15 Jahren im Web unterwegs

Contact me

bjoern.zapadlo@gmail.com http://www.zapadlo.de

@BjoeZap

https://www.xing.com/profile/Bjoern_Zapadlo http://de.linkedin.com/pub/bjoern-zapadlo/36/889/1a5

Facebook Google+

HolidayCheck AG

Größtes deutsches Meinungsportal für Reise und Urlaub Vermittlung von Reisen Sitz in der Schweiz, direkt am Bodensee Börsennotiert über Tomorrow Focus AG Existiert seit 1999 Ausgründungen in mehreren europäischen Ländern Über 300 Mitarbeiter

Yes, we hire ;)

http://www.holidaycheck.de/jobs

Jetzt aber Schluss mit der Werbung... ;)

Agenda

Basics Beispiele RIA Technologien Keep in mind Bibliotheken Übung mit Bootstrap & JQuery Q&A

01. Basics

Definition

Was denkt ihr?

Wikipedia sagt...

A rich Internet application (RIA) is a Web application that has many of the characteristics of desktop application software, typically delivered by way of a site-specific browser, a browser plug-in, an independent sandbox, extensive use of JavaScript, or a virtual machine.

Der Begriff Rich Internet Application (RIA; engl. „reichhaltige Internet-Anwendung“) ist nicht eindeutig definiert oder standardisiert, sondern aus der Evolution des Internet entstanden und wird im Verlauf der Entwicklung dieses Mediums immer öfter eingesetzt.

In der Regel versteht man unter diesem Begriff Internetanwendungen, die eine reiche (vielfältige) Menge an Interaktionsmöglichkeiten mit ihrer Benutzeroberfläche bieten. Insbesondere RIAs, die in Webbrowsern laufen, ähneln eher dynamischen Desktopanwendungen als klassischen (statischen) Webseiten. Eine RIA ermöglicht dem Besucher einer Webseite z. B. Drag and Drop, 3D-Effekte, Animationen und Unterstützung diverser Videoformate und anderer Medien.

Rich Internet Applications müssen allerdings nicht zwangsläufig im Browser laufen, sondern können auch als Desktopanwendung eingesetzt werden, da die Umgebung, in der RIAs laufen, für deren Bezeichnung irrelevant ist. Vielmehr müssen die Anforderungen der Reichhaltigkeit sowie Verbindung mit dem Internet erfüllt sein.

Zusammengefasst...

Rich + Internet

gute Funktionalität & Usability im Internet

Web Applications 2.0

Und warum?

  • Komplizierte Prozesse benötigen oft mehrere Schritte (z.B. Wizards, CMS)
  • Daten sind komplizierter und schwieriger zu visualisieren
  • Komplexe / indivisulaisierbare Produkte (Konfiguratoren)
  • Sofortiges Feedback auf Nutzereingaben (z.B. Live-Filter)

Die Anatomie einer RIA

Klassische Client / Server Architektur

Vorteile

  • Oft benutzerfreundlicher als klassische Webanwendungen durch die Verwendung moderner Interaktionstechniken (z. B. Drag and Drop)
  • Schnellere Reaktion auf Benutzereingaben durch lokale, client-seitige Verarbeitung
  • Keine "Cross-browser issues" (durch den Einsatz von speziellen RIA-Frameworks)
  • Reduzierte Server- und Netzwerklast durch lokale Berechnungen
  • Gegebenenfalls Zugriff auf lokales Dateisystem und Peripherie
  • Oft einfache GUI-Entwicklung durch reichhaltige UI-Komponenten, die in RIA-Frameworks enthalten sind ("Viel WOW!-Effekt ohne viel Aufwand")
  • Bei Plug-in-basiertem System mehr Performance möglich im Gegensatz zu reinen DHTML-Varianten. Keine Abhängigkeit von der JavaScript-engine des Browsers

Nachteile

  • Evtl. lange Download- und Ladezeiten
  • Höhere Ressourcenbelastung des Clientrechners möglich
  • Manchmal Installation eines Plug-ins notwendig
  • Evtl. Sicherheitslücken durch installierte Plug-ins

02. Beispiele

Kennt ihr welche?

Reveal.js

Link

Wordpress Admin

Link

Synology NAS Admin Interface

Link

There is more...

  • Admin Interfaces
  • Diagramme
  • Konfiguratoren
  • Browser Spiele
  • Filtering in Online-Shops
  • ...

03. RIA Technologien

Adobe Flash

Adobe Flash [əˈdoʊbi ˈflæʃ] (vormals Macromedia Flash) ist der Name einer Plattform zur Programmierung und Darstellung multimedialer und interaktiver Inhalte. Flash ermöglicht es, Vektorgrafiken, Rastergrafiken und Videoclips darzustellen, zu animieren und zu manipulieren. Es unterstützt das bidirektionale Streaming von Audio- und Videoinhalten und kann Nutzereingaben über Maus, Tastatur, Mikrofon und Kamera verarbeiten. Die Programmierung von Inhalten erfolgt in der objektorientierten Skriptsprache ActionScript. Seit der ersten Veröffentlichung von Version 11 des Flash Player am 4. Oktober 2011 unterstützt Flash die Darstellung von 3D-Inhalten über die sogenannte Stage3D-API.

Während Flash bisher hauptsächlich für die Produktion von Websites, Browserspielen und Werbebannern verwendet wurde, rückte seit der Veröffentlichung der Adobe Integrated Runtime und von Apache Flex zunehmend die Entwicklung von Rich Internet Applications und Anwendungen im Desktop-Internet-Gemischtbetrieb in den Mittelpunkt.

Apache Flex

Apache Flex, vorher Adobe Flex, ist ein Entwicklungsframework zum Erstellen von Rich Internet Applications (RIAs) auf der technischen Basis der Adobe Flash-Plattform. Neben dem als Open Source veröffentlichten SDK besteht das Framework aus dem kostenpflichtigen Flash Builder (seit Version 4, davor hieß dieser Flex Builder), den LiveCycle Data Services und den Flex Charting-Komponenten. Obwohl es schon vor der Veröffentlichung von Flex möglich war, mit Adobe Flash (früher Macromedia) reichhaltige Anwendungen zu erstellen, bot Flash als Werkzeug nicht das von Software-Entwicklern von einer IDE geforderte Funktionsspektrum, sondern wurde weiterhin hauptsächlich von Webdesignern und Grafikern eingesetzt. Flex soll deshalb gezielt Software-Entwickler ansprechen.

Java Applets

Ein Java-Applet ist ein Computerprogramm, das mittels Java-Technik erstellt, und normalerweise in einem Webbrowser ausgeführt wird. Applets wurden eingeführt, um Programme in Webseiten ablaufen lassen zu können, die im Webbrowser (auf der Client-Seite) arbeiten und direkt mit dem Benutzer interagieren können, ohne Daten zum Server senden zu müssen. Java-Applets waren Ende der 1990er Jahre mit ein Grund für den Erfolg und die schnelle Verbreitung von Java.

JavaFX

JavaFX ist ein Framework für plattformübergreifende Rich Internet Applications. Es ist eine Java-Spezifikation von Oracle und steht in direkter Konkurrenz zu Adobe Flash bzw. Flex und Microsoft Silverlight. Die JavaFX 2.0-Laufzeitumgebung wird seit der Version Java SE Runtime 7 Update 6 mitinstalliert, kann aber auch separat heruntergeladen und installiert werden.

JavaFX kann auf diversen Endgeräten wie Mobilfunkgeräten, Set-Top-Boxen, Desktop-Computern und Blu-ray-Disc-Abspielgeräten zum Einsatz kommen, und ist als Bestandteil der Java-Runtime-Umgebung in einigen Mobilfunkgeräten implementiert.[2] Im Hinblick auf Sicherheit muss der Anwender die erste Ausführung von JavaFX-Anwendungen zuvor bestätigen.

Microsoft Silverlight

Microsoft Silverlight ist eine Erweiterung für Webbrowser, die die Ausführung von Rich Internet Applications ermöglicht. Außerdem wird es als Framework für Apps für Windows Phone 7 verwendet. Silverlight ist als proprietäres, programmierbares Plug-in für Windows und Apple Macintosh verfügbar und wird für die Browser Internet Explorer, Mozilla Firefox, Opera, Google Chrome und Safari angeboten. Für Linux wird von Novell mit Zustimmung und Unterstützung von Microsoft Moonlight angeboten. Silverlight basiert auf einer reduzierten Version des .NET-Frameworks.

OpenLaszlo

OpenLaszlo ist eine Plattform zur Erstellung von Rich Internet Applications. Das zuvor unter dem Namen Laszlo Presentation Server vom kalifornischen Unternehmen Laszlo Systems entwickelte System wurde am 7. Oktober 2004 unter der Common Public License als freie Software veröffentlicht.

OpenLaszlo ist eine serverbasierte deklarative Entwicklungsumgebung, die es dem Entwickler ermöglicht „Rich Internet Applications“ (RIA) on-the-fly zu erzeugen. Dabei editiert der Entwickler mit Hilfe eines Texteditors den Inhalt einer LZX-Datei, die auf dem Server liegt. Mit dem Browser ruft der Entwickler diese Datei von seinem OpenLaszlo Server auf und bekommt wahlweise einen Flash- oder DHTML-Dialog in seinem Browser angezeigt. Der Anwender der Applikation ruft ebenfalls die Seite auf und benutzt die Webseite transparent als RIA-Applikation

GWT

Das Google Web Toolkit (GWT [ɡʉˑiˑt]) ist ein Toolkit zur Entwicklung von Webanwendungen. Es wurde am 17. Mai 2006 von Google als freie Software unter den Bedingungen von Version 2.0 der Apache-Lizenz veröffentlicht. Seine Besonderheit ist ein Java-nach-JavaScript-Compiler, so dass nahezu die gesamte Entwicklung von Client und Server auf Basis von Java realisiert werden kann. Weiterhin ist das GWT mit einem XML-Parser, Internationalisierungs-Unterstützung, einer Schnittstelle für Remote Procedure Calls, Integration von JUnit und einem kleinen Widget-Paket zur Gestaltung der graphischen Oberfläche (GUI) ausgestattet. Diese kann dabei ähnlich wie mit Swing erstellt werden.

Was das GWT im Wesentlichen von den meisten anderen Frameworks dieser Art unterscheidet, ist die Tatsache, dass auch der client-seitige Code komplett in Java erstellt werden kann. Dies bringt erhebliche Vorteile in der Entwicklung mit sich, weil bewährte Entwicklungsumgebungen benutzt werden können. Des Weiteren ist ein interner Anwendungsserver (Tomcat bzw. Jetty) enthalten, der beim Entwickeln im Hosted-Modus (also z. B. in der Entwicklungsphase auf einem alleinstehenden Personal Computer) zum Einsatz kommt.

Vaadin

Vaadin ist ein freies (unter Apache-Lizenz 2.0) Webanwendungs-Framework für Rich Internet Application (RIA). Im Gegensatz zu JavaScript-Bibliotheken und auf Browser-Plugins basierenden Lösungen bietet es eine serverseitige Architektur, was bedeutet, dass der Großteil der Programmlogik auf dem Server läuft. Auf der Client-Seite baut Vaadin auf dem Ajax-Framework Google Web Toolkit auf und kann damit erweitert werden.

Javascript + HTML5

Kombination der Features von HTML5 (Validierung, Video, ClientStorage, ...) und Javascript für Logik und Kommunikation mit dem Server

Evtl. noch eine Backend-Technologie nötig (PHP, node.js, ...)

Das rockt!

04. Keep in mind

SEO

Wenn es keine Intranet-Applikation ist, muss auch eine RIA für Suchmaschinen geeignet sein!

Benutzt kein Flash! ;)

Semantisches Html!

Barrierefreiheit

Königsdisziplin

Machen RIAs für diese Audienz an Leuten Sinn oder machen Sie gerade dafür Sinn?

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) ist eine Initiative zur Verbesserung von Webseiten und Webanwendungen, um sie für behinderte Menschen besser zugänglich zu machen, insbesondere für blinde Anwender, die Vorleseprogramme verwenden.

ARIA ist als technische Spezifikation im Entwurfsstadium. Sie wird von Mitgliedern der Web Accessibility Initiative entwickelt, und soll ein empfohlener Webstandard des World Wide Web Consortiums (W3C) werden.[1]

Security

  • Besonders bei RIAs schwieriges Thema
  • Sandbox von JS vs. bekannte JS Probleme (XSS)
  • Plugins of mit Sicherheitslücken
  • Da Client-Server-Architektur oft authentifizierung notwenidig: z.B. via OAuth

05. Bibliotheken

Wrapbootstrap Admin Tempates

Themes auf Basis von Bootstrap + JQuery

Beispiel 1 Beispiel 2

Kendo UI

All in one RIA Framework für JS + HTML5 (kostenpflichtig)

Diagramm-Komponente Kompoenten

Diagramme

Visualisierung von Daten

Google Charts gRaphaël Highcharts

Bootstrap

Twitters CSS Framework als Basis für RIAs

Bootstrap

Meteor

RAD JS Plattform, ähnlich wie angular.js

Webseite Built with/

angular.js

Full stack JS framework für Single-Page-Apps

Webseite Built with/

ExtJS

Full stack JS framework + Komponenten (kostenpflichtig)

Webseite Komponenten/

Dojo Toolkit

Full stack JS framework + Widgets Dijit

Webseite Demos/

qooxdoo

Full stack JS framework

Webseite Demos/

JQuery

State of the art full stack JS framework Aber erst durch Plugins / Extensions (JqueryUI) ein echtes RIA Framework

Webseite JQueryUI/

06. Übung

07. Q&A

Fragen?

07. Links

THE END

Vielen Dank!

Made with reveal.js(with Html and JS)