val sprintf : format:Printf.StringFormat<'T> -> 'T
Full name: Microsoft.FSharp.Core.ExtraTopLevelOperators.sprintf
type 'T list = List<'T>
Full name: Microsoft.FSharp.Collections.list<_>
Multiple items module List
-------------------- type List<'T> = | (  ) | ( :: ) of Head: 'T * Tail: 'T list interface IEnumerable interface IEnumerable<'T> member GetSlice : startIndex:int option * endIndex:int option -> 'T list member Head : 'T member IsEmpty : bool member Item : index:int -> 'T with get member Length : int member Tail : 'T list static member Cons : head:'T * tail:'T list -> 'T list static member Empty : 'T list
Full name: Microsoft.FSharp.Collections.List<_>
val map : mapping:('T -> 'U) -> list:'T list -> 'U list
Full name: Microsoft.FSharp.Collections.List.map
Multiple items val int : value:'T -> int (requires member op_Explicit)
Full name: Microsoft.FSharp.Core.Operators.int
-------------------- type int = int32
Full name: Microsoft.FSharp.Core.int
-------------------- type int<'Measure> = int
Full name: Microsoft.FSharp.Core.int<_>
union case Option.None: Option<'T>
union case Option.Some: Value: 'T -> Option<'T>
React performance in a Fable world
🧙🏻 How does react work ?
🔍 Measuring performance
💫 React in Fable
🤹 Micro optimizations
🚀 The future?
How does react work ?
« Virtual DOM » is a little short for an answer
An object model for HTML
A very imperative API
Not always slow but reflow (size recalculation) can be
Written in JS, made by Facebook, Open Source
A declarative syntax for the DOM
Native elements (HTML)
Basic types (string, number)
Arrays of all the above
Can be seen as an Element tree, distinct from the DOM
Triggered by our code
The new DOM is diffed with the previous one and change applied
Different types (different component or HTML element) are always re-created
HTML elements properties are compared with the previous ones and the changes are applied
Component instances are kept and asked if they should be recursed into via
shouldComponentUpdate. If true render is called.
Elements are always compared in order except if they have a Key prop
What do we want when we optimize
Limit the number of React Elements considered
Limit the amount of DOM ones returned
Ease the work of the diff algorithm with as much hints as we can
Limit the changes that really need to happen in the DOM
Provided by React in the React.PureComponent base class
Act like if shouldComponentUpdate was implemented with a shallow diff of state and props
So each field in props is compared by reference with the previous value
Purely a different syntax to declare a Component
No shouldComponentUpdate implemented, they always re-render
Still useful versus just-a-function to give hints to React diff algorithm
Elm-like library to manage web application state
Same pattern as Flux then Redux tried to apply in JS
We're mostly interested in the render part here
Measure, Measure, Measure, Optimize?
React post performance events to browsers in development builds
Browsers show them when you take a measurement via their developer
Also on Edge
Very useful, but doesn't work in Firefox and Edge is still inferior.
Chrome view is the best but need a little practice
It show both React events and JS callstack as a Flame Graph 👍
Finding anything at first is confusing. Zoom on top Timeline then adjust with scroll wheel.
Beware of React fiber: a single update can have continuations later
Require recent (September 2018) React versions and DevTools
yarn upgrade react react-dom
Works on Chrome and Firefox
Arrows move between renders
Grey = not rendered
Color = rendered, color coded for time
Early stage but extremely promising tool
No correlation with JS callstack
Start with it then move to a more complex analysis
Introducing the Canary
A very visual way to see render() calls
A PureComponent that show instance and global render() count
Show 🐣 when instance render() is 1, 🐤 when between 2 and 5 and ☠️ otherwise
1: 2: 3: 4: 5: 6: 7: 8:
// sprintf is very nice to usespan  [str (sprintf"User %s is %i years old"nameage)]
// Using react can limit how much of the DOM is changedspan  [str"User "; strname; str" is "; ofIntage; " years old"]
Use arrays for collections of elements when possible
Prefer ofArray to ofList and arrays in general.
Beware that F# doesn't stop you from mutating them but doing so would break PureComponent
Also beware that children of elements are a sequence but it should be a List as Fable optimize that case away.
Avoid extra function creation
An extension of the event handler case.
Fable can create a LOT of intermediate functions to simulate currying.
A frequent case is functional components that end up as <Unknwown> in DevTools due to that.
The future ?
« To Infinity and Beyond! »
PRs that need to be done
Stable dispatch in Elmish 😉
memo and friends
A better memo and ofFunc
There should be a way to use functional components that are functions with multiple parameters.