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

  1. Detecting retained objects.
  2. Dumping the heap.
  3. Analyzing the heap.
  4. 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í

Boost your app performance

  • 620