The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

marketwatch-header
The MarketWatch app is a free news and market data app available for iOS and Android. It’s targeted to the MarketWatch.com community, as well as anyone interested in news coverage and analysis about the markets and personal finance. MarketWatch is owned by Dow Jones, publisher of The Wall Street Journal.

“We consider ourselves a resource for all of life’s money decisions, and we hope our app serves as a critical utility for users in building wealth and for smart financial planning,” says Brian Aguilar, head of product for MarketWatch. “We did extensive research to find the right fit for a hybrid platform that would serve our needs, and Ionic was the best match.”

The MarketWatch development team started with a three-tab template and customized from there, using side menus, ion-lists, slide boxes, and modals as the primary UI elements.

“Migrating our notification system from an in-house solution to leveraging Urban Airship was a big win for us, and the UA plugin made it incredibly easy,” says Terry Johnson, one of the mobile developers at MarketWatch. “We also used the in-app browser plugin to connect simply with our custom OAuth solution for connecting users to their watchlist, or a list of investments that they want to monitor.”

The app performs the same on both Android and iOS, with slight differences in sizes and layout, which the team managed via CSS.

“We did use the Crosswalk plugin in order to even out the Android experience,” says Johnson.

The team faced some challenges keeping plugins up to date but solved the issues with remove-and-add scripts.

“We also had some hurdles to overcome with our watchlist service, where calls to the service could be behind compared with changes in the app, but we used Angular broadcast events to keep track of the state between screens,” says Johnson. “Dealing with iframes that we don’t control inside of content was a pain point as well, but we were able to get past the window.open(url, ‘_blank’); problem with some iframe sandbox properties and some injected JavaScript.”

The MarketWatch development team is small, with more web development expertise than native development experience, so they chose Ionic to leverage their familiarity with web technologies.

“Features that appealed to us included web views and the ability to reuse web code, use of existing libraries, and plugins,” says Johnson. “Ionic provides a faster experience than our previous apps, and the transitions are elegant. We think Ionic handles a progressive environment well.”

Aguilar says the team plans to build additional features to the app in the next few months.

“We picked Ionic because of how heavily it leans on existing technologies that we are familiar with and use regularly, but we wanted something that also didn’t compromise on the app experience,” he says. “The fact that the framework is so performant only reinforced our decision. We’re incredibly pleased with the outcome and think Ionic has made our app stronger.”

  • Abhishek Jain

    +1 one of the best hybrid apps I’ve seen. There are few minor bugs and the UI feels sluggish sometimes, especially when sliding side menus. But overall, a very polished experience.