royale-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Alex Harui <aha...@adobe.com.INVALID>
Subject Re: Label
Date Fri, 16 Mar 2018 03:37:20 GMT
Because, this isn't an issue of performance.  We give our users choices
and a toolkit to replicate ANY HTML tree they want to.  We are proposing
to replace what is to me the most obvious Flex-like component name for
injecting a span into the DOM.  Label is a single-line sequence of text.
So is Span.

I'm not seeing a huge performance difference.  If you think it is
significant enough that our users should be alerted to use SizeableLabel
or whatever we call the Div-wrapping-text version, start blogging it after
you validate your test case.  I noticed that the number of Spans the test
appears to report are higher than the number of Divs, but that might be a
false alarm.  You can be a hero in the web world if you are right and
change the advice I see elsewhere on the net to use Span for inline
elements and Div for other things.  Even the JSPerf page is using spans.
Tell them to replace them.

Meanwhile, I'm going back to try to migrate an app.  Sure wish we had more
people helping on that.

-Alex


We can certainly give them advice that SizedLabel is faster than Label if
that's important, but the different didn't seem that significant.

On 3/15/18, 6:14 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>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 <aharui@adobe.com.invalid>
>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:
>> 
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fdoctype.c
>>om%2Fspan-contain-div-html5&data=02%7C01%7Caharui%40adobe.com%7C77b57b271
>>ef7423114c208d58ae0d810%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365
>>67620658308491&sdata=o9msOjZpbwywflSfgJDebUdMM3hgNPdN%2Btn%2BrcSZsV4%3D&r
>>eserved=0
>>
>> 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, "omuppi1@gmail.com on behalf of OmPrakash
>>Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> 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 <greg.dove@gmail.com> 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 <harbs.lists@gmail.com>
>>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
>><aharui@adobe.com.INVALID>
>> >> > 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, "carlos.rovira@gmail.com <mailto:
>> >> > carlos.rovira@gmail.com> on behalf of Carlos Rovira"
>> >> > > <carlos.rovira@gmail.com <mailto:carlos.rovira@gmail.com>
on
>>behalf
>> >>of
>> >> > carlosrovira@apache.org <mailto:carlosrovira@apache.org>>
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 <harbs.lists@gmail.com>:
>> >> > >>
>> >> > >>> 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
>> >><aharui@adobe.com.INVALID>
>> >> > >>> 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" <harbs.lists@gmail.com>
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
>> >><aharui@adobe.com.INVALID
>> >> >
>> >> > >>>>>> 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" <harbs.lists@gmail.com>
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
>> >> <aharui@adobe.com.INVALID
>> >> > >
>> >> > >>>>>>>> wrote:
>> >> > >>>>>>>>
>> >> > >>>>>>>>
>> >> > >>>>>>>>
>> >> > >>>>>>>> On 3/15/18, 5:34 AM, "Harbs" <harbs.lists@gmail.com>
>>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
>> >><pent@adobe.com.INVALID
>> >> >
>> >> > >>>>>>>>>> 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"
<harbs.lists@gmail.com>
>> 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%7C3664f690b3da4e4aefab08d58ac
>>>>c
>> 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%2F40adob
>>>>e
>> .
>> 
>>>>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
>> >> >
>> >> >
>> >>
>>
>>

Mime
View raw message