HTML5 Adoption – Migration Strategies and Challenges
2013
Asim Malik – Risk Focus
Chuck Doerr – OpenFin
InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese an...
Presented at QCon New York
www.qconnewyork.com
Purpose of QCon
- to empower software development by facilitating the sprea...
©2013 riskfocus.com
About Us
Page 2
Asim Malik
UI Architect @Risk Focus - A Specialist consultancy
delivering Risk Managem...
©2013 riskfocus.com
Agenda
Page 3
• What is HTML5 and why do we care?
• Is the UI ergonomic?
• Can you build high performa...
©2013 riskfocus.com
HTML5 Myths
Page 4
• “I don’t want to write any JavaScript because JavaScript is evil”
• “Java/JavaScr...
©2013 riskfocus.com
HTML5
What is HTML5?
Page 5
ConnectivityDevice
Access
Offline
& Storage
Semantics Multimedia 3D
& Grap...
©2013 riskfocus.com
HTML5
Page 6
=
CONTENT
+ +
BEHAVIOUR PRESENTATION
HTML
©2013 riskfocus.com
Why Html 5
Page 7
• First time that all of the major technology providers have
agreed on a rich, cross...
©2013 riskfocus.com
Challenges in adopting HTML5
Page 8
Major banks + financial institutions are looking to migrate to HTM...
©2013 riskfocus.com
Further HTML5 Challenges in Finance
Page 9
HTML5 provides a solution that is agile and cross-platform,...
©2013 riskfocus.com
Migrate to HTML5
Page 10
• Must define a migration path for existing apps
• HTML5 apps need to seamles...
©2013 riskfocus.com
HTML5 Web Applications
Page 11
• HTML5 applications are not web sites – they are rich GUI’s
• They are...
©2013 riskfocus.com
Tools & Frameworks
Page 12
©2013 riskfocus.com
Choosing the right technologies
UI development in HTML5 is very similar to development in Java, C#, et...
©2013 riskfocus.com
Script Loading – give me what I need, when I need it
Page 14
• Scripts are loaded by add includes in e...
©2013 riskfocus.com
CSS Preprocessing
Page 15
• CSS Weaknesses
• Hard to maintain/change
• Violates DRY
• Huge Messy CSS f...
©2013 riskfocus.com
Basic Application Architecture
Page 16
©2013 riskfocus.com
Continuous Integration & Build
Page 17
©2013 riskfocus.com
Real Time Connectivity
Traditional Approaches
Page 18
• Polling
• Comet
• Bespoke sockets
Websockets
•...
©2013 riskfocus.com
Running your Web Application
Page 19
• Modern browsers have limited
penetration within Financial Servi...
©2013 riskfocus.com
Running your Web Application
Page 20
• Chromium – wrap your application with CEF
• Maintenance of a pr...
©2013 riskfocus.com
Contact
Page 21
asim@riskfocus.com
@asimmalik
http://uk.linkedin.com/in/asimsmalik
chuck@openf.in
@chu...
Watch the video with slide synchronization on
InfoQ.com!
http://www.infoq.com/presentations/html5-
finance-migration
Upcoming SlideShare
Loading in...5
×

HTML5 Adoption in Finance - Migration Strategies and Challenges

906

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
906
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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. 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. 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. 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. 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. 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. 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. 8. ©2013 riskfocus.com HTML5 Page 6 = CONTENT + + BEHAVIOUR PRESENTATION HTML
  9. 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. 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. 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. 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. 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. 14. ©2013 riskfocus.com Tools & Frameworks Page 12
  15. 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. 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. 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. 18. ©2013 riskfocus.com Basic Application Architecture Page 16
  19. 19. ©2013 riskfocus.com Continuous Integration & Build Page 17
  20. 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. 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. 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. 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. 24. Watch the video with slide synchronization on InfoQ.com! http://www.infoq.com/presentations/html5- finance-migration

×