Käyttöliittymien uusi sukupolvi Logicalla Rondo-tuotteessa

Transkriptio

1 Käyttöliittymien uusi sukupolvi Logicalla Rondo-tuotteessa Vesa Tuononen, Sovellusarkkitehti Joonas Lehtinen, CEO, PhD

2 Interfacing IT Oy IT Mill Ltd B2B-ohjelmistojen selainkäyttöliittymien kehitykseen ja kehitystyövälineisiin erikoistunut ohjelmistotalo Asiakkaat ohjelmistoja kehittäviä yrityksiä IT Mill Toolkit käyttöliittymäkirjasto ja testaustyövälineet Käyttöliittymien uudistusprojektit ja teknologiakonsultointi

3 Rich? Internet? Application?

4

5 Interfacing IT RIA - Miksi? Rich Internet Application Helppo Nopea Käytettävä Ei asennusta Ei ylläpitoa Aina saatavilla Tiedon tuottamiseen Intensiiviseen käyttöön

6 Ajax Huipputeknologiaa vai spagettia?

7 Selain = SDK Interfacing IT

8 Interfacing IT Selainten eroja (1/2) Erittäin vaihteleva CSS-tuki Eri bugit kaikilla selaimen eri tasoilla Presentaatiokerroksen bugit Käyttöjärjestelmän erilaiset widgetit Erilaisia muistivuotoja vm:ssä Kommunikaatiokerroksen erot Erilaisia ominaisuuksia eri selaimilla SVG, VML, Canvas Eri pluginit: Flash, Silverlight, Java Kuvien filtteröinnit

9 IE Firefox Safari HTML4 CSS1 PNG

10 Acid3 is primarily testing specifications for Web 2.0! dynamic Web applications. IE List of specifications tested: DOM2 Core DOM2 Events DOM2 HTML DOM2 Range DOM2 Style (getcomputedstyle, ) DOM2 Traversal DOM2 Views (defaultview) Passed Status: ECMAScript HTML4 (<object>, <iframe>, ) HTTP (Content-Type, 404, ) Media Queries Selectors (:lang, :nth-child(), combinators, dynamic changes, ) XHTML 1.0 CSS2 (@font-face) CSS2.1 ( inline-block, pre-wrap, ) CSS3 Color (rgba(), hsla(), ) CSS3 UI ( cursor ) data: URIs SVG (SVG Animation, SVG Fonts, ) WebKit r31356 Opera [testbuild] IE Opera 9.27 Safari IE 8 Beta Firefox Firefox 3.0rc1

11 Interfacing IT Selainten eroja (2/2) Erittäin vaihteleva suoritusnopeus Toteutuksien erovaisuudet Prosessorien nopeuserot Ruudun koko vaihtelee Syöttölaitteet vaihtelevat Näppäimistö, hiiri, kosketusnäyttö Tulevaisuudessa ehkä mikrofoni, GPS, kamera,.. Muistin määrä vaihtelee merkittävästi Verkon nopeus ja latenssit erilaisia

12 (measured in milliseconds: shorter bars are better)

13 Forced coding standards Proper autocomplete Automated Forced OOP refactoring

14 Ajax and RIA adoption is shifting from the early adopter stage to middle adopters. Success in userexperience redesign projects is far from guaranteed, and depends as much on process as on technology. Gartner Ray Valdes 25 January 2008

15 RIA -työvälineiden kaksi ulottuvuutta

16 Interfacing IT Classification of RIA Frameworks Programmed in Executed in web browser Executed in server Java Java Applet Google Web Toolkit IT Mill Toolkit 5 IT Mill Toolkit 4 JavaScript JavaFX Requires plug-in Dojo Tibco XML Adobe Flex Backbase ICE Faces Silverlight.NET

17 Tietoturva RIA:n Akilleen kantapää?

18 Interfacing IT Web 1.0 Client 5 Visible data filtering by access Server SQL injection DOM HTML Page over HttpResponse View 4 Model 3 Parameters over HttpRequest 1 Parameter parsing and validation Controller 2 DB Authentication

19 Interfacing IT RIA All view and controller code is sent to all clients Client 4 Visible data filtering by access Server View 5 Requested data to view as XML / JSON SQL injection DOM 1 Model 3 Controller Client (and thus view and controller) can not be trusted Changes to model encoded as parameters 2 Parameter parsing and re-validation Authentication DB

20 Interfacing IT Server-side RIA Visible data filtering by access Client DOM 9 1 TerminalAdapter HTML Page over HttpResponse Parameters over HttpRequest View Server 8 SQL injection Automated by the RIA framework 2 TerminalAdapter 7 3 Controller Model DB

21 IT Mill Toolkit

22 Toolkit 5 100% Java No XML or JavaScript Secure + + RIA No Logic in Client Open Source Apache 2.0 License User Interface Framework for Building Secure Rich Internet Applications in Java

23 Browsers (D)HTML AJAX JavaScript DOM Security Browser differences Web server: user interface logic Java Backend server: server-side business logic Java Database

24 Browsers (D)HTML AJAX JavaScript IT Mill Toolkit RIA-components, architecture, security, etc. Browser DOM Security differences Java Focus on your real job: developing the application Web server: user interface logic Java Backend server: server-side business logic Java Database

25 Data binding Data binding Action Listener Action Listener Data binding Action Listener Action Listener

26 Koodiesimerkki

27

28 Interfacing IT Standard Java Web Application (WAR-file) itmill-toolkit jar CoverflowApplication.java 109 lines Coverflow.swf 1500 lines ICoverflow.java 270 lines Coverflow.java 85 lines Flex GWT IT Mill Optional custom widget styles.css 2 lines Optional custom theme slidexx.jpg

29 Interfacing IT

30 Interfacing IT

31 Interfacing IT

32 Yksinkertaisuudesta merkittäviä kustannussäästöjä

33 Portlet developed with ICE Faces (JSF) Development time: 210h Portlet developed with IT Mill Toolkit 5 Development time: 135h Includes learning, ICE Faces, design, implementation Includes learning, and testing IT Mill Toolkit, of UI as design, well implementation as back-end logic and testing of UI as well as back-end logic

34 Portlet developed with IT Mill Toolkit 5 Development time: 135h Includes learning, IT Mill Toolkit, design, implementation and testing of UI as well as back-end logic

35 Interfacing IT Development work Ice Faces (JSF) IT Mill Toolkit Backend logic User Interface

36 Interfacing IT Mitattu kustannussäästö käyttöliittymän toteutuksessa -59%

37 Interfacing IT Lines of Code Ice Faces (JSF) IT Mill Toolkit Backend Logic User Interface Configuration

38 Apache 2.0 License Download full product for free and run demos live at

39 Automaattinen Testaus

40 Your personnel Developer Developer Developer Usability Company Developer Developer Tester Your Customer Developer Developer End User 100% Manual Testing User Interface Enterprise system Automated Testing Unit Testing

41 Your personnel Developer Developer Developer 40% Manual Testing 60% Automated Testing IT Mill Toolkit User Interface Enterprise system Automated Testing Unit Testing

42

43 CASE: Rondo R8