bitplatform Toolkit

bitplatform is a comprehensive toolkit for Blazor development designed to provide high performance and a rich component library. The platform consists of several specialized tools:

• bit BlazorUI components: A UI toolkit featuring over 80 components with support for both Dark and Light themes, optimized for a compact size (under 400 KB).
• Bswup: A tool that implements Progressive Web App (PWA) capabilities using the .NET 8 structure, utilizing pre-rendering techniques to provide an experience similar to GitHub or Reddit.
• Butil: A library that provides essential Browser APIs directly in C#, allowing developers to interact with browser functionality without writing JavaScript.
• Besql: A solution for building offline web applications by incorporating Entity Framework Core and SQLite directly within the browser, enabling data saving and later synchronization.
• Bit Boilerplate Project Template: A comprehensive template that integrates all the above tools along with ASP.NET Core Identity, multilingual support, and the ability to develop unified Web, Android, iOS, Windows, and macOS applications from a single codebase.

bit Boilerplate includes a wide range of production-ready features:

Web & Native Capabilities

• Modern Web Apps: Supports SEO-friendly Blazor WebAssembly with pre-rendering, Admin Panels with real-time dashboards, and offline-capable PWAs.
• Cross-Platform Native Apps: Uses .NET MAUI Blazor Hybrid to generate Android, iOS, Windows, and macOS applications from a single codebase.

Data & Infrastructure

• Client-Side Offline Database: Uses Entity Framework Core + SQLite on the client side with cross-platform data synchronization.
• Advanced Caching: Supports In-memory, Redis, Hybrid (memory + Redis), Output, CDN Edge (Cloudflare), and Browser/Client device caching.
• Storage: Flexible file storage options including Local, S3, and Azure Blob Storage.
• Database Support: Entity Framework Core with support for SQL Server, PostgreSQL, MySQL, and SQLite.

Security, AI, & Observability

• Identity & Security: Includes Passwordless authentication, Two-factor authentication (2FA), and Single Sign-On (SSO).
• GenAI & RAG: Built-in AI Chatbot integration and vectorized database search using embeddings.
• Observability: Integrated with OpenTelemetry (tracing/metrics), Sentry (error tracking), and Azure Application Insights.
• Localization: Multi-language support with built-in RTL (Right-to-Left) and LTR (Left-to-Right) layout capabilities.

Modern Tech Stack

• Core: ASP.NET Core 10, C# 14, and .NET Aspire.
• CI/CD: Pre-configured pipelines for GitHub Actions and Azure DevOps.

bit Brouter provides several mechanisms to control navigation flow and component lifecycles:

Navigation Guards

• Async Guard: Use Guard to allow/cancel/redirect navigation via BrouterNavigationContext.
• LeaveGuard (Per-route): Runs when a route is being deactivated (e.g., for "unsaved changes" prompts). It runs from leaf to root.
• Component-level Navigation Lock: Implement OnDeactivating or OnRenavigating on the routed component to veto navigation. This is useful for handling parameter changes on the same route.
• External-navigation confirmation: Use o.ConfirmExternalNavigation or brouter.SetConfirmExternalNavigationAsync(...) to trigger the browser's beforeunload dialog.

Route Lifecycle Hooks

Components can implement IBrouterRoute or derive from BrouterRouteBase to receive these callbacks:

• OnActivated
• OnDeactivated
• OnRenavigated (includes OnRenavigating for locking navigation)

Motion values are a reactive value graph that can be bound to elements. They allow for high-performance updates that flush to the DOM every frame without triggering Blazor re-renders.

• Creation: Use Bm.Value(initialValue) to create a reactive value.
• Transformations: Use .Transform() to map ranges or derive new values (e.g., mapping [0, 200] to [0, 360]).
• Binding to Elements:
  • Use Values for standard properties: <Bmotion Values='new() { ["x"] = _x }'>.
  • Use StringValues for CSS properties requiring strings: <Bmotion StringValues='new() { ["filter"] = _filter }'>.
• Templates: Use Bm.Template to compose motion values into CSS strings (e.g., blur(10px)).

// Create and manipulate values
var x = Bm.Value(0.0);
x.SetSync(100);
var angle = x.Transform([0, 200], [0, 360]);

// Create a CSS template
var blur = Bm.Value(0.0);
var filter = Bm.Template(() => $"blur({blur.Value}px)", blur);

<Bmotion Values='new() { ["x"] = _x, ["rotate"] = _angle }'>
    <div />
</Bmotion>