Aktuelle SE-Praktiken für das · 2011-03-17 · 3. Aktuelle Software-Engineering-Praktiken für...

07.04.2010

Aktuelle SE-Praktiken fr das WWW

EinfhrungLeif Singer

Leibniz Universitt Hannover, FG SE

Agenda

Einfhrung

Themenvorstellung

letzte Mglichkeit zur Anmeldung

Grundlagen: Internet, WWW, HTTP,

WWW-Seminar 207.04.2010

3Aktuelle Software-Engineering-Praktiken fr das World Wide Web 26. Januar 2010

Motivation

Webentwicklung gewinnt weiter an Bedeutung nicht nur in der ffentlichkeit auch in Unternehmen

eine Unmenge an Techniken, Praktiken, Frameworks, ... viel Hype, viel Gutes wie trennen?

berblick geben wie geht Webentwicklung? welche Mglichkeiten gibt es?

SE-Prinzipien wiederfinden nicht einzelne Technologien lernen Zusammenhnge verstehen

3


Ziele

Ausarbeitung strukturiert und verstndlich schreiben sptestens fr die Abschlussarbeit obligatorisch hilfreich aber auch bei jeder Email

Vortrge halten wichtig im Studium noch viel wichtiger im Berufsleben! deshalb: hier ben, wo es alle gut meinen

Hypes kritisch betrachten nicht nur in der Informatik eine sinnvolle Fhigkeit

4


Organisatorisches

ca. 14 Termine 90 Minuten je ein Vortrag (~60 Minuten) + Diskussion (Inhalt und Vortrag) heute: Einfhrung durch LS & TW

Termin Mittwoch nachmittags, 15:00 - 16:30

Anmeldung und Themenausgabe bei LS / TW letzte Gelegenheit: nachher

nach Anmeldung Materialien abholen (sptestens 5 Wochen vor Vortrag) 2 Wochen vor Vortrag: Ausarbeitung an Leif Singer 1 Woche vor Vortrag: Prsentationsskizze mit Leif Singer besprechen

5


Ausarbeitung

6-8 Seiten Einfhrung in das bearbeitete Thema (de/en) Template: siehe Webseite

1. Kontext: was, wofr (wieso?), in welchem Umfeld?2. grundlegende Prinzipien erklren (gerne auch Diagramm)3. Vor- und Nachteile abwgen4. Beispiele geben (gerne auch Code und / oder Screenshots)5. mit SE-Praktiken in Verbindung bringen6. Zusammenfassen und Bewertung / Empfehlung abgeben

6

VORSTELLUNG DER THEMEN


Vorstellung der Themen

16 Themen auf Webseite gelistet (mind. 2 werden gestrichen)

bisher: 7 vergeben 9 noch offen:

CSS Frameworks REST: Atom und HATEOAS Reine JavaScript Clients MVC Frameworks fr das Web Testen und Debuggen von Webanwendungen Mashups Web Scraping "Enterprise 2.0 Experiment-Driven Development


Vorstellung der Themen

Sucht noch jemand ein Thema? wir bernehmen dann teilweise die noch offenen ohne Ausarbeitung ggf. Zusammenlegung von Themen, die zusammenpassen insgesamt 12-14 Termine

jetzt: Vorstellung aller Themen hinterher: bitte melden!


CSS Frameworks

HTML strukturiert Inhalte JavaScript regelt Interaktivitt CSS bestimmt Aussehen und Anordnung statt immer wieder bei Null zu starten, hat man sich auch hier

Frameworks geschaffen:

eine eigene, CSS-hnliche Sprache, die nach CSS kompiliert ergibt bspw. Variablen und Arithmetik fr Farben

vorgefertigte Stylesheets, die hufige Problemlsungen und Best Practices schon enthalten bspw. fertige Grids


JavaScript Frameworks

HTML strukturiert Inhalte CSS bestimmt Aussehen und Anordnung JavaScript regelt Interaktivitt

JS ist ein Dialekt der ECMAScript-Spezifikation genau wie JScript und ActionScript

Auch hier: Frameworks bieten hufig bentigte Lsungen, kapseln Komplexitt Unterschiede zwischen Browsern Abkrzungen fr hufig verwendete Funktionen Bibliotheken fr beliebte Effekte


AJAX und Comet

JavaScript kann auch selbst HTTP-Anfragen stellen und die Ergebnisse verarbeiten

so kann man programmatisch Teile der Seite neu laden das ist dann AJAX mit weiteren Tricks auch kontinuierlich: Comet

verbessert Benutzbarkeit: Anwendung wirkt schneller und zusammenhngender

Comet ermglicht Benachrichtigungen in Echtzeit im Browser

ermglicht andere Programmiermodelle bspw. da man auch Code einfach nachladen kann


REST

Representational State Transfer ein Client-Server-Architekturstil, beschrieben in der Dissertation von Roy Fielding hat HTTP mitentwickelt

Ressourcen sind durch URIs identifizierbar alle Ressourcen bieten dieselbe Schnittstelle ein Austausch ist zustandslos

das ist erst mal genau das Web wenngleich man diese Einschrnkungen auch verletzen kann (sollte man aber nicht)


HATEOAS

Hypermedia as the Engine of Application State eine weiteres wichtiges REST-Prinzip

Client kennt Basis-URI, Medientypen und die Bedeutung mglicher Zustandsbergnge

Server fgt nun Links in Antworten ein, die die mglichen Transitionen im Anwendungszustand beschreiben


GET /auction/9192

Reine JavaScript Clients

JavaScript kann DOM und CSS verndern Code und Daten ber das Netz nachladen Vektorbilder zeichnen

Idee: nur JavaScript verwenden, alle anderen Technologien durch Frameworks, Bibliotheken wegkapseln Browser ldt einfach (viel) JavaScript und fhrt es aus JavaScript benutzt den Browser fr die Darstellung und den Server fr

Logik und DatenNherung an das Programmiermodell fr Desktopanwendungen

Cappuccino, ExtJS, SproutCore


MVC Frameworks fr das Web

Model-View-Controller wichtiges Pattern fr den Desktop wurde adaptiert fr das Web (Web MVC, MVC Model 2, ) fr die serverseitige Programmierung

Server erhlt Anfrage und sucht dafr den verantwortlichen Controller, ggf. auch die verantwortliche Methode

Controller arbeitet auf Datenmodell und gibt Ergebnisse an eine Template weiter

Template rendert sich baut HTML, JavaScript und CSS zusammen, fgt Daten ein Framework gibt gerenderte Template an den Browser zurck

wichtiges Pattern, interessante Frameworks


Testen und Debuggen von Webanwendungen

bekannteste Art zu testen: Unit Tests (JUnit, ) testet aber nur die Einzelteile (Units) Integration der Einzelteile ist ebenso wichtig!

funktionales Testen fr das Web simuliert Browser, fhrt Testskript auf Webanwendung aus rufe http://google.com auf gebe in das Textfeld namens q den Text WebTest ein klicke auf den Knopf Im Feeling Lucky stelle sicher, dass der Titel der Seite jetzt Canoo WebTest lautet

u.a. toll fr Akzeptanztests!

auerdem: Debugger fr das DOM und JavaScript Firebug, WebKit Inspector,


Mashups

ein Mashup ist eine Verbindung von existierenden Webseiten oder Diensten zu einer neuen Anwendung dabei werden Daten, Logik und selbst Oberflche integriert

Beispiele: http://housingmaps.com ein YouTube-Video in eine Webseite einbinden ein Business Mashup, das alle Daten zu einem Kunden integriert

nimmt Telefonnummer entgegen liefert vergangene Bestellungen, gekaufte Produkte, relevante

Serviceartikel, Karte mit Servicecentern in der Nhe,

Anstze zur Mashup-Konstruktion fr Endbenutzer erfllen meist ein Nischenbedrfnis, mssen schnell verfgbar sein


Web Scraping

Webseiten sind relativ unstrukturiert: HTML ist sehr allgemein Tabelle, Liste, unklar von was, unklar ob richtig benutzt

dennoch: Daten von Webseiten programmatisch verwenden in einer eigenen Anwendung oder auch in einem Mashup

(Web/Screen) Scraper sind Programme, die die Regeln kennen, nach denen eine Webseite aufgebaut ist hat der Programmierer formuliert

berfhren Daten in strukturierte Form, etwa XML schaffen quasi API ohne Kooperation des Betreibers


Web 2.0

Was ist das berhaupt? hat inzwischen viele Definitionen also faktisch keine Wikis, Blogs, Feeds, Mashups, Soziale Netzwerke, User-Generated

Content, Crowdsourcing, Collective Intelligence, das Web als Plattform,

Der Begriff an sich bedeutet also eigentlich nichts! Trotzdem ist er ein guter Startpunkt fr Nachforschungen.

Welche Phnomene sind die interessantesten? Welche sind uns wichtig? Welche sind wirklich neu?


Enterprise 2.0

die bertragung der Web 2.0 Phnomene auf Unternehmen ebenso schwammig und noch mehr

Soziale Software? Gewachsene statt vorgegebener Strukturen?

wie kann man die Ideen aus dem vorherigen Vortrag sinnvoll im Unternehmen einsetzen? Unternehmen haben ganz andere Ressourcen als das

offene Web verwenden sie vielleicht hnliche Ideen schon seit Jahren?

Mitarbeiter in einem Unternehmen haben andere Ziele als Web Surfer bentigen sie diese Effekte berhaupt?


Entwicklungsmuster fr 2.0

Angenommen, wir wssten, was 2.0 ist Wie kommen wir dahin!?

gesucht: Best Practices und Muster, die zu den mit 2.0 assoziierten Effekten fhren knnen Wie motiviert man Benutzer im ffentlichen Web, wie

im Unternehmen? An welche Risiken und Probleme muss man denken,

welche Lsungsanstze gibt es?


SQL vs. NoSQL

seit einer Weile sind sog. NoSQL-Datenbanken in Mode

klassisches RDBMS: Schema definiert Struktur, Abfragesprache kann auf Daten suchen

NoSQL-Datenbank: kein festes Schema vorgegeben, erleichtert Einstieg, schnelle Entwicklung, Replikation Suche aber oft viel aufwendiger

hitzige Diskussionen: RDBMS skalieren nicht! NoSQL-Datenbanken sind fr die, die kein SQL knnen!

die Wahrheit liegt wahrscheinlich in einer Abwgung von Anforderungen, Zielgruppen, etc. verborgen


Verarbeitung groer Datenmengen in der Cloud

insb. beliebte Webanwendungen generieren sehr viele Daten, die verarbeitet werden mssen getaggte Artikel immer wieder clustern hochgeladene Videos mssen transkodiert werden ggf. aber auch nur zu Spitzenzeiten / einmalig

Cloud Computing bietet Elastizitt: Skalierbarkeit nach oben und unten schwere Aufgaben in die Cloud auslagern, so viele Instanzen

rechnen lassen wie ntig hinterher die Instanzen wieder lschen man bezahlt nur, was man

benutzt / reserviert hat Anbieter: Amazon EC2, Google AppEngine, Windows Azure


Experiment-Driven Development

Es ist sinnvoll, nderungen an einer Anwendung vorher zu erproben klassisch ist das aber sehr umstndlich / kostspielig

Webanwendungen haben oft viele Benutzer ein zentrales Deployment

Experimente sind also leichter / gnstiger durchzufhren auch kleine bspw. A/B-Tests, die den Einfluss verschiedener Layouts, Farben

oder Formulierungen auf eine bestimmte Metrik (wie bspw. Registrierungen, Umsatz, ) zeigen



LETZTE MGLICHKEIT ZUR ANMELDUNG


Anmeldung


Nr. Termin Referent Thema

1 07.04.10 Leif Singer, Tristan Wehrmaker Einfhrung & Grundlagen von WWW und HTTP

2 14.04.10 Leif Singer CSS Einfhrung & CSS Frameworks

3 21.04.10 Karsten Mckel JavaScript Frameworks

4 28.04.10 Steffen Platte AJAX und Comet

5 05.05.10 Olga Liskin REST: Grundlagen & HATEOAS

6 12.05.10 Olga Liskin* REST: Praktischer Teil?

7 19.05.10 JK Web Scraping

8 02.06.10 Wladimir Exner Web 2.0 & Enterprise 2.0

9 09.06.10 Armin Doroudian Entwicklungsmuster fr "2.0"

10 16.06.10 Leif Singer, Tristan Wehrmaker Testen und Debuggen von Webanwendungen & Mashups

11 23.06.10 Mark Kubacki SQL vs. "NoSQL"

12 30.06.10 Andy Stumpp Verarbeitung groer Datenmengen in der Cloud

13 07.07.10 JK* Experiment-Driven Development

14 14.07.10 Leif Singer MVC Frameworks fr das Web & Reine JavaScript Clients

Anmeldung

endgltige Tabelle im Laufe der Woche auf Webseite, per Email Terminwnsche?

Semesterunterbrechung am 26. Mai 2010 letzter Termin am 14. Juli 2010

gegen Mitte und / oder Ende: praktische Teile wir freuen uns ber Anregungen von Euch


07.04.2010

Aktuelle SE-Praktiken fr das WWW

GrundlagenTristan Wehrmaker

Leibniz Universitt Hannover, FG SE

Die Geschichte des Internet

1957 Die UdSSR schickt Sputnik ins All

1958 USA grndet ARPA (Advanced Research Projects Agency)

1962 Entwicklung des ARPANET durch das Massachusetts Institute of

Technology (MIT)

1969 August: 1. Host wird angeschlossen (University of California, Los

Angeles) Oktober: 2. Host (Stanford University) November: 3. Host (University of California, Santa Barbara) Dezember: 4. Host (University of Utah)


Quellen: http://www.zakon.org/robert/internet/timeline/ http://www.heise.de/ix/timeline/


1971 File Transfer Protocol (FTP) wird verffentlicht 23 Hosts angeschlossen

1972 Erste Emailsoftware, Wahl des @-Zeichens fr at

1973 Erste internationale Verbindung zum University College of London ca. 2.000 ARPANET User 75% des Traffics wird durch Email verursacht.

1974 Erste Publikation zu TCP (Transmission Control Protocol), darin

vermutlich erste Verwendung des Begriffs Internet




1978 Aufsplittung von TCP in TCP und IP (Internet Protocol) Erste kommerzielle Spam-Mail

1980 ARPANET kommt zu einem vlligen Stillstand durch versehentlich in

Umlauf gebrachten Virus.

1982 Einfhrung der Emoticons :-) und :-(

1983 Umstellung von NCP (Network Control Protocol) auf TCP/IP Anschluss von Stuttgart als deutscher Knotenpunkt




1984 Einfhrung von DNS (Domain Name Service) ber 1.000 Hosts angeschlossen

1985 Erste Domain registriert (Symbolics.com)

1987 ber 20.000 Hosts

1988 ca. 6.000 der 60.000 Hosts von Internet Wurm betroffen

1989 ber 100.000 Hosts

1990 ARPANET wird eingestellt




1991 Tim Berners-Lee verffentlicht das World Wide Web am CERN

1992 ber 1.000.000 Hosts

1993 Erster Entwurf fr HTTP


Internet != World Wide WebQuellen: http://www.zakon.org/robert/internet/timeline/ http://www.heise.de/ix/timeline/

Entwicklung des World Wide Web




YAHOO! - 1996



YAHOO! - 2000



YAHOO! - heute

Definitionen

Hypertext =def Textdokumente, die mit Hyperlinks verknpft sind.

Hyperlinks =def Querverweise zwischen zwei Dokumenten bzw. zu einer

anderen Stelle im selben Dokument.

Hypermedia =def Verschiedene Medien, die durch Hyperlinks verknpft sind

(z.B. Text, Grafik, Video, Ton).


XML

Extensible Markup Language

Auszeichnungssprache fr hierarchisch strukturierte Datenstrukturen.

Metasprache fr andere Sprachen wie RSS, XHTML, SVG.


Apple Macbook Pro

...

HTML (XHTML, HTML5)

Hypertext Markup Language (Hypertext-Auszeichnungssprache)

Aktuelle Standards: XHTML, HTML 4.01 Kommender Standard: HTML5

Historie: 1989: Erste Festlegung von HTML durch Tim Berners-Lee 1997: HTML 4.0 Einfhrung von Stylesheets, Skripten und Frames 1999: HTML 4.01 2000: XHTML 1.0 2001: XHTML 1.1 In der Entwicklung: HTML5


HTML 4.01

Basiert auf SGML (Standard Generalized Markup Language)


Hello World

Hello World!

Welcome to the World Wide Web.

Google

XHTML 1.0

Basiert auf XML


Hello World

Hello World!

Welcome to the World Wide Web.

Google

HTML5

Obermenge von HTML 4.01, XHTML 1.0

Einfhrung neuer Elemente, z.B. , ,

Umdefinierung vorhandener Elemente, z.B. , , ,


Browser-Engines


Presto

Opera

WebKit

Safari

MobileSafari

Epiphany

Google Chrome

Konqueror

KHTML

Internet Explorer

MSHTML

Firefox

Camino

Gecko

CSS

Cascading Style Sheets HTML legt nur den Inhalt fest. CSS das Aussehen.


body { font-family: Arial, Helvetica, sans-serif;font-size: 90%;background-color: #FFFFFF;color: #000000;margin: 0px;padding: 0px;

}

CSS

Selektoren Elemente (z.B. body, p, div, etc.) Elemente mit ID (z.B. #nav) Elemente einer Klasse (z.B. .box) Elemente mit bestimmten Attributwerten (z.B. img[border=0]) Elemente, die Nachfahren eines anderen Elements sind (z.B. body

div) Elemente, die Kind eines anderen Elementes sind (z.B. body > div)

Wertzuweisungen Schriften (z.B. font-family, font-size, font-weight) Rahmen (z.B. border-color, border-style) Abstnde (z.B. margin, padding) etc.

Fr weitere Infos: siehe http://www.css4you.de


JavaScript

JavaScript != Java

Clientseitige Ausfhrung auf dem Browser

Bisher hauptschlich fr graphische Effekte

Mittlerweile durch JavaScript-Frameworksauch fr die Entwicklung ganzerAnwendungen. (siehe entsprechender Vortrag)


HTTP

Hypertext Transfer Protocol Grundlage des Web


Request

Response

Client Apache HTTP-Server

Statischer HTTP-Ablauf

1. Client (z.B. Webbrowser) stellt Anfrage an Server (z.B. Apache HTTP-Server).

2. Server schickt angefragte Ressource als Antwort zurck.

Im Fall eines Webbrowsers wird meist HTML zurckgeliefert. In diesem HTML stehen Verweise auf CSS, Javascript,

Bilder, etc., die dann einzeln beim Server angefragt werden. Alle Daten rendert der Browser dann zu einer Webseite.


Abruf einer Website


Rendern einer Website


Laden der Stylesheet-Informationen


Laden der Bilder und Medien


Laden der Bilder und Medien


Laden von JavaScript


berblick ber geladene Ressourcen


HTTP-Methoden (Verben)

HTTP definiert einige eindeutige Methoden, u.a.

GET: Abfragen einer Ressource POST: Verndern einer Ressource (z.B. Hinzufgen von

Unterressourcen) PUT: Erstellen einer Ressource DELETE: Lschen einer Ressource

Webbrowser untersttzen aktuell meist nur GET und POST.


Dynamische Webentwicklung

Statische Ressourcen reichen nicht. Man muss auch das Verhalten programmieren knnen. z.B. mit PHP, Perl, Python, Ruby und Java


Am Beispiel von PHP


Request

Response

Client Webservermit PHP Modul

Datenbank(z.B. MySQL)

Am Beispiel von Java


Request

Response

Client

Webserver

Servlet Container(z.B. Apache Tomcat)

Java-Servlet

Datenbank(z.B. MySQL)

Zusammenfassung

Die Geschichte des Internet Entwicklung des World Wide Web Hypertext, Hyperlinks, Hypermedia XML (X)HTML Browser-Engines CSS JavaScript HTTP Statische und dynamische

Webanwendungen


Fragen?

Aktuelle SE-Praktiken fr das WWWAgendaMotivationZieleOrganisatorischesAusarbeitungVorstellung der ThemenVorstellung der ThemenVorstellung der ThemenCSS FrameworksJavaScript FrameworksAJAX und CometRESTHATEOASReine JavaScript ClientsMVC Frameworks fr das WebTesten und Debuggen von WebanwendungenMashupsWeb ScrapingWeb 2.0Enterprise 2.0Entwicklungsmuster fr 2.0SQL vs. NoSQLVerarbeitung groer Datenmengen in der CloudExperiment-Driven DevelopmentSlide Number 26Letzte Mglichkeit zur AnmeldungAnmeldungAnmeldungAktuelle SE-Praktiken fr das WWWDie Geschichte des InternetDie Geschichte des InternetDie Geschichte des InternetDie Geschichte des InternetDie Geschichte des InternetEntwicklung des World Wide WebEntwicklung des World Wide WebEntwicklung des World Wide WebEntwicklung des World Wide WebDefinitionenXMLHTML (XHTML, HTML5)HTML 4.01XHTML 1.0HTML5Browser-EnginesCSSCSSJavaScriptHTTPStatischer HTTP-AblaufAbruf einer WebsiteRendern einer WebsiteLaden der Stylesheet-InformationenLaden der Bilder und MedienLaden der Bilder und MedienLaden von JavaScriptberblick ber geladene RessourcenHTTP-Methoden (Verben)Dynamische WebentwicklungAm Beispiel von PHPAm Beispiel von JavaZusammenfassung

Aktuelle SE-Praktiken für das · 2011-03-17 · 3. Aktuelle Software-Engineering-Praktiken für...

Documents

Transcript of Aktuelle SE-Praktiken für das · 2011-03-17 · 3. Aktuelle Software-Engineering-Praktiken für...