From 6a1b623f586890ff0fd1afa4d9765b496ad62d48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86gir=20Giraldo=20=C3=9Eorsteinsson?= Date: Mon, 12 Nov 2018 11:42:16 +0000 Subject: [PATCH 1/4] First draft for extensible inspector --- text/0000-extensible-inspector.md | 72 +++++++++++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 text/0000-extensible-inspector.md diff --git a/text/0000-extensible-inspector.md b/text/0000-extensible-inspector.md new file mode 100644 index 0000000000..87829ec995 --- /dev/null +++ b/text/0000-extensible-inspector.md @@ -0,0 +1,72 @@ +- Start Date: 2018-09-12 +- RFC PR: (leave this empty) +- Ember Issue: (leave this empty) + +# Extensible Inspector + +## Summary + +Unlock experimentation for the Ember Inspector by allowing addons to extend it. + +## Motivation + +Ember itself has increasingly shifted toward a stable core with experimentation through addons and the Inspector could benefit from a similar philosophical shift. It would move maintenance of debugging functionality away from Inspector maintainers. Instead of Inspector maintainers having to carefully weigh ongoing maintenance costs within the Inspector for each new feature, we could move experiments to addons and co-locate debugging functionality within the same addon that provides the functionality. + +I first got excited about this after talking to David Baker and the learning team at EmberConf and David wrote a good explanation at +https://discuss.emberjs.com/t/ember-inspector-call-for-feature-requests-pain-points-and-contributors/15187/20. + +### Use cases + +*Data layer* +Allow other data layers to implement devtools, for example Redux. + +*Ember addons* +Increase the debuggability of Ember addons by providing devtools for them. + +Few examples: + +- Ember-feature-flags could list all flags registered and allow users to toggle them. +- Ember-mirage could have an editor for its state. +- Ember-animated could show controls for speed of the animations. + +*Devtools only addons* +We would also open the possibility to create addons that only contain devtools. This unlocks experimentation for new features for the Inspector without changing the core. It could also be used to provide devtools for the web platform or JS libraries. + +*Application specific devtools* +Ember apps could write their own devtools. + +- Good for large teams +- Ease new developers into the domain knowledge +- The app is reactive to changes + +### Non Ember CLI apps + +The addon devtools would only work when there’s a Ember CLI dev server running along with the Ember app. When inspecting an app in production (Non Ember CLI) you would only get what’s currently included in the inspector. + +We should focus on enriching the experience for local development while keeping the same functionality for production apps. + +The devtools for other framework don’t work on production builds so I wouldn’t be surprised if the inspector would follow that route in the future to allow Ember to be even smaller in production builds. + +## Detailed design + +To avoid all security risk we can use sandboxed iframes, just like Twiddle and similar tools. The Ember CLI devserver would serve Ember apps under `/_inspector/` (configurable) that would be loaded into an sandboxed iframe and communicate with the inspector with `postMessage`. The inspector is already sending messages from the host site to the Ember app in the inspector. The extensions could register to the events they want to listen to. + +## How we teach this + +Having a better devtools should make the learning curve better for Ember. The devtools would be installed automatically as you install addons so there’s no need to teach this to the users. + +We will need to create a documentation for addon authors on how to hook into the inspector and the running Ember app to provide devtools. + +## Drawbacks + +The main drawback is that this would only work for Ember CLI based apps and not on production builds. + +## Alternatives + +I first thought about using engines but they do not support dynamically mounting an engine yet (https://github.com/ember-engines/ember-engines/issues/99) and loading 3rd party code into the extension is a security risk. + +Instead of getting the devtools through the Ember CLI dev server we could lazily load them from a central repository. The main drawback there are security reasons having it hosted and having to host it somewhere. + +## Unresolved questions + +Should we share styles for consistency and dark/light theme support or should the apps take care of all styling? From 86d372818d72b926bc0b38262e7669df21de62a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=86gir=20Giraldo=20=C3=9Eorsteinsson?= Date: Wed, 28 Nov 2018 21:18:11 +0000 Subject: [PATCH 2/4] Fix formatting of headings --- text/0000-extensible-inspector.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/text/0000-extensible-inspector.md b/text/0000-extensible-inspector.md index 87829ec995..7e1d89a2de 100644 --- a/text/0000-extensible-inspector.md +++ b/text/0000-extensible-inspector.md @@ -17,10 +17,10 @@ https://discuss.emberjs.com/t/ember-inspector-call-for-feature-requests-pain-poi ### Use cases -*Data layer* +#### Data layer Allow other data layers to implement devtools, for example Redux. -*Ember addons* +#### Ember addons Increase the debuggability of Ember addons by providing devtools for them. Few examples: @@ -29,10 +29,10 @@ Few examples: - Ember-mirage could have an editor for its state. - Ember-animated could show controls for speed of the animations. -*Devtools only addons* +#### Devtools only addons We would also open the possibility to create addons that only contain devtools. This unlocks experimentation for new features for the Inspector without changing the core. It could also be used to provide devtools for the web platform or JS libraries. -*Application specific devtools* +#### Application specific devtools Ember apps could write their own devtools. - Good for large teams From f9680759c50f2477da3e00a6a62ee3689a73f84d Mon Sep 17 00:00:00 2001 From: Aegir Thorsteinsson Date: Tue, 18 Dec 2018 09:49:52 -0800 Subject: [PATCH 3/4] Update 0000-extensible-inspector.md --- text/0000-extensible-inspector.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/0000-extensible-inspector.md b/text/0000-extensible-inspector.md index 7e1d89a2de..30b02b2ba7 100644 --- a/text/0000-extensible-inspector.md +++ b/text/0000-extensible-inspector.md @@ -41,7 +41,7 @@ Ember apps could write their own devtools. ### Non Ember CLI apps -The addon devtools would only work when there’s a Ember CLI dev server running along with the Ember app. When inspecting an app in production (Non Ember CLI) you would only get what’s currently included in the inspector. +The addon devtools would only work when there’s an Ember CLI dev server running along with the Ember app. When inspecting an app in production (Non Ember CLI) you would only get what’s currently included in the inspector. We should focus on enriching the experience for local development while keeping the same functionality for production apps. From 52d69468ff312a3083f50c25a2bd9e42699a1ee3 Mon Sep 17 00:00:00 2001 From: Aegir Thorsteinsson Date: Tue, 18 Dec 2018 09:54:09 -0800 Subject: [PATCH 4/4] Update 0000-extensible-inspector.md --- text/0000-extensible-inspector.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/text/0000-extensible-inspector.md b/text/0000-extensible-inspector.md index 30b02b2ba7..6c6b9c5571 100644 --- a/text/0000-extensible-inspector.md +++ b/text/0000-extensible-inspector.md @@ -55,7 +55,7 @@ To avoid all security risk we can use sandboxed iframes, just like Twiddle and s Having a better devtools should make the learning curve better for Ember. The devtools would be installed automatically as you install addons so there’s no need to teach this to the users. -We will need to create a documentation for addon authors on how to hook into the inspector and the running Ember app to provide devtools. +We will need to create documentation for addon authors on how to hook into the inspector and the running Ember app to provide devtools. ## Drawbacks