vanfs
1.0.0
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
import van from "vanjs-core"
const { a , p , div , li , ul } = van . tags
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello =
( ) =>
div (
p ( "Hello" ) ,
ul (
li ( "?️World" ) ,
li ( a ( { href : "https://vanjs.org/" } , "?VanJS" ) ) ,
) ,
)
van . add ( document . body , Hello ( ) )jsfiddle을 사용해보십시오
module HelloApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let a : Tag = tags?a
let p : Tag = tags?p
let div : Tag = tags?div
let ul : Tag = tags?ul
let li : Tag = tags?li
let Hello =
fun _ ->
div [
p [ " Hello " ]
ul [
li [ " ?️World " ]
li [ a [{| href = " https://vanjs.org/ " |}; " ?VanJS " ]]
]
]
add [ document.body ; Hello ()]
|> ignore데모
https://codepen.io/kentechgeek/pen/vwnovox
let Greeting : Tag =
fun list ->
let name : string = list [ 0 ]? name
div [ $ " Hello {name}! " ]
add [ document.body ; Greeting [{| name = " Ken " |}]]
|> ignore const Greeting : Component < { name : string } > =
( { name } ) =>
< div > Hello { name } ! </ div > ;
render ( ( ) => < Greeting name = "Ken" /> , document . body ) ; VANFS 프로젝트에는 일부 TypeScript 코드가 포함되어 있습니다.
https://github.com/ken-okabe/vanfs/blob/main/van-api/ts/basic.ts
JS 프록시를 사용한 전환 목적을위한 TS 코드 :
// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJS 이것은 van-api 디렉토리 아래에 있으며 필수적이며 우리는 일을 계속 작동시키기 위해 수정하고 싶지 않습니다.
사용자는 필요한 CSS 또는 웹 구성 요소를 설치해야합니다.
Vanjs는 특정 설치 지원을 제공하지 않습니다.
반면에 Vanfs는 다음과 같이 단계별 프로세스를 명확하게합니다.
사용자 정의하거나 가져 오는 데 필요한 모든 것은 Web-Imports 디렉토리 아래에 있습니다.
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;그럼에도 불구하고 VANFS 프로젝트 내의 모든 필요한 코드는 Fable 및 Vite를 사용하여 단일 바닐라 JS 번들로 컴파일됩니다.
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 ;
} ;Legacy JavaScript와 비교하여 TypeScript에서 모든 변수, 함수 및 매개 변수에 유형 서명을 추가하려면 추가 단계가 필요합니다. 이것은 종종 압도적입니다.
let bindT =
fun monadf timelineA ->
let timelineB = timelineA.lastVal |> monadf
let newFn =
fun a ->
timelineB
|> nextT ( a |> monadf ) .lastVal
|> ignore
timelineA.lastFns <- timelineA.lastFns @ [ newFn ]
timelineBF# 코드는 TypeScript 코드보다 훨씬 깨끗하고 읽기 쉽습니다.
F#에서는 강력한 유형 추론 덕분에 수동으로 유형을 추가 할 필요가 없습니다. 이로 인해 F# 개발이 레거시 JavaScript 코딩과 유사하게 느껴집니다.
실제로는 그 이상입니다.
프로그래머는 코드의 중추를 형성하는 기본 객체 유형을 정의 할 수 있지만, F# 컴파일러가 수동 유형 주석의 요구에 대해 경고하는 경우, 일반적으로 무언가 잘못된 것입니다 .
F#에서 컴파일러가 유형을 유추 할 수 없다면 종종 수학적 불일치가있을 수 있음을 시사합니다.
TypeScript에서 컴파일러가 유형을 유추 할 수없는 경우 종종 유형 추론 기능의 한계를 제안합니다. 이로 인해 문제의 정확한 원인을 결정하기가 어렵습니다.
결과적으로 F# 프로그래머는 자연스럽게 수학적으로 일관되고 엄격한 코드를 작성하게됩니다. 불행히도,이 혜택은 TypeScript에서 거의 발생하지 않습니다.
F#은 일반적으로 .NET 프레임 워크에서 실행되는 것으로 인식되지만 TypeScript가 JavaScript로 컴파일되는 것처럼 F#도 JavaScript로 컴파일됩니다.
TypeScript-> JavaScript
f# -> JavaScript
더 정확하게
타이핑
node.js에서 실행되는 TypeScript 컴파일러 (npx tsc)
브라우저에서 실행되는 JavaScript
에프#
.NET에서 실행되는 우화 컴파일러 (dotnet fable)
브라우저에서 실행되는 JavaScript
따라서 반프 의 중추는 우화입니다.
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
.NET SDK
Node.js 및 NPM CLI 또는 대안 (Bun / Deno / Yarn 등)
F#을 처음 접하고 vscode를 사용하는 경우 vscode에서 f# 설정을 읽으십시오.
VANFS/FALE 프로젝트는 F#.NET 프로젝트 및 NPM 프로젝트 의 하이브리드입니다.
Fable Setup Documentaion을 참조하십시오
git clone https://github.com/ken-okabe/vanfs
cd vanfs
dotnet restore # .NET project setup
dotnet tool restore
npm i # npm project setup body {
font-family : sans-serif;
padding : 1 em ;
background-color : beige;
}데모
https://codepen.io/kentechgeek/pen/zyxqyxz
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
VANF는 디자인 시스템 과 함께 웹 구성 요소 에서 제공하는 사용자 정의 HTML 태그와 같은 Microsoft Fluent, Google Material Design 등을 활용할 수 있습니다.
import {
provideFluentDesignSystem ,
fluentCard ,
fluentCheckbox
} from "@fluentui/web-components" ;
provideFluentDesignSystem ( )
. register (
fluentCard ( )
) ;
provideFluentDesignSystem ( )
. register (
fluentCheckbox ( )
) ; body {
font-family : sans-serif;
padding : 1 em ;
background-color : beige;
}
. custom {
--card-width : 200 px ;
--card-height : 150 px ;
padding : 22 px ;
}Program.fs 의 웹 구성 요소를 사용하십시오 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 watchnpx vite import '@material/web/textfield/filled-text-field.js' ;
import '@material/web/button/text-button.js' ;
import '@material/web/button/outlined-button.js' ; . custom3 {
--card-width : 460 px ;
--card-height : 150 px ;
padding : 20 px ;
}
. row {
align-items : flex-start;
display : flex;
flex-wrap : wrap;
gap : 16 px ;
}
. buttons {
justify-content : flex-end;
padding : 16 px ;
}
md-filled-text-field ,
md-outlined-text-field {
width : 200 px ;
} module MaterialUI
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
let div : Tag = tags?div
let form : Tag = tags?form
let fluentCard : Tag = tags? `` fluent-card ``
let mdFilledTextField : Tag = tags? `` md-filled-text-field ``
let mdTextButton : Tag = tags? `` md-text-button ``
let mdOutlinedButton : Tag = tags? `` md-outlined-button ``
let Form =
fun _ ->
fluentCard [
{| `` class `` = " custom3 " |}
form [
div [
{| `` class `` = " row " |}
mdFilledTextField [
{|
label = " First name "
name = " first-name "
required = " "
autocomplete = " given-name "
|}
]
mdFilledTextField [
{|
label = " Last name "
name = " last-name "
required = " "
autocomplete = " family-name "
|}
]
]
div [
{| `` class `` = " row buttons " |}
mdTextButton [
{| `` type `` = " reset " |}
" Reset "
]
mdOutlinedButton [
{| `` type `` = " submit " |}
" Submit "
]
]
]
]
add [ document.body ; Form ()]
|> ignorenpx vite build데모
https://codepen.io/kentechgeek/pen/kkylwgn?editors=1111
import '@material/web/icon/icon.js' ;
import '@material/web/iconbutton/icon-button.js' ; https://m3.material.io/styles/icons/overview
export let cssURLs = [
"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
] ;| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
반프는 다음 과 같이 설명됩니다
1 : 1 F#에서 vanjs 까지의 바인딩 (REACT/JSX가없는 작은 반응성 UI 프레임 워크) + WebComponents + Micro FRP
또는
Vanfs는 Vanjs 의 일대일 직접 바인딩을위한 F# 프로젝트 템플릿입니다.
1 : 1 바인딩은 UIS를 작성하기위한 기본 기능의 범위 내에서 절대적으로 사실이지만 주 경영의 경우는 아닙니다.
VANJS는 상태 객체를 해당 DOM 요소에 반응 적으로 바인딩합니다. 이는 상태 객체가 업데이트되면 해당 DOM 요소도 자동으로 업데이트 함을 의미합니다. 이 접근법은 React, Solidjs 등과 같은 선언적 UI 라이브러리의 공통적 인 기능입니다.
이것은 동일한 구조입니다.
그래서 이것은 FRP입니다.
기능적 반응 프로그래밍 (FRP) 은 반응성 프로그래밍을 구현하는 수단으로 수학적 표현, 특히 이진 작업을 사용하는 프로그래밍 패러다임입니다.
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
타임 라인 은 기본적으로 독립형 FRP 라이브러리이며 VanJS 또는 F# 비동기 기능에 의존하지 않습니다. Codebase는 약 30-40 줄의 코드 라인의 컴팩트 한 순수 기능 구현입니다.
Timeline<'a>record Timeline < 'a >
val mutable lastVal : 'a
val el : StateElement < 'a >| 필드 | 설명 | van.state |
|---|---|---|
lastVal | 타임 라인의 마지막 가치 | State.val |
el | 타임 라인의 반응성 DOM 요소 | State |
Timeline<'a>Timeline'a -> Timeline < 'a > let counter = van . state ( 0 ) ;
console . log ( counter . val ) ;
// 0 let counter = Timeline 0
console.log counter.lastVal
// 0 Timeline 스프레드 시트 앱의 셀과 유사한 값의 특정 컨테이너로 고려하십시오.
let double = fun a -> a * 2
let timelineA = Timeline 1
let timelineB =
timelineA |> mapT double
console.log timelineB.lastVal
// 2이진 작업을위한이 코드는 단순히 스프레드 시트 앱의 기본 사용에 해당합니다.
이것은 동일한 구조입니다.
let double = a => a * 2 ;
let arrayA = [ 1 ] ;
let arrayB =
arrayA . map ( double ) ;
console . log ( arrayB ) ;
// [2] let double =
fun a -> a * 2
let listA = [ 1 ]
let listB =
listA |> List.map double
console.log listB
// [2] 배열 [2] 가 셀 과 동일하고 스프레드 시트의 값 2 인식 할 수 있습니다. 그러나 스프레드 시트와 타임 라인은 타임 라인에 대한 값이 변경됨에 따라 double 관계를 유지합니다.
Timeline<'a> nextT'a -> Timeline < 'a > -> Timeline < 'a > let timelineA ' =
timelineA |> nextT 3 또는 대부분의 경우, 우리는 다른 timelineA' 필요하지 않으며 그것을 폐기하고 싶으므로 반환 된 값을 ignore .
let timelineA = Timeline 1
timelineA
|> nextT 3
|> ignore
console.log timelineA.lastVal
// 3 let double = fun a -> a * 2
// ① initialize timelineA
let timelineA = Timeline 1
// confirm the lastVal of timelineA
console.log timelineA.lastVal
// 1
// ② the binary operation
let timelineB =
timelineA |> mapT double
// confirm the lastVal of timelineB
console.log timelineB.lastVal
// 2
//=====================================
// ③ update the lastVal of timelineA
timelineA
|> nextT 3
|> ignore
// update to timelineA will trigger
// a reactive update of timelineB
// confirm the lastVal of timelineA & timelineB
console.log timelineA.lastVal
// 3
console.log timelineB.lastVal
// 6 import van from "vanjs-core"
const { button , div , h2 } = van . tags
const Counter =
( ) => {
const counter = van . state ( 0 )
van . derive ( ( ) =>
console . log ( `Counter: ${ counter . val } ` ) )
return div (
h2 ( "❤️ " , counter ) ,
button (
{
onclick : ( ) => ++ counter . val
} ,
"?"
) ,
button (
{
onclick : ( ) => -- counter . val
} ,
"?"
) ,
)
}
van . add ( document . body , Counter ( ) ) module CounterApp
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
let div : Tag = tags?div
let h2 : Tag = tags?h2
let icon : Tag = tags? `` md-icon ``
let iconButton : Tag = tags? `` md-icon-button ``
let Counter =
fun _ ->
let counter = Timeline 0 // ① initialize an Timeline
counter // ② the binary operation of the Timeline
|> mapT ( fun value ->
console.log $ " Counter: {value} " )
|> ignore
// ignore the return value of `console.log`
div [
h2 [ " ❤️ " ; counter.el ] // ? `counter.el`
iconButton [ // for Reactive DOM element
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal + 1 )
|}
icon [ " thumb_up " ]
]
iconButton [
{| onclick = fun _ ->
counter // ③ update the Timeline
|> nextT ( counter.lastVal - 1 )
|}
icon [ " thumb_down " ]
]
]
add [ document.body ; Counter ()]
|> ignore데모
https://codepen.io/kentechgeek/pen/goyqnqb?editors=1111
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
현대 소프트웨어 개발에서 NULL 의 중요한 중요성을 감안할 때, 나는 주요 개념과 이점을 탐색하기 위해 별도의 기사를 전념했습니다.
f#의 무효 값 유형
무효가 가능한 값 유형
Nullable<'T>또한null될 수있는 모든 구조물 유형을 나타냅니다. 이는 효율성 이유에 대해null값을 가진 정수와 같은 이러한 종류의 유형을 나타내도록 선택할 수있는 라이브러리 및 구성 요소와 상호 작용할 때 도움이됩니다. 이 구성을 뒷받침하는 기본 유형은 System.Nullable입니다.
제한이 문제가되는 struct 유형 만 나타낼 수 있습니다.
f#에서 무효 기준 유형 사용
F#: 'a'가 System.string이 될 수있을 때 옵션 < 'a>로 옵션을 변환하려면 어떻게합니까?
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# nullness 지원이 곧 올 수 있습니다!
.NET의 무효 기능을 지원하기 위해 F# 컴파일러에서 수행되는 작업의 미리보기.
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
Nullable 유형을 사용하여 타임 라인 과 쌍을 이루는 새로운 연산자를 제공 할 수 있습니다.
Null 값으로 타임 라인을 초기화하면 제공된 기능은 실행되지 않은 상태로 유지되며 보류 상태에서 기다립니다. 유효한 이벤트로 타임 라인 값이 널 값 Null 아닌 값으로 업데이트되면 기능이 트리거되고 실행됩니다.
Timeline<NullableT<'a>>TimelineNullableT < 'a > -> Timeline < NullableT < 'a >> let timelineNullable = Timeline Null
log timelineNullable.lastVal // use `log` of Timeline
// Null이 타임 라인을 스프레드 시트 앱에서 빈 셀로 고려하십시오.
Timeline 유형 및 기능 :
Timeline<'a>
Timeline<NullableT<'a>>
동일한 엔티티 입니다.
Timeline 고려하면 모든 일반적인 유형의 'a 포함 NullableT<'a> 허용 할 수 있습니다.
한편, Timeline<NullableT<'a>> 경우 매개 변수 값이 무효 유형 인 경우, 제공된 함수를 무시하기 위해 Timeline 동작이 필요하고 매개 변수가 Null Null 널 값을 통과하면 아래와 같이 특정 연산자를 사용할 수 있습니다.
mapTN ( NullableT < 'a > -> NullableT < 'b >) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>)bindTN ( NullableT < 'a > -> Timeline < NullableT < 'b >>) -> ( Timeline < NullableT < 'a >> -> Timeline < NullableT < 'b >>) 이진 연산자 일 때 : mapT ,
let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null이진 작업을위한이 코드는 단순히 스프레드 시트 앱의 기본 사용에 해당합니다.
let timelineA ' =
timelineA |> nextTN ( NullableT 3 ) 또는 대부분의 경우, 우리는 다른 timelineA' 필요하지 않으며 그것을 폐기하고 싶으므로 반환 된 값을 ignore .
Timeline<'a> let double =
fun a -> NullableT ( a * 2 )
// ① initialize timelineA
let timelineA = Timeline Null
log timelineA.lastVal // use `log` of Timeline
// Null
// ② the binary operation
let timelineB =
timelineA |> mapTN double
// currently, `timelineA = Timeline Null`
// so, `double` function is ignored
// and `timelineB` value becomes `Null`
log timelineB.lastVal // use `log` of Timeline
// Null
// ③ update the lastVal of timelineA
timelineA
|> nextTN ( NullableT 3 )
|> ignore
log timelineA.lastVal // use `log` of Timeline
// T 3
// Now, `timelineA` value is updated to non `Null` value
// Accordingly, `timelineB` reactively becomes `double` of it
log timelineB.lastVal
// T 6 module Number
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
let h4 : Tag = tags?h4
let fluentCard : Tag = tags? `` fluent-card ``
let fluentTextField : Tag = tags? `` fluent-text-field ``
let Number =
fun _ ->
let number = Timeline Null
let numberX2 =
number
|> mapTN ( fun n -> NullableT ( n * 2 )) //System.Nullable
fluentCard [
{| `` class `` = " custom1 " |}
h4 [ " Number " ]
fluentTextField [
{|
appearance = " outline "
required = true
`` type `` = " number "
placeholder = " 1 "
oninput =
fun e ->
let value =
if e?target?value = " "
then Null
else NullableT e?target?value
if value = Null // clear the output textField
then numberX2
|> nextTN Null
|> ignore
document.getElementById ( " output-field " )? value
<- " Null " // clear the output textField
else ()
number
|> nextTN value
|> ignore
|}
]
h4 [ " Number × 2 " ]
fluentTextField [
{|
appearance = " outline "
readonly = true
value = numberX2.el
id = " output-field "
|}
]
]
add [ document.body ; Number ()]
|> ignore데모
https://codepen.io/kentechgeek/pen/wvznvzj?editors=1111
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
타임 라인 Nullable 연산자는 JavaScript의 약속과 유사한 기본 원칙을 제공하지만 Promie.Then과 같은 작업 체인을 관리 할 수는 없습니다.
타임 라인 Nullable을 기반으로 작업 체인을 수행 할 수있는 타임 라인 작업을 얻을 수 있습니다.
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| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
taskConcat 또는 (+>) ( Task -> Task ) -> Task let task12 =
task1 +> task2
let task123 =
task1 +> task2 +> task3
let task1234 =
task123 +> task4 module Tasks
open Browser
open Browser. Types
open Fable. Core . JsInterop
open Van. Basic // import tags, add
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let br : Tag = tags? `` br ``
let fluentCard : Tag = tags? `` fluent-card ``
let linerProgress : Tag = tags? `` md-linear-progress ``
let Tasks =
fun _ ->
let progressInit = false
let progressStart = true
let progressDone = false
let percentInit = 0.0
let percentStart = 0.0
let percentDone = 1.0
let timelineProgress1 = Timeline progressInit
let timelineProgress2 = Timeline progressInit
let timelineProgress3 = Timeline progressInit
let timelinePercent1 = Timeline percentInit
let timelinePercent2 = Timeline percentInit
let timelinePercent3 = Timeline percentInit
let taskStart =
fun timelineProgress timelinePercent ->
timelineProgress
|> nextT progressStart
|> ignore
timelinePercent
|> nextT percentStart
|> ignore
let taskDone =
fun timelineProgress timelinePercent timelineResult ->
timelineProgress
|> nextT progressDone
|> ignore
timelinePercent
|> nextT percentDone
|> ignore
timelineResult
|> nextTN ( NullableT 999 )
|> ignore
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
taskStart timelineProgress1 timelinePercent1
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
taskDone timelineProgress1 timelinePercent1 timelineResult
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
taskStart timelineProgress2 timelinePercent2
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
taskDone timelineProgress2 timelinePercent2 timelineResult
setTimeout f 2500
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
taskStart timelineProgress3 timelinePercent3
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
taskDone timelineProgress3 timelinePercent3 timelineResult
setTimeout f 2500
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +>
task2 +>
task3
timelineStarter
|> taskT task123
|> ignore
(* task123 can be written as below
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore
*)
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN ( NullableT 0 )
|> ignore
setTimeout start 2000
fluentCard [
{| `` class `` = " custom2 " |}
br []
linerProgress [
{| indeterminate = timelineProgress1.el
value = timelinePercent1.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress2.el
value = timelinePercent2.el |}
]
br []
linerProgress [
{| indeterminate = timelineProgress3.el
value = timelinePercent3.el |}
]
]
add [ document.body ; Tasks ()]
|> ignore데모
https://codepen.io/kentechgeek/pen/jordjvy?editors=1111
module Tasks
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskConcat
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true // some non-null value
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN nonNull
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +>
task2 +>
task3
timelineStarter
|> taskT task123
|> ignore
(* task123 can be written as below
timelineStarter
|> taskT task1
|> taskT task2
|> taskT task3
|> ignore
*)
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
데모
https://codepen.io/kentechgeek/pen/baeeyvl?editors=1111
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
taskOr 또는 (+|) ( Task -> Task ) -> Task let task12 =
task1 +| task2
let task123 =
task1 +| task2 +| task3
let task1234 =
task123 +| task4 module TaskOr
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskOr
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +| task2 +| task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < string >)
-> log ( " The fastest result from: "
+ previousResult.Value )
timelineStarter
|> taskT task123 // Run all tasks then return the fastest result
|> taskT taskOutput // log the fastest result
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
데모
https://codepen.io/kentechgeek/pen/zyxqgwq?editors=1111
| 내용물 |
|---|
| ? 반프 웹 기술의 다양성 크로스 플랫폼 앱 개발 용 |
| 시작하기 |
| 웹 구성 요소 |
| ⚡️ 기능성 반응 프로그래밍 (FRP) 기능 프로그래밍이란 무엇입니까? 기능 프로그래밍 코드는 어떻게 유도됩니까? |
| ⏱️ 타임 라인 |
| ⏱️ nullable 유형 null, nullable 및 옵션 유형이란 무엇입니까? |
| ⏱️ 타임 라인은 무일치 할 수 있습니다 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 |
| ⏱️ 타임 라인 작업 또는 |
| ⏱️ 타임 라인 작업 및 |
| 토론 |
taskAnd 또는 (+&) ( Task -> Task ) -> Task let task12 =
task1 +& task2
let task123 =
task1 +& task2 +& task3
let task1234 =
task123 +& task4 module TaskAnd
open Van. TimelineElement // import Timeline
open Van. TimelineElementNullable // import Timelinetc.
open Van. Nullable // import NullableT
open Van. TimelineElementTask
open Van. TimelineElementTaskAnd
open System. Timers
let setTimeout f delay =
let timer = new Timer ( float delay )
timer.AutoReset <- false
timer.Elapsed.Add ( fun _ -> f ())
timer.Start ()
let nonNull = NullableT true
let task1 =
fun timelineResult previousResult ->
log " -----------task1 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task1 done "
timelineResult
|> nextTN ( NullableT " task1 " )
|> ignore
setTimeout f 2500
let task2 =
fun timelineResult previousResult ->
log " -----------task2 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task2 done "
timelineResult
|> nextTN ( NullableT " task2 " )
|> ignore
setTimeout f 1000
let task3 =
fun timelineResult previousResult ->
log " -----------task3 started... "
// delay-------------------------------
let f = fun _ ->
log " ...task3 done "
timelineResult
|> nextTN ( NullableT " task3 " )
|> ignore
setTimeout f 3000
let timelineStarter = Timeline Null //tasks disabled initially
let task123 =
task1 +& task2 +& task3
let taskOutput =
fun timelineResult ( previousResult : NullableT < ListResult < 'a >>)
-> log previousResult.Value.results
timelineStarter
|> taskT task123 // Run all tasks then return the list of results
|> taskT taskOutput // log the list of results
|> ignore
let start =
fun _ -> // timeline will start
timelineStarter
|> nextTN nonNull
|> ignore
setTimeout start 2000
데모
https://codepen.io/kentechgeek/pen/pobmjzq?editors=1111
