#tdweb

UI kompositioLenard Gunda / Fujitsu Finland Oy

@LenardGLenard.Gunda@fi.fujitsu.com

#tdweb

#tdweb

Esittely• Lenard Gunda– Arkkitehti– Fujitsu Finland Oy

• Blog: http://rebuildall.umbraworks.net• Twitter: lenardg• Email: lenard.gunda@fi.fujitsu.com

#tdweb

#tdweb

Teknologiat

• HTML 5• CSS 3• Javascript

• Web Forms• MVC

#tdweb

Sovellusten rakenne

Käyttöliittymä

Logiikka

Tietovarasto

#tdweb

Komponenttien kommunikointi

Käyttöliittymä

Logiikka

TietovarastoWeb Sevice

Logiikka

Tietovarasto

Web Sevice

Logiikka

Tietovarasto

#tdweb

Ulkoiset ja legacy järjestelmät

Käyttöliittymä

Logiikka

TietovarastoWeb Sevice

Logiikka

Tietovarasto

Web Sevice

Logiikka

Tietovarasto

Integraatio palvelu (broker,

biztalk, tms)

#tdweb

Ongelmia

#tdwebOngelma - Monimutkaisuus

#tdwebOngelma - Monimutkaisuus

Vahvat liitokset

Ulkonäkö

Kehitys ja ylläpito

#tdweb

Ongelma – Vastausten hitaus (Käyttökokemus)

#tdweb

Ongelma – Vastausten hitaus (Käyttökokemus)

Vastauksen kesto

Asynkrooniset kutsut

Virhetilanteet

#tdwebOngelmia - Suorituskyky

#tdwebOngelmia - Suorituskyky

Käyttämätön teho työasemissa

Javascript moottorien kehitys

Työasemien nettiyhteydet

#tdweb

Mitä voimme tehdä?

#tdweb

Mitä muutoksia tämä tarkoittaa?

Käyttöliittymä

Logiikka

TietovarastoWeb Sevice

Logiikka

Tietovarasto

Web Sevice

Logiikka

Tietovarasto

#tdweb

Tietosisältö

<?xml[{json: “”}]

#tdweb

Tietosisältö

<?xml[{json: “”}]

#tdweb

Tietolähteet

<?xml

[{json: “”}]

#tdweb

Tietosisältö

<?xml

[{json: “”}]

#tdweb

Tietolähteiden toteutuksetKäyttöliittymä

Logiikka

Tietovarasto

WCF Service

Logiikka

Tietovarasto

REST Sevice

Logiikka

Tietovarasto

HTML5 UI

Logiikka

Tietovarasto

#tdarcHajautettujen järjestelmien

arkkitehtuuriratkaisuja

pe 09:00 – Mikko Hytti, Fujitsu

#tdweb

Cross site pyynnöt

Access-Control-Allow-Origin: *

Lisätietojahttp://www.w3.org/TR/access-control/

#tdweb

Tietoturva!

#tdweb

Tietoturva!Ohjelmakoodi käyttöliittymällä

Autentikointi käyttöliittymässä ja komponenteissa

Parametrien välitys komponenteille

#tdweb

Selain

Tietoturva

Käyttöliittymä

Logiikka

Tietovarasto

WCF Service

Logiikka

Tietovarasto

REST Sevice

Logiikka

Tietovarasto

HTML5 UI

Logiikka

Tietovarasto

#tdweb

Demo projektiWeb sivu

Kategoriat

Tuotetiedot

Varastosaldo

Ostoskori

WCF

REST/JSON

HTML5

#tdweb

DEMODemo 1: REST / MVC

#tdweb

DEMODemo 2: HTML5

#tdweb

DEMODemo 3: WCF service

#tdweb

Käyttöliittymä

Logiikka

Tietovarasto

Web Sevice

Logiikka

Tietovarasto

REST Sevice

Logiikka

Tietovarasto

HTML5 UI

Logiikka

Tietovarasto

SOA?

Serv

ice

Serv

ice

Serv

ice

Serv

ice

#tdarcHajautettujen järjestelmien

arkkitehtuuriratkaisuja

pe 09:00 – Mikko Hytti, Fujitsu

#tdwebData binding, templating• Knockout javascript kirjasto– http://knockoutjs.com/– http://

msdn.microsoft.com/en-us/magazine/hh781029.aspx http://bit.ly/xYfE79

• jQuery template– http://api.jquery.com/jQuery.template/

#tdweb

Demot ja esitys• Demot ja esitys– www.techdays.fi

• Blog: http://rebuildall.umbraworks.net

#tdweb

KYSYMYKSIÄ?

#tdweb

KIITOKSIA