If creating a div is more performant than creating a span, why insist on using a span? How is that pay as you go?
Thanks, Om On Thu, Mar 15, 2018 at 5:19 PM, Alex Harui <[email protected]> wrote: > A Flex Label, and any Flex component was a swiss-army knife of features > and not PAYG. I have not given up on PAYG. I think it will pay off when > we get to the last mile. If we don't stick to PAYG, I think we will just > repeat the history of Flex and produce a fat framework that can't run > everywhere. Yes, a Div would probably better mimic a Flex Label, but the > Basic label is not a swiss-army knife. > > This article is old, but I think it says you can't put a Div in a Span: > http://doctype.com/span-contain-div-html5 > > I think you can if you change the span's display to "block" but I think > that is essentially replacing the element. > > Everything, including width and truncation should be opt-in, PAYG. Make a > LabelWithWidth or SizeableLabel component that is a div if you want. > > Again, the goal is to encapsulate common patterns. I am not seeing a lot > of Divs wrapping text nodes. I see lots of spans wrapping text nodes. > Basic Label is that pattern. The Basic component set would be incomplete > if there wasn't a component that could inject a Span into the DOM. Create > another component that is a Div wrapping a text node, give it a different > name, and let's move on. > > Alina used Label quite often without setting width. No need for those > instances to be a Div, AFAICT. > > Do we even need to discuss span vs div if the truncation bead will work by > setting display:block? > > We have a huge opportunity here to get another app migrated and prove to > the world that Royale is the right choice. But we keep discussing stuff > that IMO, isn't really moving the big pieces forward. But, IMO, we should > not compromise on PAYG philosophy and patterns. > > My 2 cents, > -Alex > > On 3/15/18, 4:27 PM, "[email protected] on behalf of OmPrakash Muppirala" > <[email protected] on behalf of [email protected]> wrote: > > >FWIW, it seems like creating divs is faster than creating spans. > >https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fjsperf.co > >m%2Fspan-vs-div-creation&data=02%7C01%7Caharui%40adobe.com > %7C3664f690b3da4 > >e4aefab08d58acc7bf0%7Cfa7b1b5a7b34438794aed2c178de > cee1%7C0%7C0%7C636567533 > >215453966&sdata=oPPp2e9aRbQ%2FngKbcFMHMCmXi%2BKa%2B% > 2F0aA98XFFqxhFA%3D&res > >erved=0 > > > >Thanks, > >Om > > > >On Thu, Mar 15, 2018 at 3:38 PM, Greg Dove <[email protected]> wrote: > > > >> Observing from the sidelines, fwiw I agree with Harbs here. Span to me > >> makes more sense as part of the text value of a label and not as the > >>basis > >> for the representation of the Label itself - div seems closer to what I > >>was > >> used to with legacy Flex (which may no longer be the 'reference' for > >> choosing an implementation). > >> I don't think there is any semantic or other reason that makes span the > >> logical default tag for Label, in fact I recall that being a problem > >>many > >> times with some work I was involved with last year using FlexJS. > >> But maybe I am missing something in terms of understanding. > >> > >> > >> > >> > >> On Fri, Mar 16, 2018 at 11:08 AM, Harbs <[email protected]> wrote: > >> > >> > I’m suggesting to change it because span does not fit the use case of > >> > Label. Width and truncate are just two applications which indicate > >>that > >> > span is not the correct element. I’m pretty sure I had other edge > >>cases > >> > which were likely effected by the fact that Label is a span, although > >>I’m > >> > not positive. > >> > > >> > I disagree with your distinction between span and div. > >> > > >> > Both span and div can have children. Spans can contain divs and divs > >>can > >> > contain spans. At its core, Span has nothing to do with text. It’s > >>just > >> > often used for text because text (within its container) is inline. > >> > > >> > MDN says[1] "<span> is very much like a <div> element, but <div> is a > >> > block-level element whereas a <span> is an inline element.” > >> > > >> > Label is *not* necessarily an inline element. We have all kinds of > >> layouts > >> > for Label. Many (most?) of them are not inline. > >> > > >> > If you feel really strongly about this, I’ll revert even though I > >> disagree. > >> > > >> > FWIW, the truncate bead does not need to change the element type. It > >>can > >> > explicitly set the display of the element to block. > >> > > >> > Harbs > >> > > >> > > >>[1]https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fdevel > >>oper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement% > 2Fspan&data=02%7C0 > >>1%7Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > 7bf0%7Cfa7b1b5a7b344 > >>38794aed2c178decee1%7C0%7C0%7C636567533215453966&sdata= > xrtF9H7%2BjFzqGDax > >>nj0%2BuY3hsHu6BaUb4Yp15ucwhyc%3D&reserved=0 < > >> > > >>https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fdevelope > >>r.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTML%2FElement% > 2Fspan&data=02%7C01%7 > >>Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > 7bf0%7Cfa7b1b5a7b344387 > >>94aed2c178decee1%7C0%7C0%7C636567533215453966&sdata= > xrtF9H7%2BjFzqGDaxnj0 > >>%2BuY3hsHu6BaUb4Yp15ucwhyc%3D&reserved=0> > >> > > >> > > On Mar 15, 2018, at 11:25 PM, Alex Harui <[email protected]> > >> > wrote: > >> > > > >> > > Label in Flex and Royale is not intended to have any children (other > >> than > >> > > bold, italic and other text markup). Span represents that. Div > >>does > >> > not. > >> > > You are suggesting changing to div JUST IN CASE someone needs to > >>set a > >> > > width and/or truncate. Just-in-case code is not PAYG. > >> > > > >> > > My 2 cents, > >> > > -Alex > >> > > > >> > > On 3/15/18, 2:17 PM, "[email protected] <mailto: > >> > [email protected]> on behalf of Carlos Rovira" > >> > > <[email protected] <mailto:[email protected]> on behalf > >>of > >> > [email protected] <mailto:[email protected]>> wrote: > >> > > > >> > >> And why not change IBeadView in Label for a view that uses a div > >>when > >> > >> needed? ;) > >> > >> in the other cases, maintains the span > >> > >> > >> > >> 2018-03-15 21:05 GMT+01:00 Harbs <[email protected]>: > >> > >> > >> > >>> I’m still not understanding you. What about Label says it’s a span > >> > >>> instead > >> > >>> of a div? Why is making it a div not PAYG? Span simply limits > >>Label > >> > >>> unnecessarily. I think span is not the appropriate element for > >>Label. > >> > >>> > >> > >>>> A Label without width should grow to the size of its text. Isn't > >> that > >> > >>> how > >> > >>>> it worked in Flex? > >> > >>> > >> > >>> Sure, and a div does that too. In Flex, a label could have a width > >> too > >> > >>> if > >> > >>> specified. Spans cannot. > >> > >>> > >> > >>> Harbs > >> > >>> > >> > >>>> On Mar 15, 2018, at 9:56 PM, Alex Harui > >><[email protected]> > >> > >>> wrote: > >> > >>>> > >> > >>>> Have the truncation bead swap the span for div. Again, some > >> component > >> > >>> has > >> > >>>> to put a span in the DOM. Label has been just fine for that so > >>far. > >> > >>>> > >> > >>>> A Label without width should grow to the size of its text. Isn't > >> that > >> > >>> how > >> > >>>> it worked in Flex? > >> > >>>> > >> > >>>> Maybe Label should be refactored to not have width/height > >>properties > >> > >>> but > >> > >>>> IMO we have bigger fish to fry. > >> > >>>> > >> > >>>> I'm sure Div is used to wrap text in some frameworks, but those > >> > >>> frameworks > >> > >>>> probably aren't PAYG. In Alina's app, Label has a usage score of > >> 69, > >> > >>> but > >> > >>>> Label.width has a score of only 5. We will have her use > >> > >>>> LabelWithTruncation or add the truncation bead on the few labels > >> that > >> > >>> need > >> > >>>> > >> > >>>> My 2 cents, > >> > >>>> -Alex > >> > >>>> > >> > >>>> On 3/15/18, 12:45 PM, "Harbs" <[email protected]> wrote: > >> > >>>> > >> > >>>>> But we already have a truncation bead. The only reason it > >>doesn’t > >> > >>> work > >> > >>> in > >> > >>>>> Label is because spans don’t have widths. > >> > >>>>> > >> > >>>>> Label is not something which should flow beyond its bounds — > >>which > >> is > >> > >>>>> what span is useful for. I still don’t see why you think span > >>makes > >> > >>> more > >> > >>>>> sense. > >> > >>>>> > >> > >>>>> FWIW, div *is* used as a container for text in various > >>frameworks. > >> > >>>>> > >> > >>>>> My $0.02, > >> > >>>>> Harbs > >> > >>>>> > >> > >>>>>> On Mar 15, 2018, at 9:42 PM, Alex Harui > >><[email protected] > >> > > >> > >>>>>> wrote: > >> > >>>>>> > >> > >>>>>> AIUI, "inline" is the default display style for Span. "block" > >>is > >> > >>> the > >> > >>>>>> default for Div. HTML flows inline by default for just plain > >> text. > >> > >>>>>> Basic > >> > >>>>>> components try to give Flex-friendly names for HTMLElements. > >>Some > >> > >>>>>> component in Basic needs to inject a span into the DOM. In a > >>few > >> > >>>>>> seconds > >> > >>>>>> of looking at a Google web page, I did not see any divs with > >>text > >> as > >> > >>>>>> children. I saw spans. The Divs all contained other elements. > >> > >>>>>> > >> > >>>>>> I don't create HTML web pages for a living, but if I were to > >> place a > >> > >>>>>> label > >> > >>>>>> over a control like I often see in Flex, I would not wrap the > >> label > >> > >>> in > >> > >>> a > >> > >>>>>> Div. The control would be div, so I would us a span or just > >>plain > >> > >>> text. > >> > >>>>>> If I looked at the final DOM and saw Divs around every chunk of > >> > >>> text, I > >> > >>>>>> would think there is something heavy about the framework. > >> > >>>>>> > >> > >>>>>> Again, the goal is to encapsulate common patterns. Label > >>combined > >> > >>> with > >> > >>>>>> some control is trying to replicate common patterns for > >>labeling > >> > >>>>>> controls. > >> > >>>>>> You are trying to solve the common pattern of truncating text. > >> That > >> > >>>>>> will > >> > >>>>>> require a Div. But truncation, or even width/height is not > >> something > >> > >>>>>> that > >> > >>>>>> should be built into Label for PAYG reasons. IMO, you should > >> > >>> create a > >> > >>>>>> different component with a different name. TruncatingLabel, or > >> > >>>>>> LabelWIthTruncation. > >> > >>>>>> > >> > >>>>>> My 2 cents, > >> > >>>>>> -Alex > >> > >>>>>> > >> > >>>>>> On 3/15/18, 12:19 PM, "Harbs" <[email protected]> wrote: > >> > >>>>>> > >> > >>>>>>> Why is span lighter than div? > >> > >>>>>>> > >> > >>>>>>> Inline and nowrap is not specific to span. AFAICT, there’s > >> nothing > >> > >>>>>>> specific to snap which fits Label better than div. > >> > >>>>>>> > >> > >>>>>>> As far as components which “does” span: Besides Span in HTML, > >>we > >> > >>> have > >> > >>>>>>> HTMLText in Basic which encapsulates span. > >> > >>>>>>> > >> > >>>>>>> I can revert the change I made to Label, but I have not seen > >>any > >> > >>>>>>> downside > >> > >>>>>>> to using div for Label. It seems to me that there’s nothing in > >> the > >> > >>>>>>> Label > >> > >>>>>>> promise which dictates using span. > >> > >>>>>>> > >> > >>>>>>> Harbs > >> > >>>>>>> > >> > >>>>>>>> On Mar 15, 2018, at 6:55 PM, Alex Harui > >> <[email protected] > >> > > > >> > >>>>>>>> wrote: > >> > >>>>>>>> > >> > >>>>>>>> > >> > >>>>>>>> > >> > >>>>>>>> On 3/15/18, 5:34 AM, "Harbs" <[email protected]> wrote: > >> > >>>>>>>> > >> > >>>>>>>>> Gotcha. FWIW, we now have the HTML element component set > >>which > >> > >>> more > >> > >>>>>>>>> thinly wraps HTML elements. > >> > >>>>>>>>> > >> > >>>>>>>>> I can’t think of any reason why Label would be better as a > >>span > >> > >>> than > >> > >>>>>>>>> a > >> > >>>>>>>>> div. It seems to me that simply using div instead of span > >>would > >> > >>> make > >> > >>>>>>>>> Label more versatile. Am I missing something? > >> > >>>>>>>> > >> > >>>>>>>> You may be missing that the only real goal of Royale is to > >> > >>> encapsulate > >> > >>>>>>>> popular patterns. Pretty sure I've seen span used on many > >>web > >> > >>> pages, > >> > >>>>>>>> so > >> > >>>>>>>> we need a component that does what it does, including > >>assuming > >> > >>> inline > >> > >>>>>>>> instead of block display. Similarly, what would you think > >>of a > >> > >>>>>>>> framework > >> > >>>>>>>> that had a HelloWorld that used a div instead of a span? You > >> > >>> might > >> > >>>>>>>> think > >> > >>>>>>>> it is too heavy. > >> > >>>>>>>> > >> > >>>>>>>> Per PAYG, if span doesn’t' support certain features, then you > >> > >>> create > >> > >>> a > >> > >>>>>>>> LabelWithTruncation and have it use a Div if you need to. > >> > >>>>>>>> > >> > >>>>>>>> My 2 cents, > >> > >>>>>>>> -Alex > >> > >>>>>>>>> > >> > >>>>>>>>>> On Mar 15, 2018, at 2:30 PM, Peter Ent > >><[email protected] > >> > > >> > >>>>>>>>>> wrote: > >> > >>>>>>>>>> > >> > >>>>>>>>>> Label was one of the very first components and the idea was > >> > >>>>>>>>>> minimalism. > >> > >>>>>>>>>> Button was <button> and TextInput was <input type="text"> > >>and > >> > >>> Label > >> > >>>>>>>>>> was > >> > >>>>>>>>>> <span>. > >> > >>>>>>>>>> > >> > >>>>>>>>>> I'm wondering if we should have NativeButton, NativeLabel, > >> etc. > >> > >>>>>>>>>> which > >> > >>>>>>>>>> would be these minimal elements and have others that are > >><div> > >> > >>>>>>>>>> wrapping. > >> > >>>>>>>>>> For instance, ImageAndTextButton is a <button><img > >> > >>>>>>>>>> src="goo.jpg">Label > >> > >>>>>>>>>> Here</button> which works but the alignment is weird so > >>maybe > >> > >>>>>>>>>> ImageAndTextButton should be a <div><img>Text</div> which > >>can > >> be > >> > >>>>>>>>>> aligned > >> > >>>>>>>>>> and styled better. > >> > >>>>>>>>>> > >> > >>>>>>>>>> Anyway, that's the reason: simplicity. > >> > >>>>>>>>>> > >> > >>>>>>>>>> ‹peter > >> > >>>>>>>>>> > >> > >>>>>>>>>> On 3/15/18, 7:51 AM, "Harbs" <[email protected]> > wrote: > >> > >>>>>>>>>> > >> > >>>>>>>>>>> Is there a reason that the element type of Basic Label is > >> span? > >> > >>>>>>>>>>> > >> > >>>>>>>>>>> I tried adding a łTextOverflow˛ bead to a Label and it > >>does > >> not > >> > >>>>>>>>>>> seem > >> > >>>>>>>>>>> to > >> > >>>>>>>>>>> work because spans donąt really have a working width. > >> Switching > >> > >>> the > >> > >>>>>>>>>>> element type to div seems to make it work. > >> > >>>>>>>>>>> > >> > >>>>>>>>>>> Harbs > >> > >>>>>>>>>> > >> > >>>>>>>>> > >> > >>>>>>>> > >> > >>>>>>> > >> > >>>>>> > >> > >>>>> > >> > >>>> > >> > >>> > >> > >>> > >> > >> > >> > >> > >> > >> -- > >> > >> Carlos Rovira > >> > >> https://na01.safelinks.protection.outlook.com/?url= > >> > http%3A%2F%2Fabout.me%2 > >><https://na01.safelinks.protection.outlook.com/?url= > https%3A%2F%2Fna01.sa > >>felinks&data=02%7C01%7Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > 7 > >>bf0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636567533215453966&sdata > >>=exoH%2BPKzuyM%2BykE65GQeHk%2BjPAZSsUFjsKwx3BRvjsk%3D&reserved=0. > >> > protection.outlook.com/?url=http%3A%2F%2Fabout.me%2> > >> > >> Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com > >><https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2F40adobe > . > >>com%2F&data=02%7C01%7Caharui%40adobe.com%7C3664f690b3da4e4aefab08d58acc > 7b > >>f0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > 7C636567533215453966&sdata= > >>ewhtNMkSjHssIseUSvxq9etF%2FtrcA%2Buqk3sZlJkjHuc%3D&reserved=0 > >> >% > >> > 7Cae539925833d453aaa2e08d5 > >> > >> 8aba29c4%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0% > >> > 7C636567454874235113&s > >> > >> data=Xvu%2BZ7186rOBNg5j0KrJsGPi5O4YnwiY1WVtz2xsNvc%3D&reserved=0 > >> > > >> > > >> > >
