Introdução ao React Native

Um compilado de apresentações e artigos incríveis sobre React Native.

Transcript

1. Introdução ao React Native React Day - Feira de Santana
2. ∞ Engenharia de Computação - UEFS ☕ Desenvolvedor de Software ♥ JavaScript Diego Leite - @di3goleite
3. Por que amamos aplicativos nativos?
4. Por que amamos aplicativos nativos? • Ótimas experiências • Gestures e animações incríveis • Consistência com a plataforma
5. [1]
6. Mas, construir aplicativos nativos é muito difícil!
7. Por que é difícil? • Diferentes stacks de tecnologia ◦ Linguagens de programação, ferramentas, bibliotecas, gerenciamento de memória, rede, UI, animações, boas práticas… • Não existe compartilhamento de código • Workflow lento • Difícil de escalar
8. A Web já resolve esses tipos de problemas
9. Web • Diferentes stacks de tecnologia • Não existe compartilhamento de código • Workflow lento • Difícil de escalar HTML CSS JS
10. Web • Diferentes stacks de tecnologia • Não existe compartilhamento de código • Workflow lento • Difícil de escalar Flux JS Libs GitHub
11. Web • Diferentes stacks de tecnologia • Não existe compartilhamento de código • Workflow lento • Difícil de escalar CHANGE REFRESH
12. Web • Diferentes stacks de tecnologia • Não existe compartilhamento de código • Workflow lento • Difícil de escalar
13. Por que aplicativos web não são muito bons? • Muito difíceis para criar uma ótima experiência para o usuário • Não foi projetado para trabalhar com gestures complexas • Impossível de criar consistência com a plataforma
14. React Native
15. Timeline [2]
16. Plataformas suportadas Janeiro de 2013 Setembro de 2015
17. Interesse em frameworks com o passar do tempo [2]
18. Número de pull requests [2]
19. A Parte boa! :)
20. Você programa em JavaScript
21. Base de componentes <div> <span> <img> <View> <Text> <Image> <ScrollView> <MapView> <TabBar> <DatePicker> ... UIExplorer* [3]
22. Estilos com Flexbox [4]
23. Estilos com Flexbox Flexbox { margin: 20, borderBottomWidth: 2, flex: 1, alignContent: ‘center’ } Coordinates { left: 120, top: 220, width: 60, height: 60 } [5]
24. Hot Module Replacement (Hot Reload) • Os módulos atualizados são injetados em tempo de execução • Os componentes podem ser atualizados sem a necessidade de um Full Refresh • Hot Reload é diferente de Live Reload
25. Comunidade • Ótima documentação • Ótimo suporte • E muita gente incrível envolvida no projeto
26. A Parte ruim! :(
27. Difícil de testar os Componentes • Ainda não existe uma documentação oficial sobre teste de componentes Testing live on production
28. Por debaixo do capô
29. Synchronous [1]
30. Synchronous [1]
31. Asynchronous [1]
32. The Bridge
33. [1]
34. [1]
35. JavaScript é orientado a eventos
36. [1]
37. Exemplo! .o/
38. [1]
39. [1]
40. [1]
41. Resumindo...
42. [1]
43. [1]
44. [1]
45. One more thing
46. [5]
47. [5]
48. Obrigado! @di3goleite .o/
49. Referências 1. https://speakerdeck.com/frantic/react-native-under-the-hood 2. https://medium.com/react-native-development/a-brief-history-of-re act-native-aae11f4ca39 3. http://www.reactnative.com/uiexplorer 4. https://speakerdeck.com/paolorovella/react-native 5. https://speakerdeck.com/frantic/react-native-tutorial-nyc-15