Google Roadmap: Flutter to Integrate with JavaScript, Wasm
Google laid out an ambitious roadmap for its Dart framework, Flutter — including plans to support WebAssembly (Wasm) — at the Flutter Forward conference in Nairobi, Kenya. The internet giant is looking to its developer community to help build out the plan. It also released Dart 3.0 and Flutter 3.7.
Flutter is Google’s open source mobile UI framework. Among the planned upgrades to Flutter are the ability to compile to WebAssembly, improved graphic performance, interoperability between JavaScript and Dart, and the ability to add Flutter components into web applications. Currently it supports Android, iOS, Windows, macOS, Linux, and the web as well — while also enabling embedded platforms to use Flutter.
“We’re really trying to just show the direction and we’re doing that because we want other people to contribute, plus it’s an open source project,” Tim Sneath, director of product and UX for Flutter and Dart, told The New Stack. “We want people to join with us in the journey and almost half of the contributors on Flutter don’t work for Google, they work for other companies or in the community. By setting out our roadmap, it gives them the opportunity to join us on that.”
Flutter has grown to approximately 700,000 published apps on the store, varying from startup uses to big companies like BMW and Toyota, as well as being used internally within Google itself for about 30 different projects (including Classroom and Google Pay), Sneath said.
Google also released Flutter 3.7, a stable release that adds a new rendering engine on iOS, enhanced support for Material 3 and iOS-style widgets, revamped support for internationalization, background processing improvements, and updates to developer tooling.
However, the main focus of the conference and announcements was the path for the next year, Sneath said. Here’s a look at the areas in which Flutter hopes to innovate over the coming year:
Integrating Flutter with the Web, JavaScript, Wasm
“We’re investing in making it easier to integrate Flutter with other code, whether it’s a mobile app that has system APIs that it wants to talk to, or whether you want to take some Flutter code and drop it into a web experience you’ve already written,” Sneath said. “All the work we put in here has been around making it easier for Flutter to talk to other things that might be written out there because not every line of code in the world is a Flutter app.”
This means that Flutter components can now be dropped into a website, and developers can apply CSS transformations (such as a reflection) to the Flutter component, he said.
Flutter also now has better interoperability with JavaScript.
“You can drive the Flutter widget from JavaScript and vice versa,” he said. “You can sort of read out data from flutter from the JavaScript side — so some new opportunities there.”
Google is also working on a new approach to integrating with system APIs, to reduce some custom code requirements when integrating with Android and iOS. For example, if there’s a new Android jetpack library or a new Apple library developers want to integrate with, they can call a new Dart command and it will automatically generate all the bindings to talk directly to those APIs “with very little ceremony or code,” Sneath said.
Then there’s WebAssembly. WebAssembly did not initially support garbage collected languages like Dart, so Google worked with the WebAssembly bodies and Chrome team to enable support for such languages, Sneath said. It’s not yet supported in all browsers, but it can run on Chrome Canary, Google’s browser for developers.
It may be later in the year before it’s fully supported, he added.
“Dart is one of the very, very first to adopt this,” he said. “We’re able to use this so that Flutter apps can now compile to WebAssembly. That means they’ll start faster, they’ll be easier to integrate with other code written in other languages, and we’re excited to see what people do with that.
Finally, Flutter now supports the open source architecture standard, RISC-V.
“There aren’t many physical pieces of hardware yet that are RISC-V based, but we think this is part of the future generation of processes,” Sneath said.
Improved Mobile Graphics Performance, Support for 3D
Historically, cross-platform frameworks have required compromise on visuals, due to the challenges of creating an abstraction layer, Sneath said in a Tuesday blog post.
“Flutter has taken a different approach than most, with its own rendering layer that offers hardware-accelerated graphics and a consistent visual appearance on every device,” he wrote. “Moving forward, we will invest in breakthrough graphics performance that extends Flutter’s existing strength in this area.”
“We’re pushing the boundaries there,” he told TNS. “We’ve spent the last few months reworking our entire graphics rendering pipeline with a project we call Impeller. Impeller is designed to lift the bar for performance and give cast-iron-always guarantees of no-drop frames and really high quality, silky smooth experiences.”
Google shipped early support for Impeller at the conference. This demo video shows the traditional Flutter render engine on the left, next to the new Impeller rendering engine on the right side. Impeller is available with an opt-in flag on Flutter 3.7 for iOS.
Impeller is optimized for Flutter, providing developers with more flexibility and control over the graphics pipeline. Impeller provides a more predictable performance by using precompiled shaders that alleviate dropped frames at runtime caused by shader compilation, Sneath explained in the blog post. It uses primitives in Metal and Vulkan, which are the modern low-level APIs in iOS and Android. It also “makes effective use of concurrency, distributing single-frame workloads across threads,” he added.
“In some cases, Impeller gives us something on the order of six to nine times the performance improvement over our previous graphics engine,” he said. “But beyond just performance or silky smooth sort of quality, it also opens the door to some new kinds of experiences that we think people want to build.”
There’s now support for pixel shaders, which is the ability to write a low-level graphics GPU function that executes on every pixel on the screen, across the web and mobile. It enables things like blur effects and other graphical processing experiences, he added.
Google has also started early work on supporting 3D with Flutter, he added. The conference demoed how to import models created with Blender, as well as how to use hot reload to iterate with Blender in real time and see the results on a running app, he stated.
Image courtesy of Google
“We’re entering the 3D world and now supporting 3D graphics with Flutter. This really [is] like the next generation for us — a whole additional dimension,” he said. “That means you can do things like work with traditional 3D tools like Blender, you can create models, 3D meshes. You can import them into Flutter, and then you can program and use them just like any other piece of code.”
It’s enabled by the Dart code that Flutter is programmed with, he explained. It can run across devices down to the iPhone Six, which was announced in 2014.
“It’s really interesting to see this combination of 2D and 3D graphics, and again, historically those have been different domains, different technologies, different languages,” he said. “Now, we’re bringing it all together, and we’re excited to see what happens when you can combine these things together.”
Improving Developer Experience in Dart, Flutter
Google also released Dart 3 this week, which includes new language features to improve developer experience, Sneath added. Dart 3 completes the journey toward null security, which he said is a key element of writing bug-free code.
“Dart 3 also removes other long-deprecated features to further modernize the language,” Sneath explained. “We have started publishing alpha-quality builds of Dart 3, along with matching Flutter builds, enabling developers to test packages and apps.”
On the Flutter side, Google is offering the first version of its News Toolkit, aimed at regional news publishers who want to offer a mobile app but lack the resources to build one. The white-label solution offers templates to help build mobile apps. Google rolled it out with three African news agencies — including the largest publisher in Morocco and the Standard, the paper of record in Kenya.
Sneath emphasized that not all of the work is done, but it is all doable.
“We’ll show some very early demos here, but this is essentially the gateway to our future direction for us as a team,” he said.
