Fable: рддрд░реНрдХреЛрдВ рдХреЛ JS рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд┐рд╢реЗрд╖рддрд╛

рдХреЛ рдирд┐рд░реНрдорд┐рдд 30 рдЕрдХреНрддреВре░ 2018  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: fable-compiler/Fable

рд░рд┐рдПрдХреНрдЯ (рдореЗрдореЛ, рд╣реБрдХ) рдореЗрдВ рдирдП рдЬреЛрдбрд╝ рдЗрдВрдЧрд┐рдд рдХрд░рддреЗ рд╣реИрдВ рдХрд┐ рд╕рдореБрджрд╛рдп рдХрдХреНрд╖рд╛рдУрдВ рдХреЗ рдмрдЬрд╛рдп рдШрдЯрдХреЛрдВ рдХреЗ рд░реВрдк рдореЗрдВ рдХрд╛рд░реНрдпреЛрдВ рдХреА рдУрд░ рдЕрдзрд┐рдХ рдмрдврд╝рдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рдпрд╣ рд╣рдорд╛рд░реЗ рд▓рд┐рдП рдЕрдЪреНрдЫреА рдЦрдмрд░ рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ F# рдореЗрдВ рдХреНрд▓рд╛рд╕ рд╕рд┐рдВрдЯреИрдХреНрд╕ рдЗрд╕ рдЙрджреНрджреЗрд╢реНрдп рдХреЗ рд▓рд┐рдП рдереЛрдбрд╝рд╛ рд╡рд░реНрдмреЛрдЬрд╝ рд╣реИред рд╣рд╛рд▓рд╛рдВрдХрд┐, рдЕрднреА рднреА рдХреБрдЫ рдЪреАрдЬреЗрдВ рд╣реИрдВ рдЬреЛ рд╣рдо рдЕрдиреБрднрд╡ рдХреЛ рдмреЗрд╣рддрд░ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред

FableConf рдореЗрдВ @vbfox рдиреЗ JS рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рддрд░реНрдХреЛрдВ рдХреЛ рд╕рдВрдХрд▓рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЛ рд╕рдХреНрд╖рдо рдХрд░рдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджрд┐рдпрд╛ рд╣реИ, рдЗрд╕рд▓рд┐рдП рд╣рдореЗрдВ рд╣рд░ рдмрд╛рд░ рдкреНрд░реЙрдкреНрд╕ рдХреЗ рд╕рд╛рде рдлрд╝рдВрдХреНрд╢рди рдШрдЯрдХ рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд░рд┐рдХреЙрд░реНрдб рдШреЛрд╖рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИред рддреЛ рдЗрд╕рдХреЗ рдмрдЬрд╛рдп:

type MyProps = { key: string; value1: int; value2: float[] }

let MyComponent (props: MyProps) =
    div [] [...]

// Use
ofFunction MyComponent { key = "foo"; value1 = 5; value2 = [] } []

рд╣рдо рд▓рд┐рдЦ рд╕рдХрддреЗ рдереЗ:

let [<MagicAttribute>] MyComponent (key: string) (value1: int) (value2: float[]) () =
    div [] [...]

// Use?
ofFunction2 (MyComponent "foo" 5 []) []

рдореИрдВрдиреЗ рдЕрднреА рджреЗрдЦрд╛ рдХрд┐ рд╣рдо рдЪрд░реНрдЪрд╛ рдХрд░рдирд╛ рднреВрд▓ рдЧрдП рдХрд┐ рдЗрд╕реЗ рдХреИрд╕реЗ рдХрд╣рд╛ рдЬрд╛рдПрдЧрд╛ред рдЙрдкрд░реЛрдХреНрдд рдирдореВрдиреЗ рдореЗрдВ рдореИрдВрдиреЗ рдирд┐рд╖реНрдкрд╛рджрди рдХреЛ рд░реЛрдХрдиреЗ рдХреЗ рд▓рд┐рдП рдЕрдВрдд рдореЗрдВ рдПрдХ рдЗрдХрд╛рдИ рддрд░реНрдХ рдЬреЛрдбрд╝рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдЕрдиреНрдп рддрд░реАрдХреЗ рднреА рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВред

рд╕рд┐рджреНрдзрд╛рдВрдд рд░реВрдк рдореЗрдВ, рдореИрдВ рдЬрд┐рддрдирд╛ рд╕рдВрднрд╡ рд╣реЛ рдПрдл # рдореЗрдВ рдЬрд╛рджреВ рдХреА рд╡рд┐рд╢реЗрд╖рддрд╛рдУрдВ рд╕реЗ рдмрдЪрдирд╛ рдЪрд╛рд╣рддрд╛ рдерд╛, рд▓реЗрдХрд┐рди рдЗрд╕ рдорд╛рдорд▓реЗ рдореЗрдВ рдЗрд╕реЗ рдЙрдЪрд┐рдд рдард╣рд░рд╛рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рдерд╛ред рдЕрдирд╛рдо рд░рд┐рдХреЙрд░реНрдб F# рдореЗрдВ рдЖрдиреЗ рддрдХ рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рд╡рд┐рдХрд▓реНрдк рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рд╡реЗ рдЗрд╕ рд╕реНрдерд┐рддрд┐ рдХреЛ рд╣рд▓ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рд╣рдо рдорд╛рдирдХ рдПрдл # рдХреЗ рд╕рд╛рде рд╕рдВрд░реЗрдЦрд┐рдд рд╣реЛрдВрдЧреЗ, рдФрд░ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╡реЗ рдПрдл # рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рдореЗрдВ рдЬрд▓реНрджреА рд╣реЛрдВрдЧреЗ ред

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдмреЗрдирд╛рдореА рд░рд┐рдХреЙрд░реНрдб рдЕрднреА рднреА рдХрд╛рдлреА рдХреНрд░рд┐рдпрд╛рддреНрдордХ рд╣реИрдВ:

// Declaration
let userView = namedMemo "User" (fun ({| UserId: string; Name: string |}) ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

рд╕рд╛рдорд╛рдиреНрдп рд░рд┐рдХреЙрд░реНрдб:

// Declaration
type UserViewProps = { UserId: string; Name: string }
let userView = namedMemo "User" (fun props ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

рд▓реЗрдХрд┐рди рдЬрд┐рддрдирд╛ рдЕрдзрд┐рдХ рдореИрдВ рдЕрдкрдиреЗ рдкреНрд░рд╕реНрддрд╛рд╡ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪрддрд╛ рд╣реВрдВ рдЙрддрдирд╛ рд╣реА рдореБрдЭреЗ рдЗрд╕рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛рдПрдВ рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИрдВ ... рдпрд╣рд╛рдВ рддрдХ тАЛтАЛтАЛтАЛрдХрд┐ рдЗрд╕ рддрд░рд╣ рдХреЗ рдПрдХ рдЖрджрд┐рдо рдХреЗ рд╕рд╛рде рдпрд╣ рдХрд╛рд░реНрдпрд╛рддреНрдордХ рдШрдЯрдХреЛрдВ рдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдЬреНрдЮрд╛рдкрди рдЬреИрд╕реЗ рд▓рдкреЗрдЯреЗ рд╣реБрдП рдирд╣реАрдВ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рддрд░реНрдХ рдирд╛рдо рд╕рдВрдХрд▓рдХ рд╕реЗ рдЦреЛ рдЬрд╛рдПрдВрдЧреЗ :(: ( :(

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдЗрд╕реЗ рдмрдВрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ @alfonsogarciacaro рдЕрдЧрд░ рдореБрдЭреЗ рдЗрд╕реЗ рд╣рд▓ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рдорд┐рд▓ рдЧрдпрд╛ рддреЛ рдореИрдВ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ

рд╕рднреА 3 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЕрдирд╛рдо рд░рд┐рдХреЙрд░реНрдб F# рдореЗрдВ рдЖрдиреЗ рддрдХ рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХрд╛ рдПрдХ рд╡рд┐рдХрд▓реНрдк рд╣реЛ рд╕рдХрддрд╛ рд╣реИ

рдЪреВрдВрдХрд┐ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдПрдл # рдЪреАрдЬреЛрдВ рдХреЗ рд╣рд┐рд╕реНрд╕реЗ рдкрд░ рд╕рдВрдмреЛрдзрд┐рдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ рдФрд░ рд░рд┐рдХреЙрд░реНрдб рдХреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд░рдХреЗ Fable рдореЗрдВ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдПрдХ рд╡рд┐рдХрд▓реНрдк рд╣реИ, рдореИрдВ рддрдм рддрдХ рдЗрдВрддрдЬрд╛рд░ рдХрд░рдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреВрдВрдЧрд╛ рдЬрдм рддрдХ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдЕрдЬреНрдЮрд╛рдд рд░рд┐рдХреЙрд░реНрдб рди рд╣реЛрдВред рдЕрдиреНрдпрдерд╛ рдЖрдк рдХреЗрд╡рд▓ рдПрдХ рдРрд╕реА рд╕реБрд╡рд┐рдзрд╛ рдЬреЛрдбрд╝реЗрдВрдЧреЗ рдЬрд┐рд╕реЗ рдирд┐рдХрдЯ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рд╣рдЯрд╛ рджрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛, рдпрд╣ рдЙрд▓реНрд▓реЗрдЦ рдирд╣реАрдВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдкрд░реАрдХреНрд╖рдг рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рджрд╕реНрддрд╛рд╡реЗрдЬ рдХрд┐рдпрд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП, рдХреБрдЫ рдЙрджрд╛рд╣рд░рдгреЛрдВ рдХреЗ рд╕рд╛рде рдЬреЛрдбрд╝рд╛ рдЬрд╛рдирд╛ рдЪрд╛рд╣рд┐рдП рдФрд░ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛рдУрдВ рдХреЛ Fable quirks рдХреЗ рдЕрдкрдиреЗ рд╢рд╕реНрддреНрд░рд╛рдЧрд╛рд░ рдХреЗ рдмрдЧрд▓ рдореЗрдВ рдПрдХ рдФрд░ рд╡рд┐рд╢реЗрд╖рддрд╛ рд╕реАрдЦрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреАред рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдЪреАрдЬреЗрдВ рдХрд░реЛ

рдореИрдВ рдЕрдирд╛рдо F# рд░рд┐рдХреЙрд░реНрдб рдХреА рдкреНрд░рддреАрдХреНрд╖рд╛ рдХрд░рдиреЗ рдХреЗ рдкрдХреНрд╖ рдореЗрдВ рд╣реВрдВ

рдмреЗрдирд╛рдореА рд░рд┐рдХреЙрд░реНрдб рдЕрднреА рднреА рдХрд╛рдлреА рдХреНрд░рд┐рдпрд╛рддреНрдордХ рд╣реИрдВ:

// Declaration
let userView = namedMemo "User" (fun ({| UserId: string; Name: string |}) ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

рд╕рд╛рдорд╛рдиреНрдп рд░рд┐рдХреЙрд░реНрдб:

// Declaration
type UserViewProps = { UserId: string; Name: string }
let userView = namedMemo "User" (fun props ->
    a [Href (sprintf "/%s/" props.UserId)] [str props.Name])

// Usage
ofElementType userView { UserId = "vbfox"; Name = "Julien Roncaglia" } []

рд▓реЗрдХрд┐рди рдЬрд┐рддрдирд╛ рдЕрдзрд┐рдХ рдореИрдВ рдЕрдкрдиреЗ рдкреНрд░рд╕реНрддрд╛рд╡ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реЛрдЪрддрд╛ рд╣реВрдВ рдЙрддрдирд╛ рд╣реА рдореБрдЭреЗ рдЗрд╕рдХреЗ рд╕рд╛рде рд╕рдорд╕реНрдпрд╛рдПрдВ рджрд┐рдЦрд╛рдИ рджреЗрддреА рд╣реИрдВ ... рдпрд╣рд╛рдВ рддрдХ тАЛтАЛтАЛтАЛрдХрд┐ рдЗрд╕ рддрд░рд╣ рдХреЗ рдПрдХ рдЖрджрд┐рдо рдХреЗ рд╕рд╛рде рдпрд╣ рдХрд╛рд░реНрдпрд╛рддреНрдордХ рдШрдЯрдХреЛрдВ рдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдЬреНрдЮрд╛рдкрди рдЬреИрд╕реЗ рд▓рдкреЗрдЯреЗ рд╣реБрдП рдирд╣реАрдВ рд╣реИрдВ рдХреНрдпреЛрдВрдХрд┐ рддрд░реНрдХ рдирд╛рдо рд╕рдВрдХрд▓рдХ рд╕реЗ рдЦреЛ рдЬрд╛рдПрдВрдЧреЗ :(: ( :(

рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдЗрд╕реЗ рдмрдВрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ @alfonsogarciacaro рдЕрдЧрд░ рдореБрдЭреЗ рдЗрд╕реЗ рд╣рд▓ рдХрд░рдиреЗ рдХрд╛ рдХреЛрдИ рддрд░реАрдХрд╛ рдорд┐рд▓ рдЧрдпрд╛ рддреЛ рдореИрдВ рдЗрд╕реЗ рдлрд┐рд░ рд╕реЗ

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

MangelMaxime picture MangelMaxime  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

forki picture forki  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MangelMaxime picture MangelMaxime  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

MangelMaxime picture MangelMaxime  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

AngelMunoz picture AngelMunoz  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ