Skip to content

msWebUiReact.md

Latest commit

 

History

History
1245 lines (912 loc) · 24.7 KB

msWebUiReact.md

File metadata and controls

1245 lines (912 loc) · 24.7 KB
Raw
theme @xebia/slidev-theme-xebia
transition fade
addons
slidev-component-progress
@xebia/slidev-addon-components-common
slidev-addon-qrcode
download false
browserExporter true
record false
editor true
overviewSnapshots false
glowEnabled true
layout cover
background /msWebUiReact-cover.png
description Exploring Microsoft's web UI technology choices and why React is the strategic choice for Windows developers modernizing applications
hideInToc true
publicDeckPath msWebUiReact

Microsoft's Web UI Technology

title: Speaker layout: intro src: special-slides/speaker.md

src: /special-slides/msWebUiReact/timeline.md

layout: image-right title: Agenda background: /spaceships-right.jpg hideInToc: true

Agenda

layout: chapter-dark background: /satelite-large.jpg

Closer look at Microsoft UI History

layout: image-right background: /msWebUiReact-desktop-kings.jpg backgroundSize: contain hideInToc: true

The Desktop Kings

Windows Forms (2002)

  • Drag & drop designer
  • Event-driven model
  • RAD development
  • Legacy but still used
  • .NET Framework/Core

WPF (2006)

  • XAML-based UI
  • Data binding magic
  • MVVM pattern
  • DirectX acceleration
  • Still actively maintained

layout: image-right background: /msWebUiReact-mobile-push.jpg hideInToc: true

The Web Attempts

Silverlight (2007-2021)

  • Browser plugin
  • WPF for the web
  • Used by Netflix
  • Discontinued ⚰️
  • HTML5 won

ASP.NET Web Forms

  • Desktop-like web dev
  • ViewState complexity
  • Server-centric
  • Legacy now
  • Replaced by MVC/Razor

layout: image-right background: /msWebUiReact-mobile-push.jpg hideInToc: true

The Mobile Push

UWP (2015)

  • Universal Windows Platform
  • Write once, run on Win10/11, Xbox, HoloLens
  • Windows Store apps
  • XAML-based
  • Transitioning to WinUI 3

Xamarin.Forms (2014-2024)

  • True cross-platform mobile
  • iOS, Android, Windows
  • C# + XAML
  • Sunset May 2024
  • Evolved into .NET MAUI

layout: image-right background: /msWebUiReact-winui3.jpg backgroundSize: contain hideInToc: true

WinUI 3: Windows Native

  • Launched: 2021
  • Platform: Windows 10/11
  • Language: C#, C++
  • Architecture: MVVM
  • Rendering: DirectX 12
  • Design: Fluent Design

Use Cases

  • Modern Windows apps
  • High-performance desktop
  • Native Windows 11 experiences
  • Gaming launchers
  • Enterprise tools

layout: image-right background: /msWebUiReact-winui3.jpg backgroundSize: contain hideInToc: true

WinUI 3: Developer View

Strengths

  • Native performance
  • Hardware acceleration
  • Fluent Design built-in
  • Familiar to WPF devs
  • Strong VS tooling

Challenges

  • Windows-only
  • Steeper learning curve
  • XAML complexity
  • Smaller community
  • Desktop paradigm only

layout: image-right background: /msWebUiReact-maui.jpg backgroundSize: contain

.NET MAUI: True Cross-Platform

  • Launched: 2022
  • Platform: Windows, macOS, iOS, Android, Tizen
  • Language: C# + XAML
  • Architecture: MVVM, Handlers
  • One codebase: 90%+ sharing

Use Cases

  • Mobile-first apps
  • Desktop + mobile
  • Enterprise internal tools
  • Cross-platform utilities
  • Hybrid with Blazor

layout: image-right background: /msWebUiReact-maui.jpg backgroundSize: contain hideInToc: true

.NET MAUI: Developer View

Strengths

  • Truly cross-platform
  • Native controls
  • Blazor Hybrid support
  • Familiar XAML
  • Single project structure

Challenges

  • Mobile paradigms required
  • Need macOS for iOS builds
  • Young ecosystem
  • Performance tuning needed
  • Not for web browsers

layout: image-right title: Blazor - C# for the Web background: /msWebUiReact-blazor.jpg backgroundSize: contain

Blazor - C# for the Web

  • Launched: 2018-2020
  • Platform: Web browsers
  • Language: C# + Razor
  • Models: Server, WebAssembly, Hybrid
  • Paradigm: Component-based

Use Cases

  • Full-stack web apps
  • SPAs
  • Progressive Web Apps
  • Admin dashboards
  • Hybrid desktop/mobile (via MAUI)

layout: image-right title: Blazor - Developer View background: /msWebUiReact-blazor.jpg backgroundSize: contain hideInToc: true

Blazor - Developer View

Strengths

  • C# in the browser
  • No JavaScript required
  • Full .NET ecosystem
  • Strong typing
  • Familiar to C# devs
  • Multiple hosting models

Challenges

  • Larger initial payload (WASM)
  • Web concepts still needed
  • Smaller community vs React
  • CSS still required
  • Limited component libraries

layout: chapter-dark background: /msWebUiReact-cover.png

Modern Microsoft UI

Where are we and where to go from here?

layout: image-right background: /msWebUiReact-crossroads.jpg backgroundSize: contain hideInToc: true

The Crossroads

I tell you...


  • SharePoint → is React
  • Power Platform → is React
  • Teams → is React
  • Outlook (new) → is React
  • Office Add-ins → is React

The Question

If Microsoft bets on React...

Should you?

layout: chapter-dark background: /react-steps.png hideInToc: true

Really? React?

DEMO

layout: image-right title: Microsoft Uses React! background: /msWebUiReact-microsoft-react.png hideInToc: true

Microsoft Uses React!

The Evidence

  • SharePoint Framework: React + TypeScript
  • Teams: React rewrite
  • Outlook: React rewrite
  • Power Platform: React controls
  • Fluent UI: React components

The Reasons?

  • Ecosystem size
  • Developer availability
  • Community support
  • Proven at scale
  • Cross-team collaboration
  • Industry standard

layout: default title: Technology Comparison Matrix

Technology Comparison Matrix

Aspect WinUI 3 .NET MAUI Blazor React
Platform Windows only Desktop + Mobile Web + Hybrid Web (+ Native)
Language C#/XAML C#/XAML C#/Razor JavaScript/TypeScript
Paradigm MVVM MVVM Component Component
Community Small Growing Growing Massive
Jobs Limited Limited Growing Abundant
Libraries Moderate Moderate Limited Vast
Browser Support ❌ ❌ ✅ ✅

layout: chapter-dark background: /react-steps.png

From Windows Desktop to React

title: React Component Basics layout: image-right background: /msWebUiReact-demo1.jpg hideInToc: true

React Component Basics 

import React from 'react';

interface ShipProps {
  name: string;
  containers: number;
}

const Ship: React.FC<ShipProps> = 
  ({ name, containers }) => {
    return (
        <div className="ship-card">
        <h2>{name}</h2>
        <p>Containers: {containers}</p>
        </div>
    );
};

Key Concepts: TypeScript props, functional components, JSX syntax

src: /special-slides/msWebUiReact/fluent-ui-integration.md

src: /special-slides/msWebUiReact/react-state-management.md

layout: image-right title: What Transfers Directly background: /msWebUiReact-transfers.jpg hideInToc: true

What Transfers Directly

Programming Concepts

  • Object-oriented thinking
  • Component composition
  • Event handling
  • Async/await patterns
  • Dependency injection
  • Testing practices

With TypeScript

  • Strong typing
  • Interfaces
  • Classes
  • Generics
  • Null safety
  • IDE IntelliSense

layout: two-column

The Paradigm Shifts

::left::

Desktop (XAML) Mindset

  • Two-way data binding
  • Complex state trees
  • Imperative commands
  • Control templates
  • Design-time tools
  • Click-drag designers
  • Stateful components
  • Object oriented programming

::right::

React Mindset

  • One-way data flow
  • Component state
  • Declarative UI
  • Composition > inheritance
  • Code-first design
  • Props down, events up
  • Stateless components
  • Functional programming with components

layout: default title: Concept Mapping XAML → React hideInToc: true

Concept Mapping: XAML → React 

graph LR
    A[UserControl] -->|becomes| B[Function Component]
    C[DependencyProperty] -->|becomes| D[Props]
    E[INotifyPropertyChanged] -->|becomes| F[useState Hook]
    G[DataTemplate] -->|becomes| H[Component Function]
    I[Style/ResourceDictionary] -->|becomes| J[CSS/Styled Components]
    K[Command] -->|becomes| L[Event Handler]
    M[ObservableCollection] -->|becomes| N[Array State]
    
    style B fill:#0B7A9E,stroke:#333,color:#fff
    style D fill:#0B7A9E,stroke:#333,color:#fff
    style F fill:#0B7A9E,stroke:#333,color:#fff
    style H fill:#0B7A9E,stroke:#333,color:#fff
    style J fill:#0B7A9E,stroke:#333,color:#fff
    style L fill:#0B7A9E,stroke:#333,color:#fff
    style N fill:#0B7A9E,stroke:#333,color:#fff
Loading

layout: image-right title: The CSS Challenge background: /msWebUiReact-css-challenge.png backgroundSize: 120% hideInToc: true

The CSS Challenge

The Problem

  • Different mental model
  • Browser quirks
  • Layout complexity
  • Responsive design
  • Specificity rules
  • hundreds of ways to style

The Solutions

  • Fluent UI components
  • Material-UI (MUI)
  • CSS-in-JS libraries
  • Tailwind CSS
  • Component libraries
  • Let designers handle it!

layout: two-column hideInToc: true

Component Libraries Comparison

::left::

Fluent UI (Microsoft)

  • Microsoft's design language
  • Office 365 look & feel
  • Enterprise-ready

Both

  • React, Web Components
  • TypeScript-first
  • Active development

::right::

Material-UI (MUI)

  • Google's Material Design
  • Larger community
  • More components
  • Extensive docs
  • Free + Pro versions
  • Industry standard
  • Layout Components

layout: two-column hideInToc: true

Project Structure Comparison

::left::

WPF/WinUI Project

📁 MyApp/
  ├── 📁 Views/
  │   ├── 📄 MainWindow.xaml
  │   └── 📁 UserControls/
  ├── 📁 ViewModels/
  ├── 📁 Models/
  ├── 📁 Services/
  └── 📄 App.xaml

::right::

React Project

📁 my-app/
  ├── 📁 src/
  │   ├── 📁 components/
  │   │   ├── 📄 Ship.tsx
  │   │   └── 📄 ShipList.tsx
  │   ├── 📁 hooks/
  │   ├── 📁 services/
  │   └── 📄 App.tsx
  └── 📄 package.json

layout: image-right title: Tooling & Ecosystem background: /msWebUiReact-tooling.jpg backgroundSize: contain

Tooling & Ecosystem

Development Tools

  • VS Code (not Visual Studio!)
  • React DevTools
  • npm/yarn package managers
  • Vite/Create React App
  • ESLint/Prettier

Key Libraries

  • React Router (navigation)
  • NextJS (SSR/SSG)
  • Fetch (HTTP)
  • React Query (data fetching)
  • Formik/React Hook Form
  • Jest/React Testing Library
  • Storybook (component dev)

layout: two-column background: /error-failed.png backgroundSize: contain

Common Pitfalls & Solutions

::left::

Common Mistakes

  • Trying to use two-way binding
  • Over-engineering state
  • Fighting CSS instead of using libraries
  • Not using TypeScript
  • Ignoring functional patterns
  • Over-componentizing

::right::

Best Practices

  • Embrace one-way data flow
  • Keep state minimal
  • Use component libraries
  • TypeScript from day 1
  • Think in components
  • Composition over complexity

layout: chapter-dark background: /bulb.jpeg

Practical Guidance & Modernization

From Windows Developer to React Developer

layout: two-column hideInToc: true

Migration Strategies

::left::

Big Bang Rewrite

  • ❌ High risk
  • ❌ Long timeline
  • ❌ No incremental value
  • ✅ Clean architecture
  • Rarely recommended

::right::

Incremental Approach

  • ✅ Lower risk
  • ✅ Continuous delivery
  • ✅ Learn as you go
  • ✅ Parallel systems
  • Recommended path

layout: image-right title: Hybrid Approaches background: /msWebUiReact-cover.png hideInToc: true

Hybrid Approaches

WebView in Desktop

  • Embed React in WPF/WinForms
  • WebView2 control
  • Gradual transition
  • Share authentication
  • Good for prototyping

Blazor Hybrid

  • Keep C# skills
  • Gradual web learning
  • MAUI + Blazor
  • Desktop + Web
  • Bridge solution

layout: two-column hideInToc: true

::left::

Technology Selection

Choose WinUI 3 if:

  • Windows-only forever
  • Need native performance
  • Desktop paradigm fits
  • Existing WPF investment

Choose .NET MAUI if:

  • Need mobile + desktop
  • Prefer C#/XAML
  • Internal enterprise apps
  • Can avoid web browsers

::right::

Choose Blazor if:

  • Want to stay in C#
  • Learning web gradually
  • Small team, one language
  • Accept smaller ecosystem

Choose React if:

  • Web-first application
  • Need largest ecosystem
  • Want abundant hiring pool
  • Following Microsoft's lead

layout: two-column hideInToc: true

Success Metrics

::left::

Technical Metrics

  • Developer velocity
  • Bug rates
  • Performance benchmarks
  • Bundle size
  • Load times
  • Code maintainability

::right::

Business Metrics

  • Time to market
  • Hiring success
  • Team satisfaction
  • Cost per feature
  • Browser compatibility
  • User adoption

layout: image-right background: /msWebUiReact-summary.jpg

Takeaways

Microsoft's Journey

  • 30+ years of UI evolution
  • From desktop-only to web-first
  • Microsoft itself uses React
  • Blazor is great, but niche
  • Ecosystem matters

For Windows Developers

  • Many skills transfer
  • TypeScript feels like C#
  • Component libraries save you
  • CSS avoidable with FluentUI / MUI
  • React is strategic choice

layout: image-right title: The Strategic Answer background: /msWebUiReact-strategic-answer.jpg hideInToc: true

The Strategic Answer

"Is It React?"

For Microsoft: Yes

  • SharePoint
  • Teams
  • Outlook
  • Power Platform
  • Office 365

For You?

Probably Yes

  • If building for web
  • If modernizing legacy
  • If hiring matters
  • If ecosystem matters
  • If following best practices

src: /special-slides/questions.md

src: special-slides/thank-you.md

layout: end hideInToc: true

Nov 2025


End of presentation