RIAction 2010 - Love hate relationship of Zopim and Flex
-
Upload
zopim -
Category
Technology
-
view
2.854 -
download
3
description
Transcript of RIAction 2010 - Love hate relationship of Zopim and Flex
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 Confidential2
23 April 2010 3 Confidential
• Web-based Solutions
Zopimprovides..
• Small-medium
Businesses
For..
• Influence Sales Online
To..
The best Live Chat for
sales conversion
Tailor-made for SMBs
Emphasis on» Simple, great user
experience
»Accessibility
» Powerful features
Simple, affordable, powerful
23 April 2010 Confidential4
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 Confidential5
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 Confidential7
23 April 2010 8 Confidential
23 April 2010 Confidential9
Flex
Zopim
2004: Flex 1 released
2006: Flex 2 released
Feb 2008: Flex 3 released
Open sourced
June 2007: Challenge to come
up with a prototype
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)
Awesome Live Chat experience for business owners
23 April 2010 Confidential10
ExtJs Problems◦ Minimal animation
support
◦ Cross-browser
compatibility (read IE6!!)
◦ Longer development
cycle
23 April 2010 Confidential11
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 Confidential12
23 April 2010 Confidential13
Flex
Zopim
2004: Flex 1 released
2006: Flex 2 released
Feb 2008: Flex 3 released
Open sourced
Aug 2007: Prototype
in ExtJs
Jan 2008: Zopim
founded
Sep 2008: Zopim
releases Flex
Dashboard
23 April 2010 Confidential14
Flex
Zopim
2004: Flex 1 released
2006: Flex 2 released
Feb 2008: Flex 3 released
Open sourced
Aug 2007: Prototype
in ExtJs
Jan 2008: Zopim
founded
Sep 2008: Zopim
releases Flex
Dashboard
Jan 2009: Our first baby
– JXML created
(Declarative Javascript
framework similar to
Flex’s MXML)
Modular, faster widget development
23 April 2010 Confidential15
Ruby-based JXML
Compiler
Jxml
files
Compiled
Javascript
23 April 2010 Confidential16
Flex
Zopim
2004: Flex 1 released
2006: Flex 2 released
Feb 2008: Flex 3 released
Open sourced
Aug 2007: Prototype
in ExtJs
Jan 2008: Zopim
founded
Sep 2008: Zopim
releases Flex
Dashboard
Jan 2009: Our first baby
– JXML created
(Declarative Javascript
framework similar to
Flex’s MXML)
Mid 2009: First signs of
problems. Optimization
issues.
> 50% for heavy-traffic sites◦ Constant visual updates on visitor list
Spikes when dynamically adding / removing
UI components
23 April 2010 Confidential17
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 Confidential18
23 April 2010 Confidential19
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
23 April 2010 Confidential20
A B
Creates and
references
C
Adds Event
Listener De-reference & remove event
listeners diligentlyaddEventListener (type, listener, useCapture, priority, 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
23 April 2010 Confidential21
23 April 2010 Confidential22
Flex
Zopim
2004: Flex 1 released
2006: Flex 2 released
Feb 2008: Flex 3 released
Open sourced
Aug 2007: Prototype
in ExtJs
Jan 2008: Zopim
founded
Sep 2008: Zopim
releases Flex
Dashboard
Jan 2009: Our first baby
– JXML created
(Declarative Javascript
framework similar to
Flex’s MXML)
Mid 2009: First signs of
problems. Optimization
issues.
Mar 2010: Flex 4 released
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 Confidential23
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
Important Considerations
23 April 2010 Confidential24
23 April 2010 25 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 Confidential26
23 April 2010 27 Confidential
Plugin-based
Open Laszlo
JavaFx
Silverlight
AJAX Frameworks
Google Web Toolkit
YUI
JQuery UI
ExtJs
23 April 2010 Confidential28
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 Confidential29
Flare Data Visualization
FlexLib – Open source flex components
Tour de Flex – AIR app with demos & code
samples
23 April 2010 Confidential30