Web-fejlesztés NGM_IN002_1

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 Architektúra Technológiai környezet A tervez! tapasztalata Tervez! Rendszer 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

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 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 Tervez! CERN kutatók Architektúra kliens-szerver Rendszer WWW Fejleszt! szervezet Tartalom szolg. Internet szolg. 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 Tervez! W3C Architektúra n-réteg" kliens-szerver Rendszer WWW eredeti új

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: =>?

Hiper-kapcsolatok That approach, Irányított linkek kontinens szerkezet Dinamikus változás, népszer"ség skálafüggetlen hálózat (power law) kis világok network is much more difficult than de- tions and cures? Such issues notwith- tecting them in other types of systems. standing, targeting hubs could be the Nevertheless, Reuven Cohen and Shlomo most pragmatic solution for the future Havlin of Bar-Han University in Israel, together distribution of AIDS or smallpox vaccines with Daniel ben-avraham of in countries and regions that do not have Clarkson University, have proposed a the resources to treat everyone. clever solution: immunize a small fraction In many business contexts, people of the random acquaintances of arbitrar-. want to start, not stop, epidemics. Viral ily selected individuals, a procedure that marketing campaigns, for instance, often selects hubs with a high probability because specifically try to target hubs to speed the they are linked to many people. adoption of a product. Obviously, such a though, leads to a number strategy is not new. Back in the 1950s, a of ethical dilemmas. For instance, study funded by pharmaceutical giant even if the hubs could be identified, Pfizer discovered the important role that should they have priority for immuniza- hubs play in how quickly a community of It's a Small Wor(d,AfterAll 010 pie asking them to forwardthe correspondence to acquaintances whomight be ableto shepherd itcloserto atarget recipient: a stockbroker inboston. Totrack"each ofthe different paths, 11., t1i1 ask e p ant\.~o ma i w ey p dth erto,somec, the letters that eventually arrived at the finaldestination had passed through an ave-rageofsix individuals-the basis ofthe popular notion of "sixdegrees ofsepar'!tion" between everyone. Althou am rk rdly: onclu-'-c letter~ ney de th y stofkbroke recen~ly learned that other networks exhibit this "small world" property, We have found, for instance, that a path ofjust three reactions willconnect almost any pair of chemicals in a cell. And 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. ~ 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 Given that fact, the notion that any two.strang. - -. 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 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 d average of. egr, IV tihntveal e c followingthe seminal workinthe 1970-sof M then a graduate student at Harvard,Clusteri property ofmany othe,rtypes of networks, In gridto the he'iiralnetworkofthe Caenorhabd Atfirst glance, isolated clusters ofhighly nodes appear to run counter t01he topology highly clustered and scale-free when small, t (teft), Thistype ofhierarchy appears to exis 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 ihathas!t~ and Steven Strqgat en both at CornellUn significant 2liJsteri!vari tyil'6fsy~~em networks, inwhich a number of hubs raoiate syst~m,lin "..,i' verytring~!re~ently,'h~w. M that the two operties are compatible:.a net clusters of nodes are connected into larger, systems, fr~~jhe WorldWide)Yeb(io,yV/)jc groupings ofwebpages devotei:!to the same (inwhichclusters are teams ofmolecules re a specific function). 58 SCIENTIFICAMERICAN --~-- 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

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 XML HTML XHTML SMIL SOAP WML Meta-markup language Application Markup language 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 C2 S1 üzenetkezel! C1 Hálózat S2 C4 S3 C5 C3

Kliens-szerver üzleti alkalmazások Alkalmazás funkció Adat Management Távoli adatkezelés Alkalmazás funkció Alkalmazás funkció Adat Management Elosztott funkcionalitás H á l ó z a t Alkalmazás funkció Adat Management Távoli megjelenítés Kliens vezérlés Alkalmazás funkció Adat Management Szerver Elosztott megjelenítés vezérlés Alkalmazás funkció Adat Management Terminál Emuláció 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 <CRLF> MESAGGE_HEADER <CRLF> <CRLF> MESSAGE_BODY<CRLF> Explorer Mac Safari http kérés http válasz http kérés http válasz Szerver Apache

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 if-modified-since Többszint" cache-elés szerver proxy böngész! diszk memória kliens kliens http kérés http válasz http kérés http válasz Proxy szerver http kérés http válasz eredeti szerver HTTP kérés és válasz kérés kezd! sor (GET, POST, HEAD parancsok) fejléc sorok GET /somedir/page.html HTTP/1.0 User-agent: Mozilla/4.0 Accept: text/html, image/gif,image/jpeg Accept-language:fr (üres sor) üzenettest Metódusok OPTIONS GET HEAD POST PUT DELETE TRACE CONNECT státuszsor adatok (dokumentum) fejléc sorok 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 Server Applications Web Applications Protocol stacks TCP/IP Client Applications Web browser vastag kliens vékony kliens Web böngész!k Felhasználói felület Hálózati interfész Parszer Segéd könyvtárak böngész! komponensek beépül! modulok

Kérés el!állítás 1 User follows link 5 Request is prepared 6 Request is transmitted Presentation Request generation Networking support Need to Already have a copy? Need to include authorize? cookie? 2 3 4 Caching support Authorization State maintenance Preferences Válasz feldolgozás 1 Response arrives 2 Need to decode encoded content? 7 Result of response processing is presented Networking support Response processing Content interpretation Presentation 3 Send back authorization? Store cookie? 5 Store in the cache? Request other resources? 6 Authorization 4 State maintenance Caching support Request generation Preferences

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 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 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 (SOAP). Flex clients compiled are server bytecode agnostic and for can the be used application. in conjunction Users with then any server deploy environment, this file to a web server just as they including standard would web servers an HTML and common file or server an image. scripting When environments the file such is as requested JavaServer by a browser, it is downloaded and Pages (JSP), Active Server Pages (ASP), ASP.NET, PHP, and ColdFusion. Flex runtime architecture i the bytecode is executed by the Flash Player runtime. Browser Flash Player technológiák MXML and ActionScript As illustrated in Figure 3, once started, the application can request additional data or content over the 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 Server MXML and Browser ActionScript XML/HTTP REST Flex Data Services Flash 2Player SOAP Web Services Java J2EEEE Application Server Existing Applications and Infrastructure Data Figure 3: Flex runtime architecture. Data If the Flex client application is used in conjunction Web Server 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 Service (JMS) messaging systems. Flex Data Services 2 RESTThe Flex Data Services application runs on the server within the Java web container. SOAP Web Services Java J2EEEE Application Server Flex development model and application framework The development process for Flex applications mirrors the process for Java, C#, C++, or other traditional client development Existing languages. Applications Developers and write Infrastructure 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 to real-time data feeds, send messages Compile to other clients, and integrate with existing Java Message Service Flex (JMS) Class Library 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 4, development the Flex application process framework for Flex consists applications of MXML, ActionScript mirrors the 3.0, process and for Java, C#, C++, or other the Flex class library. Developers Macromedia use MXML to declaratively Flex 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. 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. OpenLaszlo Flex Application Framework Adobe Flex 2 7 MXML Flex Class Library ActionScript Compile 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 7 moduláris web szerver web szerver fürt

Válasz generálás Networking support Address resolution Request processing Response generation Static content Dynamic Virtual hosting Address mapping Authentication CGI SSI Servlet API Többréteg" rendszerek Business tier Web tier TCP/IP Web browser (client tier)

Köztesréteg Client Service Common interface Middleware platform Middleware platform Different interfaces Operating system A Operating system B 01/18/2005 Webszolgáltatások 01/18/2005 Communication Patterns Communication Patterns Business Systems DB Server App Server Web Server Browser Client J2EE J2SE/ J2ME Web Application Bus. Sys. DB App Web Browser XML (UDDI, SOAP) Context and Identity (LDAP, Policy, Liberty) J2EE J2SE/ J2ME Web Service Webalkalmazás 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.