Trilha DevOps How we figured out we had a SRE team at JavaScript

1. Marcel Gonçalves dos Santos
@marcelgsantos
programação funcional
no front-end
a Elm
Introdução

2. pensandonaweb.com.br
desenvolvedor web full-stack
Marcel Gonçalves dos Santos
@marcelgsantos

4. @femugsp
sp.femug.com

5. @phpsp
phpsp.org.br

6. O que é Elm?

7. é uma linguagem de
programação funcional

8. projetada para o
front-end

9. Características

10. foi cuidadosamente
projetada por Evan Czaplicki

11. é poderosa e simples
de utilizar

12. possui tipagem forte e
estática

13. ou seja, sem erros em tempo de
execução!

14. de fácil depuração e
refatoração

15. melhor testabilidade

16. força o versionamento
semântico

17. Ambiente

18. possui instalador para
Windows e Mac

19. pode ser instalado
através do NPM

20. ➜ npm intall -g elm

21. possui excelente suporte
para editores como
Atom e Sublime

22. pode-se utilizar o elm-format
e o elm-oracle para
formatação e auto-complete

23. e fazer a integração com o
editor de texto predileto

24. elm repl
ferramenta de read-eval-print
loop na linha de comando

25. elm make
ferramenta para compilação
de seu código Elm

26. elm package
ferramenta de gerenciamento
de pacotes do Elm

27. elm reactor
ferramenta que compila e cria
um servidor automaticamente
para rodar o seu projeto

28. Programação
Funcional

29. paradigma de programação
com foco em funções
matemáticas e na
transformação de estados

30. possui funções de alta ordem
e de primeira classe

31. as funções puras são funções
livres de efeitos colaterais

32. as funções puras são
reusáveis, componíveis,
testáveis, cacheáveis e
paralelizáveis

33. a aplicação parcial de
funções permite chamar uma
função passando parte de
seus argumentos

34. o currying é uma forma de
aplicação parcial de uma
função

35. a recursão é utilizada
para iteração

36. uma aplicação é composta
por estado e alteração do
estado

37. a imutabilidade permite um
melhor controle do estado

38. a programação funcional é
sobre eliminar o estado
quando possível e controlar o
estado quando necessário

39. é possível utilizar a
programação funcional em
linguagens não-funcionais
como JavaScript, PHP e Ruby

40. A linguagem

41. uma aplicação mínima
em Elm

42. module Main exposing (..)
import Html
main =
Html.text "Hello World!"

43. ➜ elm package install elm-lang/html

44. um arquivo com as
dependências chamado
elm-package.json é criado

45. e também um diretório
chamado elm-stuff

46. ➜ elm reactor

47. uma função em Elm

48. add x y = x + y

49. module Main exposing (..)
import Html
add x y =
x + y
main =
Html.text ("1 + 2 is " ++ (toString (add 1 2)))

50. podemos utilizar o operador
pipe|> semelhante a linha
de comando Unix

51. module Main exposing (..)
import Html
import String
add x y =
x + y
main =
add 1 2
|> toString
|> String.append "1 + 2 is "
|> Html.text

52. para criar funções anônimas
utilizamos a barra invertida

53. module Main exposing (..)
import Html
import List
numbers =
[ 1, 2, 3 ]
main =
List.map (a -> a * 2) numbers
|> toString
|> Html.text

54. podemos utilizar o operador
de composição >> para fazer
composição de funções

55. module Main exposing (..)
import Html
import List
double x =
x * 2
plus1 x =
x + 1
doublePlus1 =
double >> plus1
main =
List.map doublePlus1 [ 1, 2, 3 ]
|> toString
|> Html.text

56. o currying de funções é
feito automaticamente

57. module Main exposing (..)
import Html
add x y =
x + y
plus1 =
add 1
main =
plus1 9
|> toString
|> Html.text

58. é possível definir valores
locais utilizando o
bloco let..in

59. module Main exposing (..)
import Html
import String
joinUpper x y =
let
text =
x ++ y
in
String.toUpper text
main =
joinUpper "hello " "world"
|> Html.text

60. e definir condições utilizando
o bloco if..then…else

61. pattern matching é uma
funcionalidade muito
importante

62. o Elm possui tipos primitivos
como String, Char, Bool,
Float e number

63. o tipo List representa uma
lista de valores todos do
mesmo tipo

64. module Main exposing (..)
import Html
import List
numbers =
[ 1, 2, 3 ]
main =
List.map (a -> a * 2) numbers
|> toString
|> Html.text

65. o tipo tupla representa uma
lista ordenada de valores,
por exemplo (“pi”, 3.14)

66. o tipo record representa
uma estrutura de dados
semelhante a um objeto em
JavaScript

67. module Main exposing (..)
import Html
import String
person =
{ name = "James", age = 42 }
main =
String.append "Hello " person.name
|> Html.text

68. em Elm, as estruturas de
dados são imutáveis

69. module Main exposing (..)
import Html
import String
person =
{ name = "James", age = 42 }
newPerson =
{ person | age = 32 }
main =
"My age is "
++ (toString newPerson.age)
|> Html.text

70. tipos mais complexos
podem ser representados
através de union types

71. as union types assemelham-
se a enumerações de tipos
diferentes

72. type Msg
= Edit Player
| Score Player Int
| Input String
| Save
| Cancel
| DeletePlay Play

73. os type aliases permite criar
novos tipos a partir de tipos
existentes

74. type alias Player =
{ id : Int
, name : String
, points : Int
}
type alias Play =
{ id : Int
, playerId : Int
, name : String
, points : Int
}
type alias Model =
{ players : List Player
, name : String
, playerId : Maybe Int
, plays : List Play
}

75. o tipo Maybe é uma union
type que pode ter ou não um
valor

76. type Maybe a
= Just a
| Nothing

77. as anotações de tipo são
utilizadas para informar o
tipo de entrada e saída de
uma função ou constante

78. module Main exposing (..)
import Html
add : Int -> Int -> Int
add x y =
x + y
main =
"2 + 3 is "
++ toString (add 2 3)
|> Html.text

79. a anotação de tipos é
opcional em Elm

80. o compilador pode
inferir os tipos

81. Aplicação Elm

82. uma aplicação Elm possui
três partes: model, view e
update

83. a model é um contêiner que
armazena os dados que a
aplicação necessita

84. a model pode ser um tipo
primitivo como um Int ou
String ou um tipo complexo
como um Record

85. o update é responsável por
atualizar a model ou estado
da aplicação

86. na seção update definimos
(1) o que pode acontecer na
aplicação e (2) como a
model é atualizada

87. a função update retorna
uma nova model atualizada

88. a view é responsável por criar
uma representação visual do
estado da aplicação

89. a view é criada de maneira
declarativa

90. as funções responsáveis pela
criação das tags HTML
possuem assinaturas
consistentes

91. a função beginnerProgram é
responsável por juntar as três
partes de uma aplicação Elm

92. o módulo Html.App é
responsável por: (1) manter o
estado da aplicação, (2)
gerenciar as mensagens e (3)
chamar view e update

93. Quem usa?

94. * Prezi
* NoRedInk
* Adobe
* Serenata de Amor (Jarbas)
Empresas e projetos

95. Referências

96. * elm-lang.org
* www.elm-tutorial.org
* learnxinyminutes.com/docs/elm
* bit.ly/vamos-aprender-elm
* bit.ly/aprenda-elm-em-y-minutos
* elmweekly.nl
Tutoriais e vídeos

97. * @czaplic
* @rtfeldman
* @jessitron
* @_rchaves_
* @cuducos
* @elmlang
* @elmweekly
* @elmconf
Quem seguir no Twitter?

98. Avalie!

99. bit.ly/avalie-elm-floripa

100. Perguntas?

101. Obrigado.
@marcelgsantos
speakerdeck.com/marcelgsantos