SlideShare a Scribd company logo
TNPW2
2012/2013
07 – Aktuální trendy ve vývoji webových aplikací


Mgr. Lukáš Vacek
lukas.vacek@uhk.cz
2




Agenda

         •   Současný stav, RIA
         •   Komunikace webových aplikací
         •   Uživatelské rozhraní
         •   AJAX
         •   Flash, Flex, AIR, XUL, Silverlight a další
         •   Pracovní nástroje
         •   Co je Web 2.0? Cloud computing?
         •   Internet, doporučená literatura
3

Současný stav webových technologií
  • Neustálé zdokonalování stávajících technologií pro web, které se ukázaly
    jako použitelné (životaschopné):
    ▫ rozšiřování funkcionality, kterou poskytují vývojářům,
    ▫ zjednodušení (a zrychlení) jednotlivých procesů vývoje
      (analýza, návrh, implementace, testování, deployment),
    ▫ implementace moderních trendů (MVC, ORM, SOA, bezpečnost, přístupnost
      pro různá zařízení a platformy apod.),
    ▫ zvyšování výkonu vyvíjených aplikací.

  • Osvědčené technologie: Java (JSF/MVC
    Frameworky), ASP.NET, Flash, Python, PHP...
  • „Novější“ technologie: Ruby (on Rails), Adobe AIR, Flex, Silverlight apod.

  • Na straně klienta je současným leaderem HTML5 + CSS3 + JavaScript

  • Pořád je co zlepšovat!
4

Aktuální problémy
  • Vývoj webových aplikací = (až moc) velký výběr technologických platforem
  • Problémem většiny dnešních webových aplikací jsou hlavně…
    ▫   omezené možnosti jejich uživatelského rozhraní (User Interface),
    ▫   validace formulářových dat na straně klienta (v reálném čase),
    ▫   bez-stavová komunikace při použití protokolu HTTP(S)
    ▫   práce v offline režimu
  • Většina webových aplikací je stále založena na značkovacím jazyku HTML
    (XHTML) – ten původně nebyl navržen pro vývoj aplikací >> má celou řadu
    omezení (množství přenášených dat, ergonomie ovládání apod.)
  • Některá omezení lze obejít (např. JavaScript/AJAX, Flash, Adobe
    AIR, ViewState a PostBack v ASP.NET apod.), ale není to ono
    (problematická účinnost, někdy složitost řešení, kompatibilita v
    prohlížečích)

  • Takže, co s tím?
5

Řešení?
  • Vytvořit nové nebo rozšířit stávající technologie tak, aby poskytovaly
    vývojářům a uživatelům:
    ▫ komplexní grafické rozhraní (MDI koncept >> 1 hlavní okno),
    ▫ ovládání a funkce odpovídající klasickému desktopovému řešení
       (drag&drop, klávesové zkratky, kontextová nápověda, auto complete
       prvky apod.),
    ▫ možnost kontroly formulářových dat u klienta v reálném čase
    ▫ možnost práce v offline režimu na straně klienta
    ▫ odstínění klienta (uživatele) od modelu žádost/odpověď
    ▫ přenos jen nezbytně nutných dat (např. bez duplicit v UI)
    ▫ a to vše pro různé druhy platforem a zařízení (např. mobilní)
6

Co je RIA (Rich Internet Application)
  • Označení pro novou generaci aplikací, které by uvedené požadavky měly
    plně (nebo částečně) splňovat
  • RIA řeší především záležitosti na straně klienta!
  • Významnou roli bude hrát HTML5 (aspoň v nejbližší době)
  • Existuje silná spojitost s Internetem – web/(X)HTML, plug-iny
    prohlížečů, desktop, mobilní zařízení
  • Snadnost spuštění aplikace se blíží snadnosti navštívení webové stránky
  • Výhledově by RIA technologie mohly výrazně podpořit myšlenku na
    převedení většiny dnešních aplikací do online podoby (celá řada výhod >>
    aktuálnost, dostupnost, zpoplatnění jen používaných funkcí apod.)

  http://interval.cz/clanky/rich-internet-applications-v-roce-2008/
  http://zdrojak.root.cz/clanky/pristupnost-ria-dynamicke-zmeny-obsahu/
7




Agenda

          Současný stav, RIA
         • Komunikace webových aplikací
         • Uživatelské rozhraní
         • AJAX
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
8

Webová komunikace – bezstavové HTTP
  • Nejčastěji založena na protokolu HTTP(S)
  • HTTP je bezstavový protokol (request >> response)
    ▫ Základní vlastnost = snadná implementace
    ▫ Mezi jednotlivými requesty se neudržuje kontext
    ▫ U většiny aplikací to nemusí vadit

  • Bezstavové HTTP můžete obejít přes
    •   Cookie (nejstarší, 4KB dat, odesílá se s každým(!) http požadavkem, lze zakázat)
    •   Session (posílá se ID relace, data uložena na serveru – in proc, state server, sql)
    •   Využitím local storage (viz dále)
    •   Viewstate a Control State (v ASP.NET) – hashovaná data v políčku formuláře

  • http://www.youtube.com/watch?v=IdJD2FSRQWU video z přednášky
9

Další možnosti komunikace
  • Moderní webové aplikace využívají pro komunikace mezi klientem a
    webovým serverem i další standardy/protokoly, než jen obyčejné HTTP(S)
    ▫ REST – orientován datově (ROA), běžné HTTP příkazy (GET, POST, PUT
      a DELETE) pro CRUD operace
    ▫ Webové služby – protokol SOAP pro vzdálené volání procedur, formát XML
    ▫ SOA – univerzální, i mimo web

  • Různé formáty dat přicházejících na klienta… HTML, XML, JSON
    apod., které lze (programově) dále zpracovat

  • Iniciátorem komunikace nemusí být vždy klient (obvyklý scénář) – možnost
    vytvoření permanentního spojení (web socket, realtime app – SignalR
    apod.)

  • Nezapomeňte na bezpečnost komunikace – SSL, autentizaci klientů apod.
10




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
         • Uživatelské rozhraní
         • AJAX
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
11

Webové formuláře
  • Už od počátku Internetu jsou formuláře hlavním prostředkem pro zadávání
    uživatelských vstupů do webové stránky
  • Základní množina formulářových prvků a jejich funkcí je v podstatě stále
    stejná jako na začátku, kdy se nepočítalo s Internetem jako s platformou
    pro aplikace
  • Původní formulářové prvky nepokrývají všechny potřeby dnešních
    webových aplikací, nejen v oblasti datových vstupů, ale i jejich případné
    validace (kontroly)
  • Tento nedostatek bylo třeba odstranit

  • Jsou (byly) možné dva základní přístupy k řešení problému:
     ▫ Úplně to celé předělat (XForms)
     ▫ Rozšířit stávající množinu prvků a jejich funkcionalitu (Web Forms >> HTML5)

  http://interval.cz/clanky/pohled-na-webove-formulare-druhe-generace/
12

HTML5 (Web Forms 2.0 je součástí)
  • Původně konsorcium WHATWG (The Web Hypertext Application Technology
    Working Group) >> vývojáři Mozilla, Opera, Safari
  • Od roku 2007 existuje pracovní skupina W3C pro HTML5 specifikaci, v lednu 2008
    byl vydán draft
  • Rozšiřuje HTML 4.01 a XHTML 1.0 >> jednoduché na naučení
  • Zpětná kompatibilita ve starších prohlížečích
  • Částečná podpora nových prvků v prohlížečích

  http://en.wikipedia.org/wiki/Html5
  http://www.lupa.cz/clanky/whatwg-budoucnost-webu/
  http://www.w3.org/TR/2008/WD-html5-diff-20080122/
  http://html456.blogspot.com/2010/10/nepouzivejte-html5-jeste-ne-prosi-nas.html
  http://is.gd/hUmV4 – HTML5 framework pro mobilní aplikace (37signals)
13

Lokální úložiště dat – Local storage, Session storage
  • V souvislosti se standardem HTML5 se často mluví o offline režimu aplikací

  •   Lokální úložiště dat (name/value) na straně klienta, přístupné z JavaScriptu
  •   Podpora v moderních prohlížečích (např. IE8+)
  •   Local storage běžně neexpiruje, musíte si po sobě uklidit!
  •   Session storage standardně vydrží do zavření okna prohlížeče
  •   Kapacita cca 5MB na doménu, každý browser to ale počítá jinak!
  •   Nepřenáší se na server, aplikační logika sama musí data serializovat!

  • http://www.lupa.cz/clanky/sql-si-razi-cestu-do-html5/
  • http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-webstorage/
  • http://code.google.com/p/sessionstorage/
14

XForms
  •   Za návrhem XForms stojí konsorcium W3C
  •   Jeden z modulů připravovaného XHTML 2.0
  •   Komplexně řeší formuláře na webu i na desktopu
  •   Je poněkud složitější na naučení (i když W3C tvrdí opak )
  •   Chybí zpětná kompatibilita
  •   Aktuálně je kolem XHTML 2.0 a W3C poměrně nejasná situace

  http://en.wikipedia.org/wiki/Xforms
  http://www.grafika.cz/art/webdesign/encxforms.html
  http://html456.blogspot.com/2009/07/predseda-xhtml2-wg-rika-xhtml2-neni.html
15




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
         • AJAX
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
16

AJAX (Asynchronous JavaScript and XML)
  • Aktuálně nejrozšířenější RIA technologie
  • „AJAX je programový přístup, který mezi prohlížeč a webový server přidává vrstvu
    abstrakce.“
    http://blogs.msdn.com/mohammadakif/archive/2006/01/14/512991.aspx

  • Základním principem fungování AJAXu je klientské skriptování (DOM, (X)HTML
    a JavaScript), obvykle kombinované s voláním webových služeb a zpracováváním
    XML dat (XMLHttpRequest) >> používá známé a osvědčené technologie
  • Jeho nasazení (pozor, neplatí to vždy a všude!) může zlepšit použitelnost webových
    aplikací s ohledem na jejich ovládání uživatelem
  • Někdy je náročnější na implementaci, a při nevhodném použití může generovat
    poměrně velkou zátěž pro webový server
  • Webové AJAX aplikace je možné vytvářet na většině hlavních vývojových platforem
    (ASP.NET, Java/JSF/ADF, PHP apod.)

  http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML
  http://ajaxpatterns.org/Java_Ajax_Frameworks
  http://www.noupe.com/javascript/most-wanted-ajax-techniques-50-ajax-examples-and-tutorials.html
17

AJAX – schéma komunikace
   Klasická webová aplikace
    Klient (webový prohlížeč)                                      Server (webový server)

                                             HTTP request


             User Interface                                              Aplikační logika
                                             HTML + CSS




   AJAX
    Klient (webový prohlížeč)                                      Server (webový server)

                       JavaScript                   HTTP request
            User                    AJAX
                                                                         Aplikační logika
          Interface                 Engine
                      HTML + CSS                      XML data
18

Microsoft ASP.NET AJAX Extension
  • Microsoft ASP.NET AJAX Extensions (dříve Atlas, AJAX.NET) je sada klientských
    knihoven, serverových ovládacích prvků a webových služeb
  • Jde o client side framework, který je nadstavbou pro ASP.NET
  • Koncepčně se dělí na dvě části – klientskou a serverovou
  • Klientská část může fungovat bez serverové, opačně to neplatí
  • Základem je JavaScriptový framework, který si klade za cíl ulehčit vývoj
    tzv. AJAXových aplikací
  • Komponenty používají na straně klienta jQuery

  http://www.asp.net/ajax/
  http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/

  • Pro VS 2010 a ASP.NET 4.0 doporučuji používat NuGet package manager, který se
    v projektu postará o základní nastavení referencí knihoven, včetně bezpečnostních
    doplňků typu Sanitizer nebo Anti-XSS library…
  • http://stephenwalther.com/blog/archive/2011/08/17/adding-the-new-html-
    editor-extender-to-a-web-forms.aspx
19




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
          AJAX
         • Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
20

Adobe Flash
  • V současnosti dominuje v oblasti interaktivní grafiky na Internetu
  • Multiplatformní technologie zaměřená na práci s grafikou, vektorovými
    animacemi nebo video streamingem (např. Youtube)
  • Historie – FutureWave Software (kolem roku 1996), Macromedia
    (do   2005)
  • Pro klienta je k dispozici Flash Player (aktuální verze 11.4), jako plug-in je
    nainstalován na většině počítačů s webovým prohlížečem (uvádí se až
    99  podle Adobe)
         %
  • Používá programovací jazyk ActionScript (založený na ECMAScript), pracuje
    s textem, grafikou i s databázemi
  • Jsou určité problémy s indexování obsahu ve vyhledávačích
  • Ověřená technologie, s velkou vývojářskou komunitou!
  • Řada vývojových nástrojů (pravda, s různou kvalitou )
  • Problémy: bezpečnost, stabilita, výkon na slabších zařízeních!

  http://www.adobe.com/products/flash/
  http://www.flash.cz/portal/
21

Adobe Flex
  • Adobe Flex je komponentový framework určený pro vývoj a provoz
    interaktivních aplikací postavených na technologii Flash (Flash Player
    v prohlížeči) a Adobe AIR (desktop)
  • Aplikace mohou integrovat např. multimédia, XML, webové služby nebo tzv.
    Flex Data Services (WS postavené na J2EE)
  • Programovací jazyk ActionScript 3, MXML pro UI
  • Základní vývojové nástroje (SDK + kompilátor) jsou zdarma, Flex Builder
    za peníze; je možná pokročilá integrace (Ant, Maven)
  • Deployment = zkopírovat soubory SWF (+ HTML wrappery)
  • Technologie Flash/Flex umožňují odklon UI od klasické podoby webových
    stránek, není to náhrada HTML a spol.
  • Velké plány Adobe, realita je skromnější, aktuální verze Flex 4.8.xx (7/2012)
  • Open source licence frameworku!

  http://www.adobe.com/products/flex/
  http://www.grafika.cz/art/webdesign/flashflex.html
  http://interval.cz/clanky/adobe-flex-co-je-a-co-neni/
22

Adobe AIR
  • Adobe AIR (Adobe Integrated Runtime, dříve Apollo)
  • První stabilní verze 1.0 (únor 2008) – aktuální verze 3.5.xx (11/2012)
  • Multiplatformní runtime propojující desktopové a webové aplikace
  • Umožňuje kombinovat např. HTML/JavaScript/AJAX, Flash, Flex
  • Rozšiřuje funkcionalitu a možnosti webových aplikací (např.
    drag&drop, práce s diskem, nativní okna, offline práce s
    daty, synchronizace apod.)
  • Má plný přístup k lokálním zdrojům! Pod účtem, pod kterým uživatel
    pracuje
  • Aplikace lze spouštět nezávisle na prohlížeči, na různých zařízeních

  http://www.adobe.com/cz/products/air/
  http://labs.adobe.com/technologies/air/
  http://jilm.blog.lupa.cz/0704/adobe-je-cerny-kun-internetovych-aplikaci
  http://www.flash.cz/portal/clanek.aspx?id=594
  http://www.dsl.sk/article.php?article=5359
23

Silverlight
   • Silverlight představila fy Microsoft v září 2007, aktuální verze 5.1 (5/2011)
   • Jde o runtime pro spouštění interaktivních aplikací v prostředí webového
     prohlížeče nebo desktopu, u klienta je třeba instalovat odpovídající plug-in
   • Základem je WPF >> grafický subsystém .NET Frameworku 3.0 >> umožňuje
     popisovat textový, vektorový, interaktivní a multimediální obsah pomocí XAML
   • Podporuje přehrávání audia a videa ve formátech WMV, WMA a MP3
   • Programovat lze v JavaScriptu, od verze 2.0 také v C#, VB.NET apod.
   • Multiplatformní podpora u klienta pro Windows, Mac, Linux (Moonlight)
   • Na klientovi běží v tzv. sandboxu, nemá plný přístup k disku
   • Jako vývojové prostředí se používá Visual Studio
   • Někdy je označována jako tzv. „Flash killer“ technologie 

   • Jako cross-platform technologii bude Microsoft spíše podporovat HTML5!

  http://www.microsoft.com/silverlight/
  http://www.vyvojar.cz/Articles/473-neco-malo-k-technologiim-wpf-a-silverlight.aspx
  http://en.wikipedia.org/wiki/Moonlight_(runtime)
  http://is.gd/hUi05 (článek na JustIT - podpora Silverlight vs. HTML5)
24

XUL (XML User Interface Language, čti Zůl)
  • XUL je technologie založená na XML
  • Umožňuje tvorbu RIA aplikací, které mohou být spouštěny
    z Internetu (ale nemusí, např. Firefox)
  • XML v kombinaci s JavaScriptem (obsluha událostí) a CSS umožňuje
    vytvářet UI aplikací
  • XUL odděluje jednotlivé prvky UI a jejich vzhled >> snadná skinovatelnost
  • Technologii XUL zastřešuje Mozilla Foundation
  • Je platformě nezávislá, používá komponenty v nativních jazycích (C/C++)
  • Na straně klienta je to trochu pomalé…

 http://www.mozilla.org/projects/xul/
 http://en.wikipedia.org/wiki/XUL
 http://www.kosek.cz/clanky/xul/index.html
25

Další technologie – JavaFX, Mozilla Prizm, Google Gears
  JavaFX
  • Nadstavba na Javou, která umožní tvorbu interaktivních RIA aplikací určených pro
     desktop, mobilní zařízení apod.
  • Skriptovací jazyk JavaFX Script pro práci s UI
  http://www.sun.com/software/javafx/index.jsp
  http://www.linuxsoft.cz/article.php?id_article=1744
  http://cs.wikipedia.org/wiki/JavaFX

  Mozilla Prizm (opět WebRunner)
  • Umožňuje integraci webových aplikací v desktopovém prostředí bez nutnosti
     spuštění webového prohlížeče
  http://wiki.mozilla.org/Prism
  http://www.lupa.cz/zpravicky/mozilla-zrusila-projekt-prism-nastupuje-chromeless/

  Google Gears (na konci roku 2009 zastaven rozvoj na úkor HTML5)
  • Umožňuje přístup a využití online služeb v offline režimu, využívá speciální
     rozšíření pro prohlížeč postavené nad SQLite databází
  http://en.wikipedia.org/wiki/Google_gears
26




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
          AJAX
          Flash, Flex, AIR, XUL, Silverlight a další
         • Pracovní nástroje
         • Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
27

Pracovní nástroje
  • Trendem jsou rostoucí požadavky na komplexnost vývojových nástrojů
  • Každý vývojář potřebuje něco jiného, záleží na jeho roli
  • Jednotlivé etapy vývoje software nejsou jednoznačně odděleny, často běží vedle
    sebe (paralelní běh analýzy a implementace při tzv. extrémním programování )
  • Jsou vyžadovány funkce a nástroje, které zefektivní jednotlivé etapy vývoje

  • Pro fázi implementace se za samozřejmé považuje např.
    ▫ sofistikovaný editor zdrojových kódu s inteligentním doplňováním,
    ▫ vizuální návrh UI, trend generování UI do HTML5 + JavaScript + CSS na výstupu,
    ▫ spolupráce s CASE nástroji, synchronizace,
    ▫ podpora verzování, týmový vývoj, úkoly/task(s),
    ▫ podpora pro ladění aplikace, trasování, refaktorizace kódu,
    ▫ podpora nejrůznějších šablon, práce s databází, ORM, design patterns,
    ▫ podpora automatického testování (unit, funkční, zátěžové…), TDD,
    ▫ tvorba instalačních balíčků, konfiguračních skriptů, deployment aplikace a další

  http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/
  http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/
28




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
          AJAX
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
         • Co je Web 2.0? Cloud computing
         • Internet, doporučená literatura
29

Co je Web 2.0?
  • Web 2.0 lze chápat „Jako posun od centralizovaného zpracování služeb
    k decentralizaci.“ – Tim O’Reilly (zdroj)

  • „Web 2.0 jsou takové webové projekty, které používají technologie a principy
    namířené co nejvíce k uživatelům služeb, a to často tak blízko, že nechávají
    samotné uživatele, aby se sami podíleli na obsahu či tvorbě projektu.“ – Symbio

  • Jiný úhel pohledu na to, jak rozlišit jednotlivé vývojové fáze webu… „Na Web 1.0
    stačilo připojení kolem 50 Kbit/s, na Web 2.0 linka o rychlosti 1 Mbit/s a na Web
    3.0 to bude přibližně 10 Mbit/s.“ – Reed Hastings (zdroj Symbio)

  http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
  http://www.symbio.cz/clanky/web-2-0-3-0-4-0.html
  http://en.wikipedia.org/wiki/Web_2.0
30

Co znamená Web 2.0 pro design (návrh) aplikace?
  • Web jako platforma – klasický design ustupuje do pozadí, a do popředí
    se dostávají programové nadstavby (API), webové služby, XML, RSS apod. =
    změny v programování a v přístupu k datům
  • Mnohem intenzivnější spolupráce mezi servery při výměně dat
  • Tzv. Mashup aplikace 
  • Změny v navigaci, organizaci informací a v přístupu k nim >> uživatelé
    rozhodují sami (agregátory obsahu)
  • Mixování obsahu >> obsah je důležitější než jeho poskytovatel!
  • Komunity přidávají a sdílejí vlastní data >> štítky, recenze apod.
  • Často hovoříme v této souvislosti o pojmech sociální sítě, Cloud computing
    apod.

  http://www.symbio.cz/clanky/komunity-v-podani-strycka-googla.html
  http://www.lupa.cz/clanky/zmeni-google-sidewiki-internet/
  http://zdrojak.root.cz/clanky/rest-architektura-pro-webove-api/
31

Komunitní weby jako Web 2.0 aplikace
  •   Webové aplikace označované jako Web 2.0 se prosazují stále více
  •   Nesmírně důležitá je komunita uživatelů, která se na takovouto aplikaci „nabalí“
  •   Potom hovoříme o tzv. sociální síti
  •   Sociální sítě jsou čím dál důležitější i pro firemní komunikaci (dovnitř i ven)

  Facebook, Instagram, Pinterest, Google+, LinkedIn – komunitní weby
  Wikipedia – internetová encyklopedie
  Del.icio.us – ukládání a sdílení záložek (bookmarks)
  iGoogle – personalizovaná domácí stránka s informace z různých zdrojů
  Flickr – sdílení fotografií na webu
  Twitter – krátké osobní zprávy do 140 znaků

  http://suewebik.net/webove/web20-def.html
  http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/
  http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn
  http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/
  http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/
  http://www.tyinternety.cz/socialni-site/analyza-kde-bude-facebook-za-pet-let-1773
32

Cloud computing (jen krátce, více na další přednášce)
  • „Termín označuje souhrnně technologie a postupy používané v datových centrech
    a firmách pro zajištění snadné škálovatelnosti aplikací dodávaných přes Internet.“
    – Jan Kodera (http://cloud.abakowiki.cz/)
  • Cloud hosting nabízí serverový cluster s vysokým výpočetním výkonem, datovým
    úložištěm a konektivitou, který je možné si pronajímat dle potřeby

  • IaaS – Infrastruktura jako služba
  • PaaS – Platforma jako služba
  • SaaS – Software jako služba
                                                              SaaS

  • Výhodou je dynamický sizing
                                                              PaaS
    a platba jen za skutečně
    spotřebované prostředky                                    IaaS


  http://zdrojak.root.cz/clanky/cloud-hosting-aneb-hosting-v-oblacich/
  http://www.lupa.cz/clanky/cloudy-maji-budoucnost-a-take-problemy/
  http://is.gd/hUmcI – možnosti dynamického škálování prostředků v MS AZURE
33




Agenda

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
          AJAX
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
          Co je Web 2.0? Cloud computing?
         • Internet, doporučená literatura
34

Internet
  •   http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX)
  •   http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension)
  •   http://en.wikipedia.org/wiki/Xforms (XForms)
  •   http://en.wikipedia.org/wiki/Html5 (HTML5)
  •   http://www.adobe.com/products/flash/ (Adobe Flash)
  •   http://www.adobe.com/products/flex/ (Adobe Flex)
  •   http://www.openlaszlo.org/ (OpenLaszlo)
  •   http://www.mozilla.org/projects/xul/ (XUL)
  •   http://www.microsoft.com/silverlight/ (Silverlight)
  •   http://www.sun.com/software/javafx/index.jsp (JavaFX)
  •   http://labs.adobe.com/technologies/air/ (Adobe Air)
  •   http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0)
  •   http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn
  •   http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/
  •   http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL)
  •   http://www.dsl.sk/article.php?article=11553 (Google Dart)
  •   http://www.zive.cz/bleskovky/v-americe-vladne-internetu-netflix-v-evrope-
      bittorrent/sc-4-a-166249/default.aspx (Netflix a BitTorrent králové datového trafficu)
35




Souhrn

          Současný stav, RIA
          Komunikace webových aplikací
          Uživatelské rozhraní
          AJAX
          Flash, Flex, AIR, XUL, Silverlight a další
          Pracovní nástroje
          Co je Web 2.0? Cloud computing?
          Internet, doporučená literatura

More Related Content

PPTX
TNPW2-2012-07
PPTX
TNPW2-2016-03
PPTX
TNPW2-2013-05
PPTX
TNPW2-2014-03
PPTX
TNPW2-2012-02
PPTX
TNPW2-2013-02
PPTX
TNPW2-2016-02
PPT
Rich Internet Applications 2009 (Czech)
TNPW2-2012-07
TNPW2-2016-03
TNPW2-2013-05
TNPW2-2014-03
TNPW2-2012-02
TNPW2-2013-02
TNPW2-2016-02
Rich Internet Applications 2009 (Czech)

What's hot (19)

PPTX
TNPW2-2014-02
PPTX
TNPW2-2016-05
PPTX
TNPW2-2014-06
PPTX
TNPW2-2011-08
PPTX
TNPW2-2011-04
PPTX
TNPW2-2014-05
PPTX
TNPW2-2012-05
PPTX
TNPW2-2016-04
PPTX
TNPW2-2016-07
PPTX
TNPW2-2016-01
PPTX
TNPW2-2016-06
PPTX
TNPW2-2012-06
PPTX
TNPW2-2012-08
PPTX
TNPW2-2013-04
PPTX
TNPW2-2014-04
PPTX
TNPW2-2013-01
PPTX
Přístupnost HTML5 v kombinaci s WAI-ARIA
PPTX
TNPW2-2011-06
PPTX
Confluence_v1.4_extended
TNPW2-2014-02
TNPW2-2016-05
TNPW2-2014-06
TNPW2-2011-08
TNPW2-2011-04
TNPW2-2014-05
TNPW2-2012-05
TNPW2-2016-04
TNPW2-2016-07
TNPW2-2016-01
TNPW2-2016-06
TNPW2-2012-06
TNPW2-2012-08
TNPW2-2013-04
TNPW2-2014-04
TNPW2-2013-01
Přístupnost HTML5 v kombinaci s WAI-ARIA
TNPW2-2011-06
Confluence_v1.4_extended
Ad

Similar to TNPW2-2013-07 (20)

PPTX
TNPW2-2012-03
PPTX
Webové technologie
PPTX
TNPW2-2013-03
PPTX
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
PPTX
TNPW2-2012-04
PDF
Joomla!
PPTX
Moderni trendy ve_vyvoji_aplikaci
PDF
Smalltalk prakticky [CZ]
PPT
5was 100524062135-phpapp02
PPT
Web Application Scanning (WAS)
PPTX
TNPW2-2011-01
PPTX
TNPW2-2012-01
PDF
Výběr vhodných technologii pro startup v prostředí cloudu
PPT
2010 Web Technologie 1
PDF
Jak vypadá ideální bankovní API?
PDF
Webový front-end ve službách mobilního vývojáře
PPTX
Semináře M-Files: Konec hledání řešení pro správu firemních dat
PDF
Bar camp brno 2010
PPT
2009 X33EJA Moderní Technologie Pro Vývoj JEE
TNPW2-2012-03
Webové technologie
TNPW2-2013-03
Čtvrtkon #71 - Marian Benčat - Angular a NativeScript
TNPW2-2012-04
Joomla!
Moderni trendy ve_vyvoji_aplikaci
Smalltalk prakticky [CZ]
5was 100524062135-phpapp02
Web Application Scanning (WAS)
TNPW2-2011-01
TNPW2-2012-01
Výběr vhodných technologii pro startup v prostředí cloudu
2010 Web Technologie 1
Jak vypadá ideální bankovní API?
Webový front-end ve službách mobilního vývojáře
Semináře M-Files: Konec hledání řešení pro správu firemních dat
Bar camp brno 2010
2009 X33EJA Moderní Technologie Pro Vývoj JEE
Ad

More from Lukáš Vacek (7)

PPTX
TNPW2-2014-01
PPTX
TNPW2-2013-10
PPTX
TNPW2-2013-09
PPTX
TNPW2-2013-08
PPTX
TNPW2-2013-06
PPTX
TNPW2-2012-10
PPTX
TNPW2-2012-09
TNPW2-2014-01
TNPW2-2013-10
TNPW2-2013-09
TNPW2-2013-08
TNPW2-2013-06
TNPW2-2012-10
TNPW2-2012-09

TNPW2-2013-07

  • 1. TNPW2 2012/2013 07 – Aktuální trendy ve vývoji webových aplikací Mgr. Lukáš Vacek lukas.vacek@uhk.cz
  • 2. 2 Agenda • Současný stav, RIA • Komunikace webových aplikací • Uživatelské rozhraní • AJAX • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 3. 3 Současný stav webových technologií • Neustálé zdokonalování stávajících technologií pro web, které se ukázaly jako použitelné (životaschopné): ▫ rozšiřování funkcionality, kterou poskytují vývojářům, ▫ zjednodušení (a zrychlení) jednotlivých procesů vývoje (analýza, návrh, implementace, testování, deployment), ▫ implementace moderních trendů (MVC, ORM, SOA, bezpečnost, přístupnost pro různá zařízení a platformy apod.), ▫ zvyšování výkonu vyvíjených aplikací. • Osvědčené technologie: Java (JSF/MVC Frameworky), ASP.NET, Flash, Python, PHP... • „Novější“ technologie: Ruby (on Rails), Adobe AIR, Flex, Silverlight apod. • Na straně klienta je současným leaderem HTML5 + CSS3 + JavaScript • Pořád je co zlepšovat!
  • 4. 4 Aktuální problémy • Vývoj webových aplikací = (až moc) velký výběr technologických platforem • Problémem většiny dnešních webových aplikací jsou hlavně… ▫ omezené možnosti jejich uživatelského rozhraní (User Interface), ▫ validace formulářových dat na straně klienta (v reálném čase), ▫ bez-stavová komunikace při použití protokolu HTTP(S) ▫ práce v offline režimu • Většina webových aplikací je stále založena na značkovacím jazyku HTML (XHTML) – ten původně nebyl navržen pro vývoj aplikací >> má celou řadu omezení (množství přenášených dat, ergonomie ovládání apod.) • Některá omezení lze obejít (např. JavaScript/AJAX, Flash, Adobe AIR, ViewState a PostBack v ASP.NET apod.), ale není to ono (problematická účinnost, někdy složitost řešení, kompatibilita v prohlížečích) • Takže, co s tím?
  • 5. 5 Řešení? • Vytvořit nové nebo rozšířit stávající technologie tak, aby poskytovaly vývojářům a uživatelům: ▫ komplexní grafické rozhraní (MDI koncept >> 1 hlavní okno), ▫ ovládání a funkce odpovídající klasickému desktopovému řešení (drag&drop, klávesové zkratky, kontextová nápověda, auto complete prvky apod.), ▫ možnost kontroly formulářových dat u klienta v reálném čase ▫ možnost práce v offline režimu na straně klienta ▫ odstínění klienta (uživatele) od modelu žádost/odpověď ▫ přenos jen nezbytně nutných dat (např. bez duplicit v UI) ▫ a to vše pro různé druhy platforem a zařízení (např. mobilní)
  • 6. 6 Co je RIA (Rich Internet Application) • Označení pro novou generaci aplikací, které by uvedené požadavky měly plně (nebo částečně) splňovat • RIA řeší především záležitosti na straně klienta! • Významnou roli bude hrát HTML5 (aspoň v nejbližší době) • Existuje silná spojitost s Internetem – web/(X)HTML, plug-iny prohlížečů, desktop, mobilní zařízení • Snadnost spuštění aplikace se blíží snadnosti navštívení webové stránky • Výhledově by RIA technologie mohly výrazně podpořit myšlenku na převedení většiny dnešních aplikací do online podoby (celá řada výhod >> aktuálnost, dostupnost, zpoplatnění jen používaných funkcí apod.) http://interval.cz/clanky/rich-internet-applications-v-roce-2008/ http://zdrojak.root.cz/clanky/pristupnost-ria-dynamicke-zmeny-obsahu/
  • 7. 7 Agenda  Současný stav, RIA • Komunikace webových aplikací • Uživatelské rozhraní • AJAX • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 8. 8 Webová komunikace – bezstavové HTTP • Nejčastěji založena na protokolu HTTP(S) • HTTP je bezstavový protokol (request >> response) ▫ Základní vlastnost = snadná implementace ▫ Mezi jednotlivými requesty se neudržuje kontext ▫ U většiny aplikací to nemusí vadit • Bezstavové HTTP můžete obejít přes • Cookie (nejstarší, 4KB dat, odesílá se s každým(!) http požadavkem, lze zakázat) • Session (posílá se ID relace, data uložena na serveru – in proc, state server, sql) • Využitím local storage (viz dále) • Viewstate a Control State (v ASP.NET) – hashovaná data v políčku formuláře • http://www.youtube.com/watch?v=IdJD2FSRQWU video z přednášky
  • 9. 9 Další možnosti komunikace • Moderní webové aplikace využívají pro komunikace mezi klientem a webovým serverem i další standardy/protokoly, než jen obyčejné HTTP(S) ▫ REST – orientován datově (ROA), běžné HTTP příkazy (GET, POST, PUT a DELETE) pro CRUD operace ▫ Webové služby – protokol SOAP pro vzdálené volání procedur, formát XML ▫ SOA – univerzální, i mimo web • Různé formáty dat přicházejících na klienta… HTML, XML, JSON apod., které lze (programově) dále zpracovat • Iniciátorem komunikace nemusí být vždy klient (obvyklý scénář) – možnost vytvoření permanentního spojení (web socket, realtime app – SignalR apod.) • Nezapomeňte na bezpečnost komunikace – SSL, autentizaci klientů apod.
  • 10. 10 Agenda  Současný stav, RIA  Komunikace webových aplikací • Uživatelské rozhraní • AJAX • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 11. 11 Webové formuláře • Už od počátku Internetu jsou formuláře hlavním prostředkem pro zadávání uživatelských vstupů do webové stránky • Základní množina formulářových prvků a jejich funkcí je v podstatě stále stejná jako na začátku, kdy se nepočítalo s Internetem jako s platformou pro aplikace • Původní formulářové prvky nepokrývají všechny potřeby dnešních webových aplikací, nejen v oblasti datových vstupů, ale i jejich případné validace (kontroly) • Tento nedostatek bylo třeba odstranit • Jsou (byly) možné dva základní přístupy k řešení problému: ▫ Úplně to celé předělat (XForms) ▫ Rozšířit stávající množinu prvků a jejich funkcionalitu (Web Forms >> HTML5) http://interval.cz/clanky/pohled-na-webove-formulare-druhe-generace/
  • 12. 12 HTML5 (Web Forms 2.0 je součástí) • Původně konsorcium WHATWG (The Web Hypertext Application Technology Working Group) >> vývojáři Mozilla, Opera, Safari • Od roku 2007 existuje pracovní skupina W3C pro HTML5 specifikaci, v lednu 2008 byl vydán draft • Rozšiřuje HTML 4.01 a XHTML 1.0 >> jednoduché na naučení • Zpětná kompatibilita ve starších prohlížečích • Částečná podpora nových prvků v prohlížečích http://en.wikipedia.org/wiki/Html5 http://www.lupa.cz/clanky/whatwg-budoucnost-webu/ http://www.w3.org/TR/2008/WD-html5-diff-20080122/ http://html456.blogspot.com/2010/10/nepouzivejte-html5-jeste-ne-prosi-nas.html http://is.gd/hUmV4 – HTML5 framework pro mobilní aplikace (37signals)
  • 13. 13 Lokální úložiště dat – Local storage, Session storage • V souvislosti se standardem HTML5 se často mluví o offline režimu aplikací • Lokální úložiště dat (name/value) na straně klienta, přístupné z JavaScriptu • Podpora v moderních prohlížečích (např. IE8+) • Local storage běžně neexpiruje, musíte si po sobě uklidit! • Session storage standardně vydrží do zavření okna prohlížeče • Kapacita cca 5MB na doménu, každý browser to ale počítá jinak! • Nepřenáší se na server, aplikační logika sama musí data serializovat! • http://www.lupa.cz/clanky/sql-si-razi-cestu-do-html5/ • http://zdrojak.root.cz/clanky/webdesigneruv-pruvodce-po-html5-webstorage/ • http://code.google.com/p/sessionstorage/
  • 14. 14 XForms • Za návrhem XForms stojí konsorcium W3C • Jeden z modulů připravovaného XHTML 2.0 • Komplexně řeší formuláře na webu i na desktopu • Je poněkud složitější na naučení (i když W3C tvrdí opak ) • Chybí zpětná kompatibilita • Aktuálně je kolem XHTML 2.0 a W3C poměrně nejasná situace http://en.wikipedia.org/wiki/Xforms http://www.grafika.cz/art/webdesign/encxforms.html http://html456.blogspot.com/2009/07/predseda-xhtml2-wg-rika-xhtml2-neni.html
  • 15. 15 Agenda  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní • AJAX • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 16. 16 AJAX (Asynchronous JavaScript and XML) • Aktuálně nejrozšířenější RIA technologie • „AJAX je programový přístup, který mezi prohlížeč a webový server přidává vrstvu abstrakce.“ http://blogs.msdn.com/mohammadakif/archive/2006/01/14/512991.aspx • Základním principem fungování AJAXu je klientské skriptování (DOM, (X)HTML a JavaScript), obvykle kombinované s voláním webových služeb a zpracováváním XML dat (XMLHttpRequest) >> používá známé a osvědčené technologie • Jeho nasazení (pozor, neplatí to vždy a všude!) může zlepšit použitelnost webových aplikací s ohledem na jejich ovládání uživatelem • Někdy je náročnější na implementaci, a při nevhodném použití může generovat poměrně velkou zátěž pro webový server • Webové AJAX aplikace je možné vytvářet na většině hlavních vývojových platforem (ASP.NET, Java/JSF/ADF, PHP apod.) http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML http://ajaxpatterns.org/Java_Ajax_Frameworks http://www.noupe.com/javascript/most-wanted-ajax-techniques-50-ajax-examples-and-tutorials.html
  • 17. 17 AJAX – schéma komunikace Klasická webová aplikace Klient (webový prohlížeč) Server (webový server) HTTP request User Interface Aplikační logika HTML + CSS AJAX Klient (webový prohlížeč) Server (webový server) JavaScript HTTP request User AJAX Aplikační logika Interface Engine HTML + CSS XML data
  • 18. 18 Microsoft ASP.NET AJAX Extension • Microsoft ASP.NET AJAX Extensions (dříve Atlas, AJAX.NET) je sada klientských knihoven, serverových ovládacích prvků a webových služeb • Jde o client side framework, který je nadstavbou pro ASP.NET • Koncepčně se dělí na dvě části – klientskou a serverovou • Klientská část může fungovat bez serverové, opačně to neplatí • Základem je JavaScriptový framework, který si klade za cíl ulehčit vývoj tzv. AJAXových aplikací • Komponenty používají na straně klienta jQuery http://www.asp.net/ajax/ http://www.asp.net/ajaxlibrary/AjaxControlToolkitSampleSite/ • Pro VS 2010 a ASP.NET 4.0 doporučuji používat NuGet package manager, který se v projektu postará o základní nastavení referencí knihoven, včetně bezpečnostních doplňků typu Sanitizer nebo Anti-XSS library… • http://stephenwalther.com/blog/archive/2011/08/17/adding-the-new-html- editor-extender-to-a-web-forms.aspx
  • 19. 19 Agenda  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní  AJAX • Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 20. 20 Adobe Flash • V současnosti dominuje v oblasti interaktivní grafiky na Internetu • Multiplatformní technologie zaměřená na práci s grafikou, vektorovými animacemi nebo video streamingem (např. Youtube) • Historie – FutureWave Software (kolem roku 1996), Macromedia (do  2005) • Pro klienta je k dispozici Flash Player (aktuální verze 11.4), jako plug-in je nainstalován na většině počítačů s webovým prohlížečem (uvádí se až 99  podle Adobe) % • Používá programovací jazyk ActionScript (založený na ECMAScript), pracuje s textem, grafikou i s databázemi • Jsou určité problémy s indexování obsahu ve vyhledávačích • Ověřená technologie, s velkou vývojářskou komunitou! • Řada vývojových nástrojů (pravda, s různou kvalitou ) • Problémy: bezpečnost, stabilita, výkon na slabších zařízeních! http://www.adobe.com/products/flash/ http://www.flash.cz/portal/
  • 21. 21 Adobe Flex • Adobe Flex je komponentový framework určený pro vývoj a provoz interaktivních aplikací postavených na technologii Flash (Flash Player v prohlížeči) a Adobe AIR (desktop) • Aplikace mohou integrovat např. multimédia, XML, webové služby nebo tzv. Flex Data Services (WS postavené na J2EE) • Programovací jazyk ActionScript 3, MXML pro UI • Základní vývojové nástroje (SDK + kompilátor) jsou zdarma, Flex Builder za peníze; je možná pokročilá integrace (Ant, Maven) • Deployment = zkopírovat soubory SWF (+ HTML wrappery) • Technologie Flash/Flex umožňují odklon UI od klasické podoby webových stránek, není to náhrada HTML a spol. • Velké plány Adobe, realita je skromnější, aktuální verze Flex 4.8.xx (7/2012) • Open source licence frameworku! http://www.adobe.com/products/flex/ http://www.grafika.cz/art/webdesign/flashflex.html http://interval.cz/clanky/adobe-flex-co-je-a-co-neni/
  • 22. 22 Adobe AIR • Adobe AIR (Adobe Integrated Runtime, dříve Apollo) • První stabilní verze 1.0 (únor 2008) – aktuální verze 3.5.xx (11/2012) • Multiplatformní runtime propojující desktopové a webové aplikace • Umožňuje kombinovat např. HTML/JavaScript/AJAX, Flash, Flex • Rozšiřuje funkcionalitu a možnosti webových aplikací (např. drag&drop, práce s diskem, nativní okna, offline práce s daty, synchronizace apod.) • Má plný přístup k lokálním zdrojům! Pod účtem, pod kterým uživatel pracuje • Aplikace lze spouštět nezávisle na prohlížeči, na různých zařízeních http://www.adobe.com/cz/products/air/ http://labs.adobe.com/technologies/air/ http://jilm.blog.lupa.cz/0704/adobe-je-cerny-kun-internetovych-aplikaci http://www.flash.cz/portal/clanek.aspx?id=594 http://www.dsl.sk/article.php?article=5359
  • 23. 23 Silverlight • Silverlight představila fy Microsoft v září 2007, aktuální verze 5.1 (5/2011) • Jde o runtime pro spouštění interaktivních aplikací v prostředí webového prohlížeče nebo desktopu, u klienta je třeba instalovat odpovídající plug-in • Základem je WPF >> grafický subsystém .NET Frameworku 3.0 >> umožňuje popisovat textový, vektorový, interaktivní a multimediální obsah pomocí XAML • Podporuje přehrávání audia a videa ve formátech WMV, WMA a MP3 • Programovat lze v JavaScriptu, od verze 2.0 také v C#, VB.NET apod. • Multiplatformní podpora u klienta pro Windows, Mac, Linux (Moonlight) • Na klientovi běží v tzv. sandboxu, nemá plný přístup k disku • Jako vývojové prostředí se používá Visual Studio • Někdy je označována jako tzv. „Flash killer“ technologie  • Jako cross-platform technologii bude Microsoft spíše podporovat HTML5! http://www.microsoft.com/silverlight/ http://www.vyvojar.cz/Articles/473-neco-malo-k-technologiim-wpf-a-silverlight.aspx http://en.wikipedia.org/wiki/Moonlight_(runtime) http://is.gd/hUi05 (článek na JustIT - podpora Silverlight vs. HTML5)
  • 24. 24 XUL (XML User Interface Language, čti Zůl) • XUL je technologie založená na XML • Umožňuje tvorbu RIA aplikací, které mohou být spouštěny z Internetu (ale nemusí, např. Firefox) • XML v kombinaci s JavaScriptem (obsluha událostí) a CSS umožňuje vytvářet UI aplikací • XUL odděluje jednotlivé prvky UI a jejich vzhled >> snadná skinovatelnost • Technologii XUL zastřešuje Mozilla Foundation • Je platformě nezávislá, používá komponenty v nativních jazycích (C/C++) • Na straně klienta je to trochu pomalé… http://www.mozilla.org/projects/xul/ http://en.wikipedia.org/wiki/XUL http://www.kosek.cz/clanky/xul/index.html
  • 25. 25 Další technologie – JavaFX, Mozilla Prizm, Google Gears JavaFX • Nadstavba na Javou, která umožní tvorbu interaktivních RIA aplikací určených pro desktop, mobilní zařízení apod. • Skriptovací jazyk JavaFX Script pro práci s UI http://www.sun.com/software/javafx/index.jsp http://www.linuxsoft.cz/article.php?id_article=1744 http://cs.wikipedia.org/wiki/JavaFX Mozilla Prizm (opět WebRunner) • Umožňuje integraci webových aplikací v desktopovém prostředí bez nutnosti spuštění webového prohlížeče http://wiki.mozilla.org/Prism http://www.lupa.cz/zpravicky/mozilla-zrusila-projekt-prism-nastupuje-chromeless/ Google Gears (na konci roku 2009 zastaven rozvoj na úkor HTML5) • Umožňuje přístup a využití online služeb v offline režimu, využívá speciální rozšíření pro prohlížeč postavené nad SQLite databází http://en.wikipedia.org/wiki/Google_gears
  • 26. 26 Agenda  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní  AJAX  Flash, Flex, AIR, XUL, Silverlight a další • Pracovní nástroje • Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 27. 27 Pracovní nástroje • Trendem jsou rostoucí požadavky na komplexnost vývojových nástrojů • Každý vývojář potřebuje něco jiného, záleží na jeho roli • Jednotlivé etapy vývoje software nejsou jednoznačně odděleny, často běží vedle sebe (paralelní běh analýzy a implementace při tzv. extrémním programování ) • Jsou vyžadovány funkce a nástroje, které zefektivní jednotlivé etapy vývoje • Pro fázi implementace se za samozřejmé považuje např. ▫ sofistikovaný editor zdrojových kódu s inteligentním doplňováním, ▫ vizuální návrh UI, trend generování UI do HTML5 + JavaScript + CSS na výstupu, ▫ spolupráce s CASE nástroji, synchronizace, ▫ podpora verzování, týmový vývoj, úkoly/task(s), ▫ podpora pro ladění aplikace, trasování, refaktorizace kódu, ▫ podpora nejrůznějších šablon, práce s databází, ORM, design patterns, ▫ podpora automatického testování (unit, funkční, zátěžové…), TDD, ▫ tvorba instalačních balíčků, konfiguračních skriptů, deployment aplikace a další http://zdrojak.root.cz/clanky/jak-budeme-psat-webove-aplikace-za-tri-roky/ http://zdrojak.root.cz/clanky/vyvojar-si-jen-s-programovanim-nevystaci/
  • 28. 28 Agenda  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní  AJAX  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje • Co je Web 2.0? Cloud computing • Internet, doporučená literatura
  • 29. 29 Co je Web 2.0? • Web 2.0 lze chápat „Jako posun od centralizovaného zpracování služeb k decentralizaci.“ – Tim O’Reilly (zdroj) • „Web 2.0 jsou takové webové projekty, které používají technologie a principy namířené co nejvíce k uživatelům služeb, a to často tak blízko, že nechávají samotné uživatele, aby se sami podíleli na obsahu či tvorbě projektu.“ – Symbio • Jiný úhel pohledu na to, jak rozlišit jednotlivé vývojové fáze webu… „Na Web 1.0 stačilo připojení kolem 50 Kbit/s, na Web 2.0 linka o rychlosti 1 Mbit/s a na Web 3.0 to bude přibližně 10 Mbit/s.“ – Reed Hastings (zdroj Symbio) http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html http://www.symbio.cz/clanky/web-2-0-3-0-4-0.html http://en.wikipedia.org/wiki/Web_2.0
  • 30. 30 Co znamená Web 2.0 pro design (návrh) aplikace? • Web jako platforma – klasický design ustupuje do pozadí, a do popředí se dostávají programové nadstavby (API), webové služby, XML, RSS apod. = změny v programování a v přístupu k datům • Mnohem intenzivnější spolupráce mezi servery při výměně dat • Tzv. Mashup aplikace  • Změny v navigaci, organizaci informací a v přístupu k nim >> uživatelé rozhodují sami (agregátory obsahu) • Mixování obsahu >> obsah je důležitější než jeho poskytovatel! • Komunity přidávají a sdílejí vlastní data >> štítky, recenze apod. • Často hovoříme v této souvislosti o pojmech sociální sítě, Cloud computing apod. http://www.symbio.cz/clanky/komunity-v-podani-strycka-googla.html http://www.lupa.cz/clanky/zmeni-google-sidewiki-internet/ http://zdrojak.root.cz/clanky/rest-architektura-pro-webove-api/
  • 31. 31 Komunitní weby jako Web 2.0 aplikace • Webové aplikace označované jako Web 2.0 se prosazují stále více • Nesmírně důležitá je komunita uživatelů, která se na takovouto aplikaci „nabalí“ • Potom hovoříme o tzv. sociální síti • Sociální sítě jsou čím dál důležitější i pro firemní komunikaci (dovnitř i ven) Facebook, Instagram, Pinterest, Google+, LinkedIn – komunitní weby Wikipedia – internetová encyklopedie Del.icio.us – ukládání a sdílení záložek (bookmarks) iGoogle – personalizovaná domácí stránka s informace z různých zdrojů Flickr – sdílení fotografií na webu Twitter – krátké osobní zprávy do 140 znaků http://suewebik.net/webove/web20-def.html http://www.lupa.cz/clanky/web-2-0-bublina-nebo-novy-smer-webu/ http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn http://zdrojak.root.cz/clanky/jaky-software-pohani-facebook/ http://www.lupa.cz/clanky/komunitni-server-a-komunitu-mate-kde/ http://www.tyinternety.cz/socialni-site/analyza-kde-bude-facebook-za-pet-let-1773
  • 32. 32 Cloud computing (jen krátce, více na další přednášce) • „Termín označuje souhrnně technologie a postupy používané v datových centrech a firmách pro zajištění snadné škálovatelnosti aplikací dodávaných přes Internet.“ – Jan Kodera (http://cloud.abakowiki.cz/) • Cloud hosting nabízí serverový cluster s vysokým výpočetním výkonem, datovým úložištěm a konektivitou, který je možné si pronajímat dle potřeby • IaaS – Infrastruktura jako služba • PaaS – Platforma jako služba • SaaS – Software jako služba SaaS • Výhodou je dynamický sizing PaaS a platba jen za skutečně spotřebované prostředky IaaS http://zdrojak.root.cz/clanky/cloud-hosting-aneb-hosting-v-oblacich/ http://www.lupa.cz/clanky/cloudy-maji-budoucnost-a-take-problemy/ http://is.gd/hUmcI – možnosti dynamického škálování prostředků v MS AZURE
  • 33. 33 Agenda  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní  AJAX  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje  Co je Web 2.0? Cloud computing? • Internet, doporučená literatura
  • 34. 34 Internet • http://cs.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML (AJAX) • http://www.asp.net/ajax/ (Microsoft ASP.NET AJAX Extension) • http://en.wikipedia.org/wiki/Xforms (XForms) • http://en.wikipedia.org/wiki/Html5 (HTML5) • http://www.adobe.com/products/flash/ (Adobe Flash) • http://www.adobe.com/products/flex/ (Adobe Flex) • http://www.openlaszlo.org/ (OpenLaszlo) • http://www.mozilla.org/projects/xul/ (XUL) • http://www.microsoft.com/silverlight/ (Silverlight) • http://www.sun.com/software/javafx/index.jsp (JavaFX) • http://labs.adobe.com/technologies/air/ (Adobe Air) • http://en.wikipedia.org/wiki/Web_2.0 (Web 2.0) • http://www.slideshare.net/MedvidekPU/sociln-st-mn-internet-k-nepoznn • http://zdrojak.root.cz/clanky/cloud-computing-jiny-pohled-na-aplikace/ • http://www.augi.cz/programovani/cassandra-ocima-net-programatora/ (NoSQL) • http://www.dsl.sk/article.php?article=11553 (Google Dart) • http://www.zive.cz/bleskovky/v-americe-vladne-internetu-netflix-v-evrope- bittorrent/sc-4-a-166249/default.aspx (Netflix a BitTorrent králové datového trafficu)
  • 35. 35 Souhrn  Současný stav, RIA  Komunikace webových aplikací  Uživatelské rozhraní  AJAX  Flash, Flex, AIR, XUL, Silverlight a další  Pracovní nástroje  Co je Web 2.0? Cloud computing?  Internet, doporučená literatura