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


For..
• Web-based • Influence
Solutions • Small- Sales Online
medium
Businesses
Zopim
To..
provides..


Simple, affordable, powerful

The best Live Chat for
sales conversion
Tailor-made for SMBs
Emphasis on
» Simple, great user
experience
» Accessibility
» Powerful features


 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


 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?


2004: Flex 1 released
Flex
Feb 2008: Flex 3 released
Open sourced

Zopim

June 2007: Challenge to come
up with a prototype


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)


 ExtJs Problems
◦ Minimal animation
support
◦ Cross-browser
compatibility (read IE6!!)
◦ Longer development
cycle


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


Flex
Open sourced

Sep 2008: Zopim
releases Flex
Dashboard
Zopim
Jan 2008: Zopim
founded
Aug 2007: Prototype
in ExtJs


Flex
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)


Modular, faster widget development
Jxml
files
Ruby-based JXML
Compiler

Compiled
Javascript


Mid 2009: First signs of
problems. Optimization
2004: Flex 1 released issues.
Flex
Open sourced

Sep 2008: Zopim
releases Flex
Dashboard
Zopim
Jan 2008: Zopim
Flex’s MXML)


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


 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


 Reuse dynamic UI components
◦ Reduces unnecessary object creation

 Use
mouseEnabled = false
mouseChildren = false
liberally!


 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


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


Mid 2009: First signs of
problems. Optimization
2004: Flex 1 released issues.
Flex
Feb 2008: Flex 3 released Mar 2010: Flex 4 released
Open sourced

Sep 2008: Zopim
releases Flex
Dashboard
Zopim
Jan 2008: Zopim
Flex’s MXML)


 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


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


 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


Plugin-based
 Open Laszlo
 JavaFx
 Silverlight

AJAX Frameworks
 Google Web Toolkit
 YUI
 JQuery UI
 ExtJs


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


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


RIAction 2010 - Love hate relationship of Zopim and Flex

Recommended

Recommended

More Related Content

Similar to RIAction 2010 - Love hate relationship of Zopim and Flex

Similar to RIAction 2010 - Love hate relationship of Zopim and Flex (20)

Recently uploaded

Recently uploaded (20)

RIAction 2010 - Love hate relationship of Zopim and Flex