Refactoring Mobile Apps

The best ideas for new features and other improvements to existing software apps often come from enthusiastic users. Implementing new features creates opportunities for refactoring mobile apps. After several years using the MobileTogether Solar Data Tracking app to monitor the performance of a rooftop solar system, my friend Casey had a suggestion.

The app displayed one page of charts and tables to report production by month over a year and another page to report daily production for the last 30 days. Navigation buttons on each page enabled easy switching between views. Casey’s suggestion was to revise the app to place all the charts and tables on a single page. Over time mobile users have become accustomed to mobile apps that present data in long pages that scroll with a quick one-finger swipe motion. A one-page app would feel smooth and more up-to-date.

The Solar Data Tracker is a cross-platform Android, iOS, and Windows app created from a single source using the Altova MobileTogether Designer. Combining the reports into one page also offered an opportunity to refactor the implementation to simplify the app. The MobileTogether Designer is a drag and drop tool with copy and paste support for app controls and tools for refactoring mobile apps by identifying usages of local and global variables, functions, action groups, style sheets, external data sources, and more. These features all greatly simplified the revision.

Here is a side-by-side view of the Monthly Solar Production report page and the Daily report page as seen on an Android phone:

And here is the new single-page version with all the data on one page as seen with scrolling on an iPhone:

The Add new bill button in the center above was formerly the end of the monthly report page. Now the report flows continuously into the daily history data. We added a rule at the bottom to signal the end of the page.

The steps to create the new version in the MobileTogether Designer were straightforward:

• Copy the design elements from the daily report page and paste them at the end of the monthly page
• Remove the unneeded page navigation buttons
• Revise and simplify the header labels
• Redefine the table of daily data to remove the scrollable property
• Delete the old daily report page from the workflow hierarchy

The MobileTogether Designer includes a Validate tool to check for logic errors or warnings and an Undo button to step backwards through each revision to locate exactly which change might have introduced an issue.

We also need to revise one action group. When the user adds a new daily reading or information reported on an electric company bill, the charts also need to be updated from the new data tables. The original implementation used separate action groups to update the charts on each page. We can open the action group dialog and add actions to an existing action group to update the daily charts too.

We also renamed the action group to better describe its operations. When we rename the action group in the Action Groups dialog, the Designer automatically updates the name in each location where the action group is called.

The built-in MobileTogether Simulator window instantly executes the solution to let us test logic, view the UI as it will appear on a variety of Android, iOS, Windows, and other devices, and examine changes in workflow data during execution. The Simulator also includes extensive debugging functionality for detailed observation and tracing of execution behavior.

The Refactor menu contains commands that list usages of various design components or items that aren’t used anywhere in the app.

The list for Action groups includes the original group that updated the daily production charts. Since the daily report page is no longer part of the app, that action group will never be needed and can also be deleted.

We deployed the new Mobile Data Tracker and Casey enthusiastically showed it off at an EV car show in a park with weak cell phone connectivity and no WIFI.

Try all the MobileTogether features for refactoring mobile apps by downloading the free to use MobileTogether Designer.