Web-fejlesztés NGM_IN002_1
Webalkalmazás architektúrák
Szoftver architektúra A rendszert felépít! alrendszerek (szoftver komponensek) kerete alrendszerek meghatározása alrendszerek tulajdonságai vezérlési, valamint kommunikációs kapcsolataik A fejleszt!k céljai és stratégiája által befolyásolt követelmények vezetnek különféle szoftver architektúrákhoz
Webes architektúrák Back-end architektúra szerver oldal hangsúlyos web alapú szolgáltatások, tartalom publikálás alkalmazás logika, API implementáció Kiszolgálási (delivery) architektúra kliens oldal hangsúlyos csatornák, formátumok RIA
Szoftver architektúra kialakítása Min!ségi elvárások
Funkcionalitás
Rendszer tervezés
Fejleszt! szervezet Követelmények Szerepl!k
Architektúra Megjelenítés
Architektúra
Technológiai környezet Tervez! A tervez! tapasztalata
Alkalmazás
architektúra kialakítás
architektúra-ciklus
Architektúra alapelvek Mit!l jó egy architektúra? vonatkozások szétválasztása generikus interfészek használata látható szemantika jól dokumentált
Rendszer
Alkalmazás architektúrák Architektúra szintre emelt tervezési minták (pl.:) Réteg szerkezet adaptáció, független támogató rétegek Csövek és sz"r!k adatfolyam megközelítés Model-View-Controller megjelenítés és m"ködési logika szétválasztása
Web architektúra ciklusok Fejleszt! szervezet CERN
Szerepl!k CERN kutatók
Fejleszt! szervezet Tartalom szolg. Internet szolg.
Követelmények távoli elérés kiterjeszthet!ség együttm"ködés
Technológiai környezet heterogén, elosztott A tervez! tapasztalata Internet, hipertext
eredeti
Architektúra kliens-szerver
Tervez! CERN kutatók
Rendszer WWW
Szerepl!k Szoftver fejl.
Követelmények távoli elérés kiterjeszthet!ség együttm"ködés visszamen! komp. Technológiai környezet heterogén, elosztott web A tervez! tapasztalata Internet, hipertext, web
új
Architektúra n-réteg" kliens-szerver
Tervez! W3C
Rendszer WWW
A Web épít!elemei Dokumentum reprezentáció Er!forrás-azonosítás: URL Jelöl! nyelv (markup): HTML Átviteli protokoll: HTTP
Representational State Transfer (REST) Bármiféle er!források dokumentumok - leíró er!források Állapot az átvitt tartalomba ágyazva az adatátvitel nem állapot specifikus Megegyezés (kliens, szerver) er!forrás-azonosítás (pl.: URI) alkalmazható m"veletek (pl.: HTTP metódusok) tartalomtípusok (pl.: XML repr.) Kiterjeszthet!ség új m"veletek, új tartalom típusok
Er!forrás azonosítás Uniform Resource Identifier Uniform Resource Name Uniform Resource Locator scheme://host[:port]/path/[;url_param][?query_string][#anchor]
Er!forrás azonosítás (folyt.) fejl!d! sémák pl.: sms:, callto:, tel: sémák és interakció (protokollok) http: => HTTP, https: => HTTP over SSL, mailto: =>?
network is much more difficult than de-
tions and cures? Such issues notwith-
standing, targeting hubs could be the most pragmatic solution for the future distribution of AIDS or smallpox vaccines in countries and regions that do not have the resources to treat everyone. In many business contexts, people of the random acquaintances of arbitrar- . want to start, not stop, epidemics. Viral marketing campaigns, for instance, often ily selected individuals, a procedure that selects hubs with a high probability be- specifically try to target hubs to speed the adoption of a product. Obviously, such a cause they are linked to many people. strategy is not new. Back in the 1950s, a That approach, though, leads to a numstudy funded by pharmaceutical giant ber of ethical dilemmas. For instance, Pfizer discovered the important role that even if the hubs could be identified, hubs play in how quickly a community of should they have priority for immunizatecting them in other types of systems. Nevertheless, Reuven Cohen and Shlomo Havlin of Bar-Han University in Israel, together with Daniel ben-Avraham of Clarkson University, have proposed a clever solution: immunize a small fraction
Hiper-kapcsolatok It's
doctors begins usin marketers have in some time that certa
others in spreadin about products and in scale-free networ tific framework and
probe that phenome
FromTheoryt
ALTHOUGH
SCA
are pervasive, num ceptions exist. For system and power g scale-free. Neither
a Small Wor(d,AfterAll 010
Irányított linkek “kontinens szerkezet” Dinamikus változás, népszer"ség
pie asking them to forwardthe correspondence to acquaintances who might be able to shepherd it closerto a target recipient: a stockbroker in Boston. Totrack"each of the different paths,
. -
11.,t1i1 ask ep ant\.~o ma i w ey p d th erto,somec , the letters that eventually arrived at the final destination had passed through an ave-rageof six individuals-the basis of the popular notion of "sixdegrees of separ'!tion" between everyone. Althou am rk rdly:£onclu-'-c letter~ ney de th y stofkbroke
in
als
know~anotherl.000,then a
be just two handshakes away from you, a bil away, and the earth's entire population will b Given that fact, the notion that any two.strang
recen~ly learned that other networks exhibit this "small world"
d
average of
IV
tihntveal
.
egr, ec
Our simple calculation assumes that the all strangers to one another. In reality, there Indeed, society is fragmented into clusters o similar c' uc 'ncome.or in
property, We have found, for instance, that a path of just three reactions will connect almost any pair of chemicals in a cell. And
ihathas!t~
skálafüggetlen hálózat (power law)
followingthe seminal workin the 1970-sof M then a graduate student at Harvard, Clusteri property of many othe,rtypes of networks, In and Steven Strqgat en both at CornellUn significant 2liJsteri !vari£tyil'6fsy~~em gridto the he'IIralnetwork of the Caenorhabd Atfirst glance, isolated clusters of highly nodes appear to run counter t01he topology networks, inwhich a number of hubs raoiate syst~m,lin verytRing~!Re~ently,'H~w ".. ,i' . M that the two operties are compatible:.a net highly clustered and scale-free when small, t clusters of nodes are connected into larger, (teft), Thistype of hierarchy appears to exis
kis világok
HIERARCHICALC!-~STE clud pag the FrankLio w)., be I to otherclusters'(green) sin Wright;Tamous homes or Pennsylvania's attractions. Those sites, in turn, could be connected to clusters (red) on famous architects or architecture in general.
systems, fr~~Jhe WorldWide)Yeb(io,yV/)jc groupings ofWebpages devotei:!to the same (in which clusters are teams of molecules re a specific function). ~
58
SCIENTIFIC AMERICAN
--~--
Adat-reprezentáció HTML CSS, XML, XHTML GIF, JPEG, PNG PDF rosszabb integráció Flash média integráció, GUI SVG, VRML kevésbé sikeres formátumok
-.
The smalt~world property does not necess presence of a.ny magic organizing principle. witurely random connections will be a sma t,n u ~i av
HTML SGML alkalmazás egyszer" jelöl!nyelv platform-független hypertext dokumentumokhoz MIME #text/html$ Internet Media Type a dokumentum struktúrális leírására nem a dokumentum megjelenésének leírására
SGML
Meta-markup language Application XML
Markup language
HTML XHTML
SMIL
SOAP
WML
Kliens-szerver alkalmazások Elosztott rendszerek Önnálló szolgáltatásokat nyújtó szerverek A szolgáltatásokat igénybevev! több, különböz! kliens Kommunikációs mechanizmus hálózat üzenetkezel! C2
S1
C1 Hálózat
C4
S3
S2
C5
C3
Kliens-szerver üzleti alkalmazások Megjelenítés
Alkalmazás funkció
Megjelenítés
Alkalmazás funkció
Adat Management
á Megjelenítés
a
z
ó
Távoli adatkezelés
Elosztott funkcionalitás
Alkalmazás funkció
Adat Management
Alkalmazás funkció
Adat Management
Megjelenítés vezérlés
Alkalmazás funkció
Adat Management
Elosztott megjelenítés
Megjelenítés vezérlés
Alkalmazás funkció
Adat Management
Terminál Emuláció
H
l
Távoli megjelenítés
t Kliens
Szerver Megjelenítés
Megjelenítés
HTTP protokoll Alkalmazási réteg protokoll TCP 80-as port ASCII szöveg alapú protokoll Állapot kezelés nincs Üzenetek formátuma: START_LINE
MESAGGE_HEADER MESSAGE_BODY
http kérés PC Explorer
http válasz http kérés Szerver Apache http válasz
Mac Safari
HTTP protokoll (folyt.) TCP kapcsolat HTTP/1.0 nem perzisztens, HTTP/1.1 perzisztens (keep alive), pipelined HTTP autentikáció név, jelszó, állapot mentes Süti kezelés állapot átvitel, URL-hez feltételes kérés eredeti if-modified-since szerver Többszint" cache-elés Proxy htt és pk szerver éré szerver tp kér s kliens http ht sz proxy á la v ál pv asz htt böngész! rés ké p diszk t asz ht vál tp memória t h kliens
HTTP kérés és válasz státuszsor kérés kezd! sor (GET, POST, HEAD parancsok)
GET /somedir/page.html HTTP/1.0 User-agent: Mozilla/4.0 Accept: text/html, image/gif,image/jpeg fejléc Accept-language:fr sorok (üres sor) üzenettest
fejléc sorok adatok (dokumentum)
•
Metódusok OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT
• • • • • • • •
HTTP/1.0 200 OK Date: Thu, 06 Aug 1998 12:00:15 GMT Server: Apache/1.3.0 (Unix) Last-Modified: Mon, 22 Jun 1998 …... Content-Length: 6821 Content-Type: text/html data data data data data ...
•Státusz kódok •1xx •Information •2xx •Sucess 3xx • •Redirection 4xx • •Client error 5xx • •Server error
Vékony kliens megoldások Server
Server
Web Applications
Server Applications
PC
PC
Protocol stacks
TCP/IP
Client Applications
Web browser
PC
PC
PC
vastag kliens
PC
vékony kliens
Web böngész!k Felhasználói felület
Hálózati interfész
Parszer
Megjelenítés
Segéd könyvtárak
böngész! komponensek
beépül! modulok
Kérés el!állítás 1
5
User follows link
Request generation
Presentation
Already have a copy?
2
Caching support
Need to authorize?
6
Request is prepared
Request is transmitted
Networking support
3
Need to include cookie?
4
State maintenance
Authorization
Preferences
Válasz feldolgozás 1
Response arrives
2
Networking support
3
Need to decode encoded content?
7 Result of response processing is presented
Response processing
Content interpretation
Send back authorization?
Store in the cache? Store cookie?
4 Authorization
State maintenance
Preferences
5 Caching support
Presentation
Request other resources?
6
Request generation
Flex runtime architecture The Flex runtime architecture is closely aligned with the just-in-time deployment model of web applications. The client portion of a Flex application is deployed as a binary file that contains the compiled bytecode for the application. Users then deploy this file to a web server just as they would an HTML file or an image. When the file is requested by a browser, it is downloaded and Flex runtime architecture the bytecode is executed by the Flash Player runtime.
The Flex runtime architecture is closely aligned with the just-in-time deployment model of web
Megjelenítési technológiák
As illustrated in Figure 3, once started, the application can request additional data or content over the applications. The client portion of a Flex application is deployed as a binary file that contains the network via standard HTTP calls (sometimes referred to as REST services) or through web services compiled for application. Users deploy this file to a web server just as they (SOAP). Flex clients are serverbytecode agnostic and canthe be used in conjunction with then any server environment, including standard web servers and common scriptingWhen environments such JavaServer by a browser, it is downloaded and would an HTML file orserver an image. the file isasrequested Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®.
the bytecode is executed by the Flash Player runtime.
Browser Browser MXML and ActionScript
As illustrated in Figure 3, once started, the application can request additional data or content over the Flash Player network via standard HTTP calls (sometimes referred to as REST services) or through web services (SOAP). Flex clients are server agnostic and can be used in conjunction with any server environment, including standard web servers and common server scripting environments such as JavaServer Data Data Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion®. Web Web Server Server XML/HTTP XML/HTTP REST REST SOAP SOAP Web Web Services Services
Browser Browser MXML and ActionScript
Flex Data Services Flash 2Player Java ApplicationServer Server J2EEEE Application
Existing Existing Applications Applications and and Infrastructure Infrastructure
Data
Data
Figure 3: Flex runtime architecture.
Web Web Server Server If the Flex client application is used in conjunction with Flex Data Services, the application has access to additional services. Flex clients can make direct calls to Java objects as well as subscribe to real-time data feeds, send messages to other clients, and integrate with existing Java Message XML/HTTP XML/HTTP Flexapplication Data Services Service (JMS) messaging systems. The Flex Data Services runs on2the server within REST REST the Java web container. SOAP Web Services SOAP Web Services
Java ApplicationServer Server J2EEEE Application
Flex development model and application framework The development process for Flex applications mirrors the process for Java, C#, C++, or other Existing Applications and Infrastructure Existing Applications and Infrastructure traditional client development languages. Developers write MXML and ActionScript source code using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then compiled into bytecode by the Flex compiler, resulting in a binary file with the *.swf extension.
Figure 3: Flex runtime architecture.
Flex Application Framework
If the Flex client application is used in conjunction with Flex Data Services, the application has MXML access to additional ActionScript services. Flex clients can make direct calls to Java objects as well as subscribe Compile to real-time data feeds, send messages to other clients, and integrate with existing Java Message Flex Class Library Service (JMS) messaging systems. The Flex Data Services application runs on the server within the Java web container. Figure 4: The Flex framework comprises MXML, ActionScript, and the Flex class library.
Flex development model and application framework
As shown in Figure the Flex application framework consists of MXML, ActionScript 3.0,process and The4,development process for Flex applications mirrors the for Java, C#, C++, or other the Flex class library. Developers use MXML to declaratively define the application user interface traditional client development languages. Developers write MXML and ActionScript source code elements and use ActionScript for client logic and procedural control.
Macromedia Flex
OpenLaszlo
using the Flex Builder IDE or a standard text editor. As shown in Figure 4, the source code is then compiled into bytecode by the Flex compiler, resulting in a binary file with the *.swf extension. Flex Application Framework Adobe Flex 2
MXML
7
ActionScript Compile Flex Class Library
Figure 4: The Flex framework comprises MXML, ActionScript, and the Flex class library.
As shown in Figure 4, the Flex application framework consists of MXML, ActionScript 3.0, and the Flex class library. Developers use MXML to declaratively define the application user interface elements and use ActionScript for client logic and procedural control.
Web szerverek Adobe Flex 2
moduláris web szerver
7
web szerver fürt
Válasz generálás Networking support
Address resolution
Request processing
Response generation
Static content Virtual hosting
Dynamic
Address mapping Authentication
CGI
Servlet API
SSI
Többréteg" rendszerek Business tier
Web tier
TCP/IP Web browser (client tier) PC
PC
PC
Köztesréteg Client
Service Common interface
Middleware platform
Middleware platform Different interfaces
Operating system A
01/18/2005
Operating system B
Webszolgáltatások 01/18/2005
Communication Patterns Business Systems DB Server App Server
Bus. Sys. DB App
J2EE
XML (UDDI, SOAP)
J2EE
Web
Web Server Browser Client
Communication Patterns
Browser
J2SE/ J2ME
Web Application
Webalkalmazás
J2SE/ J2ME
Context and Identity (LDAP, Policy, Liberty)
Web Service
Webszolgáltatás
Now since the web application and web services models are two dominant This picture shows communicating pattern of web services in which business communication patterns, let's look into them in a bit more detail. organizations are beginning to talk to each other leveraging loosely-coupled nature of web services. Here this slide shows web application communication model in which J2EE architecture is made of web server, application server, and database server tiers while J2SE and J2ME handles client tier.
