Zenn
Open7

Bolero使ってみた

sossos

Bolero使ってみた
https://fsbolero.io

テンプレートをベースにカスタマイズしてみる

使ってみた感想

  • F#で処理を書けるのはたのしい
  • 現時点で素のBlazorよりいいかどうかはまだわからない。
    • イベント周りの取り扱いでjsを書かずに済む範囲が多ければ有望かもしれない
    • Blazorスキルが低いせいかもしれないが、if で表示を切り替えるようなものが多いようなページを書いていたことがあったので、そういう場面では丸ごとDOMとして差し替えられるBoleroのほうがきれいにかける気はしている
sossos

Plain Web Assembly のテンプレートは最初動かなかった。

.fsprj のItemGroup、PackageReference のバージョンが、6.0.* になっているところを 6.0.0 にしたら動いた。
Hosted Web Assembly ではそのままで動いたので、理由はよくわからない

<?xml version="1.0" encoding="utf-8"?>
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Bolero" Version="0.*" />
    <PackageReference Include="Bolero.Build" Version="0.*" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" />
    <PackageReference Include="System.Net.Http.Json" Version="6.0.0" />
  </ItemGroup>
</Project>

GitHub Issue

https://github.com/fsbolero/Bolero/issues/248

sossos

TemplateではMain.fs がメインだが、Sandbox.fs をつくってそっちを使うようにした。

index.html で、 <div id="main">Loading...</div>　を <div id="sandbox">Loading...</div> に変更

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SET Web Toolkit</title>
    <base href="/">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <link rel="stylesheet" href="css/index.css">
  </head>
  <body>
    <nav class="navbar is-dark" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item has-text-weight-bold is-size-5" href="https://fsbolero.io">
          <img style="height:40px" src="https://github.com/fsbolero/website/raw/master/src/Website/img/wasm-fsharp.png" />
          &nbsp;
          SET Web Toolkit
        </a>
      </div>
    </nav>
    <div id="sandbox">Loading...</div>
    <script src="_framework/blazor.webassembly.js"></script>
  </body>
</html>

Startup.fs Main.MyApp -> Sandbox.MyApp に変更

        builder.RootComponents.Add<Sandbox.MyApp>("#sandbox")
sossos

本当はもうちょっと分離したいが、Sandbox.fs内にすべてのコードを書くような感じにしかできなかった。

type Sandbox = Template<"wwwroot/sandbox.html">

でテンプレートが読み込める。TypeProviderが効いているらしく、これをやると

    Sandbox.Home().Elt()

などのインテリセンスが効く。

html の対応箇所は以下。<template id="Home"> と対応

        <template id="Home">
          <section class="section">
              <div class="block">
                <h1>Project Summary</h1>
              </div>
              <textarea class="textarea is-primary" rows="10"></textarea>
          </section>
        </template>
sossos

input DataBind

sandbox.html

<input class="input" type="number" bind="${PropertyValue}">

Sandbox.fs

    Sandbox.Property().Key(key)
           // getter, setter?
           .PropertyValue(value, fun n -> dispatch (SetProperty (key, n)))
           .Elt()