Show how to make your own input component

[jenweber]

In Ember Octane, we have an emphasis on teaching devs how to use Ember to interact with the DOM. We should show an example of how to create a regular input, as opposed to Input.

Showing how to write a vanilla input component serves 3 purposes:

• Teaches how to interact with the DOM
• Allows people to clearly use and understand aria properties
• empowers devs to understand the tradeoffs between input and Input, and make an informed decision
• allows people to sidestep some of the event weirdness that Input has (see Input component does not accept documented event names emberjs/ember.js#18654)

[jenweber]

Note, this issue should get some learning team feedback before we move forward.

[jenweber]

@ember-learn/learning-core-team please review and add your comments to this issue before our next meeting, if you can find the time!

[locks]

The last time we discussed covering input some issues were raised that are still relevant, like the ergonomics of updating a value on change, hope to discuss this proposal at the weekly meeting in more detail!
If we teach how to build your own "wrapper" component, meaning this wrapper component would have the change callback and expose some API to the user, I think we might end up in uncanny valley. Would it make sense to frame it as a deep dive into interacting with the DOM in general?

[jenweber]

The last point you made there is the framing I would like to use.

[pzuraq]

So, one of the principles we've been moving toward is exposing the primitives, and I don't think that Input is a primitive. Rather, it's a high level convention, but it should still be based on primitives. I think having a guide that shows users how to build the conventional Input component (and all built-in components) would be a good idea.

There is the issue that the current Input is still using older conventions, and hasn't been updated quite yet. We need to finish work on {{box}} to make progress there, so it'll be a while for that. LinkTo is in a similar spot, we need to implement the Router Helpers RFC to be able to show users how to build it in a solid, conventional way.

Once that's done though, I think it would be a great guide to have. It shouldn't be the primary path for new learners, but it could be something like a tutorial: Making Ember Built-Ins from Scratch. I think this would be a great resource for intermediate learners.

[MelSumner]

I think it's a bit of change we can make to the guides now that would be immediately useful. If/when we resolve the other issues, we could update the guides accordingly.

[rajasegar]

@pzuraq What is {{box}}?

[pzuraq]

See: https://github.com/pzuraq/ember-box

[chriskrycho]

@MelSumner @pzuraq I agree that there’s a lot of value here, but I do not think it’s a good idea to show how to implement the current Input and LinkTo. There be dragons in the waters for implementing it in a way that’s backwards-compatible with positional arguments as those are currently. 🐉 🌊 (I’ve spent painful time up close and personal with both Input and LinkTo in the last couple weeks, and it is appropriately gnarly given what it has to do. 😬)

A Glimmer-ready implementation, by contrast, would be very helpful—and would allow us to avoid some of the foot-guns present in implementing the primitives we have today. (There’s probably also value in showing how to do even what we have today, but I’d absolutely put that in the “Advanced” rather than “Intermediate” learning materials bucket.)

[jenweber]

To clarify, I would not intend to show a “faithful” Input, rather an Octane-style input without 2 way binding.

[chriskrycho]

100% to that approach! If I had more time, I'd do it myself as it's right in one of my hobby-horse spaces. 😂

[hergaiety]

Perhaps diving into the differences between <input> and <Input> may be confusing to some. What if, instead, we describe a similar use case that comes up commonly that Ember does not attempt to solve for out of the box such as <select> dropdowns? We could cover a lot of the same content such as labels, a11y, setting the value and listening for change events etc.

[chriskrycho]

I would agree if beginners were the target audience, but precisely because this material is intended for an Intermediate audience I think it’s great to tackle what is unarguably already a slightly confusing point in Ember. That being said, no reason there can’t be dedicated How To/Recipe-style materials for more than one of these!