Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1dDPeFm. 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 qconnewyork.com. 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.

1. HTML5 Adoption – Migration Strategies and Challenges
2013
Asim Malik – Risk Focus
Chuck Doerr – OpenFin

2. InfoQ.com: 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 InfoQ.com!
http://www.infoq.com/presentations
/html5-finance-migration

3. Presented at QCon New York
www.qconnewyork.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
HTML5
What is HTML5?
Page 5
ConnectivityDevice
Access
Offline
& Storage
Semantics Multimedia 3D
& Graphics
Performance CSS3
Key Features of HTML5

8. ©2013 riskfocus.com
HTML5
Page 6
=
CONTENT
+ +
BEHAVIOUR PRESENTATION
HTML

9. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
Tools & Frameworks
Page 12

15. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
Basic Application Architecture
Page 16

19. ©2013 riskfocus.com
Continuous Integration & Build
Page 17

20. ©2013 riskfocus.com
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, Socket.io

21. ©2013 riskfocus.com
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. ©2013 riskfocus.com
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. ©2013 riskfocus.com
Contact
Page 21
asim@riskfocus.com
@asimmalik
http://uk.linkedin.com/in/asimsmalik
chuck@openf.in
@chuckdoerr
http://linkedin.com/in/chuckdoerr
Asim Malik Chuck Doerr

24. Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/html5-
finance-migration