Käyttöliittymien uusi sukupolvi Logicalla Rondo-tuotteessa Vesa Tuononen, Sovellusarkkitehti www.logica.fi 0400-814260 Vesa.Tuononen@logica.com Joonas Lehtinen, CEO, PhD www.itmill.com 040-5035001 Joonas.Lehtinen@itmill.com
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
Rich? Internet? Application?
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
Ajax Huipputeknologiaa vai spagettia?
Selain = SDK Interfacing IT
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
IE 7.0.5730.11 Firefox 2.0.0.12 Safari 3.0.4 HTML4 CSS1 PNG http://acid2.acidtests.org/
Acid3 is primarily testing specifications for Web 2.0! dynamic Web applications. IE 6.0.2800.1106 List of specifications tested: DOM2 Core DOM2 Events DOM2 HTML DOM2 Range DOM2 Style (getcomputedstyle, ) DOM2 Traversal DOM2 Views (defaultview) Passed Status: 3.6.08 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 7.0.5730.11 Opera 9.27 Safari 3.1.1 IE 8 Beta Firefox 2.0.0.14 Firefox 3.0rc1 http://acid3.acidtests.org/
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
(measured in milliseconds: shorter bars are better) http://reviews.zdnet.co.uk/software/productivity/0,1000001108,39420732-4,00.htm
Forced coding standards Proper autocomplete Automated Forced OOP refactoring http://research.sun.com/techrep/2007/smli_tr-2007-166.pdf
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
RIA -työvälineiden kaksi ulottuvuutta
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
Tietoturva RIA:n Akilleen kantapää?
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
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
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 4 6 5 DB
IT Mill Toolkit
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
Browsers (D)HTML AJAX JavaScript DOM Security Browser differences Web server: user interface logic Java Backend server: server-side business logic Java Database
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
Data binding Data binding Action Listener Action Listener Data binding Action Listener Action Listener
Koodiesimerkki
Interfacing IT Standard Java Web Application (WAR-file) itmill-toolkit-5.2.0.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
Interfacing IT
Interfacing IT
Interfacing IT
Yksinkertaisuudesta merkittäviä kustannussäästöjä
Email Portlet developed with ICE Faces (JSF) Development time: 210h Email 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
Email 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
Interfacing IT Development work Ice Faces (JSF) IT Mill Toolkit 0 75 150 225 300 Backend logic User Interface
Interfacing IT Mitattu kustannussäästö käyttöliittymän toteutuksessa -59%
Interfacing IT Lines of Code Ice Faces (JSF) IT Mill Toolkit 0 1 000 2 000 3 000 4 000 Backend Logic User Interface Configuration
Apache 2.0 License Download full product for free and run demos live at www.itmill.com
Automaattinen Testaus
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
Your personnel Developer Developer Developer 40% Manual Testing 60% Automated Testing IT Mill Toolkit User Interface Enterprise system Automated Testing Unit Testing
CASE: Rondo R8