Sencha Inc. | HTML5 Apps

Blog

Implementation Spotlight:  Zipwhip and Ext JS

May 27, 2009 | Abraham Elias

With close to 100 billion text messages sent every month in the U.S., text messaging has clearly become a communication medium many of us have come to rely on. Zipwhip, a text messaging utility for the web with a polished Ext-based user interface, aims to take texting to a new level. The team at Zipwhip were eager to share their enthusiasm and approach to building with Ext.

Tell us a little bit about Zipwhip and your goals for the application.

Zipwhip is a utility for text messaging from the web. Text messaging is the fastest growing communication medium, but is still locked inside the mobile phone. We aim to help bring text messaging everywhere.

To pull off our ambitious goals, we're using just about every web 2.0 trick in the book—comet to send carrier delivery receipts back to the browser in real-time, Ajax for server communications, download-on-demand Javascript packages (with preloading), Flash for audio notifications, and many others.

Why did you choose Ext JS?

An Ext.Panel and an Ext.SplitButton One of the design decisions we made early on was that we wanted a rich desktop-like experience inside the web browser. We investigated the other major players in the field, but ultimately decided that ExtJS was the best. One of the things that made ExtJS especially appealing was the "Window" object that can contain "Panel" objects. Our core requirement was a windowed interface and having Ext.Window cross-browser out of the box was a major win.

Ext allowed us to focus on putting together the Ext building blocks that were engineered to be cross browser rather than reinvent the wheel. We had a limited budget and limited time and Ext provided 90% of the functionality we had in mind. We used a combination of Ext layouts and CSS to achieve many of the window structures used in the site. Theming the Ext widgets and integrating them with custom css layouts was a breeze.

Lastly, the XType architecture allowed us to create Javascript packages and download them on demand. This allows us to create an application that was not bounded by download size. A browser would have a difficult time rendering our site if not for lazy loading. What used to be a difficult custom built proposition (lazy loading) became an afterthought with Ext JS.

The Zipwhip application is extremely feature-rich. How did you manage the UI code complexity?

One of the small footnotes in Ext JS is the "plugin." We've made that concept into a corner-stone of our application. Each carrier requires different functionality, features, and different business rules. With progressive enhancement we can swap in plugins that provide different implementations of various features, and ensure we only download the plugins that are needed.

Another thing that simplified my life greatly was David Davis' (xantus) implementation of PubSub. This allowed us to decouple areas of the code, which made for a simple core framework. We implemented PubSub very late in the development process and are still working to fully take advantage of this wonderful design pattern.

Finally, keeping the code divided into standard namespaces was invaluable. We segmented common "Operating System" level widgets into Zw.controls and put all of our Ext.data.Records into Zw.data. Namespacing the code kept things manageable.

Oh yeah, and one class per file. Nobody likes a 10,000 line file.

What other techniques did you use to achieve such a gorgeous UI?

Most of what you see in the Zipwhip application is standard Ext JS with some fancy css overrides. We were surprised how easy it was to add some custom graphics to the existing Ext JS markup.

Ext.layout

One of the most awesome things about Ext JS are the Layouts! Because of the amazing flexibility we could mix css and Ext layouts to give us the desired effect with minimal code. The FormLayout (with anchoring) can manage the position of the fields, whereas CSS could manage the complexity of the Phone Preview Area.

Also Ext JS layouts improve performance and page weight. Specifically the layouts each decide when to render the content they are responsible for. This means that the Threading tab is only rendered the first time the user views the tab.

Ext.menu.Menu and Ext.DataView

Ext.menu.Menu (and the Adapter) became one of the handiest components in the ExtJS library. All of our Right-click menus were implemented with the Ext.menu.Menu. We host panels inside the menu and use a combination of CSS trickery plus Ext layouts to get the resulting effect.

Possibly the part we used the most out of Ext was the Ext.DataView. In the Contacts window (and Corkboard), we utilize an Ext.DataView and customized it to allow rendering of Ext.Components. The DataView abstracts away the difficulty of managing a list of Widgets linked to a Ext.data.Store.

Ext.SplitButton

The ContactCard (Zw.controls.ContactCard) extends the Ext.SplitButton. I know our ContactCard doesn’t look anything like a split button, but it truly was the best approach. Thanks to the way that Ext designed their components, we were able to easily modify the Template that is used to generate the button. Also thanks to the xtype, delay rendering, and plugin model the API was extremely simple.

items: {
xtype: 'Zw.controls.ContactCard',
closable: true,
plugins:  [
"Zw.controls.ContactCardEditNamePlugin",  //enable it to be editable
new Zw.controls.ContactCardDropdownPlugin(), {  // allow right clicks on the card
xtype: 'Zw.controls.ContactCardPopupPlugin'  //pop it up if its too small
}],
listeners: {
scope: this,
'close': this.onContactCardClose,
'rename': this.onContactCardRename
}
}

What features could we add to Ext to make building a rich application like Zipwhip easier in the future?

We had the situation where we needed to create an Ext.DataView that displays Widgets. Currently you can only use an Ext.DataView with an Ext.Template. A solution that allows for controls to be created and inserted according to an Ext.data.Store would be valuable.

Additionally, "best practices" for preventing and dealing with memory leaks would make building an RIA easier. Memory leaks with templates, dataviews, and elements can cripple the development process if not planned for.

Do you have any advice for developers using Ext for the first time?

The best way to learn is to do. The rich examples provided give you a great starting point that can quite easily end up in your final product. One of the key value propositions of using Ext JS is the rich documentation - use it often. Also put together various folder structures to gain experience for what feels right. A folder structure can make a huge difference on the quality of your product. Pick something that you can grow into and is not overly structured. I divide my OS, Controls, and Features and have found it rewarding, while not too restrictive.

Final thoughts?

Ext JS is more than an abstraction layer on top of Javascript (like other libraries). Ext JS is a set of design patterns and object models that naturally fit into application development. We continually reach inside the Ext JS treasure box when developing new functionality and find that most of the hard engineering has already been done. All that is left is to socket together a few pieces and tweak some CSS. There is a growing amount of choice in the world of Javascript frameworks. We evaluated them all and decided Ext JS was the best. This was a hard choice for us initially, but now that we’ve launched our application to the public and it’s getting used every day, we’re really glad we selected Ext JS. The application has turned out to be everything we imagined and we like working with the Ext JS framework more and more.

There are 58 responses. Add yours.

Serkan Yer?en

5 years ago

This is the best usage of Ext js I have ever seen. There are amazingly inspiring parts which every developer should see.
Bravo!!...

Michael Stahle

5 years ago

Outstanding implementation!  I will have to give them a look!

Michael Stahle

5 years ago

Ok, after looking at the site, it is even better than your description!  I signed up for the beta, and look forward to using this tool for a business setting!  You guys rock!

Chris Smith

5 years ago

Holy moley! This is the most incredible use of Ext. I think I just saw the future of the web. Who are these Zipwhip guys?!? Too bad I’m not on Sprint. Their website at http://www.zipwhip.com seems to Ext as well.

Simplicio Gamboa III

5 years ago

Nice

Brad Baumann

5 years ago

Amazing application! Very well done!

Kevin

5 years ago

As a sprint customer it took a little time to get passed the single sign-on, but once I was in, the application is jaw dropping.  Very nice work guys.  Zipwhip is the Meebo of text messaging.  well done!

Jay garcia

5 years ago

Absolutely stunning!

I'm Famous

5 years ago

David Davis

5 years ago

I’m glad I could help. They have done a great job on the ZipWhip app.  Congrats!

Joe

5 years ago

That is a super site - really great job.

Medvedev

5 years ago

It’s awesome work. UI is cool.

Julie D'Agostino

5 years ago

Wow, Michael.  This is an amazing capability and I can’t wait to use it.

MomDad

5 years ago

Truly awe-inspiring customization! Your account of the rationale behind choosing Ext nicely serves to reinforce why Ext JS is such a great choice in comparison to other frameworks.

Animal

5 years ago

Superb example of Ext usage!

What’s your ExtJs forum name?

CEchever

5 years ago

I don’t have words to describe this implementation of Ext JS.. just amazing…!!!

?????

5 years ago

????? ?????

David Davis

5 years ago

@Animal: SmyersM

tianzhou0374

5 years ago

UI is realy cool.

sosyxg

5 years ago

GOOD!

Anshu Bansal

5 years ago

This is awesome…I think I am gonna develop some app based on this..

_mindMeld » Impressive ExtJS Application

5 years ago

[...] folks at ZipWhip have put together a really impressive UI in ExtJS. Check out the link for more [...]

???

5 years ago

??????????

Praveen Ray

5 years ago

This is simply awesome. Can jquery and prototype people point at any such site?

Marco

5 years ago

With all possibilities, they have stolen the msn messenger icons to build their own icons (add only a cap on guys) to trap msn users ... Microsoft will contact them soon to ask some fees ...

ExtJS 3.0 RC2 - ? ?? ???? ? ??????? RESTfulAlpha-B

5 years ago

[...] ????????????? ?????????? ? ??????? - ????????? ???? ???????????? ???? ? ???, ????? ???? ????? ??????? ?? ???? ????? [...]

Juan Mendes

5 years ago

Great job, the app looks great.  Looks like you guys were really able to design the entire app based on ext’s patterns and create a very flexible design. I wish we didn’t have so much legacy code to deal with and could do the same to our app.

This app helps prove the point that there is no comparison between ext and prototype, jquery, or the other major js libs when it comes to building desktop-like apps on the browser.

EXTJS.CN

5 years ago

how to login it?

Ajaxian » Ext Updates: Ext JS 3.0, Ext GWT 2

5 years ago

[...] Implementation Spotlight: Zipwhip and Ext JS [...]

Quaspam

5 years ago

Guys, this is a master piece of programming and design brought together. I’m blown away!!

???

5 years ago

Ext??????????????????????

kabin

5 years ago

kabin üretiminde üretici firma.

Oper

5 years ago

?????, ?? ??????? ???????? ?? ?????, ??????? ? ?????????.

siki?

5 years ago

siki? ve videolar

cinsellik

5 years ago

I am grateful to you for this great content.

21tctctrade

5 years ago

well done

onlinefilmizle

5 years ago

a very flexible design. I wish we didn’t have so much legacy code to deal with and could do the same to our app.

This app helps prove the point that there is no comparison between adass

okey

5 years ago

n. I wish we didn’t have so much legacy code to deal with and could do

youtube

5 years ago

I wish we didn’t have so much legacy code to deal with and could do the s

Mads

5 years ago

Very impressive implementation!
And a great inspiration for new ways to use this great framework smile

ucuz tatil

5 years ago

Great job, the app looks great. Looks like you guys were really able to design the entire app based on ext’s patterns and create a very flexible design. I wish we didn’t have so much legacy code to deal with and could do the same to our app.

This app helps prove the point that there is no comparison between ext and prototype, jquery, or the other major js libs when it comes to building desktop-like apps on the browser.

Mike Rrod

5 years ago

Well I think that this implementation might be awesome. Thanks folks.

fred

5 years ago

This looks a great application and very flexible design.

Tom: fix rrod

5 years ago

This looks like a great app. ill have to check it out more

Peter

5 years ago

Great looking little application.

Rachmat Kukuh R.

4 years ago

sangar pek!

Tari Dario

4 years ago

Its incredible now there is a professional way to fix your Red Ring Of Death I just found out today. Check my link posted. If it does not work try rrod-fix-pro dot com.

Neo

4 years ago

very good!

??

4 years ago

great application and very flexible design.

The Woodlands Real Estate Appraiser

4 years ago

They are right on the money about text messaging still growing as a form of communication.  Text messaging is just so convenient when you don’t want to take the time to call someone and have an entire conversation.  There are tons of pros to text messaging.  It is crazy when you step back and think where we were as far as communication goes just 15-20 years ago.  Phonebags????

Uygun Otel

4 years ago

Useful article thanks.

baseball hats

4 years ago

Hi,verybody,I will come again.

sikis

3 years ago

They are right on the money about text messaging still growing as a form of communication.  Text messaging is just so convenient when you don’t want to take the time to call someone and have an entire conversation.  There are tons of pros to text messaging.  It is crazy when you step back and think where we were as far as communication goes just 15-20 years ago.  Phonebags????

apartamentos pirineo aragones

3 years ago

Doesn’t Twitter pretty much have this feature allready built-in for Smart Phone users?

Ireland

3 years ago

One or two to rememebr, that is.

asikis

3 years ago

They are right on the money about text messaging still growing as a form of communication.  Text messaging is just so convenient when you don’t want to take the time to call someone and have an entire conversation.

minoxidil

3 years ago

hey are right on the money about text messaging still growing as a form of communication.  Text messaging is just so convenient when you don’t want to take the time to call someone and have an entire conversation.

ccobler

3 years ago

Sceenshots look great, but I can not get onto the site.

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.