Documentation

>

Getting started

Mobile App Performance Optimization – what is it?

Mobile app performance optimization refers to identifying and improving code that plays a significant role in user experience – such as app start time, the loading time between screens, or time spent completing tasks. 

In the ever-growing app market, users can easily uninstall slow mobile apps and swiftly try the next app on the list. Mobile app performance doesn’t just refer to codebase quality and infrastructure – the user experience of the application’s responsiveness defines it.  

Along with that, Android and iOS storefronts incentivize app performance by giving lower search rankings to less-performant apps. App stores do this because more-performant apps provide a better UX and deliver more business value which we’ll see below.

Why is Mobile App Performance Optimization Important?

Brand Preference

      52% of users suggested they are less likely to interact with a brand after a poor mobile app experience

Brand Reputation

       36% of users who had experienced slow performance issues had a lower opinion of the company

Customer Retention

       96% of users say app performance – factors such as speed and responsiveness – matters when deciding whether to keep or uninstall an app

What is PS Tool?

If you’re unfamiliar with the concept of tracing, performance analysis can initially seem overwhelming. Our PS tool will change the way you think about performance engineering. With our visualizations, you will effortlessly understand how every function relates to another and identify relevant code optimization opportunities. 

At Product Science (PS), we offer a set of tools for mobile app performance engineering that includes: 

  • Dynamic automatic code instrumentation via AI-powered plugins added to the build process;
  • PS multi-threaded code profiling tool highlights critical functions and frameworks that impact user experience, revealing the root cause of problems;
  • PS Companion mobile app to record and upload traces from your mobile device.

By replacing manual instrumentation and embedding right into the build processes, we enable anyone to identify points of app causation of performance issues with clear visualization.

Who is PS Tool for?

PS Tool empowers anyone who understand code to use our visualization tool powered by AI to find performance optimization insights.

How does PS Tool work?

Start with instrumenting your app’s code with our PS Gradle plugin / Xcode Code Injector powered by AI which  only visualizes functions that impact your mobile app’s performance. 

PS Tool profiles and visualizes recorded (user) flow and our AI will then suggest execution paths –  the sequence of functions executed – that empower identification of performance opportunities.

How to see performance optimization insights, step by step:

  1. Use our plugin during the build process to instrument your code
  2. Run the build on the target device
  3. Record the trace while the app runs and walk through a flow that you want to optimize performance for
  4. Upload the recorded trace using our PS Companion App
  5. Visualize insights with PS Tool

Essentials Steps

To get unique insights to your code with our PS Tool, follow the step by step below:

Instrumentation

Instrument and build the app with our plugin, so it can analyze your code.

How to Instrument

Android/Gradle

1. Key Generation Methodology- PSi:

  • Generates a token (key) via GitHub
  • Saves key in Bitwarden credential storage
  • Shares token with Bitwarden Send
  • Keys have an expiration date

2. Configure `gradle.properties`

Set up gradle.properties in your home directory i.e. ~/.gradle/gradle.properties

---CODE bash language-bash---
github_user=<supplied-by-PSi>

github_key=<supplied-by-PSi>

---END---

For example:

3. Project top level `build.bradle`: add maven build Info

In build.gradle add the maven build info to the repositories for project and subprojects:

---CODE bash language-bash---

maven {

   url "https://maven.pkg.github.com/product-science/PSAndroid"

   credentials {

       username=github_user

       password=github_key

   }

}

---END---

If allprojects is not present in top level build.gradle then add it:

---CODE bash language-bash---

allprojects {

       repositories {

           maven {

               url "https://maven.pkg.github.com/product-science/PSAndroid"

               credentials {

                   username=github_user

                   password=github_key

               }

           }

       }

}

---END---

For example:

and

4. Project top level `build.bradle`: Add PSi `classpath` to `dependencies`

Note that we are using a demo app for this example called "Signal" to visualize the process. Contact your Sales Engineer to get the Version of the Plugin- replace the VERSIONSUPPLIEDBYPSI with the Version we supply.

---CODE bash language-bash---

classpath "com.productscience.transformer:transformer-plugin:<VERSIONSUPPLIEDBYPSI>"

classpath "com.productscience.transformer:transformer-instrumentation:<VERSIONSUPPLIEDBYPSI>"

---END---

For example:

Please label your build with the PSi Plugin Version from above i.e. MyAppPSi0.9.1.apk so our AI can learn how its dynamic instrumentation is performing on the build.

5. `app/build.bradle`: Apply the PSi `transformer.plugin`

Apply plugin to app/build.gradle

---CODE bash language-bash---

"com.productscience.transformer.plugin"

---END---

For example:

6. `AndroidManifest.xml`: Enable PSi profiling

Add

---CODE bash language-bash---

<profileable android:shell="true" />

---END---

into AndroidManifest.xml to enable profiling

For example:

7. Setup PSi properties

Create a file called productscience.properties in the projects top level directory and add the PSi config/token to it:

---CODE bash language-bash---

productscience.github.config=<VERSIONSUPPLIEDBYPSI>

productscience.github.token =<supplied-by-PSI>

---END---

Proguard

If the application uses obfuscation/shrinking add a new ProGuard rule to your project. To achieve it add the next line to the R8/ProGuard configuration file- typically

---CODE bash language-bash---

app->proguard->proguard-appcompatv7.pro

---END---

---CODE bash language-bash---

-keep class com.productscience.transformer.module.** { *; }

---END---

The default name of this file is proguard-rules.pro. But your project may use the other name.

More information about R8/ProGuard configuration can be found here: https://developer.android.com/studio/build/shrink-code

Build your app

Now you can build your app with Gradle

For example:

Please label your build with the PSi Plugin Version from above i.e. MyAppPSi0.9.1.apk so our AI can learn how its dynamic instrumentation is performing on the build.

Separate build configuration

For the future work convenience it’s best to create a separate build configuration with PSi.

A special flag enableProductScience can be used for these purposes:

Then you can build your app with PSi using the flag:

iOS

1. Key Generation Methodology- PSi:

  • Generates a token (key) via GitHub
  • Saves key in Bitwarden credential storage
  • Shares token with Bitwarden Send
  • Keys have an expiration date

2. Configure `productscience.yaml`

Set up productscience.yaml in the Xcode app project directory:

---CODE bash language-bash---

productscience.github.config: <supplied-by-PSi>

productscience.github.token: <supplied-by-PSi>

productscience.token: <supplied-by-PSi>

---END---

example productscience.yaml:

---CODE bash language-bash---

productscience.github.config: product-science-configs:ios-template-configs:config.yaml:main

productscience.github.token: ghp_XXXXXXXXXXXXXXX

productscience.token: XXXXXXXXXXXXXXXXXXXXXXXXXXXXX

---END---

3. Configure and Test `xcodebuild`

Prepare an `xcodebuild` command to build the app in terminal.  

For projects that are organized with `xcworkspace`:

---CODE bash language-bash---

xcodebuild \

   -workspace MyApp.xcworkspace \

   -scheme MyAppScheme \

   -sdk iphoneos

---END---

For `xcodeproj` based projects:

---CODE bash language-bash---

xcodebuild \

   -project MyApp.xcodeproj \

   -scheme MyAppScheme \

   -sdk iphoneos

---END---

Ensure that your app can build successfully before using the `PSCliCodeInjector`. A reference example using the Firefox Fennec iOS app is shown below.

4. Install `PSTools` Instrumentation Injection Kit

You will need to use the github credentials supplied by PSi to above to follow these steps:

  1. Download the lastest PSTools-PLATFORM.zip from this link and unzip it
  2. Install PSTools/PSCliCodeInjector.pkg on your Mac with double-click
  3. Copy PSTools/PSKit to ps-workdir i.e.  `cp -r PSTools/PSKit .`

See the Firefox example below for sample final directory structure.

Please label your build with the PSi Plugin Version from above i.e. `MyAppPSi0.9.1.ipa` so our AI can learn how its dynamic instrumentation is performing on the build.

5. Build

  • Run PSTool code transformation and configuration fine-tuning:

---CODE bash language-bash---

PSCliCodeInjector MyApp \

   --backup-dir MyApp-BACKUP \

   --sub-folders=. \

   --console-build-command="<BUILD-COMMAND-FROM_STEP-3>"

---END---

This step transforms the code of the `MyApp`. A backup of the original will be in `MyApp-BACKUP`.

The BUILD-COMMAND-FROM_STEP-2 is the choice between the xcworkspace or xcodeproj methods and their associated flags. These are examples of xcodebuild templates - yours may differ. See the Firefox app example below.

Warning: PSCliCodeInjector parses the command’s output to identify issues with the injected code. Be sure not to pipe the build’s results through tools like xcbeautify, xcpretty, etc. or this logic might not work correctly.

When complete, the `MyApp` directory will have been transformed. Use this directory for your build.

  • Open project from `MyApp` directory
  • Build and export the app in your default pipeline.
  • Send us MyApp/psfilter.txt if it exists

Please label your build with the PSi Plugin Version from above i.e. `MyAppPSi0.9.1.ipa` so our AI can learn how its dynamic instrumentation is performing on the build.

Example: Firefox for iOS

1. Clone Firefox iOS repo

---CODE bash language-bash---

git clone https://github.com/mozilla-mobile/firefox-ios

---END---

2. Configure and test `xcodebuild`

In the `firefox-ios` directory

---CODE bash language-bash---

xcodebuild \

   -project Client.xcodeproj \

   -scheme Fennec \

   -destination 'name=iPhone 13 mini' \

   -sdk iphoneos

---END---

Note this example uses `iPhone 13 mini` as the example destination- this can be changed.

3. Create Creds and install PStools

Create the `productscience.yaml` file in the `firefox-ios` directory as shown in Step 2 above.

Download, unzip, and install `PStools` as shown in Step 4 above.

Make sure that the `PSKit` is in the same top level directory level as `firefox-ios`:

---CODE bash language-bash---

cp -r PSTools/PSKit .

---END---

i.e.

---CODE bash language-bash---

drwxr-xr-x@  5 user  staff       160 Jul 12 16:24 PSKit

drwxr-xr-x@  6 user  staff       192 Jul  5 10:22 PSTools

drwxr-xr-x  76 user  staff      2432 Jul 12 16:26 firefox-ios

---END---

4. Build with `PSCliCodeInjector`

This is done in the same directory level as the `firefox-ios` directory i.e. the same one as shown above - NOT IN the `firefox-ios` directory:

---CODE bash language-bash---

drwxr-xr-x@  5 user  staff       160 Jul 12 16:24 PSKit

drwxr-xr-x@  6 user  staff       192 Jul  5 10:22 PSTools

drwxr-xr-x  76 user  staff      2432 Jul 12 16:26 firefox-ios

---END---

---CODE bash language-bash---

PSCliCodeInjector firefox-ios --backup-dir firefox-ios-BACKUP \

   --sub-folders=. \

   --console-build-command=\

     "xcodebuild \

         -project Client.xcodeproj \

         -scheme Fennec \

         -destination 'name=iPhone 13 mini' \

         -sdk iphoneos"

---END---

When complete, the `firefox-ios` directory will have been transformed. `firefox-ios-BACKUP` is a directory with original project.

---CODE bash language-bash---

drwxr-xr-x@  5 user  staff       160 Jul 12 16:24 PSKit

drwxr-xr-x@  6 user  staff       192 Jul  5 10:22 PSTools

drwxr-xr-x  76 user  staff      2432 Jul 12 16:26 firefox-ios

drwxr-xr-x  77 user  staff      2464 Jul 12 16:46 firefox-ios-BACKUP

---END---

Use `firefox-ios` for your pipeline or Xcode.

Recording

Record the trace by running your instrumented app on the target device and complete user actions from the (user) flow you want to optimize.

Android

Preparation (Only Needs to be Done Once)

Install PS Companion app

  • Make sure to log in before moving on to the next step.

Enable tracing

1. First, you’ll need to enable developer options and USB debugging:

  • Settings > About Phone > Software information > Build Number
  • Tap the Build Number option 7 times

2. Then, you can enable tracing:

  • Settings > System > Developer Options > Debugging section> System Tracing
  • Make sure to turn off all systems tracing categories except  view: View System.
  • Enable Show Quick Settings tile. This will add System Tracing tile to the Quick Settings panel, which appears as an upper panel: 
  • Hold down the "bug" button to yield the full trace menu
  • Enable "Long traces"

Record trace

Generally, we recommend recording traces with a cold start where everything will be initialized from zero. This type of app launch is usually the slowest because the system has a lot of expensive work to do compared to the other two states (warm and hot starts where the system brings the app running from the background to the foreground).

Optimizing any user flow with cold start enables you to improve all app processes that are being created from scratch which can enhance the same user flow’s performance with warm and hot starts as well.

Step

To record App Start Flow

To record any Flow other than App Start

2

Make sure you are logged in to our PS Companion App.

Make sure you are logged in to our PS Companion App.

3

Open the targeted app.

4

Start recording a trace by selecting the bug icon or ‘record trace’ button from the quick settings tile. 

Perform the user actions from the (user) flow and stop before the last step

5

Open the targeted app.

6

-

Start recording a trace by selecting the bug icon or ‘record trace’ button from the quick settings tile. 

7

-

Perform the last step from the (user) flow

8

Once the main page is fully loaded, tap the bug icon or ‘stop tracing’ button to stop recording the trace. 

Once the main page is fully loaded, tap the bug icon or ‘stop tracing’ button to stop recording the trace. 

9

Stop screen recording (if needed).

Stop screen recording (if needed).

10

Wait for a “success” dialog drawn on top of your app.

Wait for a “success” dialog drawn on top of your app.

Best Practice

  • Avoid doing any unnecessary actions outside of the flow.
  • Click and wait for each screen to fully load and any functions to complete before clicking on the following button (if necessary).
  • Avoid performing the flow too fast, and functions from different screens might overlap. 
  • Avoid performing the flow too slowly, and you are further away from understanding how a user will interact with the app.

iOS

Preparation (Only Needs to be Done Once)

Install our PS Companion App
Customize share sheet

To make it easier for exporting your traces in the upcoming steps, we recommend to customize your iPhone share sheet so that you can have the PS companion readily available.

  • Tap the icon
  • Share sheet appear
  • If the PS Companion App is not shown, swipe all the way to the right
  • Tap more
  • Tap Edit on the top right
  • Tap the green plus icon for PS Companion app

Trace Recording

Install instrumented app
Record trace

Generally, we recommend recording traces with a cold start where everything will be initialized from zero. This type of app launch is usually the slowest because the system has a lot of expensive work to do compared to the other two states (warm and hot starts where the system brings the app running from the background to the foreground).

Optimizing any user flow with cold start enables you to improve all app processes that are being created from scratch which can enhance the same user flow’s performance with warm and hot starts as well.

Step

To record App Start Flow

To record any Flow other than App Start

2

Make sure you are logged in to our PS Companion App.

Make sure you are logged in to our PS Companion App.

3

Open the targeted app.

4

Tap the button on PS Companion App to start recording

Perform the user actions from the(user) flow and stop before the last step.

5

Open the targeted app.

6

Perform the user actions from the (user) flow and that you want to optimize.

Tap the button on PS Companion App to start recording

7

-

Perform the last step from the (user) flow.

8

Once the final step is fully loaded, tap the button to stop recording.

Once the final step is fully loaded, tap the button to stop recording.

Uploading

Upload recorded traces to PS Tool.

Android

Upload trace to PS Tool

  • After recording a trace file, tap the file to export it. You will be given the option to save it or export it to different apps.
  • Export your trace file to the PS Companion App

    Alternatively, you can manually upload traces via web interface.
  • Name the trace, assign it to the relevant flow and then upload it to our cloud.
  • Uploaded trace will appear in your productscience.app Flow Library

    Alternatively, you can enable the “subscribe” functionality in the Flow Library to get an email containing a link to a new trace when it uploads. 
    Want to upload it via web interface? Learn how to.
  • For any errors, our system will return a message explaining what went wrong. If you can’t resolve the issue, please don’t hesitate to contact us at support@productsience.ai

PS Companion Mobile App Alternative

For the most seamless experience, we highly recommend using our mobile app or uploading traces. 

But in instances where that fails, you can also upload traces via:

Export trace from the Files app

  • On mobile devices running Android 10 (API level 29), traces are shown in the Files app

Download traces with command line (Optional)

  • Connect your android device to a computer via USB
  • Command-line for downloading traces: adb pull /data/local/traces/

Manual upload via Web Interface

iOS

Upload trace to PS Tool with PS Companion App

  • Tap the "export" button to export your trace file.
  • Open it with our PS companion app.

Don’t see PS Companion app? Customize the share sheet

  • Name the trace, assign it to the relevant flow and then upload it to our cloud.
  • Uploaded trace will appear in your productscience.app Flow Library.

    Alternatively, you can open the trace file via the link we sent to your email for every successful upload.
    Or, upload via web interface. Learn how to.
  • For any errors, our system will return a message explaining what went wrong. If you can’t resolve the issue, please contact us at support@productsience.ai.

PS Companion Mobile App Alternative

Export trace file to computer (Optional)

  1. Open Finder > Locations > iPhone > Files
  2. Select the Application‌
  3. Airdrop or share the "trace.json" via iCloud to your computer

Download with command line (Optional)

Also the open source app ios-deploy can be used for getting traces.

  • Install with Homebrew

---CODE bash language-bash---

brew install ios-deploy

---END---

  • Download `trace.json`

---CODE bash language-bash---

ios-deploy --bundle_id <APP'S BUNDLE ID>\\

   --download=/Documents/trace.json \\

   --to .

---END---

View uploaded trace

  • You can find previously recorded traces organized by user flow under the Discover Projects tab
  • Select a flow to see the uploaded traces corresponding to that flow

Delete trace

  • To delete an uploaded trace, swipe left and select the trash icon

Manually upload trace to flow library

Working with PS Tool

At Product Science, performance optimization starts with defining key (user) flows that bring the most value to users. We visualize your code that empowers you to capture optimization opportunities that impact user experiences. You can optimize how quickly the app starts up, how its processes perform, how smooth animation is, etc.

At the center of the PSTool Dashboard is the trace viewer which shows essential information, such as what functions were invoked, their duration, and execution paths. Visualizing execution paths here is critical because it allows you to see the sequence of functions and how they connect and highlight optimization opportunities.

Accessing the PS Tool

Visit productscience.app and log in using your company email.

Flow Library

Flow library organizes all traces by (user) flow. This is where you can view, subscribe, manage and create flows. Like a folder in a file system, each flow contains traces of user flows that your team records and optimizes. Use Flow Library to group traces by flows that make the most sense to you and your team. Add a description to communicate the context of the flows.

Open a trace in PS Tool

Flow Library > Select a flow card > Flow Table > right click any trace > click “open”

Create new flow

      1. In Flow Library > click “Create new flow”

      2. Enter your flow name & description

(User) Flow Screen

The Flow Screen is where you can find all the traces uploaded associated with a single flow. This is where you can add, delete, edit, and assign your trace. 

We encourage you to record more than one trace for every flow. More recordings can increase the statistical significance of your “findings”. Specifically for flows containing asynchronous I/O operations like network requests, recording multiple traces can increase your confidence in locating patterns of performance issues within the trace.

Add new trace

Via our PS Companion app

Via manual upload

      1. Click the “Add new trace” button on the Flow screen

      2. Upload traces by dragging the trace or browse from computer

      3. Once the trace is uploaded successfully, you shall see the message

Via select from unassigned

Alternatively, you can use traces that were previously uploaded but not assigned.

      1. Click on "Review and assign" button

      2. Check the box for the trace you would like to assign

      3. Select the flow you would like to flow to be assigned to

Delete flow

      1. In Flow Library > hover over the bottom right corner of flow

      2. Click on the "..." button on the flow card

Edit flow description

      1. Flow Library > Flow card > Flow settings

Assign trace to another flow

      1. In the Flow screen

      2. Click on the trace > menu will appear > click "Assign"

      3. Select one or multiple flows you want to assign the trace to > Click "Done"

Trace Viewer

A trace is a time series snapshot of your app. Our dynamic, multi-threaded tracing tool captures and measures all functions executed during the recording. While millions of events and functions might be executed on the system level, our AI filters key functions that impact your user experience the most while filtering out all irrelevant information.

Slices

The width of the trace represents duration of the executed process while where it positions indicates the start time. A slice represents a single unit of work done by the CPU, and the width (X-Axis) of the slice represents the duration of the executed process and its position indicates the start time. Learn more


The nesting (Y-Axis) of slices represents the call stack of a specific function.

In the image below, you can see how function B ( Slice B ) was called by function A (slice A)

Execution Path

The execution path is the most helpful tool to determine where the delays are coming from. It shows which function call stacks  are called by which function call stacks, so you can quickly see not just how individual functions are related but by how groupings of functions are related, creating an elevated perspective of the code which makes it easier to zoom-out and quickly find the root cause of a problem.

Navigate main timeline

The center of the dashboard is what we call the main timeline of your user flow. It tells you about your different processes at a specific time. Though you won’t be able to view the details of slices here, you can see when your app is fully loaded and when it’s idling.

To navigate the main timeline view, in addition to your trackpad, you can use the following key commands:

W - Zoom in

S - Zoom out

A - Move left

D - Move right

Navigate aggregation view (global timeline)

In the timeline near the top of the dashboard, you’ll see what looks like a measuring tape. 

  • Numbers at the top indicate where you are based on the trace's timeline. 
  • Numbers at the bottom measure the distance between functions on the trace or the time it takes for a function to execute.

You can adjust the focus area by dragging the blue limit handles located on the edges.

Slices

The visual representation of a code’s function/process. The length of the slice indicates how long it takes that process to execute.

The width of the slice represents the duration of the executed process and its position indicates the start time.

Property Panel

The property panel allows you and your contributors to:

  • View and copy details of the slices including slice name, thread name, slice ID, object ID, start time, and duration.
  • Create manual connections
  • Find execution path-related tools such as:

    Show/hide all paths

             Filter by execution path

             Dim slices outside of execution path

  • Review connections
  • Customize flags

Execution Paths

      1. Click on any slice and our system will automatically check any connections linked to this slice. In other words, we highlight actions and processes that occurred resulting in the slice you chose. 

      2. Once an execution path – a one-directional linked list of slices –  is found, you should see lines like the example below. For example, if Slice A calls Slice B, they will be connected.

The green path is what we refer to as the main execution path; it usually contains more slices than the other lines and gives you a better image of where the delays are located.

      3. Open property panel

      4. Click the button below to hide/show other non-main execution paths

Example of clicking the filtering button to only show the main execution path

      5. View slice and connection details on the property panel (right side)

Create manual connections

      1. Click on a slice > Slice details show in the property panel.

      2. Click the "create connection" icon next to the slice or press C while the slice is selected.

      3. Slices that cannot be connected to the slice clicked are dimmed.

      4. Repeat step 2 to connect more slices.

Use Search

      1. Search for any framework and function using the search box at the bottom right

      2. All related instances should be immediately highlighted (while all the other unrelated functions should be dimmed). 

      3. Use arrows inside the search box to navigate among the search results

      4. Press Esc or click "x" to exist search

Measure Time

To understand the duration of one function to another, you can use our measurement tool by holding shift + click.

Threads

Smallest executable task of the system. PS multi-threaded code profiling tool highlights critical functions and frameworks that impact user experience, revealing the root cause of problems.

Pin Threads

Click the star to the right of a thread name to pin the thread to the top of the window for easy comparison and reference.

Deprioritize Threads

Click the downward button to the left of a thread to pin the thread at the bottom of the window if you find that particular thread not as informative.

Place a flag

We recommend placing flags at the beginning and the end of a flow. You also get to choose colors of placed flags, which is helpful when you need to keep track of different information.

      1. Hover over the timeline, and you’ll see a gray flag.

      2. Click on the timeline to place the flag.

      3. Our tool will randomly pick a color for your flag, which you can manually edit on the right-hand side of the screen. This is also where you can add labels to your flag.

Pro tip: You can also use the label field for quick notes. Simply click on the “label”, press shift + enter and start typing. That way, the notes you typed won’t show in the timeline, but you can use the notes for future reference.

Delete a Flag

When a flag is no longer relevant, you can remove it by:

      1. Clicking on the flag

      2. Clicking on the "trash can" button when the flag details menu is shown on the right; or pressing "Del" on your keyboard.

Admin Screen

Team

Team is the representation of a company. This is where you can create projects (per single app and operation system) that contain all flows and traces.

Project

Project is where you can create different flows and traces for a single app. You can join and contribute via an invitation from the team's or project’s admin.

Collaborating

Roles and Permissions

Every team member can have team-level permissions that determine their default access to projects.

Team Admin

Update Project Icons and Details

      1. In Project > click "project settings"

      2. Hover over the thumbnail > click on the image icon.

Remove a Project

      1. In Project > click "project settings"

      2. Click "delete project"

Update Team Member’s Role

      1. In Team > click on "team contributors" to view the table.

      2. Click and choose new role under the "Role" Column.

      3. Click out to save

Resend Invitation Link

      1. In Team> Team contributors > click on "team contributors" to view the table.

      2. Click the ".." button on the right of the table > menu appears.

      3. Click "resend invitation link".

Remove a Team Member

      1. Project screen > click on "project contributors" to view the table.

      2. Click the "..." button on the right  side of the table > menu will appear.

      3. Click "delete account".

Update Email Domain

      1. Home page > click "team settings"

      2. Update your company email domain so that everyone with the specified email domain can log in.

Project Admin

Update Team Member’s Role in Project

      1. In Project > click on "project contributors" to view the table.

      2. Click and choose a new role under the "Role" Column.

      3. Click out to save

Remove Team Member

      1. In Project > Project contributor > click on "project contributors" to view the table

      2. Click the ".." button on the rightest of the table > menu appears

      3. Click "delete account’"

Invite New Team Member

      1. In Project > Project contributor > click "invite contributor" on the top right corner.

      2. Input the email and select the role.

      3. Click "Invite"

Resend Invitation Link

      1. In Project > Project contributor > click on "project contributors": to view the table.

      2. Click the ".." button on the far right side of the table of the table > menu will appear.

      3. Click "resend invitation link".

Dictionary

Cold App Start

A cold start refers to an app's starting from scratch: the system’s process has not, until this start created the app’s process. It happens when your app is being launched for the first time since the device booted, or since the system killed the app.

Sample use case

  • Hold your mobile device
  • Close all your opened apps
  • Click on your app icon from home
  • Everything will be initialized from zero

According to Google, the ideal benchmark time should be: 

  • Cold startup takes 5 seconds or longer.
  • Warm startup takes 2 seconds or longer.
  • Hot startup takes 1.5 seconds or longer.

Connection

Line connecting two slices showing what previous function triggered the execution of the selected function.

Hot App Start

A hot start refers to when your apps’ process is already running in the background and all the system does is bring your activity to the foreground. This process will bring back your app to the last state where you left without reinitializing any of the app assets.

Sample use case

  • Hold your mobile device
  • Close all your opened apps
  • Click on your app icon from home
  • Everything will be initialized from zero
  • This was so far for a cold start
  • Go back to home
  • Re-open the app again
  • Your app is now bring back to the foreground without reinitialization 

According to Google, the ideal benchmark time should be: 

  • Cold startup takes 5 seconds or longer.
  • Warm startup takes 2 seconds or longer.
  • Hot startup takes 1.5 seconds or longer.

Instrumentation

Instrumentation is the method in which our plugin can extract the necessary information about the runtime of the application, such as, how long functions run, which processes they call (child or async) and which threads they run on. It runs during the build process, instrumenting by injecting 100% of all functions and frameworks automatically without sampling.

Slices

The visual representation of a code’s function/process. The length of the slice indicates how long it takes that process to execute.

The width of the slice represents the duration of the executed process and its position indicates the start time.

Trace

Think of a trace as the technical representation of a mirror showing us the user's journey. It includes hardware and software advances occurring through an entire app stack. 

The trace viewer will show vital information such as what functions were invoked, their duration, and most importantly, their execution paths. The visualization of execution paths is crucial because it allows everyone to see the sequence of functions and how they connect and highlight optimization opportunities.

(User) Flow

Flow is the path a user takes to complete a task within the app. For example, the user types in “restaurant near me”. The app then returns search results. Finally, the user viewing searched results is considered a flow.

May 2022

May 2022

Whats new

  • Thread Sorting Adjustment:
    JS thread functions will now search for closest react native function and then their execution paths will be merged into one another.

    Benefit:
    User will no longer be required to scroll to the end of all of the threads of the trace file to see important information.
  • Thread Sorting Adjustment:
    JS and React Native threads have been resorted into groups and will be placed after the main thread.
  • Visualization - Connections Between Functions:
    PSi has a new button to switch between zigzag and diagonal lines when showing connections between functions.
  • Json Traces - Main Process Name (iOS Specific):
    Prior to this enhancement, there was generic naming for the Json trace processes and users would manually need to update the process name. Json traces will now display the main process name.

    Benefit:
     Implemented a system process that updates the main thread names from the cloud and minimizes manual entries from users.
  • Visualization - Flag & Pins:
    PSi now offers 4 options to Flag or Pin the beginning & end of a function within a trace.

        1. Flag Selected:  Users can add flags at the beginning & end of a function  
        2. Flag All:  User can add flags at the end of all functions with the same name as the function selected
        3. Pin Selected: User can add flags at the end of a function
        4. Pin All:  User can add flags at the end of all functions with the same name as selected on all the different trace files

    NOTE:   Flag Selected & Flag All are not saved if page is reloaded.  Pin Selected will be saved when reloading the page but only for 1 trace file.  Pin Allis saved for all trace files when reloading.

    Benefit:
    User has more control over what can be flagged and what can be saved when analyzing a trace and corresponding functions.
  • Execution Path Visualization:
    • Implemented an updated algorithm that allows for selection of the longest branch in the execution path (Note: Only long pauses from the longest branch will be marked)
    • All links between functions from other branches will be displayed transparently

    Benefit:
    User has improved visualization of execution path resulting in better analysis capabilities for generating deeper insights.
  • Tool that connects functions manually; found lost connection can connect 2 functions; request to create new type of link (2 functions closest to each other was original design) new design connects function based on Object ID; each function has 3 different IDs that are used to create links; closed by Object ID not just time which was previous design; Direct Link: 2 functions should connect to each other if they are on the same thread and depth
  • Two new buttons introduced in the interface that allow for collapsing depths not used in the execution path:
  • New button introduced to hide ghost branches and only display the most informative path. There are multiple variations where a function might go and the user is looking for a more informative path marked by a solid black line and ghost branches are marked by transparent gray lines.

Bug fixes

  • For React Native, PSi was missing a connection causing users to lose their execution path
  • Track focus while using search
  • PSi tool did not support js threads for systrace files
  • PSi tool crashing when user selects a slice/function as part of a long execution path
  • If user jumps between search selections i.e. search for specific name/function it may provide multiple results and if you jump to quickly you would receive an error (multiple queries would merge on each other causing the issue)
  • Optimized indexing step while processing trace file