vanfs
1.0.0
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
import van from "vanjs-core"
const { a , p , div , li , ul } = van . tags
// Reusable components can be just pure vanilla JavaScript functions.
// Here we capitalize the first letter to follow React conventions.
const Hello =
( ) =>
div (
p ( "Hello" ) ,
ul (
li ( "?️World" ) ,
li ( a ( { href : "https://vanjs.org/" } , "?VanJS" ) ) ,
) ,
)
van . add ( document . body , Hello ( ) )حاول على JSfiddle
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
رمز TS لغرض التحويل باستخدام وكيل JS:
// unary function ([a,b,c,...]) in F#
// -> n-ary function (a,b,c,...) in VanJS هذا ضمن دليل van-api وهو أمر ضروري ولن نرغب في تعديله للحفاظ على الأشياء تعمل.
يجب على المستخدمين تثبيت أي CSS أو مكونات الويب المطلوبة.
لا توفر Vanjs دعم التثبيت المحدد Beause ، إنه مجرد فانيليا.
من ناحية أخرى ، يوضح Vanfs العملية خطوة بخطوة على النحو التالي:
كل ما نحتاجه لتخصيص أو استيراد يقع ضمن دليل الاستيراد على الويب.
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 في حزمة Vanillajs واحدة باستخدام Fable و 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 ;
} ;في TypeScript ، مقارنة مع 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# يشعر بالشلل مع ترميز JavaScript Legacy.
في الواقع ، هو أكثر من ذلك بكثير.
على الرغم من أن المبرمجين قد يرغبون في تحديد أنواع الكائنات الأساسية التي تشكل العمود الفقري لرمزهم ، في أماكن أخرى ، إذا كان برنامج التحويل البرمجي F# يحذر من الطلب على التعليقات التوضيحية اليدوية ، عادةً ما يكون هناك شيء خاطئ .
في F#، إذا كان المترجم لا يمكن أن يستنتج هذا النوع ، فإنه يشير غالبًا إلى أنه قد يكون هناك حالات غير متجانسة رياضية.
في TypeScript ، إذا كان المترجم لا يمكنه استنتاج النوع ، فغالبًا ما يقترح القيود في إمكانيات الاستدلال نوعه. هذا يجعل من الصعب تحديد السبب الدقيق للمشكلة.
ونتيجة لذلك ، فإن المبرمجين F# يقودون بشكل طبيعي إلى كتابة رمز متسق وصياد رياضيا ؛ لسوء الحظ ، نادراً ما تحدث هذه الفائدة في TypeScript.
يتم التعرف على F# عمومًا على أنه يعمل على إطار .NET ، ولكن كما يتم تجميع TypeScript إلى JavaScript ، يتم تجميع F# أيضًا إلى JavaScript.
TypeScript -> JavaScript
F# -> JavaScript
بتعبير أدق ،
typescirpt
⬇ TypeScript التحويل البرمجي يعمل على Node.js (npx tsc)
جافا سكريبت تعمل في المتصفح
و#
⬇ برنامج التحويل البرمجي الذي يعمل على .NET (dotnet fable)
جافا سكريبت تعمل في المتصفح
لذلك ، فإن العمود الفقري للفانف هو خرافة.
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
.NET SDK
Node.js و NPM CLI أو بدائل (BUN / DENO / YARN وما إلى ذلك)
إذا كنت جديدًا على F# واستخدام VSCODE ، فاقرأ إعدادات F# على VSCODE.
مشروع Vanfs/Fable هو مختلط من مشروع 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
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
يمكن لـ Vanfs الاستفادة من علامات HTML المخصصة التي توفرها مكونات الويب مع أنظمة التصميم : Microsoft Fluent ، وتصميم مواد Google ، وما إلى ذلك.
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عندما يتم إجراء تغييرات كبيرة ، يكون تنظيف مشروع Fable ضروريًا في بعض الأحيان.
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"
] ;| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
يوصف vanfs باسم
1: 1 روابط من F# إلى Vanjs (إطار واجهة المستخدم التفاعلية الصغيرة بدون React/JSX) + WebComponents + Micro FRP
أو
Vanfs هو قالب مشروع F# للربط المباشر الفردي لـ Vanjs
1: 1 الروابط صحيحة تمامًا في نطاق الميزات الأساسية لتكوين واجهة المستخدم ، ولكن ليس حالة لإدارة الدولة.
تربط Vanjs بشكل تفاعلي كائنات الحالة الخاصة بها بعناصر DOM المقابلة. هذا يعني أنه عند تحديث كائن الحالة ، يتم تحديث عنصر DOM المقابل تلقائيًا أيضًا. هذا النهج هو ميزة شائعة بين مكتبات واجهة المستخدم التعريفية مثل React و SolidJs ، إلخ.
هذا هو الهيكل المتماثل لـ:
لذلك ، هذا هو FRP.
البرمجة التفاعلية الوظيفية (FRP) هي نموذج برمجة يستخدم التعبيرات الرياضية ، وخاصة العمليات الثنائية ، كوسيلة لتنفيذ البرمجة التفاعلية .
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
الجدول الزمني هو مكتبة FRP مستقلة بشكل أساسي ، مع عدم وجود تبعيات على ميزات Vanjs أو F# غير المتزامن. قاعدة الشفرة هي تنفيذ دالة خالصة مضغوطة تبلغ حوالي 30-40 سطرًا من التعليمات البرمجية.
Timeline<'a>record Timeline < 'a >
val mutable lastVal : 'a
val el : StateElement < 'a >| مجال | وصف | Van.State |
|---|---|---|
lastVal | القيمة الأخيرة للجدول الزمني | State.val |
el | عنصر DOM التفاعلي في الجدول الزمني | State |
Timeline<'a>Timeline'a -> Timeline < 'a > 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
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
بالنظر إلى الأهمية الحاسمة لـ NULL في تطوير البرمجيات الحديثة ، قمت بتكريس مقال منفصل لاستكشاف مفاهيمها وفوائدها الرئيسية.
أنواع القيمة الباطلة في F#
يمثل نوع القيمة الباطلة
Nullable<'T>أي نوع بنية يمكن أن يكونnullأيضًا. هذا مفيد عند التفاعل مع المكتبات والمكونات التي قد تختار تمثيل هذه الأنواع من الأنواع ، مثل الأعداد الصحيحة ، مع قيمةnullلأسباب الكفاءة. النوع الأساسي الذي يدعم هذا البناء هو النظام.
يمكن أن يمثل فقط نوع struct ، أي القيود مشكلة.
باستخدام أنواع مرجعية لاغية في F#
F#: كيف يمكنني تحويل الخيار <'a> إلى Nullable ، وأيضًا عندما يكون "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# قد يأتي دعم Nullness قريبًا!
معاينة للعمل الذي يتم القيام به على برنامج التحويل البرمجي F# لدعم قدرات .NET في بيلنت.
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
من خلال الاستفادة من النوع الباطل ، يمكننا تزويد مشغلين جدد يقترنون الجدول الزمني .
تهيئة جدول زمني مع قيمة 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
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
بينما يقدم المشغلون الجدول الزمني مبدأًا أساسيًا يشبه وعد 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| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
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
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
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
| محتويات |
|---|
| ؟ vanfs براعة تكنولوجيا الويب لتطوير تطبيق منصات منصات |
| ابدء |
| مكونات الويب |
| ⚡ البرمجة التفاعلية الوظيفية (FRP) ما هي البرمجة الوظيفية؟ كيف تحرك رمز البرمجة الوظيفية؟ |
| الجدول الزمني |
| ⏱ أنواع لاغية ما هي أنواع الفرق والخالية من الخيارات؟ |
| ⏱ الجدول الزمني Nullable |
| ⏱ مهمة الجدول الزمني |
| concat المهمة الجدول الزمني |
| ⏱ مهمة الجدول الزمني أو |
| ⏱ مهمة الجدول الزمني و |
| المناقشات |
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
