vanfs
1.0.0
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
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 ( ) )Experimente o jsfiddle
module HelloApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let a : Tag = tags?a
let p : Tag = tags?p
let div : Tag = tags?div
let ul : Tag = tags?ul
let li : Tag = tags?li
let Hello =
fun _ ->
div [
p [ " Hello " ]
ul [
li [ " ?️World " ]
li [ a [{| href = " https://vanjs.org/ " |}; " ?VanJS " ]]
]
]
add [ document.body ; Hello ()]
|> ignoreDemonstração
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 ) ; O Projeto Vanfs inclui algum código TypeScript.
https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts
Código TS para fins de conversão usando o proxy JS:
// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJS Isso está no diretório van-api , que é essencial e não gostaríamos de modificá-lo para manter as coisas funcionando.
Os usuários devem instalar os CSS ou componentes da Web necessários.
Vanjs não fornece o suporte específico de suporte de instalação Beause, é apenas um baunillajs.
Por outro lado, os vanfs esclarecem o processo passo a passo como abaixo:
Tudo o que precisamos personalizar ou importar está localizado no diretório Web-Imports.
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;Independentemente disso, todo o código necessário no projeto Vanfs é compilado em um único pacote de baunilas usando fable e vite.
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 ;
} ;No TypeScript, em comparação com o JavaScript herdado, é necessária uma etapa adicional para adicionar assinaturas de tipo a todas as variáveis, funções e parâmetros. Isso geralmente é esmagador.
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 ]
timelineBO código F# é muito mais limpo e mais legível que o código TypeScript.
Em F#, raramente precisamos adicionar tipos manualmente, graças à sua poderosa inferência de tipo. Isso faz com que o desenvolvimento F# pareça semelhante à codificação de JavaScript Legacy.
Na realidade, é muito mais do que isso.
Embora os programadores possam querer definir tipos fundamentais de objetos que formam a espinha dorsal de seu código, em outros lugares, se o compilador F# alertar para uma demanda de anotações do tipo manual, geralmente, algo está errado .
Em F#, se o compilador não puder inferir o tipo, muitas vezes sugere que pode haver inconsistências matemáticas.
No TypeScript, se o compilador não puder inferir o tipo, geralmente sugere limitações em seus recursos de inferência de tipo. Isso torna difícil determinar a causa precisa do problema.
Como resultado, os programadores F# são naturalmente levados a escrever código matematicamente consistente e rigoroso; Infelizmente, esse benefício raramente acontece no TypeScript.
F# é geralmente reconhecido como executado na estrutura .NET, mas assim como o TypeScript é compilado ao JavaScript, F# também é compilado ao JavaScript.
TypeScript -> JavaScript
F# -> JavaScript
Mais precisamente,
TypeScirpt
⬇ Compilador TypeScript em execução no Node.js (npx tsc)
JavaScript em execução no navegador
F#
⬇ Fable Compiler Running On .Net (dotnet fable)
JavaScript em execução no navegador
Portanto, a espinha dorsal de vanfs é fábula.
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
.NET SDK
Node.js e NPM CLI ou alternativas (Bun / Deno / Yarn etc.)
Se você é novo no F# e usando o VSCode, leia as configurações F# no VSCode.
Um projeto Vanfs/Fable é um híbrido do projeto F#.NET e NPM Project .
Veja a documentação de configuração da Fable
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;
}Demonstração
https://codepen.io/kentechgeek/pen/zyxqyxz
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
Os vanfs podem aproveitar as tags HTML personalizadas fornecidas por componentes da web com sistemas de design : Microsoft Fluent, Google Material Design, etc.
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; body {
font-family : sans-serif;
padding : 1 em ;
background-color : beige;
}
. custom {
--card-width : 200 px ;
--card-height : 150 px ;
padding : 22 px ;
}Program.fs 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 ()]
|> ignoreQuando as principais mudanças são feitas, a limpeza do projeto Fable às vezes é necessária.
dotnet fable clean
dotnet fable watchnpx vite import '@material/web/textfield/filled-text-field.js' ;
import '@material/web/button/text-button.js' ;
import '@material/web/button/outlined-button.js' ; . custom3 {
--card-width : 460 px ;
--card-height : 150 px ;
padding : 20 px ;
}
. row {
align-items : flex-start;
display : flex;
flex-wrap : wrap;
gap : 16 px ;
}
. buttons {
justify-content : flex-end;
padding : 16 px ;
}
md-filled-text-field ,
md-outlined-text-field {
width : 200 px ;
} module MaterialUI
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let div : Tag = tags?div
let form : Tag = tags?form
let fluentCard : Tag = tags? `` fluent-card ``
let mdFilledTextField : Tag = tags? `` md-filled-text-field ``
let mdTextButton : Tag = tags? `` md-text-button ``
let mdOutlinedButton : Tag = tags? `` md-outlined-button ``
let Form =
fun _ ->
fluentCard [
{| `` class `` = " custom3 " |}
form [
div [
{| `` class `` = " row " |}
mdFilledTextField [
{|
label = " First name "
name = " first-name "
required = " "
autocomplete = " given-name "
|}
]
mdFilledTextField [
{|
label = " Last name "
name = " last-name "
required = " "
autocomplete = " family-name "
|}
]
]
div [
{| `` class `` = " row buttons " |}
mdTextButton [
{| `` type `` = " reset " |}
" Reset "
]
mdOutlinedButton [
{| `` type `` = " submit " |}
" Submit "
]
]
]
]
add [ document.body ; Form ()]
|> ignorenpx vite buildDemonstração
https://codepen.io/kentechgeek/pen/kkylwgn?editors=1111
import '@material/web/icon/icon.js' ;
import '@material/web/iconbutton/icon-button.js' ; https://m3.material.io/styles/icons/overview
export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
Vanfs é descrito como
1: 1 ligações de f# para vanjs (uma pequena estrutura de interface reativa de interfacee sem reação/jsx) + webcomponentes + micro frp
ou
Vanfs é um modelo de projeto F# para ligações diretas individuais de vanjs
1: 1 As ligações são absolutamente verdadeiras dentro do escopo dos recursos básicos para compor as UIs, mas não um argumento para o gerenciamento do estado.
Vanjs liga reativamente seus objetos de estado aos elementos DOM correspondentes. Isso significa que, quando um objeto de estado é atualizado, o elemento DOM correspondente também é atualizado automaticamente. Essa abordagem é uma característica comum entre as bibliotecas declarativas da interface do usuário, como React, SolidJs, etc.
Esta é a estrutura idêntica de:
Então, isso é FRP.
A programação reativa funcional (FRP) é um paradigma de programação que usa expressões matemáticas, especificamente operações binárias , como um meio de implementar programação reativa .
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
A linha do tempo é uma biblioteca FRP fundamentalmente independente, sem dependências de recursos de Vanjs ou F# . A Base CodeBase é uma implementação de função pura compacta de aproximadamente 30 a 40 linhas de código.
Timeline<'a>record Timeline < 'a >
val mutable lastVal : 'a
val el : StateElement < 'a >| Campo | Descrição | Van.state |
|---|---|---|
lastVal | Último valor da linha do tempo | State.val |
el | Elemento DOM reativo da linha do tempo | State |
Timeline<'a>Timeline'a -> Timeline < 'a > let counter = van . state ( 0 ) ;
console . log ( counter . val ) ;
// 0 let counter = Timeline 0
console.log counter.lastVal
// 0 Considere a Timeline como um contêiner específico para um valor, semelhante a uma célula em aplicativos de planilha.
let double = fun a -> a * 2
let timelineA = Timeline 1
let timelineB =
timelineA |> mapT double
console.log timelineB.lastVal
// 2Este código para a operação binária simplesmente corresponde ao uso básico de aplicativos de planilha
Esta é a estrutura idêntica de:
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] Poderíamos reconhecer que a matriz [2] é idêntica à célula e valor 2 de uma planilha; No entanto, a planilha e a linha do tempo mantêm um double relacionamento à medida que os valores mudam na linha do tempo .
Timeline<'a> nextT'a -> Timeline < 'a > -> Timeline < 'a > let timelineA ' =
timelineA |> nextT 3 Ou, na maioria dos casos, não precisamos de outro timelineA' e queremos descartá -lo; portanto, simplesmente ignore o valor retornado.
let timelineA = Timeline 1
timelineA
|> nextT 3
|> ignore
console.log timelineA.lastVal
// 3 let double = fun a -> a * 2
// ① initialize timelineA
let timelineA = Timeline 1
// confirm the lastVal of timelineA
console.log timelineA.lastVal
// 1
// ② the binary operation
let timelineB =
timelineA |> mapT double
// confirm the lastVal of timelineB
console.log timelineB.lastVal
// 2
//=====================================
// ③ update the lastVal of timelineA
timelineA
|> nextT 3
|> ignore
// update to timelineA will trigger
// a reactive update of timelineB
// confirm the lastVal of timelineA & timelineB
console.log timelineA.lastVal
// 3
console.log timelineB.lastVal
// 6 import van from "vanjs-core"
const { button , div , h2 } = van . tags
const Counter =
( ) => {
const counter = van . state ( 0 )
van . derive ( ( ) =>
console . log ( `Counter: ${ counter . val } ` ) )
return div (
h2 ( "❤️ " , counter ) ,
button (
{
onclick : ( ) => ++ counter . val
} ,
"?"
) ,
button (
{
onclick : ( ) => -- counter . val
} ,
"?"
) ,
)
}
van . add ( document . body , Counter ( ) ) module CounterApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
let div : Tag = tags?div
let h2 : Tag = tags?h2
let icon : Tag = tags? `` md-icon ``
let iconButton : Tag = tags? `` md-icon-button ``
let Counter =
fun _ ->
let counter = Timeline 0 // ① initialize an Timeline
counter // ② the binary operation of the Timeline
|> mapT ( fun value ->
console.log $ " Counter: {value} " )
|> ignore
// ignore the return value of `console.log`
div [
h2 [ " ❤️ " ; counter.el ] // ? `counter.el`
iconButton [ // for Reactive DOM element
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal + 1 )
|}
icon [ " thumb_up " ]
]
iconButton [
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal - 1 )
|}
icon [ " thumb_down " ]
]
]
add [ document.body ; Counter ()]
|> ignoreDemonstração
https://codepen.io/kentechgeek/pen/goyqnqb?editors=1111
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
Dado o significado crítico do NULL no desenvolvimento moderno de software, dediquei um artigo separado a explorar seus principais conceitos e benefícios.
Tipos de valor anuláveis em f#
Um tipo de valor anulado
Nullable<'T>representa qualquer tipo de estrutura que também possa sernull. Isso é útil ao interagir com bibliotecas e componentes que podem optar por representar esses tipos de tipos, como números inteiros, com um valornullpor razões de eficiência. O tipo subjacente que apóia esse construto é System.nullable.
só pode representar o tipo struct , qual limitação é problemática.
Usando tipos de referência anuláveis em f#
F#: Como faço para converter a opção <'a> para anular, também quando' a pode ser System.String?
Seria bom se pudéssemos escrever quaisquer tipos anuláveis, incluindo tipos de referência em F#.
F# RFC FS -1060 - Tipos de referência anuláveis
let nullable1 =
Null
let nullable2 =
NullableT " hello "
log nullable1
// Null
log nullable2
// T hello
log nullable2.Value
// hello Essa especificação se assemelha aos tipos de valor anulado nativo de F#, mas, ao contrário dele, NullableT também pode representar qualquer tipo de referência.
F# o suporte de nullness pode chegar em breve!
Uma visualização do trabalho que está sendo realizado no compilador F# para suportar os recursos de anulação da .NET.
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
Ao utilizar o tipo anulado , podemos fornecer novos operadores que combinam com a linha do tempo .
Inicializando um cronograma com valor Null , a função fornecida permanece não realizada e aguarda em um estado pendente. Depois que o valor da linha do tempo é atualizado para um valor não Null por um evento válido, a função é acionada e executada.
Timeline<NullableT<'a>>TimelineNullableT < 'a > -> Timeline < NullableT < 'a >> let timelineNullable = Timeline Null
log timelineNullable.lastVal // use `log` of Timeline
// NullConsidere esta linha do tempo como uma célula vazia nos aplicativos de planilha.
Tipo de Timeline e a função:
① Função para inicializar Timeline<'a>
① Função para inicializar Timeline<NullableT<'a>>
é a mesma entidade .
Considere Timeline pode aceitar quaisquer tipos genéricos de 'a incluindo NullableT<'a> .
Por outro lado, no caso da Timeline<NullableT<'a>> onde o valor do parâmetro é um tipo nulo, se precisarmos do comportamento Timeline para ignorar a função fornecida e simplesmente passar pelo valor Null quando o parâmetro for Null , podemos usar operadores específicos como mostrado abaixo.
mapTN ( NullableT < 'a > -> NullableT < 'b >) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)bindTN ( NullableT < 'a > -> Timeline < NullableT < 'b >>) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>) Quando o operador binário: mapT ,
let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// NullEsse código para a operação binária simplesmente corresponde ao uso básico de aplicativos de planilha.
let timelineA ' =
timelineA |> nextTN ( NullableT 3 ) Ou, na maioria dos casos, não precisamos de outro timelineA' e queremos descartá -lo; portanto, simplesmente ignore o valor retornado.
Timeline<'a> let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null
// ③ update the lastVal of timelineA
timelineA
|> nextTN ( NullableT 3 )
|> ignore
log timelineA.lastVal // use `log` of Timeline
// T 3
// Now, `timelineA` value is updated to non `Null` value
// Accordingly, `timelineB` reactively becomes `double` of it
log timelineB.lastVal
// T 6 module Number
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
let h4 : Tag = tags?h4
let fluentCard : Tag = tags? `` fluent-card ``
let fluentTextField : Tag = tags? `` fluent-text-field ``
let Number =
fun _ ->
let number = Timeline Null
let numberX2 =
number
|> mapTN ( fun n -> NullableT ( n * 2 )) //System.Nullable
fluentCard [
{| `` class `` = " custom1 " |}
h4 [ " Number " ]
fluentTextField [
{|
appearance = " outline "
required = true
`` type `` = " number "
placeholder = " 1 "
oninput =
fun e ->
let value =
if e?target?value = " "
then Null
else NullableT e?target?value
if value = Null // clear the output textField
then numberX2
|> nextTN Null
|> ignore
document.getElementById ( " output-field " )? value
<- " Null " // clear the output textField
else ()
number
|> nextTN value
|> ignore
|}
]
h4 [ " Number × 2 " ]
fluentTextField [
{|
appearance = " outline "
readonly = true
value = numberX2.el
id = " output-field "
|}
]
]
add [ document.body ; Number ()]
|> ignoreDemonstração
https://codepen.io/kentechgeek/pen/wvznvzj?editors=1111
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
Embora os operadores anulados da linha do tempo ofereçam um princípio básico semelhante à promessa de JavaScript, eles não são capazes de gerenciar o encadeamento de tarefas, como o promie.
Com base na linha do tempo anulável , podemos obter a tarefa da linha do tempo capaz de encadear tarefas.
TaskTimeline < NullableT < 'a >> -> 'b -> unit let task =
fun timelineResult previousResult ->
log " -----------task1 started... "
log previousResult
// delay-------------------------------
let f = fun _ ->
log " .......task1 done "
timelineResult
|> nextTN ( NullableT 1 )
|> ignore
setTimeout f 2000taskTTask < 'a , NullableT < 'a0 >> -> Timeline < NullableT < 'a >> -> Timeline < NullableT < 'a >> let timelineStarter =
Timeline ( NullableT 0 )
// tasks start immediately
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
taskConcat ou (+>) ( Task -> Task ) -> Task let task12 =
task1 +> task2
let task123 =
task1 +> task2 +> task3
let task1234 =
task123 +> task4 module Tasks
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let br : Tag = tags? `` br ``
let fluentCard : Tag = tags? `` fluent-card ``
let linerProgress : Tag = tags? `` md-linear-progress ``
let Tasks =
fun _ ->
let progressInit = false
let progressStart = true
let progressDone = false
let percentInit = 0.0
let percentStart = 0.0
let percentDone = 1.0
let timelineProgress1 = Timeline progressInit
let timelineProgress2 = Timeline progressInit
let timelineProgress3 = Timeline progressInit
let timelinePercent1 = Timeline percentInit
let timelinePercent2 = Timeline percentInit
let timelinePercent3 = Timeline percentInit
let taskStart =
fun timelineProgress timelinePercent ->
timelineProgress
|> nextT progressStart
|> ignore
timelinePercent
|> nextT percentStart
|> ignore
let taskDone =
fun timelineProgress timelinePercent timelineResult ->
timelineProgress
|> nextT progressDone
|> ignore
timelinePercent
|> nextT percentDone
|> ignore
timelineResult
|> nextTN ( NullableT 999 )
|> ignore
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
taskStart timelineProgress1 timelinePercent1
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
taskDone timelineProgress1 timelinePercent1 timelineResult
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
taskStart timelineProgress2 timelinePercent2
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
taskDone timelineProgress2 timelinePercent2 timelineResult
setTimeout f 2500
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
taskStart timelineProgress3 timelinePercent3
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
taskDone timelineProgress3 timelinePercent3 timelineResult
setTimeout f 2500
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +>
task2 +>
task3
timelineStarter
|> taskT task123
|> ignore
(* task123 can be written as below
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore
*)
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN ( NullableT 0 )
|> ignore
setTimeout start 2000
fluentCard [
{| `` class `` = " custom2 " |}
br []
linerProgress [
{| indeterminate = timelineProgress1.el
value = timelinePercent1.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress2.el
value = timelinePercent2.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress3.el
value = timelinePercent3.el |}
]
]
add [ document.body ; Tasks ()]
|> ignoreDemonstração
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
Demonstração
https://codepen.io/kentechgeek/pen/baeeyvl?editors=1111
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
taskOr ou (+|) ( Task -> Task ) -> Task let task12 =
task1 +| task2
let task123 =
task1 +| task2 +| task3
let task1234 =
task123 +| task4 module TaskOr
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskOr
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +| task2 +| task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < string >)
-> log ( " The fastest result from: "
+ previousResult.Value )
timelineStarter
|> taskT task123 // Run all tasks then return the fastest result
|> taskT taskOutput // log the fastest result
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
Demonstração
https://codepen.io/kentechgeek/pen/zyxqgwq?editors=1111
| Conteúdo |
|---|
| ? Vanfs Versatilidade da tecnologia da web para desenvolvimento de aplicativos de plataforma cruzada |
| Começando |
| Componentes da Web |
| ⚡️ Programação reativa funcional (FRP) O que é programação funcional? Como o código de programação funcional impulsiona? |
| Linha do tempo |
| ⏱️ Tipos anuláveis O que são tipos nulos, anuláveis e de opções? |
| Line Linha do tempo anulável |
| ⏱️ Tarefa da linha do tempo |
| ⏱️ Tarefa da linha do tempo Concat |
| ⏱️ Tarefa da linha do tempo ou |
| ⏱️ Tarefa da linha do tempo e |
| Discussões |
taskAnd e (+&) ( Task -> Task ) -> Task let task12 =
task1 +& task2
let task123 =
task1 +& task2 +& task3
let task1234 =
task123 +& task4 module TaskAnd
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskAnd
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +& task2 +& task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < ListResult < 'a >>)
-> log previousResult.Value.results
timelineStarter
|> taskT task123 // Run all tasks then return the list of results
|> taskT taskOutput // log the list of results
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
Demonstração
https://codepen.io/kentechgeek/pen/pobmjzq?editors=1111
