NYT Launches First Commercial Flutter Web App

Media & Publishing
Flutter
Firebase

We rebuilt The New York Times’ Flash-based KENKEN puzzle in Flutter, from a 48-hour prototype to six platforms on one code base. It debuted in the Google I/O 2019 technical keynote as the first commercial Flutter Web app.

to a working prototype: 48 hours
from kickoff to the I/O keynote: 6 weeks
platforms from one code base: 6

KENKEN · 4 × 4 · easy The 2019 puzzle, solved 00:00

KEN-gratulations. Solved in 00:00

01The ask

Get a Flash puzzle onto every screen solvers use.

Puzzles are no side feature at The New York Times. At the time of the project, games were one of the company’s strongest engines for subscriber growth and engagement beyond news.

One of those games had a problem. KENKEN, a popular number puzzle, was built in Adobe Flash, a platform at the end of its life. Rebuilding it the conventional way meant a separate code base for every platform NYT’s solvers used, with all the cost and drag that brings.

Google had a parallel need. Flutter for Web was close to its first public technical preview, and the team wanted a real commercial product to prove it on the Google I/O stage.

In their words

“The New York Times Crossword has more than 400,000 stand-alone subscriptions and is a daily ritual for puzzle solvers. Along with the Crossword, we’ve grown our portfolio of digital puzzles that reaches more than two million solvers each month. We were already beginning to explore Flutter as a potential solution to the challenge of quickly developing engaging, high-quality mobile experiences. Now the addition of being able to publish to web makes Flutter an even more appealing option to quickly deploy across all of our user platforms. This update of our old Flash-based KenKen game into a multi-platform playable experience is something we’re excited to bring to our solvers this year.”

Executive Director of Puzzles, The New York Times Eric von Coelln

02The first 48 hours

It started with a phone call and a 48-hour clock.

Google’s Tim Sneath called and asked VGV to build a demo app for The New York Times that would run on mobile, desktop, and web. The team had 48 hours to build a working prototype that proved the idea was feasible, and it did.

KENKEN made a good flagship. It was a puzzle NYT solvers already knew and liked, contained enough to ship fast, and visible enough to matter.

A desktop monitor showing KENKEN in a browser window at nytimes.com, next to a tilted white iPhone playing the same 4 by 4 puzzle

03The build

Six platforms from one code base, and no forks.

The team built KENKEN once in Flutter and shipped it to iOS, Android, macOS, Windows, the web, and mobile web, with no forked platform builds. The design answers to each device. Touch works on mobile, mouse and keyboard on desktop, and the layout scales to every form factor.

A CI/CD pipeline kept builds stable across all six platforms. Firebase Hosting let stakeholders review changes in minutes instead of waiting on app store cycles, which is how six weeks ended in a finished product.

Three phones side by side showing the same KENKEN puzzle, an iPhone in Safari at nytimes.com, an iPhone running the app, and an Android phone running the app — Mobile web in Safari, the iOS app, and the Android app. Same puzzle, same code.

04What changed

The keynote turned out to be the opening act.

Google I/O 2019

The first commercial Flutter Web app.

KENKEN debuted in the technical keynote on May 7, 2019, roughly six weeks after kickoff, in front of a global developer audience.
Six platforms

One code base wherever solvers play.

iOS, Android, macOS, Windows, web, and mobile web all shipped from the same Flutter code.
Mid-2020

Flutter moved into NYT’s main games app.

After the KENKEN pilot, The New York Times added Flutter to its primary games app, the platform at the center of its games strategy and the daily habit of an audience measured in the millions.

05If you’re next

What we’d tell a team in The New York Times’ seat.

01
Pick a flagship that is small enough to ship fast and visible enough to matter. One puzzle proved Flutter before it went anywhere near the main games app.
02
Build the prototype before the plan. Forty-eight hours of working code settled whether the idea was feasible.
03
Put review builds where stakeholders already are. Hosted web builds show a change in minutes, with no app store cycle in the way.
04
When a platform reaches end of life, rebuild once. One Flutter code base replaced a Flash game on six targets.

Roll credits.

Who did what, and with which tools.

Client: The New York Times, with Google’s Flutter team
Our part: PrototypeApplication developmentResponsive designCI/CD
Platforms: iOS, Android, macOS, Windows, web, and mobile web
Built with: FlutterFirebase Hosting
Timeline: 48 hours to a prototypeAbout six weeks to Google I/ODebuted May 7, 2019