WEB 2.0 für Entwickler

Transkript

1 WEB 2.0 für Entwickler Neue Technologien und strategische Ansätze für eine moderne Architektur am Beispiel : Google Web Toolkit

2 Zu meiner Person Klassischer Start: Dipl.Ing. Physik, OO Software Entwicklung, Selbstständig in der IT seit Eigene Firma Erex Ebusiness Solutions Seit 2000 Trainer bei GFU Seit 2007 Aufsichtsratmitglied der Cyrus AG Nebenbei: Coach und Trainer in den Bereichen NLP und Kommunikation, Teamprozesse Seit 2006 Geschäftsführer von training.deluxe Seit 2007 Verbindung IT und Kommunikation in den Bereichen :Technik / Teams / Entwicklung / Infomanagement

3 Inhalte der Präsentation Neue Konzepte im Einsatz AJAX Java und Ajax Google Web Toolkit Rich Media Applications Persönliche Einschätzung

4 Wettkampf der Ameisen MSOffice1

5 Folie 4 MSOffice1 In einem Wald lebten 2 Ameisenvölker seit 100 Jahren friedlich zusammen. Doch während der eine Staat in den letzten Jahren rund um die Uhr angewachsen war, blieb der andere Staat klein und gerig in der Anzahl So ersuchten die kleinen die großen um Rat und eine Beraterin der großen Gemeinschaft ( Ameisen sind meist weiblich -die Männchen werden nur zu Fortpflanzung benutzt) kam und begutachtete alle Räume. Das Königinnenzimmer, die Brutproduktion, die Verorgungswege und auch die goldenen Räume, in denen das Wissen gesammelt war. Und hier bemerkte die Beraterin, dass sich etwas komisches tat. Informationen wurden an die Bewahrer des Wissens herangetragen, - das funktionierte tadellos - doch etwas war komisch bei den goldenen Ameisen. Es waren so viele. Fast ein drittel des Stammes war damit beschäftigt Wissen zu sammeln und das Wissen dann in alle Ecken des Ameisenhaufens zu verteilten. Die Beraterin beobachtete auch genau, wie viele Ameisen damit beschäftigt waren dies zu tun. Und wusste nun genau, wo der kleine Ameisenstaat seine ganze Energie unnötig verbrauchte. Was hatte sie gefunden...? Was macht Ihr Staat, der große Staat anders? ;

6 Neue Konzepte im Einsatz Das Web als Plattform Nutzung kollektiver Intelligenz Lightweight Programming Models

7 Beispiele Beispiele Mashup : pageflakes Social Tagging : XING Single Page Applications Google Documents Google Maps Google Calendar Google Startseite

8 Kollektive Intelligenz del.ici.ous ( Sozial Tagging ) Wikipedia ( Kollektive Cloudmark ( Social Spamfilter ) Blogging

9 Technische Realisierung Asynchrones Javascript mit XML AJAX Datenübertragung ohne Seitenaufruf httprequest Object

10 Einsatzbereiche Ajax Formularbasierte Interaktion Navigation in hierarchischen Strukturen Schnelle Interaktion User-User Für Voting und Ranking Filtern und Datenmanipulation Hilfen Tipps Automatische Ergänzung.

11 Ajax - Nein danke Einfache Formulare Suche Navigation Austausch von viel Text Veränderung der Darstellung SEO?

12 Java und Ajax Problem: Entwicklung auf verschiedenen Systemen Versionsprobleme Server / Client Kaum Testmöglichkeiten Kein Einsatz von JUnit o.ä. im JS Code Browserunterschiede

13 Lösungen Google Web Toolkit DWR ( Direct Web Remoting ) JayJax ( in Entwicklung ) Ähnlich Projekte sind in Entwicklung für Ajax und JSF

14 Google Web Toolkit GWT August 2006 Jetzt unter Apache Lizenz V1.3 / 1.4 Entwicklung in Java Testen in hosted Mode Compile / Deploy nach Ajax JS inklusive Historymanagement inklusive Html Wrapper Nutzung fertiger Widgets Opensource Widgets verfügbar z.b ( GWT-Stuff ) code.google.com/p/gwt-stuff

15

16 Entwicklung mit GWT Vorteile Schnelle Lernkurve dank Swing Komponents und Events Ähnlichkeit Entwicklung im hosted modus kapselt JS Eclipse based Coding Nachteil Noch relativ neue Technik, kaum Erfahrungen mit größeren Client/Server Entwicklungen

17 Development Hosted mode Javacode läuft als echter Java code in einer emulierten Tomcat Umgebung Gut für Entwicklung und Debug Web mode Das Projekt wird compiliert und der Client Code in JS Code umgewandelt. Läuft in den meisten Browser ( Kritisch : Safari )

18 Entwicklungsschritte applicationcreator projectcreator Eclipse Java-Entwicklung im hosted mode Nutzen von Panels und Widgets Rootpanel.get( idscope ).add(...) Remote Procedure Calls für Objektdaten Javascript native Interface

19 Remote Procedure Calls Gemeinsame Schnittstelle für Client und Server Async Schnittstelle für Callback GWT.create (Service.class) erzeugt einen Proxy auf den Server Callback kann für Fehlerbehandlung genutzt werden Nutzt teilweise bereits bekannte Technologien

20 Und mehr. Eine graphische Oberfläche GWT Designer ( kostenpflichtig ) Session Handling Session state: a client not a server issue (Joel Webber) Browser History und Bookmarks History : IFrame und Browser History Stack Bookmarks: Noch nicht wirklich gelöst JSNI Javascript Native Interface Programmierung in Javascript immer noch möglich

21 Fazit Konzentration auf Java Code Problem im Detail Schnelle Lernkurve einfacher Einstieg Webbased - statt Versionsverwaltung Überall einsetzbar - Trotzdem Beobachten mit wachsamem Auge Taking the Pain out of Ajax Development with GWT and Java (Orginaltext von Instantiations) MSOffice2

22 Folie 20 MSOffice2... Ab jetzt nehmen die Ameisen in der Halle der Information auch gleich oder kommen gelegentlich vorbei um sich zu informieren. Keine Wissensameise muss sich nunmehr durch den Bau schleichen und versuchen Ihr Wissen an die Frau ( Ameise ) zu bringen. ;

23 Weitere Ansätze Entwicklung mit Adobe FLEX 2.0 Rich Internet Applications auf Basis von XML und Flash Open Lazlo ( Open Source Flex ) Ajax mit JSF

24 Aktuelles Kurse GWT bei GFU : / Kurs auch Inhouse auf Anfrage (GFU) Entwicklung von GWT und RIA Kurs Kommunikation in IT Unternehmen im Direkte Beratung

25 Wichtige Links zum Thema Google Web Toolkit ( zeigt Klassenstruktur ) Addons für GWT

26 Beispiele Web 2.0 Lawrence Lessig: <free culture> Ludwig Gatzke: Logo 2.0 Skype Flickr del.icio.us Facebook MySpace YouTube Read/WriteWeb Flickr: Photos tagged with whatsinyourbag Tim O'Reilly: What Is Web 2.0 Technorati PubSub IceRocket Feedster Google Blog Search Reboot RSS SSE Atom Creative Commons Wikipedia Backpack Greasemonkey REST Google Maps HousingMaps alkemis local Mappr! Cadillac Ranch 02 on Flickr Plazes Eventful Podbop Pandora Last.fm PandoraFM ProgrammableWeb Microformats Structured Blogging del.icio.us/elisebauer/re cipes La torre on Flickr Popular Tags on Flickr Flickr clusters Flickr: Photos tagged with squaredcircle Collaborative Poster: Giant Peach on Flickr Flickr: Photos tagged with adayinthelife DILO Poster, 72dpi on Flickr Flickr: Explore interesting photos around Flickr The FlickrVerse, April 2005 poster on Flickr openbc LinkedIn Flock Tim O'Reilly: The Architecture of Participation James Surowiecki: The Wisdom of Crowds Digg BitTorrent Adam Curry: Daily Source Code Rocketboom Josh Leo's Vlog Geek Entertainment TV the show with zefrank Alfies Moblog: London Underground bombing, trapped Wikipedia: 7 July 2005 London bombings Chris Anderson: The Long Tail QYPE JotSpot 37signals