You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@weex.apache.org by Hanks Zhang <zh...@gmail.com> on 2017/12/29 07:05:41 UTC
Manage scoped style sheets in native render engines
Currently, style sheets are managed in js framework. The class list and
style sheets will be calculated to "classStyle" and merge to the "style" on
the element. It's tricky and inefficient. Even using the same class name,
the style object will be duplicated for each element.
Moreover, this feature won't work on <recycle-list>, because the value of
"classList" couldn't be got in front-end frameworks.
I think it's more reasonable to manage style sheets in native render
engines. To achieve it, the scoped style sheets should be sent to native
before render. And the front-end frameworks no longer need to calculate the
CSS rules referenced in the class list.
Looking forward to furthering discussions.
Best Regards, Hanks
Re: Manage scoped style sheets in native render engines
Posted by "谷宝剑(剑白)" <ji...@alibaba-inc.com>.
it is big change, is this update back compatible ? in dotwe org, like this: http://dotwe.org/vue/1de20b3c886b5f5f3c4c9de148326b58, the style is inlined when compiles to bundle js. ------------------------------------------------------------------From:Hanks Zhang <zh...@gmail.com>Time:2018 Jan 2 (Tue) 20:26To:dev <de...@weex.incubator.apache.org>Subject:Re: Manage scoped style sheets in native render engines
Currently, the scoped styles are managed by front-end components
separately, both query and apply. Migrate it to native may be more
simplified.
For the first question, front-end frameworks will send each style sheet
with a unique "scopeId", native could use it as a key to store the style
sheets in a hash map. Each element which contains classList will also
contain a "scopeId" in attributes. It's quite easy to match the style
sheet. Within the style sheet, Weex only supports single-class selector
now, which is also very efficient to query the selected CSS rules. However,
we could support more selectors in the future.
For the second question, since Weex does not support relationship-selectors
(CSS combinators) and style inheritance, one CSS rule will only affect one
element, applying it could be efficient. However, we could support CSS
combinators in the future too.
2018-01-02 15:34 GMT+08:00 Adam Feng <cx...@gmail.com>:
> Agree, but style computation in native runtime may bring up a few
> difficulties
>
> 1. Finding the matching rules for each element can cause performance
> issues if it's not optimized. Traversing the entire rule list for each
> element to find matches is a heavy task.
> 2. Applying the rules involves quite complex cascade rules that define the
> hierarchy of the rules.
>
> So we should first have a discuss about the style sharing & rule managing
> mechanism.
>
>
> Thanks.
> Adam Feng
>
> On 29 Dec 2017, 3:05 PM +0800, Hanks Zhang <zh...@gmail.com>, wrote:
> > Currently, style sheets are managed in js framework. The class list and
> > style sheets will be calculated to "classStyle" and merge to the "style"
> on
> > the element. It's tricky and inefficient. Even using the same class name,
> > the style object will be duplicated for each element.
> >
> > Moreover, this feature won't work on <recycle-list>, because the value of
> > "classList" couldn't be got in front-end frameworks.
> >
> > I think it's more reasonable to manage style sheets in native render
> > engines. To achieve it, the scoped style sheets should be sent to native
> > before render. And the front-end frameworks no longer need to calculate
> the
> > CSS rules referenced in the class list.
> >
> > Looking forward to furthering discussions.
> >
> > Best Regards, Hanks
>
Re: Manage scoped style sheets in native render engines
Posted by Hanks Zhang <zh...@gmail.com>.
Currently, the scoped styles are managed by front-end components
separately, both query and apply. Migrate it to native may be more
simplified.
For the first question, front-end frameworks will send each style sheet
with a unique "scopeId", native could use it as a key to store the style
sheets in a hash map. Each element which contains classList will also
contain a "scopeId" in attributes. It's quite easy to match the style
sheet. Within the style sheet, Weex only supports single-class selector
now, which is also very efficient to query the selected CSS rules. However,
we could support more selectors in the future.
For the second question, since Weex does not support relationship-selectors
(CSS combinators) and style inheritance, one CSS rule will only affect one
element, applying it could be efficient. However, we could support CSS
combinators in the future too.
2018-01-02 15:34 GMT+08:00 Adam Feng <cx...@gmail.com>:
> Agree, but style computation in native runtime may bring up a few
> difficulties
>
> 1. Finding the matching rules for each element can cause performance
> issues if it's not optimized. Traversing the entire rule list for each
> element to find matches is a heavy task.
> 2. Applying the rules involves quite complex cascade rules that define the
> hierarchy of the rules.
>
> So we should first have a discuss about the style sharing & rule managing
> mechanism.
>
>
> Thanks.
> Adam Feng
>
> On 29 Dec 2017, 3:05 PM +0800, Hanks Zhang <zh...@gmail.com>, wrote:
> > Currently, style sheets are managed in js framework. The class list and
> > style sheets will be calculated to "classStyle" and merge to the "style"
> on
> > the element. It's tricky and inefficient. Even using the same class name,
> > the style object will be duplicated for each element.
> >
> > Moreover, this feature won't work on <recycle-list>, because the value of
> > "classList" couldn't be got in front-end frameworks.
> >
> > I think it's more reasonable to manage style sheets in native render
> > engines. To achieve it, the scoped style sheets should be sent to native
> > before render. And the front-end frameworks no longer need to calculate
> the
> > CSS rules referenced in the class list.
> >
> > Looking forward to furthering discussions.
> >
> > Best Regards, Hanks
>
Re: Manage scoped style sheets in native render engines
Posted by Adam Feng <cx...@gmail.com>.
Agree, but style computation in native runtime may bring up a few difficulties
1. Finding the matching rules for each element can cause performance issues if it's not optimized. Traversing the entire rule list for each element to find matches is a heavy task.
2. Applying the rules involves quite complex cascade rules that define the hierarchy of the rules.
So we should first have a discuss about the style sharing & rule managing mechanism.
Thanks.
Adam Feng
On 29 Dec 2017, 3:05 PM +0800, Hanks Zhang <zh...@gmail.com>, wrote:
> Currently, style sheets are managed in js framework. The class list and
> style sheets will be calculated to "classStyle" and merge to the "style" on
> the element. It's tricky and inefficient. Even using the same class name,
> the style object will be duplicated for each element.
>
> Moreover, this feature won't work on <recycle-list>, because the value of
> "classList" couldn't be got in front-end frameworks.
>
> I think it's more reasonable to manage style sheets in native render
> engines. To achieve it, the scoped style sheets should be sent to native
> before render. And the front-end frameworks no longer need to calculate the
> CSS rules referenced in the class list.
>
> Looking forward to furthering discussions.
>
> Best Regards, Hanks