Sara Vidal
Jon Rojí
@vidalitapower
Frontend @sngular
@jnroji
Frontend @sngular
@vidalitapower / @jnroji
Jon
Under the hood
@vidalitapower / @jnroji
React components
View
managers
@vidalitapower / @jnroji
React components
View
managers
virtualization and serialized
@vidalitapower / @jnroji
React components
View
managers
virtualization and serialized
batch & deserialize
@vidalitapower / @jnroji
React components
View
managers
async and serialized
batch & deserialize
async and serialized
batch & deserialize
@vidalitapower / @jnroji
React components
View
managers
user event listener
More traffic flowing over the bridge means less space for other things
@vidalitapower / @jnroji
How much data is being passed to the bridge?
MessageQueue
@vidalitapower / @jnroji
Shadow tree
View Manager
UI Manager
JSONs
@vidalitapower / @jnroji
Images sizes
Rerenders / UI Frozen
Speed perception
@vidalitapower / @jnroji
Debugging
(console.log overkill)
Android Studio
Flipper
React Native Debugger
React dev tools
@vidalitapower / @jnroji
React Native Debugger
Flipper
Con extensión
Leak Canary
- Detecting retained objects.
- Dumping the heap.
- Analyzing the heap.
- Categorizing leaks.
Android Studio Profiling
Podemos ver a tiempo real los recursos que consume nuestra app
@vidalitapower / @jnroji
Demo
Imágenes
@vidalitapower / @jnroji
Cache
FastImage
React Native
+ dificil de configurar
- dificil de configurar
@vidalitapower / @jnroji
Format
- tamaño reducido (30% menos aprox)
- mantiene buena calidad
- forma de reducir el peso de nuestra app
@vidalitapower / @jnroji
Size & resolution
@vidalitapower / @jnroji
The IaaS way
https://aws.amazon.com/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/
@vidalitapower / @jnroji
The Developer way
@vidalitapower / @jnroji
Sensación de carga
@vidalitapower / @jnroji
progresivas
blurry
lazy
https://www.npmjs.com/package/react-native-intersection-observer
@vidalitapower / @jnroji
Skeleton comps
https://www.npmjs.com/package/react-native-skeleton-placeholder
@vidalitapower / @jnroji
Performance
@vidalitapower / @jnroji
Evitando re-renders
| Class components | Functional Components |
|---|---|
|
- React.PureComponent - React.Component con shouldComponentUpdate |
- React.memo |
@vidalitapower / @jnroji
Componentes con pocos props
@vidalitapower / @jnroji
Example bad rendering
@vidalitapower / @jnroji
The solution
Cada componente maneja sus propios renders
Events & Listeners
@vidalitapower / @jnroji
El componente
que escucha
Nunca olvidar destruir el listener al hacer unmount del componente
Quien dispara
el evento
Cuidado con meter componentes con eventos dentro de listas muy grandes
A tener en cuenta
@vidalitapower / @jnroji
Evitar cambios de estado globales para evitar rerender
@vidalitapower / @jnroji
Performant npm packages ⚙️
react-native-interactable
@vidalitapower / @jnroji
@vidalitapower / @jnroji
Final :3
References
@vidalitapower / @jnroji
@vidalitapower / @jnroji
Boost your app performance
By Jon Rojí
