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: Layout optimizations
Date Tue, 27 Mar 2018 04:38:12 GMT
Fundamentally, Royale should not force anyone into one way of thinking or
the other regarding layout and css or really anything.  This is why I'm
not in favor of putting any deferred computation in the core.  I think the
key discovery so far is that LayoutBase was forcing every layout to
compute the width/height.  That does not fit into the above philosophy.
Let's remove that, and fix the layouts that were counting on it.

It will be totally fine of some layouts go back and set width/height or
even position:absolute and left and top.  Other layouts should just set
display and let the browser do the work.  The key thing is that the code
should not make assumptions.  Can we just agree to do that?

For those layouts that need to read back a value, feel free to keep
experimenting with ways to optimize it, but I still don't think any of
that needs to go in core.  It could go in some other base class above
LayoutBase to be used by those who need it.

I still don't get why deferral helps at all unless you can guarantee that
the code that reads these values will NEVER write a value that invalidates
the prior computation.  In the scenarios described, won't setting scale
invalidate the DOM?  Or setting a parent's width/height based on the
child's content?  I would think the main goal is just to try to coordinate
the reads (and cache them when possible) and then be smart somehow about
the writes.  I'm not clear you have to wait for a later event, maybe just
add to a queue that gets called at the end of layout as we have it today.

IMO, there are two valid scenarios: react to browser window size changes,
and react to content size changes.  I'm not 100% sure, but I think one can
be solved without the other and vice versa.  Our code may need to reflect
that so folks don't have to pay the price of looking for both scenarios if
only one is needed.  The LayoutChangeNotifier is a bead intended to allow
the Basic user to wire the one change event to the layouts that care
instead of having every layout care.  If folks haven't tried it, it might
be worth taking a closer look at it.
  
To try to summarize:  If we agree to not try any tricky deferral in
LayoutBase, remove the code that forced reading width/height for every
layout, see if we can display styles in NumericStepper and some other
places, and fix any layouts that break from this change, you can do pretty
much anything you want in other layouts.

My 2 cents,
-Alex

On 3/26/18, 4:03 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:

>Hi Harbs, Piotr,
>
>see this link [1] and [2]
>
>This are only CSS rules to layout content. Here you have all the use cases
>we could have in a Royale app. things inside things that layouts
>responsively using percentage widths (see width:75% in examples and how
>this resizes with the resize of a window, and more... Don't see nothing we
>must do that is not there. And is only CSS. So my point is:
>
>1.- They are using the browser layout implementations vía CSS or in other
>words the native rendering engine of a browser, and that's without doubt
>the most performant we can go
>
>2.- This is accomplished in the most easy and simple way to go that is
>through CSS code without any JS programing.
>
>So, finaly, we only need to do as easy as that. generating good simple
>html
>and css. We already did that leveraging MDL (and only encapsulating what
>mdl people did), now is what I do with Jewel, trying to put that knowledge
>and the standards things I see in encapsulated patterns to make it easy to
>program in Royale.
>
>So again, I continue without know what we need that is not there. Since if
>in that examples we have all things...we're done...we only need to
>encapsulate it in Royale as css and make it accesible vía Royale API, and
>we don't need to deal with any complex programmatic code.
>
>Maybe I'm missing something here.
>
>Thanks
>
>[1] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3sch
>ools.com%2Fw3css%2Fw3css_responsive.asp&data=02%7C01%7Caharui%40adobe.com%
>7C74f1ddbb29ba49f86ef108d5936dcb72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%
>7C0%7C636577022135399905&sdata=QETZ3Ol2wY8cBtzP5kqjptZu5EJHbzLL7N2tuYmjmk0
>%3D&reserved=0
>[2] 
>https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3sch
>ools.com%2Fw3css%2Fw3css_layout.asp&data=02%7C01%7Caharui%40adobe.com%7C74
>f1ddbb29ba49f86ef108d5936dcb72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>7C636577022135399905&sdata=6qHfH0edO4IR3CyvJiDAhVaeMPTNHS9%2FD4nz%2BtgdO7Q
>%3D&reserved=0
>
>
>
>2018-03-27 0:42 GMT+02:00 Piotr Zarzycki <piotrzarzycki21@gmail.com>:
>
>> Reading Harbs and his real world example maybe that approach with saving
>> some values is a big winner for Royale. Instead going with the current
>>Flow
>> of web design let's try and see what happen.
>>
>> Today I had pretty interesting chat with my friend who has deeper
>>knowledge
>> about JS stuff. He said that too many people is going with the Flow
>>which
>> has been served by bigger players like Facebook - React etc. Although
>>it is
>> pretty awesome framework it's just failing when you have BIG fat complex
>> application, where performance is important, not saying about quality of
>> code.
>>
>> I see we may win on all of that fields. Maybe different approach is
>> solution, instead blindly believe in the browser and better
>>implementation
>> in the future.
>>
>> Thanks,
>> Piotr
>>
>> 2018-03-27 0:22 GMT+02:00 Harbs <harbs.lists@gmail.com>:
>>
>> > Case in point:
>> >
>> > In my app, I’m using OneFlexibleChildHorizontalLayout which uses
>> flexbox.
>> > Great. No need for writing values. Right?
>> >
>> > Not so fast.
>> >
>> > I have fit to view functionality in my app which needs to get the
>>size of
>> > the flexibleChild which is the container to figure out how much to
>>scale
>> > the content. The entire fit function takes 36 ms to run. The height
>> getter
>> > on the flexibleChild *alone* takes 14 ms. If the size of the
>> flexibleChild
>> > was hard-coded, the getter would not take measurable time.
>> >
>> > I have tons of hard coded size and positioning of SVG in my app
>> (literally
>> > hundreds of DOM objects) and it runs ridiculously fast compared to all
>> the
>> > Recalculate Styles which are caused by default browser layout.
>> >
>> > I’d really love to get some hard numbers from comparing the
>>approaches.
>> >
>> > Harbs
>> >
>> > > On Mar 26, 2018, at 11:28 PM, Harbs <harbs.lists@gmail.com> wrote:
>> > >
>> > > With hard-coded values DOM interaction could be kept to a minimum.
>>It
>> > would be an interesting experiment to see what would happen if we
>>*don’t*
>> > rely on browser layout and hard code everything.
>> >
>> >
>>
>>
>> --
>>
>> Piotr Zarzycki
>>
>> Patreon: 
>>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pat
>>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7C74f1ddbb29ba
>>49f86ef108d5936dcb72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365770
>>22135399905&sdata=RY8odeRX8W6XGflQKmr4GbprEGdx0kxOj%2BCdArWfs7s%3D&reserv
>>ed=0
>> 
>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pat
>>reon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7C74f1ddbb29ba
>>49f86ef108d5936dcb72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365770
>>22135399905&sdata=RY8odeRX8W6XGflQKmr4GbprEGdx0kxOj%2BCdArWfs7s%3D&reserv
>>ed=0>*
>>
>
>
>
>-- 
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C74f1ddbb29ba49f86ef108d5
>936dcb72%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636577022135399905&s
>data=UzL1s9VU51ooqRXfVcSfjno44%2FhsiBgE8QRAZWQ%2FYoc%3D&reserved=0

Mime
View raw message