Elm a possible future for web frontend
-
Upload
gaetano-contaldi -
Category
Technology
-
view
115 -
download
0
Transcript of Elm a possible future for web frontend
![Page 1: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/1.jpg)
ELMA possible future for web frontend
![Page 2: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/2.jpg)
Agenda
What is Elm? Elm features Elm ecosystem
Elm architecture
Why a possible future?
![Page 3: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/3.jpg)
What is Elm?
![Page 4: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/4.jpg)
Functional language
ML style language
Inspired by Haskell
![Page 5: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/5.jpg)
Elm features
![Page 6: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/6.jpg)
Statically typed∎ Primitive types∎ Basic data structures∎ Union types
![Page 7: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/7.jpg)
![Page 8: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/8.jpg)
Never null again
![Page 9: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/9.jpg)
![Page 10: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/10.jpg)
Immutability
![Page 11: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/11.jpg)
![Page 12: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/12.jpg)
Purely functional∎ Functions depend only on passed arguments∎ No side effects
![Page 13: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/13.jpg)
Effects
![Page 14: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/14.jpg)
Effects in JS
∎ Synchronous∎ Asynchronous via callback∎ Asynchronous via promise
![Page 15: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/15.jpg)
![Page 16: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/16.jpg)
MOCKS
![Page 17: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/17.jpg)
![Page 18: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/18.jpg)
![Page 19: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/19.jpg)
Effects as Data
![Page 20: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/20.jpg)
![Page 21: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/21.jpg)
![Page 22: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/22.jpg)
Effects in Elm
∎ Synchronous via Messages∎ Asynchronous via Tasks
![Page 23: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/23.jpg)
Elm Tasks
∎ Module for async actions that might fail∎ Tasks can be easily chained together∎ Lazy: nothing will happen until something run them.
![Page 24: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/24.jpg)
Interop with JS: Ports∎ Only way you have to receive or send informations from JS.∎ It works like a pub-sub mechanism.
![Page 25: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/25.jpg)
Elm architecture
![Page 26: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/26.jpg)
Basic Pattern:Counter App∎ Model∎ Messages∎ Update∎ View
![Page 27: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/27.jpg)
here
![Page 28: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/28.jpg)
![Page 29: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/29.jpg)
Counter:User Flow
User clicks on the “+” button
Increment action is fired
Update function gets called
View gets updated
![Page 30: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/30.jpg)
Commands and Subscriptions∎ Commands: Tasks that Elm runs for you in the background∎ Subscriptions: subscribe to data you care about
![Page 31: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/31.jpg)
Subs Pattern:Dice Roller App
![Page 32: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/32.jpg)
Dice Roller:User Flow
User clicks on the “Roll” button
Roll action is fired
Update function returns
command
Elm executes the task
“New Number” action is
fired
Update function
gets called
View gets updated
![Page 33: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/33.jpg)
here
![Page 34: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/34.jpg)
here
![Page 35: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/35.jpg)
here
![Page 36: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/36.jpg)
here
![Page 37: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/37.jpg)
![Page 38: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/38.jpg)
Why a possible future?
![Page 39: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/39.jpg)
![Page 40: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/40.jpg)
I don’t need Elm!Functional programming Modern JS is inspired by FP
Components React
Effect as data Flux / Redux
Type checking Flow.js / Typescript
Immutability ImmutableJS / Ramda / Lodash
Modules Webpack / Babel
![Page 41: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/41.jpg)
∎ Syntax∎ Types∎ Immutability
Learning curve
∎ Compiling∎ Maybe and explicit error
handling
![Page 42: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/42.jpg)
Use JS means...
![Page 43: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/43.jpg)
Hard to start new projects
![Page 44: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/44.jpg)
Optional features
![Page 45: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/45.jpg)
Relies on programmers
![Page 46: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/46.jpg)
![Page 47: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/47.jpg)
Everything that is syntactically legal, that the compiler will accept, will eventually wind up in your code base.
John Carmack
![Page 48: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/48.jpg)
Elm instead...
![Page 49: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/49.jpg)
Guided programmers
![Page 50: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/50.jpg)
Code easy to understand
![Page 51: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/51.jpg)
Code easy to test
![Page 52: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/52.jpg)
Elm ecosystem
![Page 53: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/53.jpg)
Elm reactor
![Page 54: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/54.jpg)
Elmpackages
![Page 55: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/55.jpg)
Will Elm be the future?
![Page 56: Elm a possible future for web frontend](https://reader031.fdocuments.net/reader031/viewer/2022022203/587071de1a28ab48378b7b6d/html5/thumbnails/56.jpg)