[FlexJS] HelloWorld Diet and Exercise (was Re: [FlexJS] CSS Pruning)

[Alex Harui]

I pushed the pruning of some class selectors.  There are a few more, but
I'm not going to do them right now.  Volunteers are welcome to do it
though.  Along with a few more tweaks, I got HelloWorld from 69K (my
earlier report of 62K was incorrect) down to 59K.  I'm going to stop there
for this release.

When I look at the minified JS, without actually measuring, it appears
that what is left is:

1) String table
2) Google's event subsystem
3) FlexJS MouseEvent subsystem
4) Utils

Maybe for the next release, I will play around with an option that I'll
call '-noexport' that removes all @export jsdoc tokens in the output
before passing it to Google Closure Compiler.  That might reduce the
string table, but it would break code that relies on obj["propName"]
access so it might break DataBinding without further work.  Volunteers are
welcome to take this on instead of me.

I keep wondering if we still need Google's event subsystem.  We did early
on when we were still supporting IE8.  IIRC, it is about 6K.

I left the mouse event code in HelloWorld because in practice, everybody
else's app is probably going to leverage mouse events.

Maybe for the next release, we should look into splitting up our Utils
classes into package-level functions.  StringUtil for example has lots of
nice utility functions like trim and restrict, but HelloWorld doesn't use
restrict.  If StringUtil was a set of package-level functions, it would be
more PAYG.

Thoughts?  I'm off to make sure I didn't break any examples.  We need a
few more folks to say they've examined the release branch packages before
we cut an RC.

-Alex

On 5/15/17, 8:46 AM, "Alex Harui"  wrote:

>Hi,
>
>While waiting for more folks to examine the release branch packages, I try
>find time to find easy ways to make HelloWorld smaller.  Currently, it is
>62K of minified JS.  IMO, that's too big!
>
>I think I can get some classes to drop away via more
>@flexjsignorecoercions.  The list of interfaces in the output is pretty
>large and I'll bet most are not needed at runtime.
>
>But another sore spot for me is the CSS output.  This is true even for
>regular Flex:  the CSS output contains EVERY class selector.  The compiler
>knows how to prune out unused type selectors, but it always keeps every
>class selector.  IOW, if you look at the CSS and see ".DataGridListArea",
>that's a class selector.  But if you see "DataGrid" (no starting '.')
>that’s a type selector and for HelloWorld, which has just a Label, the
>DataGrid type selector is not in the output and any dependencies it brings
>it are not in the output either.
>
>But in HelloWorld today, ".DataGridListArea" is in the output for
>HelloWorld.  In looking at the compiler code, we could somehow mark our
>class selectors in a way that they will be removed if the type related to
>the name isn't in the output.  IOW, we need to know to keep class
>selectors like ".myClassSelector", but know to get rid of
>.DataGridListArea if DataGrid is not in the output.
>
>I've worked around this in the past by creating new classes.  In this
>case, if .DataGridListArea is applied to a Group, then make a subclass of
>Group called DataGridListArea and change the class selector to a type
>selector.  The problem is that the definition of the DataGridListArea
>class takes up room in the output, so it would be slightly better to find
>a way to prune class selectors.
>
>Maybe class selectors we want to prune should start with the type name
>surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
>check for two '$' and see if the class in-between is being kept in the
>output or not.
>
>Thoughts?
>-Alex
>

Re: [FlexJS] CSS Pruning

[Alex Harui]

On 5/15/17, 8:46 AM, "Alex Harui"  wrote:

>Maybe class selectors we want to prune should start with the type name
>surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
>check for two '$' and see if the class in-between is being kept in the
>output or not.

Hmm, looks like '$' isn't allowed in CSS selector names.  Maybe I'll try
"opt_DataGrid_ListArea" instead.

Other ideas?
-Alex

Re: [FlexJS] CSS Pruning

[Alex Harui]

On 5/15/17, 9:37 AM, "Peter Ent"  wrote:

>The reason for .DataGridListArea is that the SWF side does not recognize
>a selector of:
>
>DataGrid Container { ... }

Right, SimpleCSS doesn't handle complex selectors.

>
>So I gave the Container used for the list area a class name. Perhaps I
>can try to change it to a type name and see if that's more helpful and if
>so look at replacing as many specialty class names with type selectors.

Again, creating new types for these internal pieces does help, but there
is a cost to creating these new internal types.  It is even smaller to use
special names for removable class selectors.

Of course, I could be wrong...
-Alex

Re: [FlexJS] CSS Pruning

[Peter Ent]

The reason for .DataGridListArea is that the SWF side does not recognize a 
selector of:

DataGrid Container { ... }

So I gave the Container used for the list area a class name. Perhaps I can try 
to change it to a type name and see if that's more helpful and if so look at 
replacing as many specialty class names with type selectors. 

Peter 


> On May 15, 2017, at 11:46 AM, Alex Harui  wrote:
> 
> Hi,
> 
> While waiting for more folks to examine the release branch packages, I try
> find time to find easy ways to make HelloWorld smaller.  Currently, it is
> 62K of minified JS.  IMO, that's too big!
> 
> I think I can get some classes to drop away via more
> @flexjsignorecoercions.  The list of interfaces in the output is pretty
> large and I'll bet most are not needed at runtime.
> 
> But another sore spot for me is the CSS output.  This is true even for
> regular Flex:  the CSS output contains EVERY class selector.  The compiler
> knows how to prune out unused type selectors, but it always keeps every
> class selector.  IOW, if you look at the CSS and see ".DataGridListArea",
> that's a class selector.  But if you see "DataGrid" (no starting '.')
> that’s a type selector and for HelloWorld, which has just a Label, the
> DataGrid type selector is not in the output and any dependencies it brings
> it are not in the output either.
> 
> But in HelloWorld today, ".DataGridListArea" is in the output for
> HelloWorld.  In looking at the compiler code, we could somehow mark our
> class selectors in a way that they will be removed if the type related to
> the name isn't in the output.  IOW, we need to know to keep class
> selectors like ".myClassSelector", but know to get rid of
> .DataGridListArea if DataGrid is not in the output.
> 
> I've worked around this in the past by creating new classes.  In this
> case, if .DataGridListArea is applied to a Group, then make a subclass of
> Group called DataGridListArea and change the class selector to a type
> selector.  The problem is that the definition of the DataGridListArea
> class takes up room in the output, so it would be slightly better to find
> a way to prune class selectors.
> 
> Maybe class selectors we want to prune should start with the type name
> surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
> check for two '$' and see if the class in-between is being kept in the
> output or not.
> 
> Thoughts?
> -Alex
> 

[FlexJS] CSS Pruning

[Alex Harui]

Hi,

While waiting for more folks to examine the release branch packages, I try
find time to find easy ways to make HelloWorld smaller.  Currently, it is
62K of minified JS.  IMO, that's too big!

I think I can get some classes to drop away via more
@flexjsignorecoercions.  The list of interfaces in the output is pretty
large and I'll bet most are not needed at runtime.

But another sore spot for me is the CSS output.  This is true even for
regular Flex:  the CSS output contains EVERY class selector.  The compiler
knows how to prune out unused type selectors, but it always keeps every
class selector.  IOW, if you look at the CSS and see ".DataGridListArea",
that's a class selector.  But if you see "DataGrid" (no starting '.')
that’s a type selector and for HelloWorld, which has just a Label, the
DataGrid type selector is not in the output and any dependencies it brings
it are not in the output either.

But in HelloWorld today, ".DataGridListArea" is in the output for
HelloWorld.  In looking at the compiler code, we could somehow mark our
class selectors in a way that they will be removed if the type related to
the name isn't in the output.  IOW, we need to know to keep class
selectors like ".myClassSelector", but know to get rid of
.DataGridListArea if DataGrid is not in the output.

I've worked around this in the past by creating new classes.  In this
case, if .DataGridListArea is applied to a Group, then make a subclass of
Group called DataGridListArea and change the class selector to a type
selector.  The problem is that the definition of the DataGridListArea
class takes up room in the output, so it would be slightly better to find
a way to prune class selectors.

Maybe class selectors we want to prune should start with the type name
surrounded by '$", so .$DataGrid$ListArea.  Then the compiler could easily
check for two '$' and see if the class in-between is being kept in the
output or not.

Thoughts?
-Alex