RIAction 2010 - Love hate relationship of Zopim and Flex

Royston Tay Co-founder royston@zopim.com 23 April 2010 1 Confidential

 Business dude, engineer, co-founder Zopim  Electrical engineering background (NUS)  Only started serious coding in 2005 ◦ QA engineer at FaceTime Communications ◦ Makeshift developer at Zopim  Keen focus on RIA technologies especially after co-founding e27.sg  Currently in Product Management role in Zopim 23 April 2010 2 Confidential

For.. • Web-based • Influence Solutions • Small- Sales Online medium Businesses Zopim To.. provides.. 23 April 2010 3 Confidential

Simple, affordable, powerful The best Live Chat for sales conversion Tailor-made for SMBs Emphasis on » Simple, great user experience » Accessibility » Powerful features 23 April 2010 4 Confidential

 Websites with shopping carts ◦ Surf-station.com  Being logged onto Zopim is now a basic requirement of both our store locations. Zopim has absolutely changed the way we do day to day customer service ◦ MiracleNoodle.com  Zopim has reduced phone calls substantially and has increased sales on our website by 16%. We can't imagine our website without it  Real Estate ◦ Buddyblake.com  In the past 2 months we've sold 2 homes directly as a result of Zopim. This is the best investment I've made in some time.  Offline Services ◦ Spahaven.com  Having an automated lead engagement tool like Zopim gives our company the ability to execute like the big boys, for a fraction of the cost 23 April 2010 5 Confidential

23 April 2010 6 Confidential

 Our history with RIA frameworks  Why we adopted Flex in 2008  Our major gripes with Flex  How we coped with Flex  Recent release of Flex 4 / Flash 10  Which RIA framework is the fairest of them all? ◦ Flex, Silverlight, JavaFx, AJAX? 23 April 2010 7 Confidential

2004: Flex 1 released Flex 2006: Flex 2 released Feb 2008: Flex 3 released Open sourced Zopim June 2007: Challenge to come up with a prototype 23 April 2010 9 Confidential

Awesome Live Chat experience for business owners Not OS dependent Browser-based » No downloads required Provide the best possible desktop-like UI experience for our users Easily skinned No / Low learning curve Decision : ExtJs (JS framework built on YUI) 23 April 2010 10 Confidential

 ExtJs Problems ◦ Minimal animation support ◦ Cross-browser compatibility (read IE6!!) ◦ Longer development cycle 23 April 2010 11 Confidential

Flex beckons..  Large Market Share  WYSIWYG Editor  MXML – XML based declarative language for display components  Inline actionscript for business logic  Flash socket  Better animation / visualization / multimedia support 23 April 2010 12 Confidential

2004: Flex 1 released Flex 2006: Flex 2 released Feb 2008: Flex 3 released Open sourced Sep 2008: Zopim releases Flex Dashboard Zopim Jan 2008: Zopim founded Aug 2007: Prototype in ExtJs 23 April 2010 13 Confidential

2004: Flex 1 released Flex 2006: Flex 2 released Feb 2008: Flex 3 released Open sourced Sep 2008: Zopim releases Flex Dashboard Zopim Jan 2008: Zopim founded Jan 2009: Our first baby Aug 2007: Prototype – JXML created in ExtJs (Declarative Javascript framework similar to Flex’s MXML) 23 April 2010 14 Confidential

Modular, faster widget development Jxml files Ruby-based JXML Compiler Compiled Javascript 23 April 2010 15 Confidential

Mid 2009: First signs of problems. Optimization 2004: Flex 1 released issues. Flex 2006: Flex 2 released Feb 2008: Flex 3 released Open sourced Sep 2008: Zopim releases Flex Dashboard Zopim Jan 2008: Zopim founded Jan 2009: Our first baby Aug 2007: Prototype – JXML created in ExtJs (Declarative Javascript framework similar to Flex’s MXML) 23 April 2010 16 Confidential

 > 50% for heavy-traffic sites ◦ Constant visual updates on visitor list  Spikes when dynamically adding / removing UI components 23 April 2010 17 Confidential

 Reduce Measurement / Layout calculations ◦ Use absolute layouts where possible (vs fluid layouts) ◦ Avoid nested VBox, HBox ◦ Use stripped-down Group, VGroup, HGroup in Flex 4  Reduce data-bindings for frequently changing data  For lists containing large data sets – useVirtualLayout = true 23 April 2010 18 Confidential

 Reuse dynamic UI components ◦ Reduces unnecessary object creation  Use mouseEnabled = false mouseChildren = false liberally! 23 April 2010 19 Confidential

 No way to explicitly delete an object  Garbage collector  Objects with lingering references leads to memory leak Creates and references A B  De-reference & remove event Adds Event Listener listeners diligently addEventListener (type, listener, useCapture, priority, C useWeakReference)  Be careful – Hard to find leaks 23 April 2010 20 Confidential

 Compiled SWF > 1.5MB  Solution was relatively straightforward ◦ Use Runtime Shared Libraries (RSLs) ◦ Compiled SWF < 50% of original 23 April 2010 21 Confidential

Mid 2009: First signs of problems. Optimization 2004: Flex 1 released issues. Flex 2006: Flex 2 released Feb 2008: Flex 3 released Mar 2010: Flex 4 released Open sourced Sep 2008: Zopim releases Flex Dashboard Zopim Jan 2008: Zopim founded Jan 2009: Our first baby Aug 2007: Prototype – JXML created in ExtJs (Declarative Javascript framework similar to Flex’s MXML) 23 April 2010 22 Confidential

 Better designer / developer workflow ◦ Adobe Catalyst and FlashBuilder  Data-centric development ◦ Define data model + Bind data to Flex components  Developer Productivity / Testing Tools ◦ Better Refactoring, Profiling, Documentation, Unit Testing  Better mobile compatibility ◦ Adobe Packager: AS3 to iPhone app ◦ Adobe Slider: Mobile Flex Framework 23 April 2010 23 Confidential

Important Considerations SEO Level of adoption / X-browser issues Breaking of normal browser experience Compatible with 3rd party JS / swf Speed / File size Level of multimedia integration Need to manipulate DOM / HTML Ease of hiring developers 23 April 2010 24 Confidential

 Frontend Developer ◦ Experienced in Javascript / JS frameworks ◦ Dabbled with Flex 3 / 4 ◦ Passion and creativity is a must ◦ Keen interest in UI design  Backend Developer ◦ Knowledge & understanding of OOP (Python preferably) ◦ Experienced in MySQL, DB design and administration ◦ Familiar with web technologies such as Web server, DNS, TCP, etc.. ◦ Creative and persistent problem solver 23 April 2010 26 Confidential

Plugin-based  Open Laszlo  JavaFx  Silverlight AJAX Frameworks  Google Web Toolkit  YUI  JQuery UI  ExtJs 23 April 2010 28 Confidential

 The Battle for the RIA Throne: Flex vs. Silverlight  Flex vs AJAX  Optimizing Flex Applications  What's new in Flash Builder 4 23 April 2010 29 Confidential

 Flare Data Visualization  FlexLib – Open source flex components  Tour de Flex – AIR app with demos & code samples 23 April 2010 30 Confidential

http://blog.zopim.com	1337
http://naga.zopim.com	15
http://translate.googleusercontent.com	12
http://www.garag3.com	5
https://blog.zopim.com	5
http://www.slideshare.net	3
http://webmaster9	1
http://www.techgig.com	1
http://173.231.142.103	1
http://static.slidesharecdn.com	1
http://webcache.googleusercontent.com	1

RIAction 2010 - Love hate relationship of Zopim and Flex

by Zopim

Accessibility

Categories

Upload Details

Usage Rights

11 Embeds 1,382

Statistics