
I have been and am a huge fan of Adobe Flex as a technology to build great experiences for the web. The FlexStore app was a great example of how we can change the experience around a common use case like an online shopping website. This app was built sometime around 2005 (if I remember right) to showcase the capabilities of Flex 2.0 framework. 7 years down, with web standards making quantum leaps in providing great experiences, we could now build a similar experience without flash or flex.
I just started out writing my own port of this app using web standards and here’s an early prototype of what I could do. I spent about a couple of days to get this far, which is super encouraging. I am using a combination of JavaScript and CSS animations to get the transitions working and some jQuery to get the drag and drop going. I have also tried to replicate most of the UI elements the same way as the Flex application with some exceptions.Mind you, this is a very early prototype and is very much in work in progress mode. I have made the source code available in my github – if you feel you can add some features / fix some of the issues, please feel free to fork the branch.
I will be spending time in adding features and fixes to this as well, but not at a very quick rate. You can experience the demo here. Here is a small summary of what works. Read the bullets below or watch the video
The stuff that works
1. Move the slider to filter the items.
2. Click the “triband” check box to filter on triband
3. Drag and drop items to compare bin
4. Drag and drop items to shopping cart
5. Use the select box and choose “2000″ as the series to filter
6. Click the “search” or the “cart” icons to see the sliding animation
The stuff that doesn’t work (yet)
1. Dragging the slider violently with the intent of breaking the demo.
2. Combination of filtering is buggy.
3. Price calculation based on items in shopping cart.
4. Any other combination that is untested.