riaction 2010 - love hate relationship of zopim and flex

Confidential23 April 2010 1

Royston Tay

[email protected]

Co-founder

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

http://www.e27.sg/

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


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?



Flex

Zopim

2004: Flex 1 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


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

Zopim




Open sourced

Aug 2007: Prototype

in ExtJs

Jan 2008: Zopim

founded

Sep 2008: Zopim

releases Flex

Dashboard


Flex

Zopim




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


Ruby-based JXML

Compiler

Jxml

files

Compiled

Javascript


Flex

Zopim




Open sourced

Aug 2007: Prototype

in ExtJs

Jan 2008: Zopim

founded

Sep 2008: Zopim

releases Flex

Dashboard


– JXML created



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


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


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


http://livedocs.adobe.com/flex/3/html/help.html?content=rsl_01.html


Flex

Zopim




Open sourced

Aug 2007: Prototype

in ExtJs

Jan 2008: Zopim

founded

Sep 2008: Zopim

releases Flex

Dashboard


– JXML created



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


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


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


http://www.openlaszlo.org/

http://www.openlaszlo.org/

http://javafx.com/

http://www.silverlight.net/

http://code.google.com/webtoolkit/

http://developer.yahoo.com/yui/

http://jqueryui.com/



http://www.extjs.com/

The Battle for the RIA Throne: Flex vs. Silverlight

Flex vs AJAX

Optimizing Flex Applications

What's new in Flash Builder 4


http://it.toolbox.com/blogs/madgreek/the-battle-for-the-ria-throne-flex-vs-silverlight-26764

http://www.uiresourcecenter.com/ui-technologies/adobe-flex/whitepapers/FlexVsAJAXFriendsOrFoes.pdf




http://www.slideshare.net/dcoletta/optimizing-flex-applications

http://www.adobe.com/devnet/flex/articles/flashbuilder4_whatsnew.html

Flare Data Visualization

FlexLib – Open source flex components

Tour de Flex – AIR app with demos & code

samples


http://flare.prefuse.org/

http://code.google.com/p/flexlib/

http://www.adobe.com/devnet/flex/tourdeflex/

riaction 2010 - love hate relationship of zopim and flex

Technology

flex beckons

released flex2006

flexrecent release of

released issues

ui experience

result of zopim

releasedopen sourced

open sourcedzopimjune