Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Front-End Funcional Com ELM - Front End SP #5
Search
Ana Luiza Portello
September 01, 2017
Programming
1
110
Front-End Funcional Com ELM - Front End SP #5
https://www.meetup.com/Frontend-Dev-SP-Meetup/events/242887383/?eventId=242887383
Ana Luiza Portello
September 01, 2017
Tweet
Share
More Decks by Ana Luiza Portello
See All by Ana Luiza Portello
FRONTIN | Elas Programam - Programação Funcional no Front-end
anabastos
0
92
Workshop JSFP - SEMCOMP 2021
anabastos
0
270
Clojure é um Java melhor que Java - Codecon 2021
anabastos
0
150
Clojure 101 - Criciuma Dev
anabastos
0
320
TDC POA - GraphQL
anabastos
1
260
TDC Porto Alegre 2019 - JS Funcional com Ramda
anabastos
0
240
BackEndSP - GraphQL
anabastos
0
230
Git & Github - RLadies
anabastos
1
230
Programaria Summit - Performance FrontEnd
anabastos
1
220
Other Decks in Programming
See All in Programming
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
270
CSC305 Summer Lecture 12
javiergs
PRO
0
130
Rancher と Terraform
fufuhu
0
110
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.1k
RDoc meets YARD
okuramasafumi
3
140
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
730
A Gopher's Guide to Vibe Coding
danicat
0
170
AHC051解法紹介
eijirou
0
620
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
140
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
🔨 小さなビルドシステムを作る
momeemt
2
550
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Scaling GitHub
holman
462
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
BBQ
matthewcrist
89
9.8k
For a Future-Friendly Web
brad_frost
179
9.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
Building an army of robots
kneath
306
46k
Writing Fast Ruby
sferik
628
62k
Transcript
@anabastos ANA PORTELLO http://anabastos.github.io/ Full-Stack na Horizon Four.
JSLADIES https://fb.com/jsladiesbr https://twitter.com/jsladiessp https://meetup.com/JsLadies-BR/
ELM FRONT-END FUNCIONAL COM
PRECISAMOS FALAR SOBRE JAVASCRIPT
JORNADA DO JAVASCRIPT
Nenhum pattern que as pessoas falam que é o certo.
10 formas de fazer um objeto. 20 formas de invocar uma função.
http://www.phpied.com/files/location-location/location-location.html
“undefined is not a function” “cannot read property of undefined”
Terminal começa a jogar na nossa cara coisas tipo
None
WTFJS https://github.com/denysdovhan/wtfjs
None
None
None
SERÁ QUE APRENDER JS É SIMPLES?
None
O QUE É ELM?
Mantainable but kind of scary Tipos estaticos OO Langs Linguagens
Maneiras & Dinamicas Mantenabilidade (Facilidade p/ adicionar features) Usavel Fácil de aprender e de pôr em produção
O UNICÓRNIO MÁGICO DO FRONT-END
ELM é tanto uma linguagem de programação quanto um ECOSSISTEMA.
DESIGN da linguagem foi feito pra tentar de ajudar a
fazer APLICAÇÕES ROBUSTAS de forma simples.
FEITO PELO Evan Czaplicki
COMPILADO
HTML, JS, etc.. MAGICAL ELM CODE intuitive compiler...
Mensagens de ERRO informativas
None
É uma LINGUAGEM ESTATICAMENTE tipada.
String Bool List Float Int Record
É uma linguagem funcional
Nenhuma lib ou framework js pode te prover as vantagens
do funcional.
• Nunca fica legado: Codigo bem arquiteturado que continua bem
arquiteturado mesmo com o crescimento da sua aplicação • Anti-Gambiarra: Menos Bugs pq todas as funções são puras. • Declarativo: Sucinto, Reusavel, e deixa tudo muito mais claro quando vc está lidando com estado
IMUTÁVEL
“null” “NaN” “undefined is not a function”
Sem problemas de RUNTIME. Compilou tá certo.
NoRedInk has 80k+ lines of ELM, and after more than
a year in production, it still has not produced a single runtime exception. http://elm-lang.org/
É focado em ser SIMPLES e PERFORMÁTICO.
import html main = Html.text "Hello"
add x y = x + y
Valoriza MUITO simplicidade
CURVA DE APRENDIZAGEM Muito conteúdo, exemplos, tutoriais, etc.
None
None
None
AMBIENTE
npm install -g elm
SUPORTE PARA EDITORES DE TEXTO
elm-package http://package.elm-lang.org/
elm-package.json elm-stuff/ elm-package install elm-lang/html
elm-make
elm-repl
elm-format
elm-reactor
None
TIME TRAVELLING DEBUG http://debug.elm-lang.org/edit/Mario.elm
PROBLEMAS DE DOM
REAL DOM VIRTUAL DOM
?
BLAZING FAST RENDERING 50% mais rapido que React
None
Blazing fast DOM
REDUX é inspirado no ELM
ARQUITETURA
Dataflow UNIDIRECIONAL. Estado IMUTÁVEL. Efeitos COLATERAIS CONTROLADOS.
MODEL VIEW UPDATE RENDER M SG
main = contador { model = model, view = view,
update = update }
Descreve o estado da sua tela Model State
Model 0 { Model = 0 }
Recebe o estado e renderiza a nossa view(HTML) de forma
declarativa. View Render
View div [] [ button [ onClick Decrement ] [
text "-" ] , div [] [ text “” ] , button [ onClick Increment ] [ text "+" ] ] + - ~virtual dom~
View 0 view model = div [] [ button [
onClick Decrement ] [ text "-" ] , div [] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ] + -
É o evento base p/ todos os eventos acontecendo quando
rola interação na ui(clicks, inputs, etc) Msgs Actions
type Msg = Increment | Decrement Increment Decrement 0 +
-
Recebe uma msg e state como input Retorna um novo
estado e cmd. Essa função é pura e não gera efeitos colaterais Update Reduce
type Msg = Increment | Decrement update msg model =
case msg of Increment -> model + 1 Decrement -> model - 1 0 + - Update
http://elm-lang.org/examples/buttons
DEMO
https://github.com/pzavolinsky/elm-bootstrap https://package.elm-lang.org/packages/jystic/elm-font-awesome https://package.elm-lang.org/packages/TheSeamau5/elm-material-icons https://github.com/debois/elm-mdl
REACT ELM COMPONENTS https://github.com/evancz/react-elm-components
try-elm/examples learnyouanelm.github.io/ elm-lang.org/ elmrepl.cuberoot.in/
t.me/elmbrasil elmlang.slack.com/ elmweekly.nl/
OBRIGADA :) https://speakerdeck.com/anabastos
DÚVIDAS?