Tooling and Help Guides for Performant App Development

Vega Open Beta Announcements
1

We are happy to announce that we have introduced new features, tools, and content to make it easier for you to build performant apps. The improvements introduced are spread across tooling, sample apps, documentation, and how-to videos.

Performance tooling updates:

  1. Industry leading tool support:

    1. Why did you re-render (WDYR), enabling you to investigate and fix UI re-rendering issues.
    2. Flashlight, providing an additional tool to monitor CPU and memory performance.
    3. Perfetto, enabling you to get deeper insights into using traces.
    4. React Dev Tools, enabling you to view component hierarchy, props, and styles.
    5. Memlab, enabling you to detect and analyze memory leaks in JS applications .
    6. Charles Proxy , enabling you to inspect and modify traffic between their device and internet.

  2. Introduced an ability to configure and detect overdraws, refer here for the details.

  3. Updated the Kepler Studio (KS) sidebar to include performance tools, making it easier for you to discover and use performance tooling from KS.

New sample apps:

  1. Performant Scrolling, an app that demonstrates on how to develop performant scrolling by leveraging FlashList and Carousel.
  2. Focus Management, an app that showcases the recommended approaches for building TV-focused interfaces with React Native.
  3. Sports App, a multimedia app built using the recommend best practices that can be easily forked to build similar multi-media apps faster.

Documentation improvements:

  1. Information architecture updates for performance:

    1. Tools and documentation under the App Performance Best Practices are grouped to make it easier for you to find the relevant tools and documentation faster.

  2. 10+ deep-dive guides and KBs for debugging and improving app performance:

    1. Updated App Performance Best Practices
    2. FAQs for Common App Performance Issues
    3. Investigate UI Fluidity issues
    4. Investigate component re-rendering issues
    5. Investigate using Traces
    6. Inspect JS Traces using Perfetto
    7. Merge JS Profiler Traces into Perfetto and analyze using Perfetto UI
    8. Improve TTFF by using Splash Screens
    9. UI Fluidity Certification Guidebook
    10. App Latency Certification Guidebook
    11. Implement reportFullyDrawn for Webview apps

Tutorial videos:

  1. How to fix common app performance issues
  2. Unlock peak performance with Kepler Tooling
  3. Best Practices for Focus management

These tools, sample apps, articles, and videos should help you get more insights, debug, and build performant apps. Reach out to us if you want to know more about upcoming features or with any feedback in the Q&A section.

1 Like