The latest articles on Forem by Gabriel Bonin (@bonindev). https://forem.com/bonindev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1915166%2F2693a132-abca-4c65-8400-79c3c977c005.jpg https://forem.com/bonindev en Gabriel Bonin Sun, 11 Aug 2024 23:38:13 +0000 https://forem.com/bonindev/medindo-o-desempenho-de-um-aplicativo-em-react-native-336c https://forem.com/bonindev/medindo-o-desempenho-de-um-aplicativo-em-react-native-336c <h2> Por que é importante dar atenção ao desempenho de um Aplicativo? </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyl0ipgznv29y4u5w06pd.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyl0ipgznv29y4u5w06pd.png" alt="Image description" width="672" height="712"></a></p> <h2> Diferença de desempenho entre dispositivos android x iOS </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fywsgnb1tlkra5e3awb7s.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fywsgnb1tlkra5e3awb7s.png" alt="Image description" width="800" height="492"></a></p> <h2> Impactos de um aplicativo com baixo desempenho </h2> <ul> <li>Afeta diretamente a experiência do usuário</li> <li>Avaliação (nota baixa) nas plataformas</li> </ul> <h3> 1% de atraso no carregamento de uma página ou tela pode causar: </h3> <ul> <li>11% de perda de visualização </li> <li>16% de diminuição na satisfação do cliente</li> <li>7% de perda em conversões</li> </ul> <h2> Como melhorar o desempenho de um Aplicativo? </h2> <ul> <li> Reduzir o numero de renderizações e re-renderizações</li> <li> Utilizar Flatlist ao invés de ScrollView</li> <li> Explorar Partitioning e Lazy Loading (Aplicações que utilizam muita memória</li> <li>Otimizar Imagens (<a href="https://github.com/DylanVann/react-native-fast-image#readme" rel="noopener noreferrer">FastImage</a>)</li> <li>Utilizar Componentes Nativos sempre que possível (Text, View, Scroll, Flatlist, Image)</li> <li>Diminuir a utilização de bibliotecas de terceiros</li> <li>Otimizar o código Java Script (RN-Debugger, Hermes, etc) <img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F70d2dlwm6ay5ymhsrdde.png" alt="Image description" width="800" height="443"> </li> </ul> <h2> Ferramentas </h2> <ul> <li><a href="https://fbflipper.com/docs/features/react-native/" rel="noopener noreferrer">FB Flipper</a></li> <li>JS Thread</li> <li><a href="https://react.dev/learn/react-developer-tools" rel="noopener noreferrer">React Developer Tools</a></li> <li>JS flame graph</li> <li><a href="https://github.com/bamlab/react-native-flipper-performance-monitor" rel="noopener noreferrer">React Native Performance Monitor Flipper plugin</a></li> </ul> <h2> Métricas </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftq7cgck5439e9qefrb25.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftq7cgck5439e9qefrb25.png" alt="Image description" width="800" height="90"></a></p> <ol> <li>Emular ou utilizar um dispositivo "fraco" (Ex: Samsung J3 2017)</li> <li>Desligar o JS DEV-MODE </li> <li>Aguarde o início da renderização do componente e depois inicie os testes</li> <li>Tempo médio indicado para testes: 10 segundos</li> <li>Em caso de Listas (Flatlists/ScrollView) deslize os itens da lista para cima e para baixo manualmente ou utilize comandos: </li> </ol> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code> adb shell input swipe 500 1000 300 300 10 </code></pre> </div> <p>(varia com o tamanho e tipo de device)</p> <ol> <li>Repita os testes entre 3 e 5 vezes</li> </ol> <h2> Casos de uso </h2> <p>Análise de desempenho em:<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Componente com Flatlist </code></pre> </div> <p>Antes de aplicar métricas de desempenho:</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fad0mwsjpu81kg2j5bpsk.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fad0mwsjpu81kg2j5bpsk.png" alt="Image description" width="756" height="814"></a></p> <p>Após aplicar métricas de desempenho:</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ezjw2k97tb18f2an434.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0ezjw2k97tb18f2an434.png" alt="Image description" width="769" height="820"></a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>Componente de Player de video customizado </code></pre> </div> <p>Antes de aplicar métricas de desempenho:<br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9o8v40d1niyy42jax4zb.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F9o8v40d1niyy42jax4zb.png" alt="Image description" width="800" height="871"></a></p> <p>Após aplicar métricas de desempenho:<br> <a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjixr01i804b5kwroku8a.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjixr01i804b5kwroku8a.png" alt="Image description" width="800" height="840"></a></p> <p>Resultado analisado pelo plugin React Native Performance Monitor Flipper plugin</p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0k0yccf8c24wozc0p0t.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fe0k0yccf8c24wozc0p0t.png" alt="Image description" width="489" height="460"></a></p> <h2> Referências </h2> <ul> <li><a href="https://youtu.be/KNmrainox2M" rel="noopener noreferrer">SIX mind-blowing React Native optimization hacks</a></li> <li><a href="https://www.youtube.com/watch?v=5Q3VCgKV0GE" rel="noopener noreferrer">Measuring and Improving React Native Performance | Alexandre Moureaux | App.js Conf 2022</a></li> <li><a href="https://www.youtube.com/watch?v=DXhcbMvNX04" rel="noopener noreferrer">React Native Performance Optimisation (useMemo, useCallback, memo)</a></li> </ul> reactnative performance fbflipper perfmonitorflipperplugin