HTML5 Adoption in Finance - Migration Strategies and Challenges


Published on

Video and slides synchronized, mp3 and slide download available at URL

Chuck Doerr, Asim Malik discuss some of the tools and real-world techniques being used by financial firms to deliver native user experience with HTML5, including the use of Chromium, including approaches for achieving application interoperability and for implementing an incremental, step-wise approach to adopting HTML5. Filmed at

Chuck Doerr is President and COO of OpenFin. He is responsible for the company's technology strategy, infrastructure and operations. Asim Malik is senior software developer at Risk Focus. His current interests lie in building large-scale HTML5 web applications.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

HTML5 Adoption in Finance - Migration Strategies and Challenges

  1. 1. HTML5 Adoption – Migration Strategies and Challenges 2013 Asim Malik – Risk Focus Chuck Doerr – OpenFin
  2. 2. News & Community Site • 750,000 unique visitors/month • Published in 4 languages (English, Chinese, Japanese and Brazilian Portuguese) • Post content from our QCon conferences • News 15-20 / week • Articles 3-4 / week • Presentations (videos) 12-15 / week • Interviews 2-3 / week • Books 1 / month Watch the video with slide synchronization on! /html5-finance-migration
  3. 3. Presented at QCon New York Purpose of QCon - to empower software development by facilitating the spread of knowledge and innovation Strategy - practitioner-driven conference designed for YOU: influencers of change and innovation in your teams - speakers and topics driving the evolution and innovation - connecting and catalyzing the influencers and innovators Highlights - attended by more than 12,000 delegates since 2007 - held in 9 cities worldwide
  4. 4. ©2013 About Us Page 2 Asim Malik UI Architect @Risk Focus - A Specialist consultancy delivering Risk Management, Trading and Connectivity solutions to Global Capital Markets Clients Chuck Doerr President and CTO @OpenFin – OpenFin App Desktop is a Finance-Grade HTML5 runtime that delivers enhanced security and native user experience.
  5. 5. ©2013 Agenda Page 3 • What is HTML5 and why do we care? • Is the UI ergonomic? • Can you build high performance, responsive, GUIs? • Challenges in adopting HTML5 (in particular in Finance) • Are the development methodologies different? • Technology Choices • SDLC • Real-time connectivity • Tactical Solutions for deploying application to the desktop
  6. 6. ©2013 HTML5 Myths Page 4 • “I don’t want to write any JavaScript because JavaScript is evil” • “Java/JavaScript – they are the same!” • “Developing in JavaScript is too hard! ” • “All HTML5 does is add new tags!” • “HTML5 apps do not perform well enough.”
  7. 7. ©2013 HTML5 What is HTML5? Page 5 ConnectivityDevice Access Offline & Storage Semantics Multimedia 3D & Graphics Performance CSS3 Key Features of HTML5
  9. 9. ©2013 Why Html 5 Page 7 • First time that all of the major technology providers have agreed on a rich, cross-device, cross-OS, UI language • HTML5 introduces many cutting-edge feature that enables developers to create apps and websites with the functionality, speed and experience of desktop applications. • But unlike desktop applications, web applications can reach a much broader audience using a wide array of devices. • No need for plugins such as flash especially on iOS devices
  10. 10. ©2013 Challenges in adopting HTML5 Page 8 Major banks + financial institutions are looking to migrate to HTML5, but they don’t know how or realize the challenges in adopting HTML5. Cross-browser development • Still not easy • Legacy browsers such as IE6 –IE8 • CSS constructs behave different across browsers Technologies such as WPF/WinForms are: • Widely adopted • Mature technologies • Integrated with the OS Developer skills • Hire and train • Developers are not Designers! • Javascript vs CSS
  11. 11. ©2013 Further HTML5 Challenges in Finance Page 9 HTML5 provides a solution that is agile and cross-platform, but financial developers face significant desktop challenges Legacy Browsers IE 6, 7 and 8 don’t support HTML5 Native UX Financial desktop apps need native capabilities Migration Thick client apps must be rewritten
  12. 12. ©2013 Migrate to HTML5 Page 10 • Must define a migration path for existing apps • HTML5 apps need to seamlessly integrate with a diverse set of technologies • Silverlight, Flash • Java, C#, C++ • New development work on existing applications should be HTML5 • Continued support of existing infrastructure is not optional
  13. 13. ©2013 HTML5 Web Applications Page 11 • HTML5 applications are not web sites – they are rich GUI’s • They are long lived, single page apps with no “page based” navigation • It is becoming much more like traditional software development • Lots of open source software – few of the choices have been made for you as they are with traditional application development environments
  14. 14. ©2013 Tools & Frameworks Page 12
  15. 15. ©2013 Choosing the right technologies UI development in HTML5 is very similar to development in Java, C#, etc. Page 13 • First a couple HTML5 specific concerns • Script Loading (aka Dependency Management) • CSS Pre-Processing • Same engineering techniques and practices: different tools • Define basic application architecture • Base Libraries • Core Framework • Application structure beyond frameworks • Choose correct modularization • Unit Testing • Setup Continuous Integration and Deployment Environment
  16. 16. ©2013 Script Loading – give me what I need, when I need it Page 14 • Scripts are loaded by add includes in either the HEADER or BODY of HTML <script type="text/javascript" src=” /jquery.js"></script> • Issues • Hard to maintain and keep track of versions • The order of scripts must be correct • AMD • Module Pattern • AMD encapsulates logic and avoids creating globals • Defines a javascript module and its dependencies • Use a dependency manager/script loader e.g. RequireJS • Provides a mechanism for loading AMD • Maintains the order of dependencies using shims
  17. 17. ©2013 CSS Preprocessing Page 15 • CSS Weaknesses • Hard to maintain/change • Violates DRY • Huge Messy CSS files • What do CSS-preprocessors provide? • Modularization of CSS • Easy to change colours, fonts, whole chunks, etc • Integrates with your build • Color code different environments • LESS/Sass/STYLUS • Twitter bootstrap uses LESS • Foundation provides Support for Sass
  18. 18. ©2013 Basic Application Architecture Page 16
  19. 19. ©2013 Continuous Integration & Build Page 17
  20. 20. ©2013 Real Time Connectivity Traditional Approaches Page 18 • Polling • Comet • Bespoke sockets Websockets • Offers bidirectional connectivity, built on top of TCP • Shares ports with HTTP (80 and 443) • Cross origin • Open Source and Commercial frameworks available for backward compatibility • Atmosphere, Liberator, Kaazing, Diffusion, Nirvana,
  21. 21. ©2013 Running your Web Application Page 19 • Modern browsers have limited penetration within Financial Services • IE 8 has minimal HTML5 support • Chrome or Firefox • Chrome Frame - plugin for IE (6-9) Web Browser – in the browser user experience
  22. 22. ©2013 Running your Web Application Page 20 • Chromium – wrap your application with CEF • Maintenance of a proprietary runtime container is often underestimated • Advanced integration and UI features are often left to the application teams • Business support is challenging to maintain over time • Commercial Runtime • Feature rich set of requirements powered by requirements of many clients • Professional support • Lower cost and faster time to market HTML5 Runtime – native application user experience
  23. 23. ©2013 Contact Page 21 @asimmalik @chuckdoerr Asim Malik Chuck Doerr
  24. 24. Watch the video with slide synchronization on! finance-migration