Um melhor front end com
Elm
“Uma linguagem agradável para webapps
confiáveis.”
Gere JavaScript com ótimo desempenho e
sem exceções de tempo de execução.
Por que?
Elm é simples!
.smoosh()
Eu chamo isso de meu erro de bilhões
de dólares. Foi a invenção da referência
nula em 1965. Naquela época, eu
estava projetando o primeiro sistema de
tipos abrangente para referências em
uma linguagem orientada a objetos
(ALGOL W). Meu objetivo era garantir
que todo o uso de referências fosse
absolutamente seguro, com verificação
realizada automaticamente pelo
compilador.
Mas eu não pude resistir à tentação de
colocar uma referência nula, simplesmente
porque era tão fácil de implementar. Isso
levou a inúmeros erros, vulnerabilidades e
falhas no sistema, que provavelmente
causaram um bilhão de dólares de dor e
danos nos últimos
Confiança!
Confiança!
Esqueça o que você
ouviu sobre
programação
funcional. Palavras
extravagantes, idéias
estranhas,
ferramentas ruins.
OO patterns / principles FP patterns / principles
• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
OO patterns / principles FP patterns / principles
• Functions• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
OO patterns / principles FP patterns / principles
• Functions
• Functions
• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
OO patterns / principles FP patterns / principles
• Functions
• Functions
• Functions
• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
OO patterns / principles FP patterns / principles
• Functions
• Functions
• Functions
• Functions, also
• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
OO patterns / principles FP patterns / principles
• Functions
• Functions
• Functions
• Functions, also
• Functions...
• Functions
• Functions
• Functions
• Single Reponsability Principle
• Open / Close Principle
• Dependency Inversion Principle
• Interface Segragation Principle
• Factory Pattern
• Strategy Pattern
• Decorator Pattern
• Visitor Pattern
Arquitetura “Elmish”
Unidirectional data flow
• Serviu de inspiração para o Redux
Como funciona?
Como funciona?
• Model / State
Como funciona?
• Model / State
• Message / Action
Como funciona?
• Model / State
• Message / Action
• Update / Reducer
Como funciona?
• Model / State
• Message / Action
• Update / Reducer
• View
Por que?
A Model é imutável,
o update é sempre
chamado de forma
síncrona, sem
problemas com
threads
Sua model se torna
a fonte única do
estado da sua
aplicação – Nunca
mais controlar
estado em múltiplas
camadas
Tendo uma UI virtual
por baixo dos panos
permite que você
consiga realizar
testes unitários em
tudo – Model, View,
Update
Funções de View
podem rodar fora da
thread de UI se
necessário
Por que?
A Model é imutável,
o update é sempre
chamado de forma
síncrona, sem
problemas com
threads
Sua model se torna
a fonte única do
estado da sua
aplicação – Nunca
mais controlar
estado em múltiplas
camadas
Tendo uma UI virtual
por baixo dos panos
permite que você
consiga realizar
testes unitários em
tudo – Model, View,
Update
Funções de View
podem rodar fora da
thread de UI se
necessário
Por que?
A Model é imutável,
o update é sempre
chamado de forma
síncrona, sem
problemas com
threads
Sua model se torna
a fonte única do
estado da sua
aplicação – Nunca
mais controlar
estado em múltiplas
camadas
Tendo uma UI virtual
por baixo dos panos
permite que você
consiga realizar
testes unitários em
tudo – Model, View,
Update
Funções de View
podem rodar fora da
thread de UI se
necessário
Por que?
A Model é imutável,
o update é sempre
chamado de forma
síncrona, sem
problemas com
threads
Sua model se torna
a fonte única do
estado da sua
aplicação – Nunca
mais controlar
estado em múltiplas
camadas
Tendo uma UI virtual
por baixo dos panos
permite que você
consiga realizar
testes unitários em
tudo – Model, View,
Update
Funções de View
podem rodar fora da
thread de UI se
necessário
Por que?
A Model é imutável,
o update é sempre
chamado de forma
síncrona, sem
problemas com
threads
Sua model se torna
a fonte única do
estado da sua
aplicação – Nunca
mais controlar
estado em múltiplas
camadas
Tendo uma UI virtual
por baixo dos panos
permite que você
consiga realizar
testes unitários em
tudo – Model, View,
Update
Funções de View
podem rodar fora da
thread de UI se
necessário
Mensagens de Erro
Incríveis
To-do demo!
Perguntas?

Um melhor frontend com elm

  • 1.
    Um melhor frontend com Elm
  • 3.
    “Uma linguagem agradávelpara webapps confiáveis.”
  • 4.
    Gere JavaScript comótimo desempenho e sem exceções de tempo de execução.
  • 5.
  • 13.
  • 14.
  • 18.
    Eu chamo issode meu erro de bilhões de dólares. Foi a invenção da referência nula em 1965. Naquela época, eu estava projetando o primeiro sistema de tipos abrangente para referências em uma linguagem orientada a objetos (ALGOL W). Meu objetivo era garantir que todo o uso de referências fosse absolutamente seguro, com verificação realizada automaticamente pelo compilador.
  • 19.
    Mas eu nãopude resistir à tentação de colocar uma referência nula, simplesmente porque era tão fácil de implementar. Isso levou a inúmeros erros, vulnerabilidades e falhas no sistema, que provavelmente causaram um bilhão de dólares de dor e danos nos últimos
  • 25.
  • 26.
  • 28.
    Esqueça o quevocê ouviu sobre programação funcional. Palavras extravagantes, idéias estranhas, ferramentas ruins.
  • 29.
    OO patterns /principles FP patterns / principles • Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 30.
    OO patterns /principles FP patterns / principles • Functions• Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 31.
    OO patterns /principles FP patterns / principles • Functions • Functions • Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 32.
    OO patterns /principles FP patterns / principles • Functions • Functions • Functions • Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 33.
    OO patterns /principles FP patterns / principles • Functions • Functions • Functions • Functions, also • Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 34.
    OO patterns /principles FP patterns / principles • Functions • Functions • Functions • Functions, also • Functions... • Functions • Functions • Functions • Single Reponsability Principle • Open / Close Principle • Dependency Inversion Principle • Interface Segragation Principle • Factory Pattern • Strategy Pattern • Decorator Pattern • Visitor Pattern
  • 88.
  • 89.
    • Serviu deinspiração para o Redux
  • 90.
  • 91.
  • 92.
    Como funciona? • Model/ State • Message / Action
  • 93.
    Como funciona? • Model/ State • Message / Action • Update / Reducer
  • 94.
    Como funciona? • Model/ State • Message / Action • Update / Reducer • View
  • 97.
    Por que? A Modelé imutável, o update é sempre chamado de forma síncrona, sem problemas com threads Sua model se torna a fonte única do estado da sua aplicação – Nunca mais controlar estado em múltiplas camadas Tendo uma UI virtual por baixo dos panos permite que você consiga realizar testes unitários em tudo – Model, View, Update Funções de View podem rodar fora da thread de UI se necessário
  • 98.
    Por que? A Modelé imutável, o update é sempre chamado de forma síncrona, sem problemas com threads Sua model se torna a fonte única do estado da sua aplicação – Nunca mais controlar estado em múltiplas camadas Tendo uma UI virtual por baixo dos panos permite que você consiga realizar testes unitários em tudo – Model, View, Update Funções de View podem rodar fora da thread de UI se necessário
  • 99.
    Por que? A Modelé imutável, o update é sempre chamado de forma síncrona, sem problemas com threads Sua model se torna a fonte única do estado da sua aplicação – Nunca mais controlar estado em múltiplas camadas Tendo uma UI virtual por baixo dos panos permite que você consiga realizar testes unitários em tudo – Model, View, Update Funções de View podem rodar fora da thread de UI se necessário
  • 100.
    Por que? A Modelé imutável, o update é sempre chamado de forma síncrona, sem problemas com threads Sua model se torna a fonte única do estado da sua aplicação – Nunca mais controlar estado em múltiplas camadas Tendo uma UI virtual por baixo dos panos permite que você consiga realizar testes unitários em tudo – Model, View, Update Funções de View podem rodar fora da thread de UI se necessário
  • 101.
    Por que? A Modelé imutável, o update é sempre chamado de forma síncrona, sem problemas com threads Sua model se torna a fonte única do estado da sua aplicação – Nunca mais controlar estado em múltiplas camadas Tendo uma UI virtual por baixo dos panos permite que você consiga realizar testes unitários em tudo – Model, View, Update Funções de View podem rodar fora da thread de UI se necessário
  • 108.
  • 119.
  • 122.