SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
Halogen: Past, Present, Future
John A. De Goes — @jdegoes
Agenda
• Functional Frontend: SlamData
• FRP & React
• Common Elements
• FRP in a Type
• React in a Type
• The 100k Problem
• Turtles
• Halogen: Introduction
• Halogen: Past
• Halogen: Present
• Halogen: Future
• Conclusion
Functional Frontend:
SlamData
• Visual analytics for NoSQL
• Analytic workflows
• Data exploration
• Data visualization
• 100% PureScript
• 248 modules
• Largest known PureScript project in the world
• Currently five full-time developers
Data Visualization
We'll get back to that.
FRP & React
Common Elements
data HTML i
= Text String
| Element TagName (A.Attribute i) (Array (HTML i))
data HTML
= Text String
| Element TagName A.Attribute (Array HTML)
FRP & React
FRP in a Type
data Signal a = Signal (Time -> a)
instance applicativeSignal :: ...
myApp :: Signal HTML
myApp = ...
FRP & React
React in a Type
data React s m i
= React { render :: s -> HTML i,
update :: i -> s -> m s }
myApp :: React MyState EffectMonad MyEvent
myApp = ...
The 100k Problem
Look Closely...
Signal HTML
s -> HTML a
Types necessarily imply a potentially massive, in-memory HTML
structure that can neither be created nor updated incrementally.
The 100k Problem
Diffing
diff :: HTML -> HTML -> HTMLPatch
Diffing only helps with the DOM updates, nothing else!
The 100k Problem
Data Visualization
Neither React nor FRP offer a performant means of incrementally
visualizing large data sets. Rendering or even storing that much data is
prohibitive.
Halogen: Past
History
• Popular, production-ready UI library for PureScript
• Commissioned by SlamData
• Blank-slate design originally architected by Phil Freeman
• Powers the SlamData application
Halogen: Past
Signal Functions
data HTML i = ...
newtype SF i o = SF (i -> SF1 i o)
newtype SF1 i o = SF1 { result :: o, next :: SF i o }
type UI i = SF1 i (HTML i)
runUI :: forall i eff. UI i -> Eff (HalogenEffects eff) Node
Halogen: Past
If You Squint...
type Function i o = i -> o
type UI i = Cofree (Function i) (HTML i)
Halogen: Present
View + DSL
type Component s f g =
{ view :: s -> HTML (f Unit),
eval :: forall a. f a -> (HalogenDSL s g) a }
Grossly simplified. :)
Halogen: Present
In Practice
• Strongly-typed component-driven design
• Structure of entire app is encoded in type (!!!)
• ...And therefore static (pros & cons)
• Types get complex, but reasoning is level-by-level
• Hard to get compiling, but then usually works
Halogen: Future
Next-Generation Goals
• Built on a foundation of incremental computation
• Turtles all the way down — no magic
• Native expressivity — no need for escape hatch
• Unify web components with ordinary HTML
"components" (elements)
• Simplify types a little? :)
Halogen: Future
Incremental React???
data React s m i
= React { render :: s -> HTML i,
update :: i -> s -> m s }
data DReact s ds m i
= DReact { render :: s -> ds -> ΔHTML i,
effect :: i -> s -> m ds,
update :: s -> ds -> s }
Halogen: Future
Simplify
data UI s p i ds
= UI { render :: s -> p i ds, -- Push "effects" here!
update :: s -> ds -> s } -- Monoid action!
• Rendering produces a machine that reads is and produces a state
change.
• Updating produces a new state given an old state and a state
change.
Halogen: Future
Profunctor Algebras
data File a b
= ReadByte (a -> Byte)
| WriteByte Byte (Unit -> b)
Halogen: Future
Profunctor Algebras
Contravariant
|
data File a b
= ReadByte (a -> Byte)
| WriteByte Byte (Unit -> b)
Halogen: Future
Profunctor Algebras
Covariant
|
data File a b
= ReadByte (a -> Byte)
| WriteByte Byte (Unit -> b)
Halogen: Future
Profunctor Algebras
data FreePro p a b -- :: (* -> * -> *) -> * -> * -> *
A computation in p that reads 0-to-many a's and produces a single
b.
• Functor, Apply, Applicative, Monad (if desired)
• Profunctor
Halogen: Future
Profunctor Algebras
data File a b
= ReadByte (a -> Byte)
| WriteByte Byte (Unit -> b)
readByte :: FreePro File Byte Byte
readByte = liftFP $ ReadByte id
writeByte :: forall a. Byte -> FreePro a Unit
writeByte b = liftFP $ WriteByte b id
Halogen: Future
Profunctor Algebras
data DOM i o
= ListenEvent Id EventType (i -> Event)
| AppendChild Id (Id -> o)
| ...
Halogen: Future
Profunctor Algebras
data UI s p i ds
= UI { render :: s -> p i ds,
update :: s -> ds -> s }
type FreeDOM a b = FreePro DOM a b
type Component s ds = UI s FreeDOM DOMEvent ds
Halogen: Future
Components
data TextDiff
= Insert Int String
| Delete Int Int
textField :: Component String TextDiff
*Can be more polymorphic!
Halogen: Future
Lens-ish
data Nest ds' s' ds s = Nest (PrismP ds' ds) (LensP s' s)
The nesting of a smaller state differential inside a larger one.
Halogen: Future
Combinators
embed :: forall ds' s' ds s. Nest ds' s' ds s -> Components ds' s' -> Components ds s
siblings :: forall s ds. Component s ds -> Component s ds -> Component s ds
child :: forall s ds. Component s ds -> Component s ds -> Component s ds
infix 5 siblings as <~>
infix 6 child as </>
Halogen: Future
Example
data FormDiff = Email TextDiff | Password TextDiff
type FormState = { email :: String, password :: String }
webForm :: Component FormState FormDiff
webForm =
div </>
embed _Email (label "Email" <~> textField) <~>
div </>
embed _Password (label "Password" <~> passwordField)
_Email :: Nest String TextDiff FormState FormDiff
_Password :: Nest String TextDiff FormState FormDiff
Conclusion
• Practical requirements suggest an incremental theory of UI
• FRP and React are problematic
• A coinductive, profunctor-based approach looks promising
• But some details yet to be worked out...
• Halogen 1.0 is coming, & you can help!
THANK YOU!
John A. De Goes — @jdegoes

Contenu connexe

Tendances

Building a Tagless Final DSL for WebGL
Building a Tagless Final DSL for WebGLBuilding a Tagless Final DSL for WebGL
Building a Tagless Final DSL for WebGLLuka Jacobowitz
 
The Death of Final Tagless
The Death of Final TaglessThe Death of Final Tagless
The Death of Final TaglessJohn De Goes
 
First-Class Patterns
First-Class PatternsFirst-Class Patterns
First-Class PatternsJohn De Goes
 
Scalaz 8 vs Akka Actors
Scalaz 8 vs Akka ActorsScalaz 8 vs Akka Actors
Scalaz 8 vs Akka ActorsJohn De Goes
 
Functor, Apply, Applicative And Monad
Functor, Apply, Applicative And MonadFunctor, Apply, Applicative And Monad
Functor, Apply, Applicative And MonadOliver Daff
 
The Next Great Functional Programming Language
The Next Great Functional Programming LanguageThe Next Great Functional Programming Language
The Next Great Functional Programming LanguageJohn De Goes
 
Functional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekFunctional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekyoavrubin
 
Scalaz Stream: Rebirth
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: RebirthJohn De Goes
 
"Немного о функциональном программирование в JavaScript" Алексей Коваленко
"Немного о функциональном программирование в JavaScript" Алексей Коваленко"Немного о функциональном программирование в JavaScript" Алексей Коваленко
"Немного о функциональном программирование в JavaScript" Алексей КоваленкоFwdays
 
One Monad to Rule Them All
One Monad to Rule Them AllOne Monad to Rule Them All
One Monad to Rule Them AllJohn De Goes
 
Introduction to functional programming using Ocaml
Introduction to functional programming using OcamlIntroduction to functional programming using Ocaml
Introduction to functional programming using Ocamlpramode_ce
 
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional Programming
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional ProgrammingZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional Programming
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional ProgrammingJohn De Goes
 
Scalaz 8: A Whole New Game
Scalaz 8: A Whole New GameScalaz 8: A Whole New Game
Scalaz 8: A Whole New GameJohn De Goes
 
Functional programming in JavaScript
Functional programming in JavaScriptFunctional programming in JavaScript
Functional programming in JavaScriptJoseph Smith
 
Learning Functional Programming Without Growing a Neckbeard
Learning Functional Programming Without Growing a NeckbeardLearning Functional Programming Without Growing a Neckbeard
Learning Functional Programming Without Growing a NeckbeardKelsey Gilmore-Innis
 
T3chFest 2016 - The polyglot programmer
T3chFest 2016 - The polyglot programmerT3chFest 2016 - The polyglot programmer
T3chFest 2016 - The polyglot programmerDavid Muñoz Díaz
 
Advanced Tagless Final - Saying Farewell to Free
Advanced Tagless Final - Saying Farewell to FreeAdvanced Tagless Final - Saying Farewell to Free
Advanced Tagless Final - Saying Farewell to FreeLuka Jacobowitz
 
GUL UC3M - Introduction to functional programming
GUL UC3M - Introduction to functional programmingGUL UC3M - Introduction to functional programming
GUL UC3M - Introduction to functional programmingDavid Muñoz Díaz
 

Tendances (20)

Building a Tagless Final DSL for WebGL
Building a Tagless Final DSL for WebGLBuilding a Tagless Final DSL for WebGL
Building a Tagless Final DSL for WebGL
 
The Death of Final Tagless
The Death of Final TaglessThe Death of Final Tagless
The Death of Final Tagless
 
First-Class Patterns
First-Class PatternsFirst-Class Patterns
First-Class Patterns
 
Scalaz 8 vs Akka Actors
Scalaz 8 vs Akka ActorsScalaz 8 vs Akka Actors
Scalaz 8 vs Akka Actors
 
Functor, Apply, Applicative And Monad
Functor, Apply, Applicative And MonadFunctor, Apply, Applicative And Monad
Functor, Apply, Applicative And Monad
 
The Next Great Functional Programming Language
The Next Great Functional Programming LanguageThe Next Great Functional Programming Language
The Next Great Functional Programming Language
 
ZIO Queue
ZIO QueueZIO Queue
ZIO Queue
 
Functional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks weekFunctional Programming in Javascript - IL Tech Talks week
Functional Programming in Javascript - IL Tech Talks week
 
Scalaz Stream: Rebirth
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: Rebirth
 
"Немного о функциональном программирование в JavaScript" Алексей Коваленко
"Немного о функциональном программирование в JavaScript" Алексей Коваленко"Немного о функциональном программирование в JavaScript" Алексей Коваленко
"Немного о функциональном программирование в JavaScript" Алексей Коваленко
 
One Monad to Rule Them All
One Monad to Rule Them AllOne Monad to Rule Them All
One Monad to Rule Them All
 
Introduction to functional programming using Ocaml
Introduction to functional programming using OcamlIntroduction to functional programming using Ocaml
Introduction to functional programming using Ocaml
 
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional Programming
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional ProgrammingZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional Programming
ZIO Schedule: Conquering Flakiness & Recurrence with Pure Functional Programming
 
Scalaz 8: A Whole New Game
Scalaz 8: A Whole New GameScalaz 8: A Whole New Game
Scalaz 8: A Whole New Game
 
Functional programming in JavaScript
Functional programming in JavaScriptFunctional programming in JavaScript
Functional programming in JavaScript
 
Learning Functional Programming Without Growing a Neckbeard
Learning Functional Programming Without Growing a NeckbeardLearning Functional Programming Without Growing a Neckbeard
Learning Functional Programming Without Growing a Neckbeard
 
T3chFest 2016 - The polyglot programmer
T3chFest 2016 - The polyglot programmerT3chFest 2016 - The polyglot programmer
T3chFest 2016 - The polyglot programmer
 
A taste of Functional Programming
A taste of Functional ProgrammingA taste of Functional Programming
A taste of Functional Programming
 
Advanced Tagless Final - Saying Farewell to Free
Advanced Tagless Final - Saying Farewell to FreeAdvanced Tagless Final - Saying Farewell to Free
Advanced Tagless Final - Saying Farewell to Free
 
GUL UC3M - Introduction to functional programming
GUL UC3M - Introduction to functional programmingGUL UC3M - Introduction to functional programming
GUL UC3M - Introduction to functional programming
 

En vedette

Getting Started with PureScript
Getting Started with PureScriptGetting Started with PureScript
Getting Started with PureScriptJohn De Goes
 
Streams for (Co)Free!
Streams for (Co)Free!Streams for (Co)Free!
Streams for (Co)Free!John De Goes
 
FP is coming... le 19/05/2016
FP is coming... le 19/05/2016FP is coming... le 19/05/2016
FP is coming... le 19/05/2016Loïc Knuchel
 
Oxygen Element's Properties and Facts
Oxygen Element's Properties and FactsOxygen Element's Properties and Facts
Oxygen Element's Properties and FactsDinesh Hx
 
Implementing pattern-matching in JavaScript (short version)
Implementing pattern-matching in JavaScript (short version)Implementing pattern-matching in JavaScript (short version)
Implementing pattern-matching in JavaScript (short version)François-Guillaume Ribreau
 
“Going bananas with recursion schemes for fixed point data types”
“Going bananas with recursion schemes for fixed point data types”“Going bananas with recursion schemes for fixed point data types”
“Going bananas with recursion schemes for fixed point data types”Pawel Szulc
 
Golongan vii a halogen
Golongan vii a halogenGolongan vii a halogen
Golongan vii a halogenila ila
 
Oxygen
OxygenOxygen
Oxygenquest
 
Chemistry of alkali and alkaline earth metals and halogen compounds MANIK
Chemistry of alkali and alkaline earth metals and halogen compounds MANIKChemistry of alkali and alkaline earth metals and halogen compounds MANIK
Chemistry of alkali and alkaline earth metals and halogen compounds MANIKImran Nur Manik
 
Reducing Boilerplate and Combining Effects: A Monad Transformer Example
Reducing Boilerplate and Combining Effects: A Monad Transformer ExampleReducing Boilerplate and Combining Effects: A Monad Transformer Example
Reducing Boilerplate and Combining Effects: A Monad Transformer ExampleConnie Chen
 
Make your programs Free
Make your programs FreeMake your programs Free
Make your programs FreePawel Szulc
 
7 key recipes for data engineering
7 key recipes for data engineering7 key recipes for data engineering
7 key recipes for data engineeringunivalence
 
Scala Warrior and type-safe front-end development with Scala.js
Scala Warrior and type-safe front-end development with Scala.jsScala Warrior and type-safe front-end development with Scala.js
Scala Warrior and type-safe front-end development with Scala.jstakezoe
 

En vedette (19)

Getting Started with PureScript
Getting Started with PureScriptGetting Started with PureScript
Getting Started with PureScript
 
Streams for (Co)Free!
Streams for (Co)Free!Streams for (Co)Free!
Streams for (Co)Free!
 
FP is coming... le 19/05/2016
FP is coming... le 19/05/2016FP is coming... le 19/05/2016
FP is coming... le 19/05/2016
 
Oxygen Element's Properties and Facts
Oxygen Element's Properties and FactsOxygen Element's Properties and Facts
Oxygen Element's Properties and Facts
 
Purify your Lambdas
Purify your LambdasPurify your Lambdas
Purify your Lambdas
 
Implementing pattern-matching in JavaScript (short version)
Implementing pattern-matching in JavaScript (short version)Implementing pattern-matching in JavaScript (short version)
Implementing pattern-matching in JavaScript (short version)
 
London Scala Meetup - Omnia
London Scala Meetup - OmniaLondon Scala Meetup - Omnia
London Scala Meetup - Omnia
 
“Going bananas with recursion schemes for fixed point data types”
“Going bananas with recursion schemes for fixed point data types”“Going bananas with recursion schemes for fixed point data types”
“Going bananas with recursion schemes for fixed point data types”
 
Origins of free
Origins of freeOrigins of free
Origins of free
 
Oxygen cycle pres 1
Oxygen cycle pres 1Oxygen cycle pres 1
Oxygen cycle pres 1
 
Golongan vii a halogen
Golongan vii a halogenGolongan vii a halogen
Golongan vii a halogen
 
HALOGEN
HALOGENHALOGEN
HALOGEN
 
Oxygen
OxygenOxygen
Oxygen
 
Chemistry of alkali and alkaline earth metals and halogen compounds MANIK
Chemistry of alkali and alkaline earth metals and halogen compounds MANIKChemistry of alkali and alkaline earth metals and halogen compounds MANIK
Chemistry of alkali and alkaline earth metals and halogen compounds MANIK
 
Reducing Boilerplate and Combining Effects: A Monad Transformer Example
Reducing Boilerplate and Combining Effects: A Monad Transformer ExampleReducing Boilerplate and Combining Effects: A Monad Transformer Example
Reducing Boilerplate and Combining Effects: A Monad Transformer Example
 
Make your programs Free
Make your programs FreeMake your programs Free
Make your programs Free
 
7 key recipes for data engineering
7 key recipes for data engineering7 key recipes for data engineering
7 key recipes for data engineering
 
Galyat slids
Galyat slidsGalyat slids
Galyat slids
 
Scala Warrior and type-safe front-end development with Scala.js
Scala Warrior and type-safe front-end development with Scala.jsScala Warrior and type-safe front-end development with Scala.js
Scala Warrior and type-safe front-end development with Scala.js
 

Similaire à Halogen: Past, Present, and Future

Apache Spark Structured Streaming for Machine Learning - StrataConf 2016
Apache Spark Structured Streaming for Machine Learning - StrataConf 2016Apache Spark Structured Streaming for Machine Learning - StrataConf 2016
Apache Spark Structured Streaming for Machine Learning - StrataConf 2016Holden Karau
 
IronPython and Dynamic Languages on .NET by Mahesh Prakriya
 IronPython and Dynamic Languages on .NET by Mahesh Prakriya IronPython and Dynamic Languages on .NET by Mahesh Prakriya
IronPython and Dynamic Languages on .NET by Mahesh Prakriyacodebits
 
More Data, More Problems: Evolving big data machine learning pipelines with S...
More Data, More Problems: Evolving big data machine learning pipelines with S...More Data, More Problems: Evolving big data machine learning pipelines with S...
More Data, More Problems: Evolving big data machine learning pipelines with S...Alex Sadovsky
 
Programming Languages: some news for the last N years
Programming Languages: some news for the last N yearsProgramming Languages: some news for the last N years
Programming Languages: some news for the last N yearsRuslan Shevchenko
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...Codemotion
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#Talbott Crowell
 
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and FigwheelFront-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and FigwheelDavid Kay
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterHaehnchen
 
Java day2016 "Reinventing design patterns with java 8"
Java day2016 "Reinventing design patterns with java 8"Java day2016 "Reinventing design patterns with java 8"
Java day2016 "Reinventing design patterns with java 8"Alexander Pashynskiy
 
Eric Lafortune - The Jack and Jill build system
Eric Lafortune - The Jack and Jill build systemEric Lafortune - The Jack and Jill build system
Eric Lafortune - The Jack and Jill build systemGuardSquare
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...Fabio Franzini
 
Things about Functional JavaScript
Things about Functional JavaScriptThings about Functional JavaScript
Things about Functional JavaScriptChengHui Weng
 
Introduction to clojure
Introduction to clojureIntroduction to clojure
Introduction to clojureAbbas Raza
 
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source Code
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source CodeHadoop and Marklogic: Using the Genetic Algorithm to generate Source Code
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source Codejimfuller2009
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developerscacois
 

Similaire à Halogen: Past, Present, and Future (20)

Apache Spark Structured Streaming for Machine Learning - StrataConf 2016
Apache Spark Structured Streaming for Machine Learning - StrataConf 2016Apache Spark Structured Streaming for Machine Learning - StrataConf 2016
Apache Spark Structured Streaming for Machine Learning - StrataConf 2016
 
IronPython and Dynamic Languages on .NET by Mahesh Prakriya
 IronPython and Dynamic Languages on .NET by Mahesh Prakriya IronPython and Dynamic Languages on .NET by Mahesh Prakriya
IronPython and Dynamic Languages on .NET by Mahesh Prakriya
 
More Data, More Problems: Evolving big data machine learning pipelines with S...
More Data, More Problems: Evolving big data machine learning pipelines with S...More Data, More Problems: Evolving big data machine learning pipelines with S...
More Data, More Problems: Evolving big data machine learning pipelines with S...
 
Programming Languages: some news for the last N years
Programming Languages: some news for the last N yearsProgramming Languages: some news for the last N years
Programming Languages: some news for the last N years
 
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
ClojureScript - Making Front-End development Fun again - John Stevenson - Cod...
 
JS Essence
JS EssenceJS Essence
JS Essence
 
Java scriptforjavadev part2a
Java scriptforjavadev part2aJava scriptforjavadev part2a
Java scriptforjavadev part2a
 
Exploring SharePoint with F#
Exploring SharePoint with F#Exploring SharePoint with F#
Exploring SharePoint with F#
 
Front-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and FigwheelFront-end God Mode with Reagent and Figwheel
Front-end God Mode with Reagent and Figwheel
 
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years laterSymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
SymfonyCon Berlin 2016 - Symfony Plugin for PhpStorm - 3 years later
 
Java day2016 "Reinventing design patterns with java 8"
Java day2016 "Reinventing design patterns with java 8"Java day2016 "Reinventing design patterns with java 8"
Java day2016 "Reinventing design patterns with java 8"
 
Eric Lafortune - The Jack and Jill build system
Eric Lafortune - The Jack and Jill build systemEric Lafortune - The Jack and Jill build system
Eric Lafortune - The Jack and Jill build system
 
React native
React nativeReact native
React native
 
WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...WebNet Conference 2012 - Designing complex applications using html5 and knock...
WebNet Conference 2012 - Designing complex applications using html5 and knock...
 
Things about Functional JavaScript
Things about Functional JavaScriptThings about Functional JavaScript
Things about Functional JavaScript
 
Introduction to clojure
Introduction to clojureIntroduction to clojure
Introduction to clojure
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source Code
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source CodeHadoop and Marklogic: Using the Genetic Algorithm to generate Source Code
Hadoop and Marklogic: Using the Genetic Algorithm to generate Source Code
 
Node.js Patterns for Discerning Developers
Node.js Patterns for Discerning DevelopersNode.js Patterns for Discerning Developers
Node.js Patterns for Discerning Developers
 
JavaScript
JavaScriptJavaScript
JavaScript
 

Plus de John De Goes

Refactoring Functional Type Classes
Refactoring Functional Type ClassesRefactoring Functional Type Classes
Refactoring Functional Type ClassesJohn De Goes
 
Error Management: Future vs ZIO
Error Management: Future vs ZIOError Management: Future vs ZIO
Error Management: Future vs ZIOJohn De Goes
 
Atomically { Delete Your Actors }
Atomically { Delete Your Actors }Atomically { Delete Your Actors }
Atomically { Delete Your Actors }John De Goes
 
Scalaz Stream: Rebirth
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: RebirthJohn De Goes
 
SlamData - How MongoDB Is Powering a Revolution in Visual Analytics
SlamData - How MongoDB Is Powering a Revolution in Visual AnalyticsSlamData - How MongoDB Is Powering a Revolution in Visual Analytics
SlamData - How MongoDB Is Powering a Revolution in Visual AnalyticsJohn De Goes
 
The Dark Side of NoSQL
The Dark Side of NoSQLThe Dark Side of NoSQL
The Dark Side of NoSQLJohn De Goes
 
Quirrel & R for Dummies
Quirrel & R for DummiesQuirrel & R for Dummies
Quirrel & R for DummiesJohn De Goes
 
In-Database Predictive Analytics
In-Database Predictive AnalyticsIn-Database Predictive Analytics
In-Database Predictive AnalyticsJohn De Goes
 
Analytics Maturity Model
Analytics Maturity ModelAnalytics Maturity Model
Analytics Maturity ModelJohn De Goes
 
Rise of the scientific database
Rise of the scientific databaseRise of the scientific database
Rise of the scientific databaseJohn De Goes
 

Plus de John De Goes (11)

Refactoring Functional Type Classes
Refactoring Functional Type ClassesRefactoring Functional Type Classes
Refactoring Functional Type Classes
 
Error Management: Future vs ZIO
Error Management: Future vs ZIOError Management: Future vs ZIO
Error Management: Future vs ZIO
 
Atomically { Delete Your Actors }
Atomically { Delete Your Actors }Atomically { Delete Your Actors }
Atomically { Delete Your Actors }
 
Scalaz Stream: Rebirth
Scalaz Stream: RebirthScalaz Stream: Rebirth
Scalaz Stream: Rebirth
 
SlamData - How MongoDB Is Powering a Revolution in Visual Analytics
SlamData - How MongoDB Is Powering a Revolution in Visual AnalyticsSlamData - How MongoDB Is Powering a Revolution in Visual Analytics
SlamData - How MongoDB Is Powering a Revolution in Visual Analytics
 
The Dark Side of NoSQL
The Dark Side of NoSQLThe Dark Side of NoSQL
The Dark Side of NoSQL
 
Quirrel & R for Dummies
Quirrel & R for DummiesQuirrel & R for Dummies
Quirrel & R for Dummies
 
In-Database Predictive Analytics
In-Database Predictive AnalyticsIn-Database Predictive Analytics
In-Database Predictive Analytics
 
Analytics Maturity Model
Analytics Maturity ModelAnalytics Maturity Model
Analytics Maturity Model
 
Rise of the scientific database
Rise of the scientific databaseRise of the scientific database
Rise of the scientific database
 
Fun with automata
Fun with automataFun with automata
Fun with automata
 

Dernier

What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?Antenna Manufacturer Coco
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Scriptwesley chun
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationMichael W. Hawkins
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUK Journal
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking MenDelhi Call girls
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProduct Anonymous
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherRemote DBA Services
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonAnna Loughnan Colquhoun
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...apidays
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Servicegiselly40
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century educationjfdjdjcjdnsjd
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024The Digital Insurer
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsMaria Levchenko
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEarley Information Science
 

Dernier (20)

What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of ServiceCNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed textsHandwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
 
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptxEIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
 

Halogen: Past, Present, and Future

  • 1. Halogen: Past, Present, Future John A. De Goes — @jdegoes
  • 2. Agenda • Functional Frontend: SlamData • FRP & React • Common Elements • FRP in a Type • React in a Type • The 100k Problem • Turtles • Halogen: Introduction • Halogen: Past • Halogen: Present • Halogen: Future • Conclusion
  • 3. Functional Frontend: SlamData • Visual analytics for NoSQL • Analytic workflows • Data exploration • Data visualization • 100% PureScript • 248 modules • Largest known PureScript project in the world • Currently five full-time developers
  • 5. FRP & React Common Elements data HTML i = Text String | Element TagName (A.Attribute i) (Array (HTML i)) data HTML = Text String | Element TagName A.Attribute (Array HTML)
  • 6. FRP & React FRP in a Type data Signal a = Signal (Time -> a) instance applicativeSignal :: ... myApp :: Signal HTML myApp = ...
  • 7. FRP & React React in a Type data React s m i = React { render :: s -> HTML i, update :: i -> s -> m s } myApp :: React MyState EffectMonad MyEvent myApp = ...
  • 8. The 100k Problem Look Closely... Signal HTML s -> HTML a Types necessarily imply a potentially massive, in-memory HTML structure that can neither be created nor updated incrementally.
  • 9. The 100k Problem Diffing diff :: HTML -> HTML -> HTMLPatch Diffing only helps with the DOM updates, nothing else!
  • 10. The 100k Problem Data Visualization Neither React nor FRP offer a performant means of incrementally visualizing large data sets. Rendering or even storing that much data is prohibitive.
  • 11. Halogen: Past History • Popular, production-ready UI library for PureScript • Commissioned by SlamData • Blank-slate design originally architected by Phil Freeman • Powers the SlamData application
  • 12. Halogen: Past Signal Functions data HTML i = ... newtype SF i o = SF (i -> SF1 i o) newtype SF1 i o = SF1 { result :: o, next :: SF i o } type UI i = SF1 i (HTML i) runUI :: forall i eff. UI i -> Eff (HalogenEffects eff) Node
  • 13. Halogen: Past If You Squint... type Function i o = i -> o type UI i = Cofree (Function i) (HTML i)
  • 14. Halogen: Present View + DSL type Component s f g = { view :: s -> HTML (f Unit), eval :: forall a. f a -> (HalogenDSL s g) a } Grossly simplified. :)
  • 15. Halogen: Present In Practice • Strongly-typed component-driven design • Structure of entire app is encoded in type (!!!) • ...And therefore static (pros & cons) • Types get complex, but reasoning is level-by-level • Hard to get compiling, but then usually works
  • 16. Halogen: Future Next-Generation Goals • Built on a foundation of incremental computation • Turtles all the way down — no magic • Native expressivity — no need for escape hatch • Unify web components with ordinary HTML "components" (elements) • Simplify types a little? :)
  • 17. Halogen: Future Incremental React??? data React s m i = React { render :: s -> HTML i, update :: i -> s -> m s } data DReact s ds m i = DReact { render :: s -> ds -> ΔHTML i, effect :: i -> s -> m ds, update :: s -> ds -> s }
  • 18. Halogen: Future Simplify data UI s p i ds = UI { render :: s -> p i ds, -- Push "effects" here! update :: s -> ds -> s } -- Monoid action! • Rendering produces a machine that reads is and produces a state change. • Updating produces a new state given an old state and a state change.
  • 19. Halogen: Future Profunctor Algebras data File a b = ReadByte (a -> Byte) | WriteByte Byte (Unit -> b)
  • 20. Halogen: Future Profunctor Algebras Contravariant | data File a b = ReadByte (a -> Byte) | WriteByte Byte (Unit -> b)
  • 21. Halogen: Future Profunctor Algebras Covariant | data File a b = ReadByte (a -> Byte) | WriteByte Byte (Unit -> b)
  • 22. Halogen: Future Profunctor Algebras data FreePro p a b -- :: (* -> * -> *) -> * -> * -> * A computation in p that reads 0-to-many a's and produces a single b. • Functor, Apply, Applicative, Monad (if desired) • Profunctor
  • 23. Halogen: Future Profunctor Algebras data File a b = ReadByte (a -> Byte) | WriteByte Byte (Unit -> b) readByte :: FreePro File Byte Byte readByte = liftFP $ ReadByte id writeByte :: forall a. Byte -> FreePro a Unit writeByte b = liftFP $ WriteByte b id
  • 24. Halogen: Future Profunctor Algebras data DOM i o = ListenEvent Id EventType (i -> Event) | AppendChild Id (Id -> o) | ...
  • 25. Halogen: Future Profunctor Algebras data UI s p i ds = UI { render :: s -> p i ds, update :: s -> ds -> s } type FreeDOM a b = FreePro DOM a b type Component s ds = UI s FreeDOM DOMEvent ds
  • 26. Halogen: Future Components data TextDiff = Insert Int String | Delete Int Int textField :: Component String TextDiff *Can be more polymorphic!
  • 27. Halogen: Future Lens-ish data Nest ds' s' ds s = Nest (PrismP ds' ds) (LensP s' s) The nesting of a smaller state differential inside a larger one.
  • 28. Halogen: Future Combinators embed :: forall ds' s' ds s. Nest ds' s' ds s -> Components ds' s' -> Components ds s siblings :: forall s ds. Component s ds -> Component s ds -> Component s ds child :: forall s ds. Component s ds -> Component s ds -> Component s ds infix 5 siblings as <~> infix 6 child as </>
  • 29. Halogen: Future Example data FormDiff = Email TextDiff | Password TextDiff type FormState = { email :: String, password :: String } webForm :: Component FormState FormDiff webForm = div </> embed _Email (label "Email" <~> textField) <~> div </> embed _Password (label "Password" <~> passwordField) _Email :: Nest String TextDiff FormState FormDiff _Password :: Nest String TextDiff FormState FormDiff
  • 30. Conclusion • Practical requirements suggest an incremental theory of UI • FRP and React are problematic • A coinductive, profunctor-based approach looks promising • But some details yet to be worked out... • Halogen 1.0 is coming, & you can help!
  • 31. THANK YOU! John A. De Goes — @jdegoes