From dev-return-3723-archive-asf-public=cust-asf.ponee.io@royale.apache.org Tue Mar 27 21:33:55 2018 Return-Path: X-Original-To: archive-asf-public@cust-asf.ponee.io Delivered-To: archive-asf-public@cust-asf.ponee.io Received: from mail.apache.org (hermes.apache.org [140.211.11.3]) by mx-eu-01.ponee.io (Postfix) with SMTP id 5CCEA18064E for ; Tue, 27 Mar 2018 21:33:54 +0200 (CEST) Received: (qmail 79480 invoked by uid 500); 27 Mar 2018 19:33:53 -0000 Mailing-List: contact dev-help@royale.apache.org; run by ezmlm Precedence: bulk List-Help: List-Unsubscribe: List-Post: List-Id: Reply-To: dev@royale.apache.org Delivered-To: mailing list dev@royale.apache.org Received: (qmail 79459 invoked by uid 99); 27 Mar 2018 19:33:52 -0000 Received: from pnap-us-west-generic-nat.apache.org (HELO spamd1-us-west.apache.org) (209.188.14.142) by apache.org (qpsmtpd/0.29) with ESMTP; Tue, 27 Mar 2018 19:33:52 +0000 Received: from localhost (localhost [127.0.0.1]) by spamd1-us-west.apache.org (ASF Mail Server at spamd1-us-west.apache.org) with ESMTP id 43626C6C2D for ; Tue, 27 Mar 2018 19:33:52 +0000 (UTC) X-Virus-Scanned: Debian amavisd-new at spamd1-us-west.apache.org X-Spam-Flag: NO X-Spam-Score: 6.27 X-Spam-Level: ****** X-Spam-Status: No, score=6.27 tagged_above=-999 required=6.31 tests=[DKIM_SIGNED=0.1, DKIM_VALID=-0.1, DKIM_VALID_AU=-0.1, FREEMAIL_REPLY=1, HTML_MESSAGE=2, HTTP_ESCAPED_HOST=1.621, KAM_LOTSOFHASH=0.25, KAM_SHORT=0.001, RCVD_IN_DNSWL_NONE=-0.0001, RCVD_IN_MSPIKE_H2=-0.001, RCVD_IN_SORBS_WEB=1.5, SPF_PASS=-0.001] autolearn=disabled Authentication-Results: spamd1-us-west.apache.org (amavisd-new); dkim=pass (2048-bit key) header.d=gmail.com Received: from mx1-lw-eu.apache.org ([10.40.0.8]) by localhost (spamd1-us-west.apache.org [10.40.0.7]) (amavisd-new, port 10024) with ESMTP id DS6ykO2hIfmD for ; Tue, 27 Mar 2018 19:33:49 +0000 (UTC) Received: from mail-wr0-f170.google.com (mail-wr0-f170.google.com [209.85.128.170]) by mx1-lw-eu.apache.org (ASF Mail Server at mx1-lw-eu.apache.org) with ESMTPS id 4DF5F5F36F for ; Tue, 27 Mar 2018 19:33:49 +0000 (UTC) Received: by mail-wr0-f170.google.com with SMTP id l49so44390wrl.4 for ; Tue, 27 Mar 2018 12:33:49 -0700 (PDT) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20161025; h=from:mime-version:subject:date:references:to:in-reply-to:message-id; bh=fc9G/R0xk2zX6bepahIct8jdw+R/yiODCNZCmqqdkEw=; b=GvcUthtWtjiDgiK3/Rj37r2QzxuGsIjyNydsM1+73Yxc0uEDvZEg306QTGqXicXV+n ikar1j0htoNwiDJWpxq7vSEd3GdLMV5S7VifMhzpogSxU9lm+/ihhKnSS0wdpnV3GWcS qiPz8uFMuceB/7JwGm8Qx9S8paUlOc+dqgXUASGMn9griUK8x5AIuMTrpqR2YQ9J4r57 Oe4EGbuFe42yGt9iW13dMg+p7Zamz+QhtYdcA2GY62KoDIzu8Rj0Xq+o0oEw2aUX2mTL bku+D+OEmJr/3Dl8IhZCxP32tLCtgkPKV7lwSlHbi8UlcWf6Ojr7UzBfjU6x6l6/fMzL 1h2g== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20161025; h=x-gm-message-state:from:mime-version:subject:date:references:to :in-reply-to:message-id; bh=fc9G/R0xk2zX6bepahIct8jdw+R/yiODCNZCmqqdkEw=; b=eYvpQkZM6q5HlX6CbRLvytzBN+p556ogk6qqw8k3mht4Rwjs8Y7EFAQ+mKWAdwPreh Ll1hWPpS6w260BWRft45gBc1Yiu1vUTfWP+KUQHgRyKezuGBu2BveJiAYzK/U6icwpAI jFG4A4bZ1fbPhWsZX4jgmm5CkZD3CXSCCJlIAhpZcmmW14GnO8QNCG6SDWGf8Jko9tIE QyKSsG7e1jcWXVw7HHZGwmil2HX3qzz/53Ax7ioWfri9xXGD0S7U7DBdtNGOMP9iZlXk NbEZ5yziNVYFmYpUbRGHlFsepkJtdsnVAFv62c0hdwOGLpq4WJekiO8Pj85fL5JzXrtn Z2fw== X-Gm-Message-State: AElRT7Fj7ht5y26WCvxYCI+uSJpJQ2y0iSmWpN+WAI5KXO13l7k7GCNk xfm7JTdzxW6b6AezJiWCGTLWc5Xo X-Google-Smtp-Source: AIpwx49rIxWKypVJ9xQknHA5YBXfWlhn50U/R3ITd6P/SKiCbVi8cr8PP3W2wWSrTrxDLJFh+bsEUA== X-Received: by 10.223.160.241 with SMTP id n46mr510213wrn.280.1522179228752; Tue, 27 Mar 2018 12:33:48 -0700 (PDT) Received: from [10.0.0.7] ([185.120.124.51]) by smtp.gmail.com with ESMTPSA id 39sm4283210wry.89.2018.03.27.12.33.46 for (version=TLS1_2 cipher=ECDHE-RSA-AES128-GCM-SHA256 bits=128/128); Tue, 27 Mar 2018 12:33:47 -0700 (PDT) From: Harbs Content-Type: multipart/alternative; boundary="Apple-Mail=_6CDA5E03-65C2-493F-907E-BEE2737B4F01" Mime-Version: 1.0 (Mac OS X Mail 10.3 \(3273\)) Subject: Re: Layout optimizations Date: Tue, 27 Mar 2018 22:33:45 +0300 References: <8D1A04FE-14B1-4CB4-96C6-202BB6399859@gmail.com> <3BCC0A6F-CBCC-4A8E-8614-F312AB335535@gmail.com> <3078B73A-1675-48B3-A756-114FC40234A4@gmail.com> <1BF024DE-F1B5-401E-A65D-9FB4E06DA4B4@gmail.com> <8F60304F-D07C-4DBE-8D2C-32076F978F6A@gmail.com> <51608898-1C05-487F-8B34-9104182546BC@gmail.com> <416B2490-4C56-4E87-B022-9893F98A8F1E@gmail.com> <95D2CC87-0C04-4889-8EC0-57AE01A860E6@gmail.com> <90F296EC-39BD-4C45-A392-EDD91495E07A@gmail.com> To: dev@royale.apache.org In-Reply-To: Message-Id: <57DBD496-3508-426A-A687-35B7F97901B8@gmail.com> X-Mailer: Apple Mail (2.3273) --Apple-Mail=_6CDA5E03-65C2-493F-907E-BEE2737B4F01 Content-Transfer-Encoding: quoted-printable Content-Type: text/plain; charset=utf-8 I was thinking that the solution might be as simple as dispatching = layoutStart and layoutComplete events. We already have layoutComplete, = and instead of blindly measuring, we can dispatch layoutStart. The = parent layout can decide whether measuring is necessary or not. I=E2=80=99d keep the LayoutManager, but it would only delay layout if = measuring is in fact necessary. If not, the layout would get executed = immediately. I=E2=80=99d pull all the sizing logic out of LayoutBase and I=E2=80=99d = create a new AbsoluteLayoutBase which has all that kind of logic. I=E2=80=99m pretty sure this would enable lean browser-based layouts as = well as robust absolute layouts as needed. Makes sense? (And yes, after Passover I hope to help with the emulation components.) Harbs > On Mar 27, 2018, at 7:51 PM, Alex Harui = wrote: >=20 > Harbs, >=20 > My recommendations are to refactor LayoutBase so that folks who feel = more > comfortable letting the browser do the resizing can. If you want to = build > out a completely different set of layout classes that don't use the > browser at all, feel free to do so. Some folks will probably trust = Royale > more if they can recognize common patterns in the DOM for layout, > regardless of performance. I'm having trouble believing that every > production JS app has had to use absolute positioning to get = satisfactory > responsiveness. >=20 > I do not think we have the people power to try to write and debug = every > one of our layouts to use absolute positioning at this time. I am = hoping > you can get your app up to sufficient speed soon and then can help us > write emulation components instead of trying to optimize all of our > existing layouts. >=20 > Thanks > -Alex >=20 > On 3/27/18, 12:37 AM, "Harbs" > wrote: >=20 >> Again: I=E2=80=99m not arguing that we should not have layouts which = encapsulate >> common website practices. Simple can sometimes be good, but simple is = not >> always the same as performant. Your assumption that native browser = layout >> is fastest is simply not true. The browser generally needs to do a = full >> sweep every time it calculates layout. >>=20 >> Did you run a performance timeline on those examples you linked to? = Try >> resizing the window and you will see how jerky the layout actually = is. >> Each re-render takes considerable measurable time. >>=20 >> Compare that to something like GSAP[1]. GSAP has hands-down the best >> performance on HTML animations.[2] One of the main reasons is because >> EVERYTHING is set using absolute positioning and does not rely on = browser >> layout at all. GSAP has a crazy amount of javascript to calculate how = big >> and where (and color, etc) everything needs to be on each animation >> frame, but it=E2=80=99s smooth as silk. >>=20 >> Additionally, there are many cases where we need to get size and = position >> using javascript. Some examples: Drawing a hover effect over an item >> renderer =E2=80=94 or better: getting the position for drag and drop = while >> changing visuals as the drag indicator moves around. Animations (and = many >> animations are difficult or impossible to create by just using css. = My >> app has no end to the number of places where I need to get position. = In >> short, the average website will probably not need very much in terms = of >> recalculating and css can be a good option for that, but many >> applications will and will probably need absolute positioning to get = the >> best performance. >>=20 >> Harbs >>=20 >> = [1]https://na01.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fgree= ns = >> ock.com = %2F%3Fexample%3Dsortable-grid-using-draggable&data=3D02%7= C01%7Caharui >> %40adobe.com = %7C378707c0f7a1497ee34b08d593b5a50b%7Cfa7b1b5a7b34438= 794aed2c1 >> = 78decee1%7C0%7C0%7C636577330724835817&sdata=3DW9eTpZiNTREiGLkV1gucROT8HhVS= Ru >> V7YmFEcdc8CFY%3D&reserved=3D0 >> = [2]https://na01.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fgree= ns = >> ock.com = %2Fjs%2Fspeed.html&data=3D02%7C01%7Caharui%40adobe.com = %7C378707c0f7a1 >> = 497ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63657733= >> = 0724835817&sdata=3DwJ7Ug6lDNm1Dfl2YOV071tRyJgboCtJ%2FpuacMKxLFZE%3D&reserv= ed >> =3D0=20 >> = >> k.com = %2Fjs%2Fspeed.html&data=3D02%7C01%7Caharui%40adobe.com = %7C378707c0f7a149 >> = 7ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365773307= >> = 24835817&sdata=3DwJ7Ug6lDNm1Dfl2YOV071tRyJgboCtJ%2FpuacMKxLFZE%3D&reserved= =3D0 >>>=20 >>=20 >>> On Mar 27, 2018, at 2:03 AM, Carlos Rovira > >>> wrote: >>>=20 >>> Hi Harbs, Piotr, >>>=20 >>> see this link [1] and [2] >>>=20 >>> 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: >>>=20 >>> 1.- They are using the browser layout implementations v=C3=ADa CSS = or in >>> other >>> words the native rendering engine of a browser, and that's without = doubt >>> the most performant we can go >>>=20 >>> 2.- This is accomplished in the most easy and simple way to go that = is >>> through CSS code without any JS programing. >>>=20 >>> 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. >>>=20 >>> 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=C3=ADa = Royale API, >>> and >>> we don't need to deal with any complex programmatic code. >>>=20 >>> Maybe I'm missing something here. >>>=20 >>> Thanks >>>=20 >>> [1]=20 >>> = https://na01.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fwww.w3s= c = >>> hools.com = %2Fw3css%2Fw3css_responsive.asp&data=3D02%7C01%7Caharui= %40adobe.co >>> = m%7C378707c0f7a1497ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7 >>> = C0%7C0%7C636577330724835817&sdata=3DpZVupqKYaJ9gLEdexwtizNMI%2FhaVssJJgGwy= f >>> Xd64hQ%3D&reserved=3D0 >>> [2]=20 >>> = https://na01.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fwww.w3s= c = >>> hools.com = %2Fw3css%2Fw3css_layout.asp&data=3D02%7C01%7Caharui%40a= dobe.com %7C >>> = 378707c0f7a1497ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7 >>> = C0%7C636577330724835817&sdata=3DbhwYmvCk7X3YuAynbvnWL9yC%2FXx82zph1FZ3e7h0= T >>> VA%3D&reserved=3D0 >>>=20 >>>=20 >>>=20 >>> 2018-03-27 0:42 GMT+02:00 Piotr Zarzycki >: >>>=20 >>>> 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. >>>>=20 >>>> 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. >>>>=20 >>>> 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. >>>>=20 >>>> Thanks, >>>> Piotr >>>>=20 >>>> 2018-03-27 0:22 GMT+02:00 Harbs >: >>>>=20 >>>>> Case in point: >>>>>=20 >>>>> In my app, I=E2=80=99m using OneFlexibleChildHorizontalLayout = which uses >>>> flexbox. >>>>> Great. No need for writing values. Right? >>>>>=20 >>>>> Not so fast. >>>>>=20 >>>>> 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. >>>>>=20 >>>>> 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. >>>>>=20 >>>>> I=E2=80=99d really love to get some hard numbers from comparing = the >>>>> approaches. >>>>>=20 >>>>> Harbs >>>>>=20 >>>>>> On Mar 26, 2018, at 11:28 PM, Harbs > wrote: >>>>>>=20 >>>>>> 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=E2=80=99t* >>>>> rely on browser layout and hard code everything. >>>>>=20 >>>>>=20 >>>>=20 >>>>=20 >>>> -- >>>>=20 >>>> Piotr Zarzycki >>>>=20 >>>> Patreon:=20 >>>> = *https://na01.safelinks.protection.outlook.com/?url=3Dhttps%3A%2F%2Fwww.pa= = >>>> treon.com = %2Fpiotrzarzycki&data=3D02%7C01%7Caharui%40adobe.com = %7C378707c0f7 >>>> = a1497ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365 >>>> = 77330724835817&sdata=3DSlwXFmttSOExzUOXuifgGWea%2BLqIF0mIX2ImQsVSU9w%3D&re= >>>> served=3D0 >>>>=20 >>>> = >>>> treon.com = %2Fpiotrzarzycki&data=3D02%7C01%7Caharui%40adobe.com = %7C378707c0f7 >>>> = a1497ee34b08d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365 >>>> = 77330724835817&sdata=3DSlwXFmttSOExzUOXuifgGWea%2BLqIF0mIX2ImQsVSU9w%3D&re= >>>> served=3D0>* >>>>=20 >>>=20 >>>=20 >>>=20 >>> --=20 >>> Carlos Rovira >>>=20 >>> = https://na01.safelinks.protection.outlook.com/?url=3Dhttp%3A%2F%2Fabout.me= % = >>> 2Fcarlosrovira&data=3D02%7C01%7Caharui%40adobe.com = %7C378707c0f7a1497ee34b08 >>> = d593b5a50b%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63657733072483581 >>> = 7&sdata=3DbWTM21tcBignH1Kcd%2FdpZfqbygDtkjURRLgo9hYoM%2FM%3D&reserved=3D0 --Apple-Mail=_6CDA5E03-65C2-493F-907E-BEE2737B4F01--