TDC Floripa 2018 - React Native Por debaixo dos panos

Nesta talk eu explico sobre os conceitos por tras de toda a mágica que acontece em react-native. Após esta talk a Ponte nao será nebulosa mais.

Transcript

1. P O R D E B A I X O D O S PA N O S R E A C T N AT I V E Photo by Andrew Neel on Unsplash
3. Construa aplicações nativas utilizando JavaScript e React
4. Construa aplicações nativas utilizando JavaScript e React
5. E X P L I C A R O S C O N C E I T O S I N T E R N O S Q U E P O S S I B I L I TA M R O D A R C Ó D I G O N AT I V O AT R AV É S D E J AVA S C R I P T. O B J E T I V O
11. A P O N T E Photo by Jan Senderek on Unsplash
13. Q U A N D O E U P R E C I S O C O N S T R U I R U M A P O N T E ? • Vai fazer uso de SDK de terceiros que não tenham a versão React Native • Quando está trabalhando em um aplicativo “Brownfield” • Quando precisa fazer uso de API da plataforma (iOS/ Android) que não esta disponível pelo React Native • Quando vai fazer algo que vai consumir bastante a CPU: Compressão de arquivos, encriptação, multithreading, etc…
16. Usaremos este como exemplo
17. O Q U E O J AVA S C R I P T S A B E S O B R E O S M Ó D U L O S
18. O Q U E O J AVA S C R I P T S A B E S O B R E O S M O D E L O S
21. N AT I V O J AVA S C R I P T VIEW MANAGER REACT VIEW COMPONENT Pede para criar a View Retorna a referencia para a View Renderiza a View
22. N AT I V O J AVA S C R I P T M A I N T H R E A D S H A D O W T H R E A D N AT I V E M O D U L E S T H R E A D P O O L J AVA S C R I P T T H R E A D
23. F I L A D E E V E N T O S Shadow Thread
 +
 Main Thread Modulos Nativo Javascript Interface de Usuario
24. F I L A D E E V E N T O S Interface de Usuario Modulos Nativo Javascript Evento de Toque
25. F I L A D E E V E N T O S Interface de Usuario Modulos Nativo Javascript Evento de Toque Trata o Evento
26. F I L A D E E V E N T O S Interface de Usuario Modulos Nativo Javascript Evento de Toque Trata o Evento Dispara Atualizações para a Interface
27. F I L A D E E V E N T O S Interface de Usuario Modulos Nativo Javascript Evento de Toque Trata o Evento Dispara Atualizações para a Interface Atualiza a Interface
28. N AT I V O J AVA S C R I P T
29. N AT I V O J AVA S C R I P T 1. Assíncrona 2. Serializado 3. Em lotes
30. O B R I G A D O Feedbacks: https://goo.gl/forms/vt8P2QHn65lqo9ek1 github.com/eduardomoroni www.linkedin.com/in/eduardomoroni Photo by Aperture Vintage on Unsplash
31. R E F E R E N C I A S : Peggy Rayzis: Breaking Down Bridging in React Native https://www.youtube.com/watch?v=GiUo88TGebs Alexander Kotliarskyi: React Native Under the Hood https://www.youtube.com/watch?v=8N4f4h6SThc Martin Konicek: Under The Hood of React Native https://www.youtube.com/watch?v=hDviGU-57lU Leland Richardson: React Native in the “Brown Field” https://www.youtube.com/watch?v=tWitQoPgs8w