Repense, Recrie... React

O dinamismo na produção web vem transformando o modo de pensar dos desenvolvedores, resultando em estruturas de front end cada vez mais complexas. Criar single pages, por exemplo, fazendo uso de template engines pode ajudar na modularização dos elementos nas páginas. Porém, manipular o DOM é um dos principais causadores de gargalos de performance em sites e web apps. A biblioteca do Facebook se propõe a resolver estes e outros problemas que possam acarretar dores de cabeças às equipes. Repense suas aplicações, recrie usando componentes e bem-vindo ao React.

Transcript

1. REPENSE RECRIE REACT
2. THIAGO ALVES LUIZ O c u p a ç ã o FULL STACK WEB DEVELO PER E m p re s a Syntesis Tw i t t e r @ t a lt k9 G i t H u b t a lt k9 E - m a i l ta l tk9 @ gm a il. c om
3. Front-End ???
4. Webmaster & Webdesigner
7. REPENSE
8. Aplicações cada vez mais complexas...
9. Conhecimentos em server, suporte a multi-plataformas e multi-devices e performance são cada vez mais necessários...
10. Single Page Applications
11. AJAX Asynchronous Javascript and XML
13. document . querySelector var el = document.querySelector( .my-class ) ' ' var el = jQuery( .my-class ) ' '
14. Manipula ç ã o do D OM Document Object Model = $()
15. Conte ú do d i n â m i c o Render templates +
17. Agora vamos repensar...
18. Chovendo no molhado: Sempre existirá o bônus e o ônus Sempre existirá custo de aplicação
19. Manipulação de DOM tem custo alto
21. Alguns modelos de aplicação de templates permitem Cross - site scripting ( X S S )
23. Precisamos ser arquitetos
24. RECRIE
25. Não se apavore Um passo por vez …
26. Componentes Conceitos de Orientação a Objeto
27. Você deu o primeiro passo e não sabe
28. DataTables
31. Grandes pedaços de código HTML, CSS e JS
32. Sofrem interferência externa Ocorrem conflitos
33. “[ ] um componente só é um … componente se ele pode ser reutilizado, diversas vezes, em qualquer lugar do projeto, sem sofrer alterações acidentais por códigos externos e também sem modificar outros elementos.” - Diego Eis, Tableless
35. https://speakerdeck.com/jcemer/componentes-para-a-web Jean Carlo Emer
36. Inicie recriando pequenas partes de suas aplicações Use componentes
37. O que utilizar?
40. REACT
41. Biblioteca para desenvolvimento de UI
42. Made with by
43. http://pt.slideshare.net/stoyan/reactive-javascript
44. Quem utiliza?
48. Características • Alta performance • Componetes como base • Template JSX • Virtual DOM • Client and Server side
49. Não representa • Template engine • Framework MVC
50. Gaste 10 minutos do seu tempo...
53. As alterações são realizadas no Virtual DOM
56. A estrutura HTML
58. Talvez o código não seja tão intuitivo... … mas é simples
60. Deixando mais intuitivo
61. JSX • Estrutura fácil de visualizar • Fácil manutenção de código • Previne XSS
63. Código de um contador
65. Utilizando outros componentes
67. CONSIDERAÇÕES
68. Permite a reutilização esperada Diminui o tempo de criação de telas e facilita que equipes mantenham padrões
69. Inicie aos poucos Altere pequenos elementos do seu projeto atual
70. REPENSE RECRIE REACT Thanks a lot!!! Thiago Alves Luiz @taltk9 taltk9@gmail.com