Proposal: DevTools

[fahad19]

(Intended to be created in a separate repository)

Currently

When we try to debug a regular Frint app (involving root and children), we tend to investigate it by logging window.app in the Chrome DevTools console.

Use cases involve:

• Checking existence of Root app
• Listing all providers
• Checking which providers are cascaded
• Finding list of registered Child Apps
• Checking their configuration (multi instance or not for example, and target regions)
• If Child Apps are mounted already in a Region
• Inspecting Apps' state
• ...there can be more

At the moment, to do all of that, developers need to have knowledge of internal APIs of Frint to move forward with debugging.

Proposal

A Developer Tools extension, can be targeted for Chrome only for now, where developers get to see the current situation of Root and Child Apps. The common use cases listed above should be handled by this extension at least.

By default, it can take window.app as a source. But the extension should be configurable by the developer to use any other variable name.

Example for React: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Source: https://github.com/facebook/react-devtools

[fahad19]

Input from @yurist38 would be highly appreciated since he already has experience with such tools.

[yurist38]

@fahad19 Thanks for mentioning me! If you have any thoughts (or even better a mockup) about how that extension should look like, that would help developers to start. And of course, if someone will be interested we could organize some knowledge transfer session.

[fahad19]

@yurist38: I will update you soon here.

[fahad19]

I am currently thinking of something like this:

• Top bar: has setting icon, that can lead to a form where developer can assign the root app variable (like window.app)
• Left sidebar: lists all the apps. Root App appears on top, followed by child apps (they can be styled a bit different in list, to give prominence to Root App)
• Main view:
  • Top bar: has two tabs/pills (options and providers)
  • Content area: lists items

[fahad19]

if anyone is interested, ping me right away. I will set up the repo and add you there so that it can be started.

[yurist38]

@fahad19 Since the initiative for Frint DevTools is already approved could you please create a repo.

[fahad19]

@yurist38: done. you are admin of this repo now: https://github.com/frintjs/frint-devtools