TDC2018SP | Trilha Modern Web - Blazor - C# rodando no navegador padrao, sem plugins e sem as maos

1. Globalcode – Open4education
Modern Web - Blazor - C# rodando
no navegador padrão, sem plugins
e sem as mãos
Antonio Maniero
Microsoft MVP

2. Globalcode – Open4education
Antonio Maniero
❖ Engenheiro desde que nasceu, escovador de bits desde o primeiro
computador c/ 2KB de memória e tarado por eficiência e simplicidade
❖ Desenvolvedor generalista há 35 anos. Especialista em ERP. Sistemas
LOB rodando em dezenas de milhares de empresas de todos os portes e
setores no Brasil e exterior para milhões de usuários corporativos
❖ Aficionado por linguagens de programação
❖ Apaixonado por ensinar, compartilhar conhecimento
❖ MVP sem querer ☺
pt.stackoverflow.com/users/101/maniero
linkedin.com/in/maniero/
facebook.com/antonio.maniero.junior
twitter@manieromvp jumbo.com.br

3. Globalcode – Open4education
Histórico do .NET
• Iniciado nos anos 90 para competir com Java
• Multi-linguagem, C# prioridade
• Estratégia central da Microsoft para devs
• Gerenciado, seguro, poderoso, produtivo, etc.
• Lançado em 2002 com o ASP.NET Web Forms
• Jeitão século XX de stack de tecnologia
• Parte do sistema operacional

4. Globalcode – Open4education
Frameworks web
• Soluções diversas de terceiros
• ASP.NET MVC (2007)
• ASP.NET Web API
• ASP.NET Web Pages
• ASP.NET WebHooks
• ASP.NET SignalR
• ASP.NET Handler, AJAX, Dynamic Data

5. Globalcode – Open4education
ASP.NET MVC

6. Globalcode – Open4education
ASP.NET MVC
• 100% open em todos os sentidos, até plataforma
• Mais leve, mas configurável, extensível, testável
• Integração com Entity Framework, auto-binding
• Roteamento, filtros, seletores, validação
• Segurança, autorização, autenticação, caching
• Layouts, temas, integração com o cliente (JS)
• Escolha de template engines (padrão Web Forms)

7. Globalcode – Open4education
ASP.NET MVC
• Razor (2011)

8. Globalcode – Open4education
O que é o Razor
• Template engine para View do MVC
• Suporte do Visual Studio, desenvolvimento fluido
• Compilada
• Extensível (tag helpers)
• Pode conter código
• Razor Pages -> fusão do Controller com a View

9. Globalcode – Open4education
ASP.NET Core
• Parte do .NET Core, muito mais simples de deploy
• Totalmente multiplataforma com suporte
• Foco na comunidade, rápida evolução
• Otimizado para backend, nuvem, container,
microsserviços, IoT, self hosting ou não
• Altíssima performance
• Liga bem com Angular, React, etc.
• Mono ainda é útil, cada vez mais igual ao Core

10. Globalcode – Open4education
ASP.NET Core

11. Globalcode – Open4education
ASP.NET Core

12. Globalcode – Open4education
Como ele vai para o frontend
• Servidor HTTP ou processo self host é invocado
• Processa o que precisa da requisição, pega dados
• Se necessário vai ao modelo, DB, etc.
• Renderiza um HTML conforme template e helpers
• Monta texto fixo, chama o código que preenche lacunas
• Manda para o requisitante o HTML “puro” (texto)
• Pode entregar outros tipos de dados como JS

13. Globalcode – Open4education
O que é o WebAssembly
• É uma especificação e uma iniciativa (LLVM)
• Fomato de instrução binário para uma máquina virtual
• CIL, JVM, bytecode, pcode, IR
• Linguagem de baixo nível como de um processador
• Arquivo é binário e não texto, bytes representam código
• Instruções gerais sem muita semântica específica
• Camada mais textual para “programar”
• Na prática só gerado por um compilador
• Substituto do asm.js – rodar C/C++

14. Globalcode – Open4education
O que é o WebAssembly

15. Globalcode – Open4education
O que é o WebAssembly

16. Globalcode – Open4education
Porque ele existe
• Performance para iniciar (20x+) – JITter x AOT
• Conteúdo compacto, Streaming
• Performance para executar
• Ganhos enormes no 1.0 e ainda está engatinhando
• Mais fácil adicionar features em algo mais low level
• E algo greenfield
• Permite novas semânticas, novas otimizações
• Stack Web não é mais usado só para UI

17. Globalcode – Open4education
Confusão para que ele serve
• Site oficial é um pouco vago e propõe algo
bastante conservador e sem ambição
• A realidade que é provavelmente a maior
revolução da web desde sua criação
• Se ler todo o site verá que tem muita ambição ali
• Os players da web estão correndo para oferecer
mais com WebAssembly
• Algumas pessoas acreditam que muda nada

18. Globalcode – Open4education
Reinventar a roda

19. Globalcode – Open4education
O que é o Blazor

20. Globalcode – Open4education
Equipe
• Steve Sanderson
• Time oficial da Microsoft
• Rodrigo Kumpera
• Mono Runtime Team Lead
• Miguel de Icaza
• Xamarin – Mono Lead

21. Globalcode – Open4education
Como ele vai p/ o browser

22. Globalcode – Open4education
Como ele vai p/ o browser

23. Globalcode – Open4education
Como ele vai p/ o browser

24. Globalcode – Open4education
Onde pode rodar
• Chrome 66
• Firefox 60
• Edge 17
• Safari 11.1
• iOS Safari 11.2
• Android 67
• Samsung 7.2
• Node 8/ Electron
• Xamarin
• Asm.js

25. Globalcode – Open4education
Difere de Angular, React, Vue
• Escrito em C#
• Engine de template totalmente diferente
• Compilado
• Biblioteca muito mais poderosa
• Alta performance
• Modelo de todos componentes diferentes
• Menos maduro e comunidade começando
• Mais tooling

26. Globalcode – Open4education
Usando como PWA
• Ainda não
• Uma das maiores vantagens dele é como PWA
• Trabalha offline por natureza
• Rápido, permite melhor UX
• Pode ser pinado e receber notificação
• Service worker, Manifest, Icons
• Xamarin (Ooui)

27. Globalcode – Open4education
Interoperabilidade com JS

28. Globalcode – Open4education
Interoperabilidade com JS
• Estão melhorando o acesso nativo

29. Globalcode – Open4education
Interoperabilidade com JS

30. Globalcode – Open4education
Interoperabilidade com JS

31. Globalcode – Open4education
Difere do .NET no backend
• Tudo que é IO é potencialmente diferente
• Qualquer item dependente do sistema operacional
• O que é inseguro rodar livremente
• Códigos muito corner case
• Não pode ir além do .NET Standard
• Acessa API do browser
• Pode ser muito pesado atualmente para frontend

32. Globalcode – Open4education
Exemplos de códigos

33. Globalcode – Open4education
Exeutando

34. Globalcode – Open4education
Criando projeto

35. Globalcode – Open4education
Criando projeto

36. Globalcode – Open4education
Exemplos de códigos

37. Globalcode – Open4education
Exemplos de códigos

38. Globalcode – Open4education
Exemplos de códigos

39. Globalcode – Open4education
Exemplos de códigos

40. Globalcode – Open4education
Exemplos de códigos

41. Globalcode – Open4education
Exemplos de códigos

42. Globalcode – Open4education
Exemplos de códigos

43. Globalcode – Open4education
Exemplos de códigos

44. Globalcode – Open4education
Exemplos de códigos

45. Globalcode – Open4education
Exemplos de códigos

46. Globalcode – Open4education
Exemplos de códigos

47. Globalcode – Open4education
Exemplos de códigos

48. Globalcode – Open4education
Exemplos de códigos

49. Globalcode – Open4education
Exemplos de códigos

50. Globalcode – Open4education
Exemplos de códigos

51. Globalcode – Open4education
Exemplos de códigos

52. Globalcode – Open4education
Segurança
• Tudo em caixa de areia
• O código só enxerga a caixa
• Políticas de segurança configuráveis
• Ainda é preciso permissão do usuário em tudo
• Pode ser relaxado em ambiente seguro
• Não existe 100% seguro
• Tende a ser mais seguro que o existente hoje

53. Globalcode – Open4education
Limitações e status do projeto
• Projeto experimental na versão 0.5.0
• Equipe com orçamento dentro da Microsoft
• Quase impossível não virar projeto
• Encaixa na estratégia atual da Microsoft
• Ela precisa dele internamente
• Tudo pode mudar
• Não faz o que o WebAssembly ainda não permite
• Alguma instabilidade principalmente em ferramentas

54. Globalcode – Open4education
Limitações e status do projeto

55. Globalcode – Open4education
Concorrentes do Blazor
• C/C++
• Java
• Rust
• Go
• Kotlin
• OCaml
• Haskell
• Python
• TypeScript
• Lua
• Elixir
• Scheme
• D
• Várias preparando

56. Globalcode – Open4education
O que acontecerá com JS/TS
• Vai morrer!!!
• Claro que não
• Ganhou concorrentes
• Linguagens que escalam o desenvolvimento melhor
• Podem ser mais otimizadas
• Não tem os conhecidos problemas do JavaScript
• Podem ir por outros caminho que o comitê Ecma não deixa
• Transição rápida para quem não gosta do JS
• Lenta ou inexistente para quem gosta

57. Globalcode – Open4education
Use a ferramenta certa

58. Globalcode – Open4education
Porque revoluciona a web
• Torna a web uma plataforma de primeira classe
• Permite as pessoas serem criativas
• Facilita sua adoção em locais onde era mais complicado
• Tende a universalizar/padronizar mais a web
• Resolve problemas de longa data
• O criador do JavaScript disse isso :P

59. Globalcode – Open4education
O que ficou de fora
• Ele comunica com qualquer backend web
• Ou nenhum
• É possível reaproveitar boa parte do backend DRY
• Não dá tempo p/ falar de mecanismos específicos
• Pode delegar renderização para o backend
• Não protege seu código (mais ou menos)

60. Globalcode – Open4education
Recursos extras
http://dotnetfoundation.org
https://github.com/dotnet
https://github.com/dotnet/coreclr
https://github.com/dotnet/roslyn
https://github.com/dotnet/csharplang
https://github.com/dotnet/corefx
https://github.com/dotnet/corert
https://github.com/dotnet/core
https://github.com/aspnet/Blazor

61. Globalcode – Open4education
Recursos extras
• https://blazor.net
• https://github.com/aspnet/Blazor
• https://github.com/BlazorExtensions
• http://www.missaoblazor.com.br
• https://webassembly.org
• https://webassembly.org/demo/Tanks
• https://github.com/SteveSandersonMS/BlazorElectr
onExperiment.Sample

62. Globalcode – Open4education
Sem as mãos

63. Globalcode – Open4education
Ainda não acabou!
•Não acredite em tudo que chega até você
• Incluindo esta palestra
• Questione tudo! Mas não entre em paranoia ☺
• Procure visões diferentes
• Uma “mentira” repetida mil vezes não a faz verdadeira
• Só porque deu certo para alguém não significa que serve
para você
• Atenção ao contexto!

64. Globalcode – Open4education
Não encerramos aqui
• Me procurem, me sigam, me adicionem,
perguntem, interajam, façam networking
• Gostaram? Querem mais?
• Me convidem para seus eventos
• Peçam uma palestra minha no seu evento preferido
Obrigado

65. pt.stackoverflow.com/users/101/maniero
linkedin.com/in/maniero/
twitter@manieromvp
pt.quora.com/profile/Antonio-Maniero
facebook.com/antonio.maniero.junior
github/.com/maniero
instagram.com/antoniomaniero
https://www.youtube.com/channel/UC5YAwQ1c11r_XPEnPw5B1dg
Antonio Maniero