The Atlantic Wire: Building for iPad on HTML5 and Sencha Touch

The New York Times, Sports Illustrated and now The Atlantic are building powerful, user friendly apps with HTML5 and Sencha frameworks. Why? For leading publishers like these, picking a way to build apps is as much a business choice as it is a technology choice. And they realize that frameworks-based HTML5 allows them to deliver an amazing user experience in their apps, while maintaining the distribution, pricing and advertising control that is critical to their businesses. Oftentimes, publishers are leading the vanguard of new technology and business model adoption as they go where the readers are, and HTML5 allows them the ability to innovate on both fronts.

“

We believe the future of digital publishing will require a multiple-platform, multiple-product strategy using open technologies where users can access Atlantic content whenever and however they want it.
— The Atlantic

A new high bar for publishing has been set by The Atlantic with their iPad app, built on Sencha Touch. Their new Wire tablet application (touch.theatlanticwire.com, built with Sencha Touch) is a great example of how publishers can leverage leading edge HTML5 technologies to create new and innovative media experiences without having to build a native application. Plus, they retain their ability to monetize their content via tools like advertising. The new web app allows The Atlantic to deliver a powerful storytelling platform on the iPad without the need for an App Store install. Using HTML5 and Sencha frameworks, publishers like The Atlantic can distribute their content freely, without being controlled by platform vendors, and find their users where they already are: on the web.

We’re especially excited about the app because we got to work directly with The Atlantic, the 155-year-old general interest magazine, as well as Modus Create, one of our expert consulting partners, to make it a reality. Their vision was to build an app that combines the best of breed content from TheAtlanticWire.com (a sister site to The Atlantic) with the leading web application technology from Sencha, and deliver an amazing user experience on any device.

“We believe the future of digital publishing will require a multiple-platform, multiple-product strategy using open technologies where users can access Atlantic content whenever and however they want it. This new Wire app does just that,” said Kimberly Lau, vice president and general manager for Atlantic Digital.

The Atlantic Wire is an authoritative guide to the news and ideas that matter most right now. Its reporters track newsmakers and opinions across the entire media spectrum: newspapers, web sites, television, radio and magazines. Built for the tablet, the application lets readers swipe browser article headlines, save articles as favorites, and browse through various articles using Sencha Touch components and layouts. As readers browse through the various headlines, advertising pods are seamlessly mixed in allowing The Atlantic Wire to sell advertising as a part of this new tablet web application.

Out of the box, Sencha Touch provides a host of features, many of which were used to build The Atlantic Wire application. Built around a model-view-controller architecture, the application displays content in carousels that let users pan through the news. Favorite articles are stored using the localStorage proxy. And one of the most unique features that The Atlantic Wire app uses is the Sencha Touch microloader. This feature allows The Atlantic to make changes to the app, yet the client’s browser only has to download patches to the app. This ensures much quicker startup times for readers of The Atlantic Wire, while enabling its developers to innovate without impacting user experience.

In addition, the application features deep linking — a necessity for any media publication — using HTML5’s History API, so readers can follow links and come back to the article they were reading by using the browser’s forward and back buttons. This is critically important to any web application that is monetized using advertising. If a customer clicks off to an ad, the web app needs to preserve the page the user was on, so they can return easily. With Sencha Touch and the HTML5 History API, it was an easy feature for our partners at Modus to implement.

The Atlantic Wire and projects such as Fastbook showcase what is truly possible with HTML5 and the many benefits of building universal applications with open standards. Publishers like The Atlantic benefit from using HTML5 to build applications that are free of app store constraints, allowing them to innovate on their business model and the technical delivery. With HTML5, companies have the ability to build universal applications without limitations.

If you’re interested in learning more about the technical details behind the app, Modus Create has written a technical post on the work they did to realize the vision of The Atlantic Wire app.

If you want to help prove the power of HTML5, build an awesome app using Sencha Touch and enter our HTML5 Is Ready contest. You could win your share of over $20k in prizes!