<div dir="ltr">> <span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">I want to avoid dealing with HTML</span><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px"><br></span></div><div><span style="color:rgb(51,51,51);font-family:Georgia,"Times New Roman",Times,serif;font-size:16px">Using HTML is part of premise of the proposal, correct? </span></div><div><br></div><div><font face="georgia, serif">Am still not sure what the actual requirement is. If the requirement is to prevent duplicate _values_ being input by the user you can utilize ```pattern``` attribute of ```<input>```  with a ```RegExp``` which matches the current values of ```<input>``` elements, ```oninvalid``` and ```checkValidity()``` which will provide the functionality of the ```value``` attribute of ```<input>``` and ```<select>``` elements being unique as to a ```<form>``` element. </font></div><div><font face="georgia, serif"><br></font></div><div><font face="georgia, serif">If there is no user input there should not be any issue creating unique key-value pairs using ```Map```, ```WeakMap``` or ```Set```. </font></div><div><br></div><div>> and even more HTTP verb related things like `Form` and `FormData` and just deal with general JS objects, so I use Models instead of things like `FormData`.  </div><div><br></div><div>A ```FormData``` object can be serialized, am not certain what a "Model" is. What do you consider to be "general JS objects"?</div></div><br><div class="gmail_quote"><div dir="ltr" class="gmail_attr">On Thu, May 23, 2019 at 5:14 PM Randy Buchholz <<a href="mailto:work@randybuchholz.com">work@randybuchholz.com</a>> wrote:<br></div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex">





<div lang="EN-US">
<div class="gmail-m_6389149576789251334WordSection1">
<p class="MsoNormal"><a id="gmail-m_6389149576789251334OWAAM83D49FBF518C4359B48505674C52706E" href="mailto:andrea.giammarchi@gmail.com" target="_blank"><span style="font-family:Calibri,sans-serif;text-decoration:none">@Andrea Giammarchi</span></a>, While the connection is secondary, HTML often serves
 as the specification for the creation of JS objects. And while it could be considered a sub-set, JS is full of HTML related features - `HTMLElement` for one. Thing is, if you are programming in JS for browser applications, you’re dealing with HTML-adjacent
 JS at some point. What I’m trying to do, though, somewhat supports your point.  I see a lot of higher-level code manipulating HTML tags, which feels really wrong. Even dealing with `HTMLElement` in higher-level code doesn’t seem to make a lot of sense.  I’m
 trying to encapsulate the elements and tags, and move that point as far into the background as I can.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><a id="gmail-m_6389149576789251334OWAAMDFA2C7235788439E9F1548CACB9BFE49" href="mailto:guest271314@gmail.com" target="_blank"><span style="font-family:Calibri,sans-serif;text-decoration:none">@guest271314</span></a><u></u><u></u></p>
<p class="MsoNormal">If we think of Indexes as a type of key-value pairs, a “regular” Index  allows duplicate keys, and a Unique Index requires unique keys. Indexes are always sorted on their keys. So in this case, when the index is built, it creates k-v pairs
 of attributeName-elementId, ordered by attributeName.  To get all elements with a specific attribute, we just find the first one with that key, and keep reading -`getElementbyId(elementId)` - until the key changes.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">You’re right about `id`. I’m converting generic, multi-instance template “tags” into  elements with id’s, so I can access them directly without searching. Just using `getElementById`. The template as been “localized” per instance, and encapsulated
 behind a controller. I want to avoid dealing with HTML, and even more HTTP verb related things like `Form` and `FormData` and just deal with general JS objects, so I use Models instead of things like `FormData`.  <u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">So for example, the business perspective of a ”Person” has “Age” data. A page may display multiple people at once.<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><custom-person id=’person1’><u></u><u></u></p>
<p class="MsoNormal"><custom-person id=’person2’><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">The goal is to get from the source tag to non-html/element related JS as soon as possible.    <u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">The template behind this might look something like<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><framework-container><u></u><u></u></p>
<p class="MsoNormal">   <input prop=’name’ /><u></u><u></u></p>
<p class="MsoNormal">    <input prop=`age` /><u></u><u></u></p>
<p class="MsoNormal"></framework-container><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">When `connectedCallback` runs, it creates  a `View` using the template<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><sometag><u></u><u></u></p>
<p class="MsoNormal">   <input id=’person1_name` /><u></u><u></u></p>
<p class="MsoNormal">   <input id=`person1_age` /><u></u><u></u></p>
<p class="MsoNormal"></sometag><u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal"><sometag><u></u><u></u></p>
<p class="MsoNormal">    <input id=’person2_name’ /><u></u><u></u></p>
<p class="MsoNormal">    <input id=’person2_age’ /><u></u><u></u></p>
<p class="MsoNormal"></sometag><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">A `Model`<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">class person{<u></u><u></u></p>
<p class="MsoNormal">    name;<u></u><u></u></p>
<p class="MsoNormal">    age;<u></u><u></u></p>
<p class="MsoNormal">}<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">And a dynamically configured `Controller` and instance. A base Person class contains common functionality.<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">class Person1 extends Person{<u></u><u></u></p>
<p class="MsoNormal">    get name(){ return document.getElementById(‘person1_name’)<u></u><u></u></p>
<p class="MsoNormal">    …<u></u><u></u></p>
<p class="MsoNormal">    get model(){ return this.populateModel();}<u></u><u></u></p>
<p class="MsoNormal">}<u></u><u></u></p>
<p class="MsoNormal">self.controllers.add(new Person1());<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">Now I don’t need to deal with any HTML/element or “tag hierarchy” related JS. I pretty much abstract out the HTML and HTMLElement pieces when the Custom Element is initially loaded.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">    const personAge = self.controllers.person1.age;  <u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">At a lower level, I can create attribute related properties using the dynamically assigned element id.<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><input prop=’name’ attrib=’style.color’ /><u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">This would end up creating a property or methods on the controller that allows me to not have to deal with styles and CSS classes directly, and even constrain values.
<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal">self.controllers.person1.name.color = “red”;<u></u><u></u></p>
<p class="MsoNormal">```<u></u><u></u></p>
<p class="MsoNormal"><u></u> <u></u></p>
<p class="MsoNormal">So the whole index thing started when I was loading/parsing dynamic html/JS code and searching for `prop` and `attrib` repeatedly. If I know I’m going to be searching on an attribute a lot, maybe I could give the parser/engine a hint it
 could use to optimize that search.<u></u><u></u></p>
</div>
</div>

_______________________________________________<br>
es-discuss mailing list<br>
<a href="mailto:es-discuss@mozilla.org" target="_blank">es-discuss@mozilla.org</a><br>
<a href="https://mail.mozilla.org/listinfo/es-discuss" rel="noreferrer" target="_blank">https://mail.mozilla.org/listinfo/es-discuss</a><br>
</blockquote></div>