Unduh vanfs - Unduh Kode Sumber vanfs

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

vanfs

? Vanfs

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

Coba jsfiddle

VanFS adalah template proyek F# untuk binding langsung dari van

Kode vanfs di f#

 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

Demo

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

Mengapa Vans didasarkan pada vanilla javascript

Proyek VANFS mencakup beberapa kode naskah.

1. Mekanisme internal VANFS

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

Kode TS untuk tujuan konversi menggunakan proxy JS:

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

Ini berada di bawah direktori van-api yang penting dan kami tidak ingin memodifikasinya agar semuanya berfungsi.

2. Untuk gaya dan komponen web

Pengguna harus menginstal CSS atau komponen web yang diperlukan.

Van tidak memberikan dukungan instalasi spesifik Beause itu hanya vanillejs.

Di sisi lain, VANFS mengklarifikasi proses langkah demi langkah seperti di bawah ini:

Memulai

CSS

Semua yang kita butuhkan untuk menyesuaikan atau mengimpor terletak di bawah direktori 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"
] ;

Terlepas dari itu, semua kode yang diperlukan dalam proyek VANFS dikompilasi menjadi satu bundel vanillejs menggunakan fable dan vite.

Mengapa kita harus menghindari menggunakan naskah dan bermigrasi ke 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 ;
    } ;

Di TypeScript, dibandingkan dengan javascript lama, langkah tambahan diperlukan untuk menambahkan tipe tanda tangan ke semua variabel, fungsi, dan parameter. Ini sering kali luar biasa.

 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

Kode F# jauh lebih bersih dan lebih mudah dibaca daripada kode TypeScript.

Di F#, kita jarang perlu menambahkan jenis secara manual berkat inferensi tipe yang kuat. Ini membuat pengembangan F# terasa mirip dengan pengkodean javascript lama.

Pada kenyataannya, itu jauh lebih dari itu.

Sementara pemrogram mungkin ingin mendefinisikan jenis objek mendasar yang membentuk tulang punggung kode mereka, di tempat lain, jika kompiler F# memperingatkan untuk permintaan anotasi jenis manual, biasanya, ada sesuatu yang salah .

Dalam F#, jika kompiler tidak dapat menyimpulkan jenisnya, itu sering menunjukkan bahwa mungkin ada inkonsistensi matematika.

Dalam naskah, jika kompiler tidak dapat menyimpulkan jenisnya, ia sering menyarankan keterbatasan dalam kemampuan inferensi jenisnya. Ini membuatnya sulit untuk menentukan penyebab masalah yang tepat.

Akibatnya, programmer F# secara alami dituntun untuk menulis kode secara matematis yang konsisten dan ketat; Sayangnya, manfaat ini jarang terjadi dalam naskah.

F# sebagai ALTJS: Perbandingan dengan TypeScript

F# umumnya diakui sebagai berjalan di .NET Framework, tetapi tepat ketika naskah dikompilasi untuk JavaScript, F# juga dikompilasi untuk JavaScript.

TypeScript -> JavaScript
F# -> JavaScript

Lebih tepatnya,

Tycescirpt
⬇ Kompiler TypeScript yang berjalan di Node.js ( npx tsc )
Javascript berjalan di browser

F#
⬇ Fable Compiler berjalan di .net ( dotnet fable )
Javascript berjalan di browser

Oleh karena itu, tulang punggung VANFS adalah dongeng.

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

memulai

Memulai

Bangun Template Proyek VANFS

Prasyarat

.Net SDK
Node.js dan NPM CLI atau alternatif (Bun / Deno / Benang dll.)

Jika Anda baru mengenal F# dan menggunakan vScode, baca pengaturan F# di vScode.

Proyek VANFS/Fable adalah hibrida proyek F#.NET dan proyek NPM .

Lihat Fable Setup Documentaion

Awal yang cepat

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

Demo

https://codepen.io/kentechgeek/pen/zyxqyxz

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Komponen web

VANFS dapat memanfaatkan tag HTML khusus yang disediakan oleh komponen web dengan sistem desain : Microsoft FLUENT, desain material Google, dll.

Fasih

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

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

Beberapa komponen web menggunakan CSS

 body {
    font-family : sans-serif;
    padding : 1 em ;
    background-color : beige;
  }

. custom {
    --card-width : 200 px ;
    --card-height : 150 px ;
    padding : 22 px ;
  }

Gunakan komponen web dari `Program.fs`

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

Bersihkan proyek dongeng dan kompilasi lagi

Ketika perubahan besar dilakukan, membersihkan proyek dongeng kadang -kadang diperlukan.

dotnet fable clean

dotnet fable watch

Pratinjau Langsung dengan 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

Bangun dengan vite

npx vite build

Demo

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

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

Komponen Web Material Gunakan Google Fonts/Ikon

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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

FRP

⚡️ Fungsional Reactive Programming (FRP)

(1: 1 binding untuk menyusun UIS) + mikro FRP

VanFS digambarkan sebagai

1: 1 binding dari f# ke van (kerangka kerja UI reaktif kecil tanpa reaksi/jsx) + komponen web + mikro FRP

atau

VanFS adalah template proyek F# untuk binding langsung dari van

1: 1 Binding benar -benar benar dalam ruang lingkup fitur dasar untuk menyusun UI, tetapi bukan kasus untuk manajemen negara.

Van adalah kerangka kerja yang mencakup pemrograman reaktif

VANJS secara reaktif mengikat objek keadaannya dengan elemen DOM yang sesuai. Ini berarti bahwa ketika suatu objek negara memperbarui, elemen DOM yang sesuai secara otomatis memperbarui juga. Pendekatan ini adalah fitur umum di antara perpustakaan UI deklaratif seperti React, SolidJS, dll.

Ini adalah struktur yang identik dari:

$$ lista ~ ~ * ~ ~ function quad rightArrow quad listb $$

$$ listb quad = quad lista ~ ~ * ~ ~ function $$

Jadi, ini FRP.

Fungsional Reactive Programming (FRP) adalah paradigma pemrograman yang menggunakan ekspresi matematika, khususnya operasi biner , sebagai cara menerapkan pemrograman reaktif .

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline

⏱️ Timeline

Timeline adalah perpustakaan FRP yang secara fundamental mandiri, tanpa ketergantungan pada fitur Van atau F# asynchronous. Basis kode adalah implementasi fungsi murni yang ringkas sekitar 30-40 baris kode.

? Jenis

`Timeline<'a>`

record Timeline < 'a >
  val mutable lastVal : 'a
  val el : StateElement < 'a >

Bidang	Keterangan	Van.State
`lastVal`	Nilai terakhir dari garis waktu	`State.val`
`el`	Elemen DOM reaktif dari garis waktu	`State`

? Fungsi

① Fungsi untuk menginisialisasi `Timeline<'a>`

`Timeline`

'a -> Timeline < 'a >

Van

 let counter = van . state ( 0 ) ;

console . log ( counter . val ) ;
// 0

Vanfs

 let counter = Timeline 0

console.log counter.lastVal
// 0

Pertimbangkan Timeline sebagai wadah spesifik untuk suatu nilai, mirip dengan sel di aplikasi spreadsheet.

 let double = fun a -> a * 2

let timelineA = Timeline 1

let timelineB =
    timelineA |> mapT double

console.log timelineB.lastVal
// 2

Kode ini untuk operasi biner hanya sesuai dengan penggunaan dasar aplikasi spreadsheet

Ini adalah struktur yang identik dari:

$$ listb quad = quad lista quad trianglight 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]

Kita bisa mengenali array [2] identik dengan sel dan nilai 2 dari spreadsheet; Namun, spreadsheet dan timeline mempertahankan hubungan double karena nilai berubah selama garis waktu .

③ Fungsi untuk memperbarui `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

Atau, dalam kebanyakan kasus, kita tidak membutuhkan timelineA' dan ingin membuangnya, jadi ignore saja nilai yang dikembalikan.

 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

Aplikasi Counter

Van

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

Vanfs

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

Demo

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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

nullable

⏱️ Tipe yang bisa dibatalkan

APA ITU NULL?

Mengingat pentingnya nol dalam pengembangan perangkat lunak modern, saya telah mendedikasikan artikel terpisah untuk mengeksplorasi konsep dan manfaat utama.

Apa tipe null, nullable, dan opsi?

Tipe nullable di f#

Jenis nilai nullable di f#

Jenis nilai nullable Nullable<'T> mewakili jenis struct apa pun yang juga bisa null . Ini bermanfaat ketika berinteraksi dengan perpustakaan dan komponen yang dapat memilih untuk mewakili jenis jenis ini, seperti bilangan bulat, dengan nilai null karena alasan efisiensi. Jenis mendasari yang mendukung konstruk ini adalah sistem. Tidak dapat dikeluarkan.

hanya dapat mewakili tipe struct , batasan mana yang bermasalah.

Menggunakan tipe referensi nullable di f#

F#: Bagaimana cara mengonversi opsi <'a> menjadi nullable, juga ketika' a bisa menjadi system.string?

Alangkah baiknya jika kita bisa menulis tipe nullable termasuk jenis referensi di F#.

F# RFC FS -1060 - Jenis Referensi yang Dapat Dipicu

 let nullable1 =
    Null

let nullable2 =
    NullableT " hello "

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

Spesifikasi ini menyerupai tipe nilai nullable asli F#, tetapi tidak seperti itu, NullableT juga dapat mewakili jenis referensi apa pun.

F# Nullness Dukungan mungkin akan segera hadir!

Pratinjau pekerjaan yang dilakukan pada kompiler F# untuk mendukung kemampuan nullness .NET.

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline-tidak dapat dibatalkan

⏱️ Timeline nullable

Dengan memanfaatkan tipe nullable , kami dapat menyediakan operator baru yang memasangkan garis waktu .

Menginisialisasi garis waktu dengan nilai Null , fungsi yang disediakan tetap tidak dieksekusi dan menunggu di negara yang tertunda. Setelah nilai garis waktu diperbarui ke nilai non Null oleh peristiwa yang valid, fungsi tersebut kemudian dipicu dan dieksekusi.

? Fungsi

① Fungsi untuk menginisialisasi `Timeline<NullableT<'a>>`

`Timeline`

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

 let timelineNullable = Timeline Null

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

Pertimbangkan garis waktu ini sebagai sel kosong di aplikasi spreadsheet.

? Jenis

Jenis Timeline dan fungsinya:

① Fungsi untuk menginisialisasi Timeline<'a>

① Fungsi untuk menginisialisasi Timeline<NullableT<'a>>

adalah entitas yang sama .

Pertimbangkan Timeline dapat menerima jenis generik dari 'a termasuk NullableT<'a> .

Di sisi lain, dalam kasus Timeline<NullableT<'a>> di mana nilai parameter adalah tipe nullable, jika kita membutuhkan perilaku Timeline untuk mengabaikan fungsi yang disediakan dan cukup melewati nilai Null ketika parameternya Null , kita dapat menggunakan operator spesifik seperti yang ditunjukkan di bawah ini.

② Fungsi untuk operasi biner

$$ timelinea ~ ~ * ~ ~ function 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 >>)

Saat operator biner: $*$ adalah 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

Kode ini untuk operasi biner hanya sesuai dengan penggunaan dasar aplikasi spreadsheet.

 let timelineA ' =
    timelineA |> nextTN ( NullableT 3 )

Atau, dalam kebanyakan kasus, kita tidak membutuhkan timelineA' dan ingin membuangnya, jadi ignore saja nilai yang dikembalikan.

①②③ Tindakan `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

Demo

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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline-Task

⏱️ tugas garis waktu

Sementara timeline operator nullable menawarkan prinsip dasar yang mirip dengan janji JavaScript, mereka tidak mampu mengelola rantai tugas, seperti Promie.then.

Berdasarkan timeline nullable , kami dapat memperoleh tugas garis waktu yang mampu melakukan rantai tugas.

`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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline-Task-Concat

⏱️ Tugas Timeline Concat

`taskConcat` atau `(+>)`

 ( 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

Demo

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

Demo

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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline-Task-or

⏱️ tugas waktu atau

`taskOr` atau `(+|)`

 ( 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

Demo

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

Isi
? Vanfs _{Keserbagunaan teknologi web untuk pengembangan aplikasi lintas platform}
Memulai
Komponen web
⚡️ Fungsional Reactive Programming (FRP) _{Apa itu pemrograman fungsional?} _{Bagaimana drive kode pemrograman fungsional?}
⏱️ Timeline
⏱️ Tipe yang bisa dibatalkan _{Apa tipe null, nullable, dan opsi?}
⏱️ Timeline nullable
⏱️ tugas garis waktu
⏱️ Tugas Timeline Concat
⏱️ tugas waktu atau
⏱️ tugas waktu dan
Diskusi

Timeline-Tas-dan

⏱️ tugas waktu dan

`taskAnd` dan `(+&)`

 ( 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

Demo

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

Memperluas

vanfs

vanfs

? Vanfs

VanFS adalah template proyek F# untuk binding langsung dari van

Kode vanfs di f#

Mengapa Vans didasarkan pada vanilla javascript

1. Mekanisme internal VANFS

2. Untuk gaya dan komponen web

CSS

/web-imports/css-urls.ts

Mengapa kita harus menghindari menggunakan naskah dan bermigrasi ke f#

F# sebagai ALTJS: Perbandingan dengan TypeScript

memulai

Memulai

Bangun Template Proyek VANFS

Prasyarat

Awal yang cepat

Komponen web

Komponen web

Fasih

Beberapa komponen web menggunakan CSS

Gunakan komponen web dari Program.fs

Program.fs

Bersihkan proyek dongeng dan kompilasi lagi

Pratinjau Langsung dengan Vite

/web-imports/custom.css

Program.fs

Bangun dengan vite

Komponen Web Material Gunakan Google Fonts/Ikon

FRP

⚡️ Fungsional Reactive Programming (FRP)

(1: 1 binding untuk menyusun UIS) + mikro FRP

Van adalah kerangka kerja yang mencakup pemrograman reaktif

Timeline

⏱️ Timeline

? Jenis

Timeline<'a>

? Fungsi

① Fungsi untuk menginisialisasi Timeline<'a>

Timeline

Van

Vanfs

③ Fungsi untuk memperbarui Timeline<'a>

nextT

Aplikasi Counter

Van

Vanfs

Program.fs

nullable

⏱️ Tipe yang bisa dibatalkan

APA ITU NULL?

Apa tipe null, nullable, dan opsi?

Tipe nullable di f#

Timeline-tidak dapat dibatalkan

⏱️ Timeline nullable

? Fungsi

① Fungsi untuk menginisialisasi Timeline<NullableT<'a>>

Timeline

? Jenis

② Fungsi untuk operasi biner

mapTN

bindTN

①②③ Tindakan Timeline<'a>

Program.fs

Timeline-Task

⏱️ tugas garis waktu

Task

taskT

Timeline-Task-Concat

⏱️ Tugas Timeline Concat

taskConcat atau (+>)

Program.fs

Timeline-Task-or

⏱️ tugas waktu atau

taskOr atau (+|)

Program.fs

Timeline-Tas-dan

⏱️ tugas waktu dan

taskAnd dan (+&)

Program.fs

Gunakan komponen web dari `Program.fs`

`Timeline<'a>`

① Fungsi untuk menginisialisasi `Timeline<'a>`

`Timeline`

③ Fungsi untuk memperbarui `Timeline<'a>`

`nextT`

① Fungsi untuk menginisialisasi `Timeline<NullableT<'a>>`

`Timeline`

`mapTN`

`bindTN`

①②③ Tindakan `Timeline<'a>`

`Task`

`taskT`

`taskConcat` atau `(+>)`

`taskOr` atau `(+|)`

`taskAnd` dan `(+&)`