vanfs
1.0.0
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
import van from "vanjs-core"
const { a , p , div , li , ul } = van . tags
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello =
( ) =>
div (
p ( "Hello" ) ,
ul (
li ( "?️World" ) ,
li ( a ( { href : "https://vanjs.org/" } , "?VanJS" ) ) ,
) ,
)
van . add ( document . body , Hello ( ) )jsfiddleを試してみてください
module HelloApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let a : Tag = tags?a
let p : Tag = tags?p
let div : Tag = tags?div
let ul : Tag = tags?ul
let li : Tag = tags?li
let Hello =
fun _ ->
div [
p [ " Hello " ]
ul [
li [ " ?️World " ]
li [ a [{| href = " https://vanjs.org/ " |}; " ?VanJS " ]]
]
]
add [ document.body ; Hello ()]
|> ignoreデモ
https://codepen.io/kentechgeek/pen/vwnovox
let Greeting : Tag =
fun list ->
let name : string = list [ 0 ]? name
div [ $ " Hello {name}! " ]
add [ document.body ; Greeting [{| name = " Ken " |}]]
|> ignore const Greeting : Component < { name : string } > =
( { name } ) =>
< div > Hello { name } ! </ div > ;
render ( ( ) => < Greeting name = "Ken" /> , document . body ) ; VANFSプロジェクトには、いくつかのタイプスクリプトコードが含まれています。
https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts
JSプロキシを使用した変換を目的とするTSコード：
// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJSこれはvan-apiであり、物事を機能させるためにそれを変更したくありません。
ユーザーは、必要なCSSまたはWebコンポーネントをインストールする必要があります。
VANJSは、特定のインストールサポートを提供していませんBeauseは単なるバニラージです。
一方、 VANFSは以下のように段階的なプロセスを明確にします。
カスタマイズまたはインポートに必要なものはすべて、Web-Importsディレクトリの下にあります。
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;とにかく、VANFSプロジェクト内の必要なコードはすべて、FableとViteを使用して単一のVanillajsバンドルにコンパイルされます。
let bindT = < A , B >
( monadf : ( a : A ) => Timeline < B > ) =>
( timelineA : Timeline < A > ) : Timeline < B > => {
let timelineB = monadf ( timelineA . lastVal ) ;
let newFn = ( a : A ) => {
nextT ( monadf ( a ) . lastVal ) ( timelineB ) ;
return undefined ;
} ;
timelineA . lastFns = timelineA . lastFns . concat ( [ newFn ] ) ;
return timelineB ;
} ;TypeScriptでは、Legacy JavaScriptと比較して、すべての変数、関数、およびパラメーターにタイプシグネチャを追加するには追加のステップが必要です。これはしばしば圧倒的です。
let bindT =
fun monadf timelineA ->
let timelineB = timelineA.lastVal |> monadf
let newFn =
fun a ->
timelineB
|> nextT ( a |> monadf ) .lastVal
|> ignore
timelineA.lastFns <- timelineA.lastFns @ [ newFn ]
timelineBF＃コードは、タイプスクリプトコードよりもはるかにクリーンで読みやすいです。
F＃では、その強力なタイプの推論のおかげで、手動でタイプを追加する必要はほとんどありません。これにより、F＃開発はレガシーJavaScriptコーディングに似ていると感じます。
実際には、それはそれ以上のものです。
プログラマーは、他の場所でコードのバックボーンを形成する基本的なオブジェクトタイプを定義したい場合がありますが、F＃コンパイラが手動型アノテーションの要求を警告する場合、通常、何かが間違っています。
F＃では、コンパイラがタイプを推測できない場合、多くの場合、数学的な矛盾がある可能性があることを示唆しています。
TypeScriptでは、コンパイラがタイプを推測できない場合、多くの場合、その型推論機能の制限を示唆しています。これにより、問題の正確な原因を判断することが難しくなります。
その結果、F＃プログラマーは自然に数学的に一貫した厳格なコードを書くように導かれます。残念ながら、この利点はTypeScriptでめったに起こりません。
F＃は一般に.NETフレームワークで実行されていると認識されていますが、TypeScriptがJavaScriptにコンパイルされると、F＃もJavaScriptにコンパイルされます。
TypeScript-> JavaScript
F＃ - > JavaScript
もっと正確には、
Typescirpt
node.jsで実行されているタイプスクリプトコンパイラ（npx tsc）
ブラウザで実行されているJavaScript
F＃
⬇.NETで実行されているfableコンパイラ（dotnet fable）
ブラウザで実行されているJavaScript
したがって、 vanfsのバックボーンはf話です。
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
.NET SDK
node.jsおよびnpm cliまたは代替（bun / deno / yarnなど）
f＃を使用してvscodeを使用している場合は、vscodeのf＃設定を読み取ります。
Vanfs/Fableプロジェクトは、F＃.NETプロジェクトとNPMプロジェクトのハイブリッドです。
Fable Setup Documentaionを参照してください
git clone https://github.com/ken-okabe/vanfs
cd vanfs
dotnet restore # .NET project setup
dotnet tool restore
npm i # npm project setup body {
font-family : sans-serif;
padding : 1 em ;
background-color : beige;
}デモ
https://codepen.io/kentechgeek/pen/zyxqyxz
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
VANFSは、 Webコンポーネントが提供するカスタムHTMLタグを設計システムで活用できます：Microsoft Fluent、Google Material Designなど。
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; body {
font-family : sans-serif;
padding : 1 em ;
background-color : beige;
}
. custom {
--card-width : 200 px ;
--card-height : 150 px ;
padding : 22 px ;
}Program.fsからWebコンポーネントを使用します module WebComponentsApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let br : Tag = tags?br
// Define the fluent-card and fluent-checkbox tags
let fluentCard : Tag = tags? `` fluent-card ``
let fluentCheckbox : Tag = tags? `` fluent-checkbox ``
let List =
fun _ ->
fluentCard [
{| `` class `` = " custom " |}
// class is a reserved word in F#
// so we use backticks to escape it
fluentCheckbox [ " Did you check this? " ]
br []
fluentCheckbox [{| `` checked `` = true ; disabled = true |}; " Is this disabled? " ]
br []
fluentCheckbox [{| `` checked `` = true |}; " Checked by default? " ]
]
add [ document.body ; List ()]
|> ignore大きな変更が行われると、Fableプロジェクトのクリーニングが必要になることがあります。
dotnet fable clean
dotnet fable watchnpx vite import '@material/web/textfield/filled-text-field.js' ;
import '@material/web/button/text-button.js' ;
import '@material/web/button/outlined-button.js' ; . custom3 {
--card-width : 460 px ;
--card-height : 150 px ;
padding : 20 px ;
}
. row {
align-items : flex-start;
display : flex;
flex-wrap : wrap;
gap : 16 px ;
}
. buttons {
justify-content : flex-end;
padding : 16 px ;
}
md-filled-text-field ,
md-outlined-text-field {
width : 200 px ;
} module MaterialUI
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let div : Tag = tags?div
let form : Tag = tags?form
let fluentCard : Tag = tags? `` fluent-card ``
let mdFilledTextField : Tag = tags? `` md-filled-text-field ``
let mdTextButton : Tag = tags? `` md-text-button ``
let mdOutlinedButton : Tag = tags? `` md-outlined-button ``
let Form =
fun _ ->
fluentCard [
{| `` class `` = " custom3 " |}
form [
div [
{| `` class `` = " row " |}
mdFilledTextField [
{|
label = " First name "
name = " first-name "
required = " "
autocomplete = " given-name "
|}
]
mdFilledTextField [
{|
label = " Last name "
name = " last-name "
required = " "
autocomplete = " family-name "
|}
]
]
div [
{| `` class `` = " row buttons " |}
mdTextButton [
{| `` type `` = " reset " |}
" Reset "
]
mdOutlinedButton [
{| `` type `` = " submit " |}
" Submit "
]
]
]
]
add [ document.body ; Form ()]
|> ignorenpx vite buildデモ
https://codepen.io/kentechgeek/pen/kkylwgn?editors=1111
import '@material/web/icon/icon.js' ;
import '@material/web/iconbutton/icon-button.js' ; https://m3.material.io/styles/icons/overview
export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
vanfsは次のように説明されています
1：1 f＃からvanjsへのバインディング（React/jsxなしの小さなリアクティブUIフレームワーク） + webcomponents + micro frp
または
vanfsは、 vanjsの1対1の直接バインディングのF＃プロジェクトテンプレートです
1：1のバインディングは、UISを作成するための基本的な機能の範囲内で絶対に真実ですが、国家管理の場合はそうではありません。
VANJは、その状態オブジェクトを対応するDOM要素に反応的に結合します。これは、状態オブジェクトが更新されると、対応するDOM要素が自動的に更新されることを意味します。このアプローチは、React、SolidJSなどの宣言的なUIライブラリの間で一般的な機能です。
これは、次の同一構造です。
したがって、これはFRPです。
Functional Reactiveプログラミング（FRP）は、リアクティブプログラミングを実装する手段として、数学的表現、特にバイナリ操作を使用するプログラミングパラダイムです。
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
タイムラインは、基本的にスタンドアロンFRPライブラリであり、 VANJまたはF＃非同期機能に依存することはありません。コードベースは、約30〜40行のコードのコンパクトな純粋な関数実装です。
Timeline<'a>record Timeline < 'a >
val mutable lastVal : 'a
val el : StateElement < 'a >| 分野 | 説明 | van.State |
|---|---|---|
lastVal | タイムラインの最後の値 | State.val |
el | タイムラインの反応性DOM要素 | State |
Timeline<'a>Timeline'a -> Timeline < 'a > let counter = van . state ( 0 ) ;
console . log ( counter . val ) ;
// 0 let counter = Timeline 0
console.log counter.lastVal
// 0スプレッドシートアプリのセルと同様に、 Timeline値の特定のコンテナとして考えてください。
let double = fun a -> a * 2
let timelineA = Timeline 1
let timelineB =
timelineA |> mapT double
console.log timelineB.lastVal
// 2バイナリ操作のこのコードは、単にスプレッドシートアプリの基本的な使用法に対応しています
これは、次の同一構造です。
let double = a => a * 2 ;
let arrayA = [ 1 ] ;
let arrayB =
arrayA . map ( double ) ;
console . log ( arrayB ) ;
// [2] let double =
fun a -> a * 2
let listA = [ 1 ]
let listB =
listA |> List.map double
console.log listB
// [2]アレイ[2]スプレッドシートのセルと値2と同一であることを認識できます。ただし、スプレッドシートとタイムラインは、タイムライン上で値が変化するにつれてdouble関係を維持します。
Timeline<'a>を更新する機能nextT'a -> Timeline < 'a > -> Timeline < 'a > let timelineA ' =
timelineA |> nextT 3または、ほとんどの場合、私たちは別のtimelineA'必要とせず、それを破棄したいので、返された価値を単純にignore 。
let timelineA = Timeline 1
timelineA
|> nextT 3
|> ignore
console.log timelineA.lastVal
// 3 let double = fun a -> a * 2
// ① initialize timelineA
let timelineA = Timeline 1
// confirm the lastVal of timelineA
console.log timelineA.lastVal
// 1
// ② the binary operation
let timelineB =
timelineA |> mapT double
// confirm the lastVal of timelineB
console.log timelineB.lastVal
// 2
//=====================================
// ③ update the lastVal of timelineA
timelineA
|> nextT 3
|> ignore
// update to timelineA will trigger
// a reactive update of timelineB
// confirm the lastVal of timelineA & timelineB
console.log timelineA.lastVal
// 3
console.log timelineB.lastVal
// 6 import van from "vanjs-core"
const { button , div , h2 } = van . tags
const Counter =
( ) => {
const counter = van . state ( 0 )
van . derive ( ( ) =>
console . log ( `Counter: ${ counter . val } ` ) )
return div (
h2 ( "❤️ " , counter ) ,
button (
{
onclick : ( ) => ++ counter . val
} ,
"?"
) ,
button (
{
onclick : ( ) => -- counter . val
} ,
"?"
) ,
)
}
van . add ( document . body , Counter ( ) ) module CounterApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
let div : Tag = tags?div
let h2 : Tag = tags?h2
let icon : Tag = tags? `` md-icon ``
let iconButton : Tag = tags? `` md-icon-button ``
let Counter =
fun _ ->
let counter = Timeline 0 // ① initialize an Timeline
counter // ② the binary operation of the Timeline
|> mapT ( fun value ->
console.log $ " Counter: {value} " )
|> ignore
// ignore the return value of `console.log`
div [
h2 [ " ❤️ " ; counter.el ] // ? `counter.el`
iconButton [ // for Reactive DOM element
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal + 1 )
|}
icon [ " thumb_up " ]
]
iconButton [
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal - 1 )
|}
icon [ " thumb_down " ]
]
]
add [ document.body ; Counter ()]
|> ignoreデモ
https://codepen.io/kentechgeek/pen/goyqnqb?editors=1111
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
現代のソフトウェア開発におけるNULLの重要な重要性を考えると、私はその重要な概念と利点を探るために別の記事を捧げました。
f＃のnullable値タイプ
Nullable値タイプ
Nullable<'T>nullになる可能性のある構造体タイプを表します。これは、効率的な理由でnull値を持つ整数などのこれらの種類のタイプを表すことを選択できるライブラリやコンポーネントと対話する場合に役立ちます。このコンストラクトを裏付ける基礎となるタイプは、system.nullableです。
structタイプのみを表すことができますが、どの制限に問題があります。
f＃でnullableリファレンスタイプを使用する
F＃：system.stringになることができる場合、オプション<'a>をNullableに変換するにはどうすればよいですか？
F＃に参照タイプを含む無効なタイプを書くことができればいいでしょう。
F＃RFC FS -1060 -NULLABLEリファレンスタイプ
let nullable1 =
Null
let nullable2 =
NullableT " hello "
log nullable1
// Null
log nullable2
// T hello
log nullable2.Value
// helloこの仕様は、F＃のネイティブのヌル可能な値タイプに似ていますが、それとは異なり、 NullableT任意の参照タイプを表すこともできます。
F＃Nullnessサポートはすぐに来るかもしれません！
.NETのnullness機能をサポートするために、F＃コンパイラで行われている作業のプレビュー。
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
Nullableタイプを利用することにより、タイムラインと組み合わせた新しいオペレーターを提供できます。
Null値でタイムラインを初期化すると、提供された関数は不明確なままで、保留中の状態で待機します。有効なイベントによってタイムライン値が非Null値に更新されると、関数がトリガーされて実行されます。
Timeline<NullableT<'a>>TimelineNullableT < 'a > -> Timeline < NullableT < 'a >> let timelineNullable = Timeline Null
log timelineNullable.lastVal // use `log` of Timeline
// Nullこのタイムラインは、スプレッドシートアプリの空のセルとして考えてください。
Timelineタイプと関数：
Timeline<'a>
Timeline<NullableT<'a>>
同じエンティティです。
Timeline NullableT<'a>を含む'aを含む」の一般的なタイプを受け入れることができると考えてください。
一方、 Timeline<NullableT<'a>>の場合、パラメーター値がnullableタイプである場合、指定された関数を無視し、パラメーターがNullの場合にNull値を通過するTimeline動作が必要な場合、以下に示すように特定の演算子を使用できます。
mapTN ( NullableT < 'a > -> NullableT < 'b >) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)bindTN ( NullableT < 'a > -> Timeline < NullableT < 'b >>) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)バイナリ演算子の場合： mapTです、
let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Nullバイナリ操作のこのコードは、単にスプレッドシートアプリの基本的な使用法に対応しています。
let timelineA ' =
timelineA |> nextTN ( NullableT 3 )または、ほとんどの場合、私たちは別のtimelineA'必要とせず、それを破棄したいので、返された価値を単純にignore 。
Timeline<'a>のアクション let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null
// ③ update the lastVal of timelineA
timelineA
|> nextTN ( NullableT 3 )
|> ignore
log timelineA.lastVal // use `log` of Timeline
// T 3
// Now, `timelineA` value is updated to non `Null` value
// Accordingly, `timelineB` reactively becomes `double` of it
log timelineB.lastVal
// T 6 module Number
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
let h4 : Tag = tags?h4
let fluentCard : Tag = tags? `` fluent-card ``
let fluentTextField : Tag = tags? `` fluent-text-field ``
let Number =
fun _ ->
let number = Timeline Null
let numberX2 =
number
|> mapTN ( fun n -> NullableT ( n * 2 )) //System.Nullable
fluentCard [
{| `` class `` = " custom1 " |}
h4 [ " Number " ]
fluentTextField [
{|
appearance = " outline "
required = true
`` type `` = " number "
placeholder = " 1 "
oninput =
fun e ->
let value =
if e?target?value = " "
then Null
else NullableT e?target?value
if value = Null // clear the output textField
then numberX2
|> nextTN Null
|> ignore
document.getElementById ( " output-field " )? value
<- " Null " // clear the output textField
else ()
number
|> nextTN value
|> ignore
|}
]
h4 [ " Number × 2 " ]
fluentTextField [
{|
appearance = " outline "
readonly = true
value = numberX2.el
id = " output-field "
|}
]
]
add [ document.body ; Number ()]
|> ignoreデモ
https://codepen.io/kentechgeek/pen/wvznvzj?editors=1111
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
タイムラインのNullableオペレーターは、JavaScriptの約束と同様の基本原則を提供しますが、Promie.thenなどのタスクチェーンを管理することはできません。
タイムラインのヌル可能に基づいて、タスクチェーンが可能なタイムラインタスクを取得できます。
TaskTimeline < NullableT < 'a >> -> 'b -> unit let task =
fun timelineResult previousResult ->
log " -----------task1 started... "
log previousResult
// delay-------------------------------
let f = fun _ ->
log " .......task1 done "
timelineResult
|> nextTN ( NullableT 1 )
|> ignore
setTimeout f 2000taskTTask < 'a , NullableT < 'a0 >> -> Timeline < NullableT < 'a >> -> Timeline < NullableT < 'a >> let timelineStarter =
Timeline ( NullableT 0 )
// tasks start immediately
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
taskConcatまたは(+>) ( Task -> Task ) -> Task let task12 =
task1 +> task2
let task123 =
task1 +> task2 +> task3
let task1234 =
task123 +> task4 module Tasks
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let br : Tag = tags? `` br ``
let fluentCard : Tag = tags? `` fluent-card ``
let linerProgress : Tag = tags? `` md-linear-progress ``
let Tasks =
fun _ ->
let progressInit = false
let progressStart = true
let progressDone = false
let percentInit = 0.0
let percentStart = 0.0
let percentDone = 1.0
let timelineProgress1 = Timeline progressInit
let timelineProgress2 = Timeline progressInit
let timelineProgress3 = Timeline progressInit
let timelinePercent1 = Timeline percentInit
let timelinePercent2 = Timeline percentInit
let timelinePercent3 = Timeline percentInit
let taskStart =
fun timelineProgress timelinePercent ->
timelineProgress
|> nextT progressStart
|> ignore
timelinePercent
|> nextT percentStart
|> ignore
let taskDone =
fun timelineProgress timelinePercent timelineResult ->
timelineProgress
|> nextT progressDone
|> ignore
timelinePercent
|> nextT percentDone
|> ignore
timelineResult
|> nextTN ( NullableT 999 )
|> ignore
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
taskStart timelineProgress1 timelinePercent1
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
taskDone timelineProgress1 timelinePercent1 timelineResult
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
taskStart timelineProgress2 timelinePercent2
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
taskDone timelineProgress2 timelinePercent2 timelineResult
setTimeout f 2500
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
taskStart timelineProgress3 timelinePercent3
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
taskDone timelineProgress3 timelinePercent3 timelineResult
setTimeout f 2500
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +>
task2 +>
task3
timelineStarter
|> taskT task123
|> ignore
(* task123 can be written as below
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore
*)
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN ( NullableT 0 )
|> ignore
setTimeout start 2000
fluentCard [
{| `` class `` = " custom2 " |}
br []
linerProgress [
{| indeterminate = timelineProgress1.el
value = timelinePercent1.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress2.el
value = timelinePercent2.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress3.el
value = timelinePercent3.el |}
]
]
add [ document.body ; Tasks ()]
|> ignoreデモ
https://codepen.io/kentechgeek/pen/jordjvy?editors=1111
module Tasks
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true // some non-null value
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +>
task2 +>
task3
timelineStarter
|> taskT task123
|> ignore
(* task123 can be written as below
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore
*)
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
デモ
https://codepen.io/kentechgeek/pen/baeeyvl?editors=1111
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
taskOrまたは(+|) ( Task -> Task ) -> Task let task12 =
task1 +| task2
let task123 =
task1 +| task2 +| task3
let task1234 =
task123 +| task4 module TaskOr
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskOr
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +| task2 +| task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < string >)
-> log ( " The fastest result from: "
+ previousResult.Value )
timelineStarter
|> taskT task123 // Run all tasks then return the fastest result
|> taskT taskOutput // log the fastest result
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
デモ
https://codepen.io/kentechgeek/pen/zyxqgwq?editors=1111
| コンテンツ |
|---|
| ？ vanfs Webテクノロジーの汎用性 クロスプラットフォームアプリ開発用 |
| はじめる |
| Webコンポーネント |
| ⚡️機能的リアクティブプログラミング（FRP） 機能プログラミングとは何ですか？ 機能プログラミングコードはどのように駆動しますか？ |
| timelineタイムライン |
| ⏱️ヌル可能なタイプ null、nullable、およびoptionタイプとは何ですか？ |
| timeline nullable |
| timeラインタスク |
| time-タイムラインタスクコンカット |
| timeラインタスクまたは |
| timeラインタスクと |
| 議論 |
taskAndまたは(+&) ( Task -> Task ) -> Task let task12 =
task1 +& task2
let task123 =
task1 +& task2 +& task3
let task1234 =
task123 +& task4 module TaskAnd
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskAnd
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +& task2 +& task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < ListResult < 'a >>)
-> log previousResult.Value.results
timelineStarter
|> taskT task123 // Run all tasks then return the list of results
|> taskT taskOutput // log the list of results
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
デモ
https://codepen.io/kentechgeek/pen/pobmjzq?editors=1111
