.NET MAUI di 2026: Panduan Pengembangan Cross-Platform dan Pertanyaan Interview

.NET MAUI (Multi-platform App UI) telah berkembang menjadi framework cross-platform yang siap produksi dengan hadirnya .NET 10. Sebagai rilis Long-Term Support yang didukung hingga November 2028, .NET MAUI 10 hadir sebagai workload dan paket NuGet, menghadirkan peningkatan kualitas, performa, serta API baru seperti peningkatan HybridWebView dan SafeAreaEdges. Panduan ini membahas cara membangun aplikasi cross-platform, arsitektur di balik MAUI, serta pertanyaan interview yang sering diajukan recruiter di tahun 2026.

Menyiapkan Proyek .NET MAUI 10 dari Awal

Cara tercepat untuk memiliki aplikasi MAUI yang berjalan dimulai dengan .NET CLI. .NET 10 memperkenalkan template proyek terbaru yang menyertakan service defaults .NET Aspire, menghubungkan telemetri dan service discovery secara otomatis.

# Install workload MAUI (jika belum terpasang)
dotnet workload install maui

# Buat aplikasi MAUI baru
dotnet new maui -n CrossPlatformDemo
cd CrossPlatformDemo

# Jalankan di emulator Android
dotnet build -t:Run -f net10.0-android

Struktur single-project mengkonsolidasikan kode platform-specific di bawah folder Platforms/ sambil berbagi sisanya. File MauiProgram.cs berfungsi sebagai composition root — tempat pendaftaran service, font, dan handler.

using Microsoft.Extensions.Logging;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // Mendaftarkan service untuk dependency injection
        builder.Services.AddSingleton<IApiService, ApiService>();
        builder.Services.AddTransient<MainViewModel>();

#if DEBUG
        builder.Logging.AddDebug();
#endif

        return builder.Build();
    }
}

Dependency injection di MAUI mengikuti pola yang sama dengan ASP.NET Core. Service Singleton bertahan selama masa hidup aplikasi, service Transient dibuat per permintaan, dan service Scoped — meskipun tersedia — memerlukan kehati-hatian karena MAUI tidak memiliki konsep scope bawaan seperti HTTP request.

Handler: Arsitektur di Balik Rendering Cross-Platform

MAUI menggantikan renderer Xamarin.Forms dengan arsitektur handler. Handler memetakan setiap kontrol cross-platform ke padanan native-nya melalui lapisan abstraksi yang tipis. Perbedaan utama: handler bersifat stateless dan terpisah dari virtual view, membuatnya lebih cepat dan lebih mudah dikustomisasi.

using Microsoft.Maui.Handlers;

public class CustomEntryHandler : EntryHandler
{
    protected override void ConnectHandler(MauiAppCompatEditText platformView)
    {
        base.ConnectHandler(platformView);
        // Menghapus garis bawah default di Android
        platformView.SetBackgroundColor(Android.Graphics.Color.Transparent);
    }
}

// Daftarkan di MauiProgram.cs
builder.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler<Entry, CustomEntryHandler>();
});

Di .NET 10, kontrol Entry dan Editor Android beralih dari AppCompatEditText ke MauiAppCompatEditText, menambahkan dukungan native untuk event SelectionChanged. Handler CollectionView dan CarouselView yang ditingkatkan di .NET 9 kini menjadi default di iOS dan Mac Catalyst, menyelesaikan masalah stabilitas yang telah lama ada.

MVVM dengan CommunityToolkit.Mvvm: Menghilangkan Boilerplate

Source generator CommunityToolkit.Mvvm mengeliminasi sekitar 80% ceremony MVVM. Tidak perlu implementasi INotifyPropertyChanged manual, tidak perlu command wrapper — atribut menggerakkan code generation.

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public partial class MainViewModel : ObservableObject
{
    private readonly IApiService _apiService;

    public MainViewModel(IApiService apiService)
    {
        _apiService = apiService;
    }

    // Source generator membuat property 'Title' dengan change notification
    [ObservableProperty]
    private string _title = string.Empty;

    // Source generator membuat command async dengan dukungan cancellation
    [RelayCommand]
    private async Task LoadDataAsync(CancellationToken ct)
    {
        var data = await _apiService.FetchAsync(ct);
        Title = data.Title;
    }
}

XAML melakukan binding langsung ke property dan command yang dihasilkan:

<!-- MainPage.xaml -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:vm="clr-namespace:CrossPlatformDemo.ViewModels"
             x:DataType="vm:MainViewModel">
    <VerticalStackLayout Padding="20" Spacing="16">
        <Label Text="{Binding Title}"
               FontSize="24"
               HorizontalOptions="Center" />
        <Button Text="Load Data"
                Command="{Binding LoadDataCommand}"
                IsEnabled="{Binding IsLoading, Converter={StaticResource InverseBoolConverter}}" />
        <ActivityIndicator IsRunning="{Binding IsLoading}"
                           IsVisible="{Binding IsLoading}" />
    </VerticalStackLayout>
</ContentPage>

Atribut x:DataType mengaktifkan compiled bindings, yang lebih cepat daripada binding berbasis refleksi dan menghasilkan error saat compile-time ketika binding path salah.

HybridWebView di .NET 10: Menjembatani Native dan Web

HybridWebView memungkinkan penyematan konten web di dalam aplikasi MAUI sambil mempertahankan komunikasi dua arah antara C# dan JavaScript. .NET 10 menambahkan tiga kemampuan: pemanggilan JavaScript fire-and-forget, event inisialisasi untuk konfigurasi platform-specific, dan intersepsi web request.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        // Event inisialisasi untuk konfigurasi platform-specific
        hybridWebView.WebViewInitialized += (sender, args) =>
        {
            // Akses native platform view setelah inisialisasi
            System.Diagnostics.Debug.WriteLine("WebView ready");
        };
    }

    // Memanggil JavaScript dari C#
    private async void OnCallJsClicked(object sender, EventArgs e)
    {
        var result = await hybridWebView.InvokeJavaScriptAsync<string>(
            "getFormData",  // Nama fungsi JS
            HybridSampleContext.Default.String  // Konteks serialisasi JSON
        );
        await DisplayAlert("Result", result, "OK");
    }

    // Fire-and-forget: tidak memerlukan tipe return (.NET 10)
    private async void OnResetClicked(object sender, EventArgs e)
    {
        await hybridWebView.InvokeJavaScriptAsync("resetForm");
    }
}

JavaScript yang bersesuaian menerima panggilan dan dapat mengirim pesan kembali ke C#:

function getFormData() {
    return JSON.stringify({
        name: document.getElementById('name').value,
        email: document.getElementById('email').value
    });
}

function resetForm() {
    document.getElementById('name').value = '';
    document.getElementById('email').value = '';
}

Exception JavaScript yang terjadi selama InvokeJavaScriptAsync kini secara otomatis diteruskan ke .NET sebagai exception, menghilangkan kegagalan yang tidak terdeteksi.

SafeAreaEdges: Layout Pixel-Perfect di Setiap Perangkat

.NET MAUI 10 memperkenalkan property SafeAreaEdges pada Layout, ContentView, ContentPage, Border, dan ScrollView. Enum baru (None, SoftInput, Container, Default, All) menggantikan Page.UseSafeArea lawas yang spesifik iOS dengan pendekatan cross-platform.

<!-- Kontrol safe area granular per bagian -->
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             SafeAreaEdges="All">
    <Grid RowDefinitions="Auto,*,Auto">
        <!-- Header menghormati semua safe area -->
        <Border Grid.Row="0" SafeAreaEdges="Container">
            <Label Text="Header" />
        </Border>

        <!-- Konten scroll di bawah safe area -->
        <ScrollView Grid.Row="1" SafeAreaEdges="SoftInput">
            <VerticalStackLayout Padding="16">
                <Entry Placeholder="Ketik di sini..." />
            </VerticalStackLayout>
        </ScrollView>

        <!-- Footer menghindari home indicator -->
        <Border Grid.Row="2" SafeAreaEdges="Container">
            <Label Text="Footer" />
        </Border>
    </Grid>
</ContentPage>

SoftInput menyesuaikan konten ketika keyboard on-screen muncul. Container menghindari notch, sensor housing, dan home indicator. Keduanya dapat dikombinasikan per kontrol, memungkinkan header berada di bawah status bar sementara area konten tetap bersih.

Migrasi dari Xamarin.Forms ke .NET MAUI

Xamarin.Forms mencapai akhir dukungan pada Mei 2024. Migrasi ke MAUI melibatkan perubahan struktural yang lebih dari sekadar penggantian namespace. Berikut checklist migrasi berdasarkan pengalaman konversi proyek nyata:

1. Struktur proyek — Konversi dari proyek platform-specific ke model single-project MAUI. Pindahkan kode shared ke root, kode platform ke Platforms/.
2. Namespace — Ganti Xamarin.Forms dengan Microsoft.Maui.Controls dan Xamarin.Essentials dengan Microsoft.Maui.Essentials (kini built-in di MAUI).
3. Renderer ke Handler — Custom renderer harus ditulis ulang sebagai handler. API handler lebih sederhana tetapi logika pemetaannya berbeda.
4. Startup — Ganti inisialisasi App.xaml.cs dengan MauiProgram.cs menggunakan builder pattern.
5. Paket NuGet — Banyak paket era Xamarin memiliki padanan MAUI. Verifikasi kompatibilitas sebelum upgrade.
6. Dependency injection — MAUI menggunakan Microsoft.Extensions.DependencyInjection secara native. Ganti container DI pihak ketiga atau panggilan DependencyService.

.NET Upgrade Assistant mengotomasi sebagian langkah 1-2, tetapi handler (langkah 3) dan penyesuaian business logic memerlukan pekerjaan manual.

Pertanyaan Interview .NET MAUI Teratas untuk 2026

Pertanyaan-pertanyaan ini mencerminkan apa yang ditanyakan tim hiring di tahun 2026, berdasarkan ekosistem .NET 10 saat ini.

Bagaimana arsitektur handler MAUI berbeda dari renderer Xamarin.Forms?

Renderer di Xamarin.Forms memiliki coupling ketat dengan kontrol cross-platform dan native view, menciptakan ketergantungan dua arah. Handler di MAUI adalah mapper stateless: mereka menerima notifikasi perubahan property dan menerapkannya ke native view melalui dictionary mapper. Decoupling ini membuat handler lebih mudah diuji, diperluas, dan digunakan kembali. Dictionary PropertyMapper dan CommandMapper menggantikan pola override OnElementPropertyChanged, membuat kustomisasi eksplisit alih-alih tersembunyi dalam pernyataan switch.

Apa saja jebakan DI lifetime yang spesifik untuk MAUI?

MAUI mendukung lifetime Singleton, Transient, dan Scoped, tetapi Scoped berperilaku berbeda dari ASP.NET Core. Tidak ada batas scope alami (seperti HTTP request). Service Scoped yang didaftarkan di MAUI berperilaku seperti Singleton kecuali scope kustom dibuat secara manual. Kesalahan umum: mendaftarkan ViewModel sebagai Singleton ketika menyimpan state spesifik halaman (data basi saat navigasi), atau mendaftarkan koneksi database sebagai Transient (kehabisan connection pool). Aturan umum: ViewModel bersifat Transient, service bersifat Singleton, dan Scoped dihindari kecuali lifecycle scope dikelola secara eksplisit.

Bagaimana compiled binding berbeda dari binding berbasis refleksi di MAUI?

Binding berbasis refleksi menyelesaikan property path saat runtime menggunakan System.Reflection, yang lambat dan menghasilkan error runtime untuk kesalahan ketik. Compiled binding, yang diaktifkan melalui x:DataType, menyelesaikan binding path saat compile time. Compiler menghasilkan kode akses property langsung, melewati refleksi sepenuhnya. Ini meningkatkan waktu startup, mengurangi alokasi memori, dan menangkap error binding saat build. Di .NET 10, source generator XAML baru lebih mengoptimalkan ini dengan mengkompilasi XAML saat build time alih-alih mem-parsing saat runtime.

Strategi apa yang ada untuk berbagi kode antara aplikasi MAUI dan backend ASP.NET Core?

Pendekatan yang direkomendasikan menggunakan shared class library yang berisi DTO, logika validasi, dan business rules. Baik aplikasi MAUI maupun backend ASP.NET Core mereferensikan library ini. .NET 10 memperkuat pola ini dengan integrasi .NET Aspire untuk MAUI, yang menyediakan service discovery dan telemetri di seluruh proyek mobile dan backend. Shared contract menggunakan source generator System.Text.Json memastikan konsistensi serialisasi. Batasan utama: shared library harus menargetkan net10.0 (bukan TFM platform-specific) agar tetap portable.

Bagaimana HybridWebView berbeda dari BlazorWebView di MAUI?

BlazorWebView menghosting aplikasi Blazor lengkap di dalam aplikasi MAUI. Komponen Razor merender ke WebView yang disematkan, tetapi runtime .NET dieksekusi secara native (bukan melalui WebAssembly). HybridWebView lebih ringan: memuat konten HTML/CSS/JS statis dan menyediakan interop C#-ke-JavaScript tanpa overhead framework Blazor. Pilihan bergantung pada use case. BlazorWebView cocok untuk tim yang memiliki komponen Blazor dan menginginkan code reuse. HybridWebView cocok untuk skenario di mana konten web yang sudah ada (dashboard, peta, editor) memerlukan integrasi native tanpa framework lengkap.

Latih lebih banyak pertanyaan interview .NET di SharpSkill untuk memperkuat konsep-konsep ini dengan latihan interaktif.

Kesimpulan

• .NET MAUI 10 adalah rilis LTS (dukungan November 2028) yang berfokus pada stabilitas dan performa — menjadikannya pilihan yang andal untuk aplikasi cross-platform produksi
• Arsitektur handler menggantikan renderer Xamarin dengan mapper stateless, meningkatkan testability dan kustomisasi melalui PropertyMapper dan CommandMapper
• Source generator CommunityToolkit.Mvvm menghilangkan sebagian besar boilerplate MVVM — atribut [ObservableProperty] dan [RelayCommand] menggantikan implementasi manual INotifyPropertyChanged dan command
• HybridWebView di .NET 10 menambahkan pemanggilan JavaScript fire-and-forget, event inisialisasi, dan intersepsi request untuk integrasi native-web
• SafeAreaEdges menyediakan kontrol granular cross-platform terhadap device cutout, keyboard, dan system bar, menggantikan UseSafeArea lawas khusus iOS
• Migrasi Xamarin.Forms memerlukan penulisan ulang handler dan refactoring startup — .NET Upgrade Assistant menangani perubahan namespace tetapi pekerjaan manual tetap diperlukan untuk custom renderer
• Persiapan interview sebaiknya fokus pada arsitektur handler vs. renderer, jebakan DI lifetime di aplikasi long-running, compiled binding, dan trade-off HybridWebView vs. BlazorWebView