Elm Europe 2019
Elm
- Pure functional language (ML/Haskell inspired)
- No local state in views
- No side effects in views - all views are pure functions
- No runtime crashes
- All-in-one:
- Elm Language (
JavaScript) - Type System (
TypeScript) - Elm Compiler (
Babel, Webpack) - Elm Architecture (
React, Redux)
- Elm Language (
Sum Types All The Way Down
Richard Feldman
Warning: Esoteric talk 🤯
Idea: What if we recreate all existing elm types with custom types? 🤔
type IssuePriority
= High
| Medium
| Low
Never
type Never
= GiveMeOneMore Never
GiveMeOneMore (GiveMeOneMore (GiveMeOneMore (...))
- Used in Task.perform to indicate tasks that can't fail
Elm-in-elm compiler
Elm-in-elm compiler
- Currently written in Haskell (95.2%)
- Why rewrite it in elm?? 🤨
Write Elm programs with interactive code playgrounds in Elm 😍
elm-physics
Creator and maintainer of elm-physics:
- A highly experimental toy physics engine in Elm.
- https://github.com/w0rm/elm-physics
Actor Model in Elm
Albert Dahlin
Setup
- Many e-commerce Elm applications (80-110k LOC)
- 20 developers working on the projects
Challenges
- Reusing and sharing code cross-project
- Testing in isolation
- On-boarding new developers
Actor model
Code reuse
Actor model
Reusable module is called "process"
- has a unique id - PID
- defines communication via MsgIn and MsgOut
- parent connects to it via mapIn and mapOut
- processes are stored in a dictionary
NOTE: This type of architecture is natural for e.g. Erlang or Elixir, but feels really unnatural in Elm
Actor model
code example
mapIn : Msg -> Maybe Tags.MsgIn
mapIn globalMsg =
case globalMsg of
Msg.UI_Tags msg ->
Just msg
Msg.Event_Tags ->
....
mapOut : PID -> Tags.MsgOut -> SysMsg
mapOut myPid tagMsg =
case tagMsg of
Tags.GiveMeTags ->
-- fetch tags via API
Tags.TagClicked tag ->
-- load articles with the clicked tag
Designing with Elm
Jono Mallanyk
Goal
- help developers and designers work better together using Elm
- better shared tooling between developers & designers
- incorporate Elm principles in design tooling
Designing with Elm
Borrow the principles of The Elm Architecture
to create a specification language for new designs:
- define a list of user interactions that can happen (user clicked on article details - Message)
- define a list of state for the interactions (article is loading, loaded, failed - Model)
- define state transitions (failed to load article - show error screen)
Biggest Elm app in Japan
Primitive types, type alias and opaque types
-- String represents id of the team
getByTeamId : String -> Team
getByTeamId teamId =
...
type alias TeamId
= String
getByTeamId : TeamId -> Team
getByTeamId teamId =
...
- primitive type
- type alias
- Non-descriptive
- Low safety
- No encapsulation
module TeamId exposing (TeamId)
type TeamId =
TeamId String
...
- opaque types
Biggest Elm app in Japan
- Descriptive
- High safety
- High encapsulation
From experiment to production: stories of Elm at Veepee
Elm as an alternative to React/Redux
"This week I started to use react-native + redux + saga in my work, and I can't believe people are used to that. Even being one of the less awful options in the mainstream, everything crashes so easily, tons of boilerplate and unnecessary libs to connect everything together, and it's a big mess, inconsistent and over-complicated APIs, breaking changes everytime, broken tutorials, etc. Knowing Elm and typed FP made me hate everything. I hope that in a near future we will do Elm mobile development in production."
Anonymous on Elm Slack
Setup
- Update functions are decoupled from view functions
- Update and view functions live separately
- View functions receive the whole model
Making impossible video states impossible
+ livestream
video producer Dan Abrams
(* not the same person as Dan Abramov)
Live demo of the video software he made in Elm, which is, as he's giving the talk, being used to record him giving the talk.
Impossible states and transitions
Different camera views:
- Full
- Two third
- Lower third
Transitions allowed only between certain views:
type Transition
= FullToTwoThird TwoThird
| LowerThirdToFull LowerThird
STATE MACHINE
type CameraView
= Full
| TwoThird
| LowerThird
Elm as a Service
- Storage (SQL, MongoDB, ...)
- Backend
- API (REST, GraphQL, ...)
- Frontend: API access, decoders
(fetch, axios, GraphQL via Apollo/Relay/...) - Frontend state management
(Flux/Redux, Apollo/Relay cache, ...) - UI lib/framework
(React, Vue, Angular, Reason, Elm, ...)
Elm Search - Hoogle for Elm
Design tokens in elm
Make the change easy, then make the easy change
Status of Elm development
Albert: Is Evan sitting alone and working on Elm?
Richard: ...yeah, that's pretty much the case :)
He works remotely and we sometimes have a conference call to sync.
Currently designing a way to "mock" API calls in tests. Example scenario:
"Test that when we send the message, (1) the current time is picked up and (2) an API call is sent to a certain URL with the current time as the timestamp."
Elm vs React
React
- "Component-centric" architecture
- Stateful components are key in this approach
- Heavy focus on performance (concurrent mode is the upcoming big feature)
- Facebook has control, develop according to their needs
Elm
- Pure functional architecture
- No stateful components
- Heavy focus on reliability and simplicity (no runtime errors, type safety)
- Reusability might be tricky
- NoRedInk has control, develop according to their needs
deck
By margaretkru
deck
- 249