Скачать vanfs - Скачать исходный код vanfs

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Ванфс

? Ванфс

 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-это шаблон проекта F# для прямых привязков один к одному.

Код Vanfs в 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

Демо

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 основан на ванильном JavaScript

Проект VANFS включает в себя некоторый код типографии.

1. Внутренний механизм Vanfs

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

TS -код с целью преобразования с использованием JS Proxy:

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

Это находится под каталогом van-api , который имеет важное значение, и мы не хотели бы модифицировать его, чтобы сохранить работу.

2. Для стилей и веб -компонентов

Пользователи должны установить любые требуемые CSS или веб -компоненты .

Vanjs не предоставляет конкретную поддержку установки Beause Это просто ваниль.

С другой стороны, Ванфс проясняет пошаговый процесс, как показано ниже:

Начиная

CSS

Все, что нам нужно для настройки или импорта, находится в рамках каталога веб-импортов.

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

Несмотря на это, весь требуемый код в проекте Vanfs составлен в одну пакет vanillajs с использованием басни и Vite.

Почему мы должны избегать использования TypeScript и мигрировать на 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# код намного чище и читабелен, чем код TypeScript.

В F#нам редко нужно добавлять типы вручную благодаря его мощному выводу. Это заставляет разработку F# похоже на Legacy JavaScript кодирование.

На самом деле это намного больше, чем это.

В то время как программисты могут захотеть определить фундаментальные типы объектов, которые формируют основу их кода, в других местах, если компилятор F# предупреждает о требовании аннотаций ручного типа, обычно что -то не так .

В F#, если компилятор не может сделать вывод типа, это часто предполагает, что могут быть математические несоответствия.

В TypeScript, если компилятор не может сделать вывод типа, он часто предлагает ограничения в своих возможностях вывода типа. Это затрудняет определение точной причины проблемы.

В результате программисты F#, естественно, приводят к написанию математически согласованного и строгого кода; К сожалению, это преимущество редко случается в типографии.

F# как altJs: сравнение с TypeScript

F# обычно распознается как запуск на .NET Framework, но так же, как TypeScript составлен в JavaScript, F# также составлен в JavaScript.

TypeScript -> JavaScript
F# -> JavaScript

Точнее,

TypeScirpt
⬇ TypeScript Compiler, работающий на node.js ( npx tsc )
JavaScript работает в браузере

F#
⬇ Компилятор басни, работающий на .net ( dotnet fable )
JavaScript работает в браузере

Следовательно, основание Vanfs - басня.

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

начиная

Начиная

Создайте шаблон проекта Vanfs

Предварительные условия

.NET SDK
Node.js и npm cli или альтернативы (Bun / deno / yarn и т. Д.)

Если вы новичок в F# и используете VSCODE, прочитайте настройки F# на VSCODE.

Проект Vanfs/Fable является гибридом проекта F#.NET и NPM Project .

См. 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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Веб-компоненты

Веб -компоненты

VANFS может использовать пользовательские HTML -теги, предоставляемые веб -компонентами , с системами проектирования : Microsoft Fluent, Google Material Design и т. Д.

Беглый

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

provideFluentDesignSystem ( )
    . register (
        fluentCard ( )
    ) ;

provideFluentDesignSystem ( )
    . register (
        fluentCheckbox ( )
    ) ;

Некоторые веб -компоненты используют 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`

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

ПРЕДВАРИТЕЛЬНЫЙ ПРЕДВАРИТЕЛЬНЫЙ

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

Материальные веб -компоненты Используйте шрифты/значки 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"
] ;

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

фрп

⚡ Функциональное реактивное программирование (FRP)

(1: 1 привязки для сочинения UI) + Micro FRP

Vanfs описывается как

1: 1 Привязки от F# к Vanjs (крошечная реактивная структура пользовательского интерфейса без React/jsx) + Webcomponents + Micro FRP

или

Vanfs -это шаблон проекта F# для прямых привязков один к одному .

1: 1 Привязки абсолютно верны в рамках основных функций для сочинения пользовательских интерфейсов, но не случай для его управления состоянием.

Vanjs - это структура, которая охватывает реактивное программирование

Vanjs реактивно связывает свои объекты состояния с соответствующими элементами DOM. Это означает, что когда обновляет объект состояния, соответствующий элемент DOM также автоматически обновляется. Этот подход является общей особенностью среди декларативных библиотек пользовательского интерфейса, таких как React, SolidJS и т. Д.

Это идентичная структура:

$$ lista ~ ~ * ~ ~ function Quad RightArrow Quad ListB $$

$$ listb Quad = Quad Lista ~ ~ * ~ ~ function $$

Итак, это FRP.

Функциональное реактивное программирование (FRP) - это парадигма программирования, которая использует математические выражения, в частности, бинарные операции , в качестве средства реализации реактивного программирования .

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

временная шкала

⏱ Временная шкала

Главная шкала является принципиально автономной библиотекой 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 RightRow Quad Timelinea '$$

`nextT`

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

$$ timelinea ' Quad = Quad Timeelinea 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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

нулевой

⏱ Объединенные типы

Что такое null?

Учитывая критическое значение NULL в современной разработке программного обеспечения, я посвятил отдельную статью для изучения ее ключевых концепций и преимуществ.

Что такое нулевые, нулевые и типы опций?

Нулевые типы в F#

Объектируемые типы значений в F#

Нулевый тип значения Nullable<'T> представляет любой тип структуры, который также может быть null . Это полезно при взаимодействии с библиотеками и компонентами, которые могут предположить, чтобы представлять эти виды типов, такие как целые числа, с null значением по причинам эффективности. Основной тип, который поддерживает эту конструкцию, является System.nullable.

может представлять только тип struct , какой ограничение является проблематичным.

Использование нулевых ссылок типов в F#

F#: Как мне преобразовать опцию <'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# Поддержка NULLENS может прийти в ближайшее время!

Предварительный просмотр работы, выполняемой на компиляторе F для поддержки возможностей .NET.

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Временная шкала Nullable

⏱ график нулевой

Используя нулевой тип , мы можем предоставить новым операторам, которые сочетаются с временной шкалой .

Инициализация временной шкалы с 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 ~ ~ * ~ ~ 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 >>)

Когда бинарный оператор: $*$ это 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 )

①②③ Действие `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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Временная задача

⏱ Задача временной шкалы

В то время как нулевые операторы временной шкалы предлагают основной принцип, аналогичный обещанию 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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Временная тайна-конкат

⏱ Задача графика

`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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

Временная задача-или

⏱ Задача временной шкалы или

`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

Содержимое
? Ванфс _{Универсальность веб -технологий Для кроссплатформенного разработки приложений}
Начиная
Веб -компоненты
⚡ Функциональное реактивное программирование (FRP) _{Что такое функциональное программирование?} _{Как работает код функционального программирования?}
⏱ Временная шкала
⏱ Объединенные типы _{Что такое нулевые, нулевые и типы опций?}
⏱ график нулевой
⏱ Задача временной шкалы
⏱ Задача графика
⏱ Задача временной шкалы или
⏱ Задача временной шкалы и
Обсуждения

временная задача и

⏱ Задача временной шкалы и

`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-это шаблон проекта F# для прямых привязков один к одному.

Код Vanfs в F#

Почему Vanjs основан на ванильном JavaScript

1. Внутренний механизм Vanfs

2. Для стилей и веб -компонентов

CSS

/web-imports/css-urls.ts

Почему мы должны избегать использования TypeScript и мигрировать на F#

F# как altJs: сравнение с TypeScript

начиная

Начиная

Создайте шаблон проекта Vanfs

Предварительные условия

Быстрый старт

Веб-компоненты

Веб -компоненты

Беглый

Некоторые веб -компоненты используют CSS

Используйте веб -компоненты из Program.fs

Program.fs

Очистите проект басни и снова компилируйте

ПРЕДВАРИТЕЛЬНЫЙ ПРЕДВАРИТЕЛЬНЫЙ

/web-imports/custom.css

Program.fs

Построить с помощью Vite

Материальные веб -компоненты Используйте шрифты/значки Google

фрп

⚡ Функциональное реактивное программирование (FRP)

(1: 1 привязки для сочинения UI) + Micro FRP

Vanjs - это структура, которая охватывает реактивное программирование

временная шкала

⏱ Временная шкала

? Тип

Timeline<'a>

? Функции

① Функция для инициализации Timeline<'a>

Timeline

Vanjs

Ванфс

③ Функция для обновления Timeline<'a>

nextT

Столовое приложение

Vanjs

Ванфс

Program.fs

нулевой

⏱ Объединенные типы

Что такое null?

Что такое нулевые, нулевые и типы опций?

Нулевые типы в F#

Временная шкала Nullable

⏱ график нулевой

? Функции

① Функция для инициализации Timeline<NullableT<'a>>

Timeline

? Тип

② Функции для бинарных операций

mapTN

bindTN

①②③ Действие Timeline<'a>

Program.fs

Временная задача

⏱ Задача временной шкалы

Task

taskT

Временная тайна-конкат

⏱ Задача графика

taskConcat или (+>)

Program.fs

Временная задача-или

⏱ Задача временной шкалы или

taskOr или (+|)

Program.fs

временная задача и

⏱ Задача временной шкалы и

taskAnd или (+&)

Program.fs

Используйте веб -компоненты из `Program.fs`

`Timeline<'a>`

① Функция для инициализации `Timeline<'a>`

`Timeline`

③ Функция для обновления `Timeline<'a>`

`nextT`

① Функция для инициализации `Timeline<NullableT<'a>>`

`Timeline`

`mapTN`

`bindTN`

①②③ Действие `Timeline<'a>`

`Task`

`taskT`

`taskConcat` или `(+>)`

`taskOr` или `(+|)`

`taskAnd` или `(+&)`