vanfs下載vanfs源代碼下載

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

範夫

？範夫

 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

VANFS是Vanjs一對一直接綁定的F＃項目模板

f＃中的vanfs代碼

 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 ) ;

為什麼Vanjs基於Vanilla JavaScript

VANFS項目包括一些打字稿代碼。

1。範夫的內部機制

https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts

TS代碼是為了使用JS代理轉換的目的：

 // unary function ([a,b,c,...]) in F#  
// -> n-ary function (a,b,c,...) in VanJS

這是在van-api目錄下，這是必不可少的，我們不想將其修改以保持工作的工作。

2。對於樣式和Web組件

用戶必須安裝任何必需的CSS或Web組件。

Vanjs不提供特定的安裝支持Beause這只是Vanillajs。

另一方面， vanfs闡明了以下分步過程：

入門

CSS

我們需要自定義或導入的所有內容都位於Web-Imports目錄下。

 import {
    provideFluentDesignSystem ,
    fluentCard ,
    fluentCheckbox
} from "@fluentui/web-components" ;

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

/web-imports/css-urls.ts

 export let cssURLs = [
 "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;

無論如何，使用寓言和vite將VANFS項目中的所有必需代碼彙編為單個Vanillajs捆綁包。

為什麼我們應該避免使用打字稿並遷移到F＃

 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 ]
        timelineB

F＃代碼比打字稿代碼更乾淨，更可讀。

在F＃中，由於其功能強大的推斷，我們很少需要手動添加類型。這使得F＃開發與舊版JavaScript編碼相似。

實際上，它不僅僅是這樣。

儘管程序員可能想定義構成其代碼骨幹的基本對像類型，但在其他地方，如果F＃編譯器警告了需要手動類型註釋的需求，通常是錯誤的。

在F＃中，如果編譯器無法推斷這種類型，通常表明可能存在數學上的不一致。

在打字稿中，如果編譯器無法推斷該類型，則通常會在其類型推理功能中提出限制。這使得難以確定問題的確切原因。

結果，F＃程序員自然會在數學上寫入一致和嚴格的代碼。不幸的是，這種好處在打字稿中很少發生。

f＃作為ALTJ：與打字稿的比較

F＃通常被認為是在.NET框架上運行的，但是就像將TypeScript彙編為JavaScript一樣，F＃也被編譯為JavaScript。

打字稿 - > JavaScript
F＃ - > JavaScript

更確切地說

typescirpt
⬇在node.js上運行的打字稿編譯器（ npx tsc ）
JavaScript在瀏覽器中運行

F＃
⬇寓言編譯器在.NET上運行（ dotnet fable ）
JavaScript在瀏覽器中運行

因此， vanfs的骨幹是寓言。

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

入門

構建VANFS項目模板

先決條件

.NET SDK
Node.js和NPM CLI或替代方案（BUN / DENO / YARN等）

如果您是F＃並使用VSCODE的新手，請在VSCODE上讀取F＃設置。

VANFS/寓言項目是F＃.NET項目和NPM項目的混合體。

請參閱寓言設置文件

快速開始

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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

網絡組件

Web組件

VANF可以利用由設計系統提供的Web組件提供的自定義HTML標籤：Microsoft Fluent，Google材料設計等。

流利

 import {
    provideFluentDesignSystem ,
    fluentCard ,
    fluentCheckbox
} from "@fluentui/web-components" ;

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

一些Web組件使用CSS

 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組件

program.fs

 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

清潔寓言項目並再次編譯

進行重大更改後，有時需要清潔寓言項目。

dotnet fable clean

dotnet fable watch

Vite的實時預覽

npx vite

 import '@material/web/textfield/filled-text-field.js' ;
import '@material/web/button/text-button.js' ;
import '@material/web/button/outlined-button.js' ;

/web-imports/custom.css

. 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 ;
}

program.fs

 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 ()]
|> ignore

用Vite構建

npx vite build

演示

https://codepen.io/kentechgeek/pen/kkylwgn?editors=1111

 import '@material/web/icon/icon.js' ;
import '@material/web/iconbutton/icon-button.js' ;

材料Web組件使用Google字體/圖標

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"
] ;

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

frp

⚡️功能反應性編程（FRP）

（1：1組成UIS） + Micro FRP

Vanfs被描述為

1：1從f＃到vanjs的綁定（無反應/jsx的微型反應性UI框架） + webcomponents + micro frp

或者

VANFS是Vanjs一對一直接綁定的F＃項目模板

1：1綁定在組成UI的基本功能的範圍內是絕對正確的，但對其州管理的案例不是一個案例。

vanjs是一個包含反應性編程的框架

Vanjs反應地將其狀態對象與相應的DOM元素結合。這意味著，當狀態對象更新時，相應的DOM元素也會自動更新。這種方法是聲明性的UI庫（例如React，SolidJs和Ett）中的共同特徵。

這是相同的結構：

$$ lista〜〜 * 〜〜函數 Quad rightarrow Quad ListB $$

$$ listb quad = Quad Lista〜〜 * 〜〜函數$$

所以，這是FRP。

功能反應性編程（FRP）是一種編程範式，使用數學表達式（特別是二進制操作）作為實施反應性編程的手段。

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間表

⏱️時間表

時間軸是一個從根本上獨立的FRP庫，對Vanjs或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 >

vanjs

 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

此二進制操作的代碼簡單地對應於電子表格應用的基本用法

這是相同的結構：

$$ listb quad = Quad Lista Quad Triangleright list.map Quad double $$

 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>`

$$ Timelinea Quad Triangleright Nextt Quad NewValue Quad rightarrow Quad Timelinea'$$

`nextT`

'a -> Timeline < 'a > -> Timeline < 'a >

$$ Timelinea' Quad = Quad Timelinea Quad Triangleright Nextt Quad NewValue $$

 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

計數器應用程序

vanjs

 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 ( ) )

範夫

program.fs

 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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

無效

⏱️無效類型

什麼是空？

鑑於無效在現代軟件開發中的重要意義，我專門介紹了一篇文章來探索其關鍵概念和收益。

什麼是零，無效和選項類型？

F＃中的無效類型

f＃中的無效價值類型

無效的值類型Nullable<'T>表示也可能為null的任何結構類型。當與庫和組件進行交互時，這很有幫助，這些庫和組件可能會出於效率原因選擇以null原因來表示這些類型，例如整數。支持該構造的基礎類型是系統的。

只能代表struct類型，哪個限制是有問題的。

在F＃中使用無效的參考類型

F＃：如何將選項<'a>轉換為無效，當'a可以是system.string時？

如果我們可以編寫任何可無效的類型，包括f＃中的參考類型，那將是很好的。

F＃RFC FS -1060-無效的參考類型

 let nullable1 =
    Null

let nullable2 =
    NullableT " hello "

log nullable1
// Null
log nullable2
// T hello
log nullable2.Value
// hello

該規範類似於F＃的本機非可用值類型，但與之不同， NullableT也可以代表任何參考類型。

F＃無效支持可能很快就會出現！

在F＃編譯器上完成的工作以支持.NET的無效功能的預覽。

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間軸可取消

⏱️時間表無效

通過使用無效類型，我們可以提供與時間軸配對的新操作員。

初始化具有Null值的時間表，提供的函數仍未執行，並處於待處理狀態。一旦通過有效事件將時間軸值更新為Null值，則將觸發和執行該函數。

？功能

①功能初始化`Timeline<NullableT<'a>>`

`Timeline`

NullableT < 'a > -> Timeline < NullableT < 'a >>

 let timelineNullable = Timeline Null

log timelineNullable.lastVal // use `log` of Timeline
// Null

將此時間表視為電子表格應用中的空單元。

？類型

Timeline類型和功能：

①功能初始化Timeline<'a>

①功能初始化Timeline<NullableT<'a>>

是同一實體。

考慮Timeline可以接受任何通用類型的'a包括NullableT<'a> 。

另一方面，在Timeline<NullableT<'a>>的情況下，如果參數值是可通用的類型，則如果我們需要Timeline行為來忽略所提供的函數，而在參數為Null時簡單地通過Null值，則可以使用特定的操作員，如下所示。

②為二進制操作的功能

$$ TIMELINEA 〜〜 * 〜〜功能 Quad rightarrow Quad Timelineb $$

`mapTN`

 ( NullableT < 'a > -> NullableT < 'b >) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)

`bindTN`

 ( NullableT < 'a > ->  Timeline < NullableT < 'b >>) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)

當二進制操作員時： $*$是mapT ，

$$ TIMELINEB Quad = Quad Timelinea Quad Triangleright Maptn Quad double $$

 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

program.fs

 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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間軸任務

⏱️時間軸任務

儘管時間表無效的運營商提供了類似於JavaScript的承諾的基本原則，但他們無法管理任務鏈接，例如Promie.then。

基於時間表無效，我們可以獲得能夠進行任務鏈接的時間軸任務。

`Task`

Timeline < 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 2000

`taskT`

Task < '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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間軸任務結算

⏱️時間軸任務concat

`taskConcat`或`(+>)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +> task2

let task123 =
    task1 +> task2 +> task3

let task1234 =
    task123 +> task4

program.fs

 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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間軸任務或

⏱️時間軸任務或

`taskOr`或`(+|)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +| task2

let task123 =
    task1 +| task2 +| task3

let task1234 =
    task123 +| task4

program.fs

 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

內容
？範夫 _{網絡技術的多功能性用於跨平台應用程序開發}
入門
Web組件
⚡️功能反應性編程（FRP） _{什麼是功能編程？} _{功能編程代碼如何驅動器？}
⏱️時間表
⏱️無效類型 _{什麼是零，無效和選項類型？}
⏱️時間表無效
⏱️時間軸任務
⏱️時間軸任務concat
⏱️時間軸任務或
⏱️時間軸任務和
討論

時間軸任務和

⏱️時間軸任務和

`taskAnd`和`(+&)`

 ( Task -> Task ) -> Task

 let task12 =
    task1 +& task2

let task123 =
    task1 +& task2 +& task3

let task1234 =
    task123 +& task4

program.fs

 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

展開

vanfs

範夫

？範夫

VANFS是Vanjs一對一直接綁定的F＃項目模板

f＃中的vanfs代碼

為什麼Vanjs基於Vanilla JavaScript

1。範夫的內部機制

2。對於樣式和Web組件

CSS

/web-imports/css-urls.ts

為什麼我們應該避免使用打字稿並遷移到F＃

f＃作為ALTJ：與打字稿的比較

入門

入門

構建VANFS項目模板

先決條件

快速開始

網絡組件

Web組件

流利

一些Web組件使用CSS

使用Program.fs的Web組件

program.fs

清潔寓言項目並再次編譯

Vite的實時預覽

/web-imports/custom.css

program.fs

用Vite構建

材料Web組件使用Google字體/圖標

frp

⚡️功能反應性編程（FRP）

（1：1組成UIS） + Micro FRP

vanjs是一個包含反應性編程的框架

時間表

⏱️時間表

？類型

Timeline<'a>

？功能

①功能初始化Timeline<'a>

Timeline

vanjs

範夫

③功能更新Timeline<'a>

nextT

計數器應用程序

vanjs

範夫

program.fs

無效

⏱️無效類型

什麼是空？

什麼是零，無效和選項類型？

F＃中的無效類型

時間軸可取消

⏱️時間表無效

？功能

①功能初始化Timeline<NullableT<'a>>

Timeline

？類型

②為二進制操作的功能

mapTN

bindTN

①②③ Timeline<'a>

program.fs

時間軸任務

⏱️時間軸任務

Task

taskT

時間軸任務結算

⏱️時間軸任務concat

taskConcat或(+>)

program.fs

時間軸任務或

⏱️時間軸任務或

taskOr或(+|)

program.fs

時間軸任務和

⏱️時間軸任務和

taskAnd和(+&)

program.fs

使用`Program.fs`的Web組件

`Timeline<'a>`

①功能初始化`Timeline<'a>`

`Timeline`

③功能更新`Timeline<'a>`

`nextT`

①功能初始化`Timeline<NullableT<'a>>`

`Timeline`

`mapTN`

`bindTN`

①②③ `Timeline<'a>`

`Task`

`taskT`

`taskConcat`或`(+>)`

`taskOr`或`(+|)`

`taskAnd`和`(+&)`