riaction 2010 - love hate relationship of zopim and flex

Confidential23 April 2010 1

Royston Tay

royston@zopim.com

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

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