HTML5 Adoption in Finance - Migration Strategies and Challenges

  • 702 views
Uploaded on

Video and slides synchronized, mp3 and slide download available at URL http://bit.ly/1dDPeFm. …

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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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