WebanWendungen mit Javascript. Ein Film von Marcus Schiesser, GEOwidget GmbH

Transkript

1 WebanWendungen mit Javascript Ein Film von Marcus Schiesser, GEOwidget GmbH

2 über Marcus Schiesser Ausbildung Diplom in Informatik seit 2002 MBA 'Internationales Marketing' seit 2006 Berufserfahrung kommerzielle Web-Projekte seit 2002 Rollen: Entwickler, Berater & Produktmanager Autor ix Gründer der Google Technology User Group KA Outsourcing, Agile, Web, Usability, UI Technology Tags

3 über GEOwidget GmbH Sitz in Karlsruhe Dienstleister spezialisiert auf benutzerfreundliche Webanwendungen Insbesondere basierend auf Google-Maps Produkt: Homepage-Baukasten für individuelle Google-Maps a S. 3

4 Agenda Motivation Die Sprache Javascript DOM API Low-Level Frameworks High-Level Frameworks Welches Framework? Demos S. 4

5 Kapitel 1 motivation

6 It's all about the user, stupid!' S. 6

7 Beispiel: iphone vs. Nokia S. 7

8 Nokia 50% schneller... Aber: IPhone finden die Leute besser Quelle: S. 8

9 Was lernen wir als Entwickler? Gute UIs benötigen eigene Controls Anforderungen für UI-Technologie: Eigene Controls müssen sich schnell entwickeln lassen Controls müssen sehr interaktiv sein Warum benötigen wir den State des Controls auf dem Server? S. 9

10 Besser: Präsentationschicht komplett auf der Clientseite S. 10

11 Clientseitige Technologien S. 11

12 Clientseitige Technologien S. 12

13 Ausschlusskriterien für Flash Interne Anwendung Externe Anwendung Kunde hat Plugin nicht installiert Zielgruppe sind Unternehmen Anwendung benötigt HTML z.b. CMS z.b. Homepage-Baukasten S. 13

14 Clientseitige Technologien S. 14

15 Kapitel 2 Javascript die sprache oder Warum man erstmal miteinander redet...

16 Die Sprache Javascript keine Teilmenge von Java dynamisch lose typisiert keine Klassen! dafür klasse Funktionen! Scope Closures S. 16

17 Objekte Ungeordnete Liste von Schlüssel/Wert-Paaren Schlüssel sind Strings Werte können von jedem Typ sein Es gibt Objekt-Literale var obj = { name: 'Eastwood', surname: 'Clint' }; S. 17

18 Eine kleine Factory function createperson(name, surname){ var person = { name: name, surname: surname }; return person; } S. 18

19 Privatsphäre dank Closures function createperson(name, surname){ var _secret = 'I like Western'; var that = { name: name, surname: surname, getsecret: function() { return _secret; } }; return person; } S. 19

20 Nicht jeder ist ein Held... function createhero(name, surname){ var that = createperson(name, surname); that.ishero = function() { return true; }; return that; } S. 20

21 aber jeder kann eine Kanone tragen function addfirecapability(person){ var that = person; that.firegun = function() { // TODO: fire the gun }; return that; } S. 21

22 One Singleton to bind them all... Western.TheGoodTheBadTheUgly = function(){ return { thegood: addfirecapability(createhero('eastwood', 'Clint')), thebad: addfirecapability(createperson('van Cleef', 'Lee')), theugly: addfirecapability(createperson('wallach', 'Eli')) }; }(); S. 22

23 Kapitel 3 die dom-api oder Warum Jeder gute Western einen bösewicht braucht

24 Die DOM API HTML als DOM Manipulation von Elementen und deren CSS möglich Events Selektion der Elemente mühselig document.getelementbyid(id); Hinzufügen von Elementen mühselig document.createelement('li'); S. 24

25 Fazit DOM API Nicht cross-browser kompatibel IE unterstützt nicht das W3C Event model Änderungen am DOM mühselig Ein Hauptgrund für die Unzufriedenheit mit Javascript S. 25

26 Kapitel 4 low-level FrameWorKs oder endlich geht es dem bösen an den Kragen

27 Low-Level Frameworks S. 27

28 Low-Level Frameworks einheitliche API zur DOM-Manipulation Cross-browser jedoch wird DOM natürlich weiterhin unterschiedlich interpretiert Selektion von DOM-Elementen über CSSSelektoren Einfügen von HTML-Code als String S. 28

29 Beispiel: eine einfache Liste... Quelle: S. 29

30 zunächst ein wenig HTML <ul id="demo"> <li>click me if you don't mind...</li> <li>click me if you don't mind...</li> <li>click me if you don't mind...</li> <li>click me if you don't mind...</li> </ul> Quelle: S. 30

31 dann nur noch ein bisschen Interaktion... Y.one('#demo').delegate('click', function(e) { e.currenttarget.addclass('yui-pass'); e.target.setcontent('thanks for the click!'); }, 'li'); Quelle: S. 31

32 Kapitel 5 high-level FrameWorKs oder Jetzt Wird s richtig spannend

33 High-Level Frameworks S. 33

34 High-Level Frameworks Verwenden Komponentenmodell Komponenten kapseln DOM-Elemente Komponenten sind cross-browser enthalten auch Low-Level API sind umfangreich (>200 kb) S. 34

35 Beispiel: Datagrid mit ExtJS Quelle: S. 35

36 Wie geht's? Zunächst ein Record var Person = Ext.data.Record.create([{ name: 'firstname' }, { name: 'lastname' }]); Quelle: S. 36

37 Dann noch ein Store für die Records var people = new Ext.data.Store({ reader: new Ext.data.JsonReader({ root: "root" }, Person), proxy: new Ext.data.MemoryProxy({ root: [{ firstname: 'Homer', lastname: 'Simpson' }] }) }); Quelle: S. 37

38 Schließlich ein Grid das an den Store gebunden wird var grid = new Ext.grid.GridPanel({ store: people, cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), { header: 'First name', width: 100, dataindex: 'firstname' }, { header: 'Last name', width: 150, dataindex: 'lastname' }]), autoheight: true }); Quelle: S. 38

39 Was fällt auf? kein HTML Code Komponenten erzeugen diesen zur Laufzeit dieser kann je nach Browser verschieden sein Objekt-Literale werden als KonstruktorParameter verwendet Trennung von View und Model Flexibles Design (Austausch von Proxy) S. 39

40 Kapitel 6 Welches FrameWorK bitte oder Jeder Western hat ein high-noon

41 Welches Framework? jquery ExtCore YUI 3 ExtJS Sproutcore Cappuccino Webseite x x x Widget x RIA x in Zukunft x x x S. 41

42 abspann...noch zeit Für ein paar demos

43 Kundenbeispiel: IAS Gruppe S. 43

44 Ein paar Anwendungsbeispiele Paris - Touristeninformation - Wo sind die besten Attraktionen - Wie sind diese geografisch angeordnet Golfplätze in Deutschland - Wo ist der nächste Golfplatz - Öffnungszeiten, Routenplan - Ideal für Verzeichnisanbieter S. 44

45 Ein paar Anwendungsbeispiele Facebook Anwendung - Visualisieren der Events mit sozialem Hintergrund - Einbindung von tausenden Events möglich - Dynamische Datenhaltung S. 45

46 Vielen Dank! Douglas Crockford Marcus Schiesser Wireframe-Editor Ajaxian John Resig S. 46