Case Study - TwittZure Silverlight Twitter Client on Azure
Schematic used the engaging rich internet application of Silverlight 3 and the responsiveness of Windows Azure cloud platform to build a cutting edge Twitter application, the recently released Beta version of Twittzure.
TwittZure enables users to access key Twitter features by providing an engaging and sleek user interface to interact with friends and colleagues through the Twitter public APIs. TwittZure takes advantage of a highly available and scalable cloud server platform by using Windows Azure to serve the application and as a bridge between the application and the Twitter APIs.
TwittZure Home Screen - In-Browser Experience
Twitter has grown exponentially since its launch in March of 2006. In the last couple of years it has become an important part of a user’s online activities. The simplicity with which Twitterprovides users the ability to post and share status updates has made life easier for people who want to stay connected with friends and colleagues around the world. The user base ranges from average individuals to notable professionals to corporations, all of whom want to keep the world updated in 140 characters or less. One of Twitter’s mostsuccessful features is the ability of third-party applications to connect with Twitter’sbackend servers through public REST APIs.
Why another Twitter client if there are so many around? TwittZure is also a unique showcase and proof of concept for several emerging technologies and platforms that are integrated into the application and are relevant for Schematic and our clients. TwittZure integrates not only the Twitter user and search REST public APIs, but also uses Windows Azure, Microsoft’s cloud platform, to host the application,--providing a highly available and scalable bridge between the application and Twitter’sREST services.
TwittZure Login Screen - Out-of-Browser Experience
The application started as the pet project of Anthony Baker, a software architect at interactive agency Schematic. He wanted to gain expertise in the Twitter public APIs and combine Twitter’s functionality with other emerging technologies and platforms relevant in the interactive world. At the beginning, the application was nothing more than a simple Twitterclient making use of the public REST APIs--the next step was to create an engaging user interface that would draw users into the application. Anthony presented the project to Schematic’s R&D department and the project was approved.
Schematic dedicated a team of experienced designers, animators, and developers to continue the application development as a research project that would explore the feasibility of integrating different technologies and platforms currently gaining momentum and acceptance across the industry to enhance the overall experience of end users.
TwittZure High Level Architecture
Because cloud-based solutions have become key for corporations and technologists alike, the TwittZure team decided to explore Windows Azure as the hosting provider. The enhancements implemented in the recently released Silverlight 3 enabled the team to create a beautiful and usable interface that mixes an engaging yet simple design with smooth transitions (including 3D perspectives and animations) and enhanced rich text display. Behind the scenes, an ASP.NET bridge hosted on Windows Azure provides Silverlight with a simple way to consume Twitter REST APIs, and overcome cross-domain policy restrictions preventing RIA applications from connecting to the APIs directly, which was a hurdle to overcome during the application development. Additionally, the ASP.NET bridge hosted in the cloud provides a good caching strategy and enhanced the traffic flow from the application to the Twitter APIs. The Azure ASP.NET bridge serves both the in-browser and out-of-browser experience of TwittZure. Users can install the application on the desktop even if the user is running the application on a Mac. Cross-browser, cross-platform, and out-of-browser capabilities are noteworthy Silverlight 3 features included in the application.
TwittZure Timeline/Search Screen
Features currently available include the ability to run TwittZure inside or outside the browser and to run the application on all Silverlight-supported browsers. TwittZure runs in exactly the same way on a Mac or PC. It provides the user with the ability to search for specific terms across all public Twitter posts, even without logging in; it also allows user authentication, retrieving the user’s basic information and timeline. TwittZure functionality also includes the ability to switch between Search and Timeline views, which are retrieved and displayed in a paginated way to reduce response sizes when retrieving data from Twitter servers.
During the development process, XAML animators played a key role in providing a seamless integration between designer and developer, using Microsoft’s Expression Blend to port designs into the application’s XAML markup code. The use of Expression Blend and Visual Studio Team System, including Team Foundation Server as the source control tool, played a key part in the development speed and productiveness. From start to Beta launch, the development took about four weeks. The team included an art director, designer, XAML animator, and .NET developer.
Future Plans
The Schematic TwittZure Team plans to continue enhancing and adding more functionality to the application in 2010 and keep integrating new Silverlight 4 features as they become available. On the backend side, the team plans to explore new Windows Azure tools and capabilities to provide a better and faster way to serve the application.
Along with Silverlight 4 and Windows Azure enhancements, the team will also include more Twittercommon functionality—such as advanced search controls, favorites, lists, enhanced timeline rich text display, user profile access and modification, posting advanced controls, and improving results displayed to allow more posts to be shown at the same time.
Where to find us
TwittZure public URL: https://twittzure.cloudapp.net/
Schematic web site: https://www.schematic.com
Development Team
Anthony Baker
Software Architect, Microsoft Platforms Group
Project Lead, Application Architect, Developer
Jose Madriz
Senior Motion Designer, Advanced Interactive Group
Animator
Alejandro Rodriguez
Associate Motion Designer, Advanced Interaction Group
Designer and Animator
Gustavo Apuy
Art Director, Creative Services
Art Director and Designer