News

Xamarin.Forms Gets XAML Hot Reload

• By David Ramel
• 07/12/2019

"Once we are used to hot reload in RN and Flutter, it is difficult to code without that!" commented a Visual Studio Magazine reader this week on the article, "Xamarin.Forms 4.0 Deep Dive: Microsoft Details New Features."

Well, that difficulty cited by a reader with the handle "sreekumar menon" may be eased a bit with yesterday's announcement of XAML Hot Reload for Xamarin.Forms.

The announcement made during the Xamarin Developer Summit says changes made to XAML-based UI will be reflected live upon a file save, without requiring a new build-and-deploy cycle, bringing the cross-platform mobile tooling more up to par with the aforementioned React Native and Flutter.

"You don't need to do anything special to use Hot Reload; there are no extra packages or scaffolding code," said Pierce Boggan, senior program manager, Mobile Developer Tools, in a July 11 blog post. "Build and deploy your app as you normally would in Visual Studio or Visual Studio for Mac to an iOS or Android emulator, simulator, or physical device."

"Because XAML Hot Reload for Xamarin.Forms uses the debugger and not a network connection, it works reliability in complex enterprise networks or no-connectivity environments," Boggan continued. "Edit your XAML and hit save. Upon reload, your navigation state will be maintained. If you use the MVVM pattern, UI state bound to your view model will remain intact across reloads."

The announcement was met with general approval in reader comments, though one developer expressed disappointment that the feature was relegated to XAML only, instead of providing "a full code hot reload solution."

To that comment, Boggan replied: "XAML is just the beginning. We'd love to talk to you more about your scenarios and why C#/F# code reloading is important to you," providing a couple dev team e-mail addresses.

While that "just the beginning" comment portends more hot reload functionality in the pipeline beyond XAML, Boggan specifically mentioned the following roadmap items for XAML Hot Reload:

• Incremental reloading: Only reload the controls or properties that have been changed
• Simultaneous reloads: Reload XAML for multiple platforms being debugged at the same time
• Improved status monitoring: An improved UX for displaying "rude" edits, or edits that contain invalid changes for reload
• CSS: Styling updates to cascading style sheets will be applied at reload

Another reader comment asked about the difference between XAML Previewer for Xamarin.Forms and Xamarin Live Player. Microsoft documentation states: "The XAML Previewer shows you how your Xamarin.Forms XAML page will look on iOS and Android. When you make changes to your XAML, you'll see them previewed immediately alongside your code. The XAML Previewer is available in Visual Studio and Visual Studio for Mac."

Boggan noted that the Xamarin Live Player preview has ended in favor of XAML Hot Reload and then explained the difference between XAML Previewer and XAML Hot Reload:

Using the XAML Previewer, you can iterate on your Xamarin.Forms XAML UI without having to build, deploy, and debug your application. We hear folks like using this for prototyping screens. Because your app is not built and running, you don't use your real data or don't have navigation context.

Using XAML Hot Reload for Xamarin.Forms, you iterate on your UI in a running application. Instead of having to stop debugging, make a code change, and redeploy, you now can make edits to your XAML, hit save, and the edits will [be] applied to your running application.

XAML Hot Reload is demonstrated visually in a couple of YouTube videos, here and here.

While XAML Hot Reload is expected later this year, developers can sign up to participate in the preview phase of the new functionality.