Recommended
More Related Content
Similar to Xamarin.Forms com Elmish e F
Similar to Xamarin.Forms com Elmish e F (20)
More from Lucas Teles
More from Lucas Teles (15)
Xamarin.Forms com Elmish e F
- 2. O que é Elmish?
- 4. “Uma linguagem agradável para webapps confiáveis.”
- 5. Arquitetura
- 6. • Programação OO • Models complexas e mutaveis • UI estatica e declarativa • View em uma 2 linguagem • Complexas ferramentas de design MVVM(model-view-viewmodel) MVU(model-view-update) • Programação funcional • Modelos simples e declarativos • UI declarative e dinamica • View na mesma linguagem DSL • Ferramentas simples de live coding
- 7. MVVM vs MVU
- 8. • Serviu de inspiração para o Redux
- 10. Como funciona? • Model / State
- 11. Como funciona? • Model / State • Message / Action
- 12. Como funciona? • Model / State • Message / Action • Update / Reducer
- 13. Como funciona? • Model / State • Message / Action • Update / Reducer • View
- 15. 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
- 16. 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
- 17. 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
- 18. 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
- 19. Elm também é uma linguagem
- 20. Elm também é uma linguagem Funcional
- 21. F#
- 22. Sobre • Desenvolvido pela Microsoft Research – Incluído junto com Visual Studio in 2010
- 23. Sobre • Desenvolvido pela Microsoft Research – Incluído junto com Visual Studio in 2010 • Open source – GitHub
- 24. Sobre • Desenvolvido pela Microsoft Research – Incluído junto com Visual Studio in 2010 • Open source – GitHub • Cross platform – Funciona com VS Code (e outros)
- 25. Sobre • Desenvolvido pela Microsoft Research – Incluído junto com Visual Studio in 2010 • Open source – GitHub • Cross platform – Funciona com VS Code (e outros) • Comunidade ativa – fsharp.org – F# Slack channel
- 26. Sobre • Roda em cima do CLR
- 27. Sobre • Roda em cima do CLR • Interopera com outras linguagens .NET
- 28. Sobre • Roda em cima do CLR • Interopera com outras linguagens .NET • É turing completa
- 29. Sobre • Roda em cima do CLR • Interopera com outras linguagens .NET • É turing completa • É possível usufruir de qualquer bibliotecas escritas em/para C# tal como EntityFramework, ASP.NET, Xamarin, etc.
- 30. Introdução
- 33. Classes
- 41. Imutabilidade
- 45. Não null por default
- 52. Tudo tem que ser inicializado!
- 56. Piping
- 57. Piping (F#)
- 58. Piping (F#)
- 59. Piping (F#)
- 60. Sistema de tipos algébrico
- 61. Tipos novos podem ser criados a partir de tipos menores usando:
- 62. “AND” types
- 63. “AND” types
- 64. “OR” types
- 65. “OR” types
- 66. • Exemplo de alguns requisitos:
- 67. • Exemplo de alguns requisitos: • Aceitamos três formas de pagamento: Dinheiro, cheque ou cartão.
- 68. • Exemplo de alguns requisitos: • Aceitamos três formas de pagamento: Dinheiro, cheque ou cartão. • Para dinheiro, não precisamos de nenhuma informação extra
- 69. • Exemplo de alguns requisitos: • Aceitamos três formas de pagamento: Dinheiro, cheque ou cartão. • Para dinheiro, não precisamos de nenhuma informação extra • Para cheques, precisamos do número do cheque
- 70. • Exemplo de alguns requisitos: • Aceitamos três formas de pagamento: Dinheiro, cheque ou cartão. • Para dinheiro, não precisamos de nenhuma informação extra • Para cheques, precisamos do número do cheque • Para cartões, precisamos do tipo de cartão e do número do cartão
- 72. Em F# iriamos compor os tipos da seguinte forma
- 73. Em F# iriamos compor os tipos da seguinte forma
- 74. Em F# iriamos compor os tipos da seguinte forma
- 75. Em F# iriamos compor os tipos da seguinte forma
- 76. Em F# iriamos compor os tipos da seguinte forma
- 77. Em F# iriamos compor os tipos da seguinte forma
- 78. Xamarin Forms com F#
- 79. Demo!
- 81. Xamarin Forms com Fabulous (static view)
- 82. Model, Messages e updates são definidos no F# Views são definidas com XAML e data bindings A model de retorno da função de update atualiza os bindings A função de Vew retorna a page com os bindings
- 83. Demo!
- 84. Xamarin Forms com Fabulous (Full-Elmish)
- 85. Model, Messages e updates são definidos no F# Views são definidas com no F# utilizando virtual UI A model de retorno da função de update atualiza a UI virtual A função Vew retorna uma UI virtual e o framework Elmish procura pelas diferenças e atualiza a UI
- 86. UI dinâmica vs Estática
- 87. UI dinâmica vs Estática
- 88. UI dinâmica vs Estática
- 89. UI dinâmica vs Estática
- 90. Demo!
- 92. let view (model: Model) dispatch = View.ContentPage(content= View.StackLayout(padding=30.0,verticalOptions = LayoutOptions.Center, children=[ View.Label(text= string model.Count, horizontalOptions=LayoutOptions.Center) View.Button(text="Increment", command= (fun () -> dispatch Increment)) View.Button(text="Decrement", command= (fun () -> dispatch Decrement)) View.Slider(minimum=0.0, maximum=10.0, value=model.Step, valueChanged= (fun args -> dispatch (SetStep (int args.NewValue)))) View.Label(text=sprintf "Step size: %d" model.Step, horizontalOptions=LayoutOptions.Center) View.Button(text="Reset", horizontalOptions=LayoutOptions.Center, command=(fun () -> dispatch Reset), canExecute = not model.Unchanged) ]))