TNPW2-2014-02
- 1. Webov辿 aplikace Mgr. Luk叩邸 Vacek lukas.vacek@uhk.cz TNPW2 2013/2014
- 2. Agenda Webov辿 aplikace a jejich historie V箪hody a nev箪hody webov箪ch aplikac鱈 Jak webov叩 aplikace funguje? V箪voj webov箪ch aplikac鱈 Webov辿 technologie Internet, doporuen叩 literatura 2
- 3. Webov辿 aplikace a jejich historie
- 4. Do poloviny 90. let Statick辿 webov辿 str叩nky Text, obr叩zky Akademick叩 sf辿ra, odborn叩 veejnost U転ivatel辿 mohou obsah webov箪ch str叩nek ovlivnit jen minim叩ln Druh叩 polovina 90. let Dynamick辿 webov辿 str叩nky, webov辿 slu転by (na pelomu stolet鱈) Multimedi叩ln鱈 obsah P鱈stupn辿 pro nej邸ir邸鱈 veejnost Interaktivita s u転ivatelem http://evolutionofweb.appspot.com/ (interaktivn鱈 asov叩 osa) Historie webov箪ch aplikac鱈 4
- 5. Wikipedia Webov叩 aplikace je poskytovan叩 u転ivatel哲m z webov辿ho serveru pes po鱈taovou s鱈泥 Internet, nebo jej鱈 vnitropodnikovou obdobu (Intranet). Jsou postaveny na modelu klient/server >> dotaz/odpov Na stran u転ivatele (klienta) je webov箪 prohl鱈転e, na opan辿 stran je webov箪 server (v njak辿 podob HW, virtualizace, serverov叩 farma ) Nejastji jde o webov辿 str叩nky s aplikan鱈 logikou ta je obvykle na stran serveru (叩st, nebo i cel叩 logika m哲転e b箪t i na klientovi) v箪stup je zobrazen v okn prohl鱈転ee na stran u転ivatele (klienta) bez ohledu na za鱈zen鱈 Pojem webov叩 aplikace nen鱈 striktn (normativn) vymezen! Mezi webov辿 aplikace jsou nkdy azeny i slu転by typu Web API (nejastji WS/REST), jejich v箪stup nen鱈 uren p鱈mo u転ivateli (BFU), ale je d叩le zpracov叩v叩n aplikan Co to je webov叩 aplikace? 5
- 6. Nejastji typ webov辿 aplikace (jsou i dal邸鱈 mo転nosti Flash, Ajax a spol./RIA, SPA) Pou転鱈vaj鱈 (X)HTML k坦d (+ CSS a JavaScript) jako rozhran鱈 pro komunikaci s u転ivatelem Na rozd鱈l od b転n箪ch statick箪ch WWW str叩nek je na stran serveru nav鱈c p鱈tomna aplikan鱈 logika, kter叩 reaguje na specifick辿 po転adavky klient哲 (co転 v箪razn zvy邸uje 炭rove interaktivity s u転ivatelem) P鱈klady Virtu叩ln鱈 obchody (e-shopy) Mapy, katalogy a vyhled叩vac鱈 slu転by Redakn鱈 syst辿my (CMS) Soci叩ln鱈 s鱈t (Facebook, Twitter a spol.) ASP (Application Service Provider), SaaS (Software as a Service) hostov叩n鱈, pron叩jem aplikac鱈 a slu転eb Dynamick辿 generovan辿 webov辿 str叩nky 6
- 7. Model klient/server Na stran klienta je vt邸inou aplikace, kter叩 odpov serveru d叩le zpracov叩v叩 Webov辿 slu転by pou転鱈vaj鱈 form叩t XML, ve kter辿m spolu klient a server komunikuj鱈 (vlastn鱈 komunikace zpravidla prob鱈h叩 pes protokol HTTP/HTTPS) Pomoc鱈 webov箪ch slu転eb je mo転n辿 e邸it komunikaci aplikac鱈 v heterogenn鱈m prosted鱈, proto転e pou転鱈van箪 form叩t (XML) a protokoly (SOAP = vzd叩len辿 vol叩n鱈 procedur, HTTP/HTTPS = penos dat) jsou dostaten univerz叩ln鱈 Popis ka転d辿 webov辿 slu転by (dostupn辿 metody a parametry) je k dispozici v XML form叩tu (*.wsdl soubor) Webov辿 slu転by je mo転n辿 vytv叩et na v邸ech b転n pou転鱈van箪ch v箪vojov箪ch platform叩ch (Java, .NET, PHP). S 鱈m d叩l v箪raznj邸鱈m trendem vz叩jemn辿ho propojov叩n鱈 existuj鱈c鱈ch aplikac鱈 roste v箪znam technologi鱈, kter辿 umo転uj鱈 jejich integraci tedy i webov箪ch slu転eb! Pozor, webov辿 slu転by nemus鱈 b箪t v転dy t鱈m nejvhodnj邸鱈m integran鱈m e邸en鱈m! Webov辿 slu転by (web services) 7
- 8. REST navrhl Roy Fielding (spoluautor HTTP protokolu) Model klient/server Je bez-stavov箪, m哲転e pracovat z cache, jednoduch叩 implementace Je orientov叩n datov (ROA), na rozd鱈l od webov箪ch slu転eb (orientov叩ny procedur叩ln) Pou転鱈v叩 b転n辿 HTTP p鱈kazy (GET, POST, PUT a DELETE) pro CRUD operace Stav aplikace a chov叩n鱈 je vyj叩den takzvan箪m resourcem (kl鱈ov叩 abstrakce), ka転d箪 resource mus鱈 m鱈t unik叩tn鱈 identifik叩tor (URL, URN) REST form叩ty pro v箪mnu dat Atom/RSS, JSON, XML REST (Representational State Transfer) 8
- 9. V箪hody a nev箪hody webov箪ch aplikac鱈
- 10. Na stran klienta sta鱈 webov箪 prohl鱈転e, nkdy s p鱈slu邸n箪m plug-inem (Flash, Silverlight) od nutnosti plugin哲 se ustupuje (nov辿 mo転nosti HTML5)! Jednoduch叩 炭dr転ba zmny pouze na stran serveru Aktu叩lnost ka転d叩 炭prava se okam転it projev鱈 (aplikan鱈 logika, data) Ni転邸鱈 n叩roky na HW klient哲 sta鱈 jak辿koliv za鱈zen鱈 s webov箪m prohl鱈転eem Ni転邸鱈 provozn鱈 n叩klady Nez叩vislost na platform (OS) na stran klienta Pizp哲soben鱈 UI r哲zn箪m koncov箪m za鱈zen鱈m (exponenci叩ln roste poet p鱈stup哲 z mobil哲) V箪born叩 dostupnost, vyu転it鱈 v lok叩ln鱈 s鱈ti (Intranetu) i v Internetu (24/7) V箪hody webov箪ch aplikac鱈 10
- 11. Nehod鱈 se pro nkter辿 typy aplikac鱈 Vysok叩 z叩vislost na poskytovateli aplikace Roadmapa aktualizac鱈 nemus鱈 vyhovovat v邸em klient哲m (viz. nasazen鱈 Office) Nemo転nost pr叩ce v offline re転imu (za鱈n叩 se e邸it HTML5, Adobe Air) Omezen辿 mo転nosti u転ivatelsk辿ho rozhran鱈 Omezen辿 mo転nosti validace dat na stran klienta (webov箪 prohl鱈転e) Nedokonal叩 podpora standard哲 (HTML, CSS, JavaScript) v prohl鱈転e鱈ch Bez-stavov叩 komunikace pi pou転it鱈 protokolu HTTP/HTTPS (lze obej鱈t) Mno転stv鱈 pen叩邸en箪ch dat (znakovac鱈 jazyk) Probl辿my s bezpenost鱈 (webov箪 prohl鱈転e, dostupnost v Internetu) Nev箪hody webov箪ch aplikac鱈 11
- 12. Jak webov叩 aplikace funguje?
- 13. Webov叩 aplikace je postavena na modelu klient/server Na stran klienta je obvykle vizu叩ln鱈 rozhran鱈 aplikace (User Interface, frontend) HTML + CSS + JavaScript (nejastj邸鱈 p鱈pad) Flash/Flex Silverlight Na stran webov辿ho serveru (backend) je aplikan鱈 logika, datov辿 炭lo転i邸t atd. 叩st aplikan鱈 logiky m哲転e b箪t i na klientovi (JavaScript)! Na stran serveru m哲転e b箪t jen datov辿 API (SOAP, REST apod.) potom je aplikan鱈 logika na klientovi cel叩 (nkter辿 SPA) Obvykle se ke komunikaci vyu転鱈v叩 protokol HTTP/HTTPS (port 80, resp. 443), m叩 urit辿 nedostatky Google projekt SPDY, resp. nov schv叩len箪 HTTP/2 >> rychlej邸鱈 na鱈t叩n鱈 str叩nek, bezpenj邸鱈 邸ifrov叩n鱈 Klientsk箪m za鱈zen鱈m nemus鱈 b箪t jen stoln鱈 po鱈ta! Jak webov叩 aplikace funguje? 13
- 14. Synchronn鱈 komunikace Je (zat鱈m) astj邸鱈 Dotaz klienta + odpov serveru (zn叩te ze statick箪ch web哲) Inici叩torem komunikace je v転dy klient (webov箪 prohl鱈転e) Aktu叩lnost informac鱈 m叩 urit辿 zpo転dn鱈 (a転 kdy転 se klient zept叩) Asynchronn鱈 komunikace M叩 permanentn oteven箪 komunikan鱈 kan叩l Oboustrann叩 komunikace mezi serverem a klienty Vyu転鱈v叩 se v tzv. realtime aplikac鱈ch (online chat, kurzy akci鱈 apod.) Podpora v r哲zn箪ch technologi鱈ch, nejzn叩mj邸鱈 asi AJAX, web socket apod. Metody komunikace v HTML5 (XML HTTP Request, CORS, Web Sockets ) SignalR: Realtime web v ASP.NET (Michal Altair Val叩邸ek) Synchronn鱈 a asynchronn鱈 komunikace 14
- 16. Webov辿 aplikace maj鱈, v porovn叩n鱈 s klasick箪mi desktopov箪mi a klient/server aplikacemi, urit辿 specifick辿 po転adavky Soub転n箪 p鱈stup velk辿ho mno転stv鱈 klient哲 >> rychlost odezvy Protokol HTTP je bez-stavov箪 >> nutnost pou転it鱈 session a cookies R哲zn叩 koncov叩 za鱈zen鱈, snaha o co nejmen邸鱈 datov箪 traffic (odezva, pen鱈ze) Pi n叩vrhu GUI aplikace je vhodn辿 pesn specifikovat pou転it辿 technologie a standardy (ve firemn鱈ch intranetech st叩le pe転鱈v叩 IE6!) I pro webov辿 aplikace plat鱈 tradin鱈 v箪vojov箪 cyklus... Anal箪za * > Implementace > Testov叩n鱈 * > Nasazen鱈 * > Provoz * Jednotliv辿 f叩ze v箪vojov辿ho cyklu (*) m哲転e ovlivnit z叩kazn鱈k (zadavatel)! V箪voj webov箪ch aplikac鱈 16
- 17. Je teba kl叩st maxim叩ln鱈 d哲raz na testov叩n鱈 (nejl辿pe automatizovan辿) a br叩t v 炭vahu rozd鱈ly mezi testovac鱈m a skuten箪m provozem (HW, SW, konfigurace)! Existuj鱈 r哲zn辿 druhy (automatick箪ch) test哲 Funkn鱈, integran鱈, z叩t転ov辿, unit testy apod. Pi opakovan辿m pou転it鱈 (iterace) pin叩邸鱈 automatick辿 testov叩n鱈 v箪raznou 炭sporu asu a lidsk箪ch zdroj哲 (kapacit) sni転uje n叩klady na projekt! Automatizace sni転uje pravdpodobnost, 転e udl叩me pi zad叩v叩n鱈 chybu, ale zvy邸uje pravdpodobnost, 転e na nco zapomeneme Michael Nygard Zante mit v箪kon syst辿mu (nebo jeho 叩sti) co nejd鱈ve Agiln鱈 metodiky: V箪konnostn鱈 testy nejpozdji od 3. iterace (1 iterace = cca 2-4 t箪dny) Pozdj邸鱈m nasazen鱈m se piprav鱈te o mo転nost identifikovat, jak叩 zmna mla za n叩sledek p鱈padn辿 probl辿my s v箪konem Testov叩n鱈 webov箪ch aplikac鱈 17
- 18. Podle podm鱈nek a okolnost鱈 vzniku V箪voj na zelen辿 louce (cel箪 v箪vojov箪 cyklus b転鱈 od za叩tku) Peklopen鱈 ji転 existuj鱈c鱈 aplikace (s pou転it鱈m reverzn鱈 anal箪zy) Podle zp哲sobu implementace Programov叩n鱈m Generov叩n鱈m (z datab叩ze, z modelu (MDA) atd.) Oba zp哲soby implementace maj鱈 sv辿 v箪hody a nev箪hody! Mo転n辿 p鱈stupy k v箪voji 18
- 19. Pi n叩vrhu webov辿 aplikace je vhodn辿 rozdlen鱈 do tzv. aplikan鱈ch vrstev Nejjednodu邸邸鱈 (obecn辿) rozdlen鱈: P鱈stup k dat哲m (persistence) Aplikan鱈 (business) logika Prezentan鱈 vrstva (UI) Aplikan鱈 vrstvy 19 Domain-Driven Design patterns: 1. User interface (Presentation Layer) 2. Application Layer 3. Domain Layer 4. Infrastructure and Technical Services Layer http://davidhayden.com/blog/dave/archive/2004/12/12/685.aspx Obecn: N叩vrhov辿 vzory jsou u転iten辿, pom叩haj鱈 ke spr叩vn辿mu n叩vrhu designu aplikace!
- 20. Rozdlen鱈 aplikace do vrstev umo転uje (krom dal邸鱈ch v箪hod) pi v箪voji vyu転鱈t nejr哲znj邸鱈 podp哲rn辿 knihovny a frameworky, kter辿 mohou v箪razn zjednodu邸it a zefektivnit v箪voj, nap. P鱈stup k dat哲m (DB, file syst辿m, r哲zn辿 form叩ty), ORM Object Relational Mapping) Automatizovan辿 testov叩n鱈 (unit testy) Autentizaci u転ivatel哲 P鱈klad nkter箪ch pou転鱈van箪ch knihoven a framework哲 Java JDO, Spring, JUnit, Hibernate (ORM) .NET ADO.NET, NUnit, EF, LINQ, NHibernate (ORM), Spring.NET, ASP.NET MVC PHP PEAR, Smarty, FastTemplates, Nette, Zend Pou転鱈v叩n鱈 framework哲 a knihoven je trend! Knihovny a frameworky 20
- 21. Chyby pi v箪voji webov箪ch aplikac鱈
- 22. Je z叩va転nou (a bohu転el obvyklou) chybou programovat webov辿 aplikace jako jednou転ivatelsk辿 Pi n叩vrhu aplikace se nepo鱈t叩 s jej鱈m budouc鱈m rozvojem/roz邸鱈en鱈m, integrac鱈 s dal邸鱈mi aplikacemi nebo rostouc鱈m zat鱈転en鱈m (v鱈ce u転ivatel哲) 貼iveln箪 v箪voj asto se zane programovat bez dostaten辿 anal箪zy nebo bez komunikace se z叩kazn鱈kem (chyb鱈 prototyp UI apod.) U転ivatel哲m se nab鱈z鱈 zbyten slo転it辿 a nepehledn辿 ovl叩d叩n鱈 V箪vojov辿, testovac鱈 a provozn鱈 prosted鱈 aplikace maj鱈 asto rozd鱈lnou konfiguraci (li邸鱈 se verze pou転it辿ho SW, nastaven鱈 parametr哲 apod.) Podceuje se f叩ze testov叩n鱈 (funkn鱈, integran鱈, z叩t転ov辿), nepou転鱈v叩 se TDD (unit testy) Neoddluj鱈 se jednotliv辿 aplikan鱈 vrstvy (data business user inteface) Objevuj鱈 se zbyten辿 duplicity v programov辿m k坦du Znovu se vynal辿z叩 kolo >> nepou転鱈vaj鱈 se vzory (design patterns), best practice Programuj鱈 se funkce, kter叩 u転ivatel nepotebuje nebo nevyu転鱈v叩 (ada z nich nen鱈 v UI v哲bec vidt) Ignoruj鱈 se z叩kladn鱈 bezpenostn鱈 pravidla pro p鱈stup k aplikac鱈m a k dat哲m Chyby pi v箪voji web aplikac鱈 I. 22
- 23. UI je slo転it箪, nepehledn箪, asto s nestandardn鱈m ovl叩d叩n鱈m Netestuj鱈 se vstupn鱈 data od u転ivatel哲 (u転ivatel = ne鱈zen叩 stela) Z哲st叩vaj鱈 neukonen叩 pipojen鱈 k datab叩zi Je 邸patn navr転en叩 struktura datab叩ze, chyb鱈 indexy apod. Pou転鱈vaj鱈 se neoptimalizovan辿 SQL dotazy, asto bez parametr哲 Nen鱈 o邸etena soub転n叩 modifikace dat Nen鱈 o邸eten opakovan箪 z叩pis dat (F5, obnoven鱈 str叩nky) Nejsou spr叩vn nebo v哲bec o邸eteny v箪jimky (chyby)! Nevyu転鱈v叩 se vyrovn叩vac鱈 buffer pi generov叩n鱈 odpovdi Nevyu転鱈v叩 se ke邸ov叩n鱈 (cache) str叩nek pi opakovan箪ch po転adavc鱈ch Pen叩邸鱈 se zbyten velk辿 mno転stv鱈 dat mezi serverem a klientem (pozor na mobily!) Pi objektov辿m programov叩n鱈 se chybn pracuje s kolekcemi Program叩tor po sob neukl鱈z鱈 v pamti, spol辿h叩 na GC nebo na z叩zrak http://zdrojak.root.cz/clanky/programator-prestava-byt-amater-kdyz/ Chyby pi v箪voji web aplikac鱈 II. 23
- 24. Technologie
- 25. Volbu technologie ovlivuje ada faktor哲, nap. Po転adavky (r哲zn辿 role, poteby) Pou転it叩 platforma (OS, aplikan鱈 server, datab叩ze) Po転adavky na bezpenost Zvyk (zadavatel, dodavatel), obchodn-politick辿 vlivy Dostupnost knowhow na stran dodavatele Cena e邸en鱈 Prosted鱈, podm鱈nky provozu Co to pinese pro business (n叩klady, term鱈ny, n叩ronost udr転itelnost!) Pou転it叩 technologie m哲転e v箪razn ovlivnit rychlost (odezvu) webov辿 aplikace smrem ke klientovi (ASP/ASP.NET > a転 3x vt邸鱈 rychlost ASP.NET). Volba vhodn辿 technologie je邸t nezaruuje dobr箪 v箪sledek! Blbost je na platform nez叩visl叩 Volba technologie 25
- 26. Na stran klienta HTML formul叩e CSS, DHTML, XSLT Klientsk辿 skripty (JavaScript, d鱈ve i VB.Script*) Java aplety*, ActiveX* Flash/Flex, Silverlight, AJAX a dal邸鱈 technologie ze skupiny RIA Na stran serveru Interpretovan辿 (nap. Perl, ASP*, PHP, Python, Ruby) 叩sten kompilovan辿 (JEE, ASP.NET) Kompilovan辿 (CGI skripty*) Hvzdikou (*) jsou oznaen辿 zastaral辿 nebo jinak problematick辿 technologie Technologie pou転鱈van辿 u web aplikac鱈 26
- 27. asov叩 osa Pravk HTML formul叩e a CGI skripty, Stedovk Perl, ASP, JSP, PHP, Java Aplety, ActiveX, Dnes AJAX (HTML + JavaScript), JEE (J2EE), ASP.NET, Ruby (on Rails), Python (Django), Silverlight, Flex atd. Na stran klienta (prohl鱈転ee) je, a v nejbli転邸鱈 dob bude, nejd哲le転itj邸鱈 kombinace HTML5 + JavaScript + CSS3. Bez ohledu na technologie pou転it辿 na stran serveru! V箪hledov HTML5 m哲転e nahradit nativn鱈 aplikace, ale nebude to hned! Roz邸鱈enost vybran辿 technologie je邸t automaticky neznamen叩 jej鱈 kvalitu! Infografika: http://sixrevisions.com/infographs/what-websites-madeof/ Pou転鱈van辿 technologie z hlediska historie 27
- 28. Odkazy na internetu, literatura
- 29. http://www.kosek.cz/php/index.html (PHP) http://www.asp.net/ (ASP.NET) http://java.sun.com/javaee/index.jsp (Java/JEE) http://java.sun.com/javaee/javaserverfaces/ (Java/JSF) http://www.hibernate.org/ (ORM) http://nhibernate.sourceforge.net/ (ORM) http://www.smarty.net/ (PHP framework) http://www.ruby-lang.org/en/ (Ruby) http://tomas-net.blogspot.com/2006/04/souboj-tlust-tenk-aplikace.html http://zdrojak.root.cz/clanky/prezentacni-vzory-zrodiny-mvc/ http://www.root.cz/zpravicky/jak-zrychlit-web/ http://zdrojak.root.cz/clanky/jak-zrychlit-server-nekolik-praktickych-postrehu/ http://zdrojak.root.cz/clanky/single-page-apps-a-reseni-problemu-s-historii/ http://zdrojak.root.cz/clanky/mobilizujeme-web-v-html5/ http://www.netmagazine.com/features/future-css-layouts http://www.zdrojak.cz/clanky/metody-komunikace-v-html5/ http://www.youtube.com/watch?v=vPXK82CayYE&feature=plcp (video pedn叩邸ky o cache) http://www.robertdresler.cz/2013/09/snizovani-rizikovosti-softwarovych.html rizikovost projekt哲 Odkazy na internetu 29
- 30. Martin, C. Robert ist箪 k坦d N叩vrhov辿 vzory, refaktorov叩n鱈, testov叩n鱈 a dal邸鱈 techniky agiln鱈ho programov叩n鱈 , Computer Press 2009 Pecinovsk箪, Rudolf N叩vrhov辿 vzory 33 vzorov箪ch postup哲 pro objektov辿 programov叩n鱈, Computer Press 2007 Pecinovsk箪 Rudolf OOP Naute se myslet a programovat objektov, Computer Press 2010 Earl Thomas SOA Servisn orientovan叩 architektura, Computer Press 2009 MacDonald, Matthew; Szpuszta, Mario ASP.NET 3.5 a C# 2008, Zoner Press 2008 Watson, Ben C# 4.0 e邸en鱈 praktick箪ch program叩torsk箪ch 炭loh, Zoner Press 2010 Mach叩ek, Jan; Vukotic, Alexa; Chakraborty, Anirvan; Ditt Jessica Pro Spring 3, Apress 2009 Microsoft Vytv叩鱈me zabezpeen辿 aplikace v Microsoft ASP.NET, CP Books (Computer Press) 2004 Taylor, Art; Buege Brian; Layman Randy Hacking bez tajemstv鱈: Java a J2EE, Computer Press 2003 Huseby, Sverre H. Zraniteln箪 k坦d, Computer Press 2006 Doporuen叩 literatura 30