HTML Canvas implementation of FlexJS?

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

HTML Canvas implementation of FlexJS?

sta-ger
Now FlexJS uses HTML DOM elements to implement Flex components conception. Would not it be more logical to implement all the process using HTML Canvas and draw each component to it's 2d or WebGL context? I think this will be not a bad idea as a Cross-browser solution and let to achive much better performance. Just want to ask for people opinion about this idea or may be contributors are already have this plans?
Chears
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Tom Chiverton
And thereby loosing any and all accessibility ?
Also won't rendering to native controls will always be a better
experience than drawing your own per-pixel effects ?

Tom

On 25/02/16 11:54, sta-ger wrote:
> Would not it be more logical to implement all the process using HTML Canvas
> and draw each component to it's 2d or WebGL context? I

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

sta-ger
The same accessibility as in the case of traditional Flash Player based implementation of Flex. The conception is to make Canvas something like Flash Player and implement all the application context at it's bounds.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Alex Harui


On 2/25/16, 5:02 AM, "sta-ger" <[hidden email]> wrote:

>The same accessibility as in the case of traditional Flash Player based
>implementation of Flex. The conception is to make Canvas something like
>Flash Player and implement all the application context at it's bounds.
>

Tom is correct that accessibility is one reason the current FlexJS
components use DOM objects.  The Flash Player has its own accessibility
implementation that is unavailable to use without Flash and the browsers
have their own APIs that we will leverage to implement accessibility some
day.

But in the bigger picture, FlexJS is being designed to not have just one
set of components like Flex did with Spark.  FlexJS wants to support many
different kinds of component sets.  The one you see now is designed to use
DOM objects not just for accessibility, but for minimizing the amount of
code we have to write and support and your users have to download.  And in
order to write such a set, we are trying to leverage what the runtimes can
give us for free, like a Button, accessibility, mouse target management,
keyboard focus management, etc.

But right now I am working on a component set that more closely matches
the MX and Spark component APIs in order to lower the migration effort.
However, just to get UIComponent to cross-compile, I have had to drag in a
ton of ActionScript to be cross-compiled to JS so I am expecting a
significant download size for this component set, but if that's what
people want to use, well, then they can.

I am hopeful that someone will do what you want and write a component set
that draws in Canvas.  Lizhi has something like that working using WebGL.
I believe Josh is working on mapping Feathers to JS.

So there is no need to really argue about which way is better.  I have
picked one way that minimizes the amount of code we need to write and
debug and download and run, but other ways are more than welcome.

-Alex

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

OmPrakash Muppirala
Yes, Lizhi has already been working on creating a Starling like rendering
API on Canvas + WebGL using FlexJS.  The source is available here:
https://github.com/matrix3d/spriteflexjs

I don't think it will be too hard to build a Feathers like UI components
set on top of this.

You are welcome to try :-)

Thanks,
Om

On Thu, Feb 25, 2016 at 9:24 AM, Alex Harui <[hidden email]> wrote:

>
>
> On 2/25/16, 5:02 AM, "sta-ger" <[hidden email]> wrote:
>
> >The same accessibility as in the case of traditional Flash Player based
> >implementation of Flex. The conception is to make Canvas something like
> >Flash Player and implement all the application context at it's bounds.
> >
>
> Tom is correct that accessibility is one reason the current FlexJS
> components use DOM objects.  The Flash Player has its own accessibility
> implementation that is unavailable to use without Flash and the browsers
> have their own APIs that we will leverage to implement accessibility some
> day.
>
> But in the bigger picture, FlexJS is being designed to not have just one
> set of components like Flex did with Spark.  FlexJS wants to support many
> different kinds of component sets.  The one you see now is designed to use
> DOM objects not just for accessibility, but for minimizing the amount of
> code we have to write and support and your users have to download.  And in
> order to write such a set, we are trying to leverage what the runtimes can
> give us for free, like a Button, accessibility, mouse target management,
> keyboard focus management, etc.
>
> But right now I am working on a component set that more closely matches
> the MX and Spark component APIs in order to lower the migration effort.
> However, just to get UIComponent to cross-compile, I have had to drag in a
> ton of ActionScript to be cross-compiled to JS so I am expecting a
> significant download size for this component set, but if that's what
> people want to use, well, then they can.
>
> I am hopeful that someone will do what you want and write a component set
> that draws in Canvas.  Lizhi has something like that working using WebGL.
> I believe Josh is working on mapping Feathers to JS.
>
> So there is no need to really argue about which way is better.  I have
> picked one way that minimizes the amount of code we need to write and
> debug and download and run, but other ways are more than welcome.
>
> -Alex
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

flex capacitor
In reply to this post by Alex Harui
On Thu, Feb 25, 2016 at 9:24 AM, Alex Harui <[hidden email]> wrote:

>
>
> On 2/25/16, 5:02 AM, "sta-ger" <[hidden email]> wrote:
>
> >The same accessibility as in the case of traditional Flash Player based
> >implementation of Flex. The conception is to make Canvas something like
> >Flash Player and implement all the application context at it's bounds.
> >
>
> Tom is correct that accessibility is one reason the current FlexJS
> components use DOM objects.  The Flash Player has its own accessibility
> implementation that is unavailable to use without Flash and the browsers
> have their own APIs that we will leverage to implement accessibility some
> day.
>
> But in the bigger picture, FlexJS is being designed to not have just one
> set of components like Flex did with Spark.  FlexJS wants to support many
> different kinds of component sets.  The one you see now is designed to use
> DOM objects not just for accessibility, but for minimizing the amount of
> code we have to write and support and your users have to download.  And in
> order to write such a set, we are trying to leverage what the runtimes can
> give us for free, like a Button, accessibility, mouse target management,
> keyboard focus management, etc.
>
> But right now I am working on a component set that more closely matches
> the MX and Spark component APIs in order to lower the migration effort.
> However, just to get UIComponent to cross-compile, I have had to drag in a
> ton of ActionScript to be cross-compiled to JS so I am expecting a
> significant download size for this component set, but if that's what
> people want to use, well, then they can.
>

How are you going to go about it? The advantage of drawing the components
yourself, rather than reuse DOM components is that the components look the
way you expect.

As far as accessibility it's much farther along than it used to be. In some
cases you can just add a set of wai-aria attributes.
https://www.w3.org/TR/2014/REC-wai-aria-20140320/


>
> I am hopeful that someone will do what you want and write a component set
> that draws in Canvas.  Lizhi has something like that working using WebGL.
> I believe Josh is working on mapping Feathers to JS.
>
> So there is no need to really argue about which way is better.  I have
> picked one way that minimizes the amount of code we need to write and
> debug and download and run, but other ways are more than welcome.
>
> -Alex
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

sta-ger
In reply to this post by OmPrakash Muppirala
OmPrakash Muppirala wrote
I don't think it will be too hard to build a Feathers like UI components
set on top of this.

You are welcome to try :-)

Sounds very interesting! (: But imho one of the biggest advantage of Flex is ability to use MXML layouts. So it's not enough just to build another one webgl based components framework. Is it posible to teach FalconJX to translate MXML layouts to something based on Lizhi's framework? Even more, it's not a bad idea to add multi-language suppurt for FlexJS so that it can work not only with AS, but also with JS/Typescript or even C# and other modern languages. I understand that this is not very realistically today, but I'm just dreaming about Flex as a strong and modern RIA framework as it was 10 years ago. (: Unfortunatelly I have 0 experience of contributing open-source projects and have 0 time for it...
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Peter Ent
At some point we should look at the layouts in the HTML project and see if
we can make some a bit more generic, moving them perhaps to their own
project and placing them into the Core project so other UI sets can use
them.

Peter Ent
Adobe Systems/Apache Flex Project

On 2/26/16, 3:53 AM, "sta-ger" <[hidden email]> wrote:

>OmPrakash Muppirala wrote
>> I don't think it will be too hard to build a Feathers like UI components
>> set on top of this.
>>
>> You are welcome to try :-)
>
>
>Sounds very interesting! (: But imho one of the biggest advantage of Flex
>is
>ability to use MXML layouts. So it's not enough just to build another one
>webgl based components framework. Is it posible to teach FalconJX to
>translate MXML layouts to something based on Lizhi's framework? Even more,
>it's not a bad idea to add multi-language suppurt for FlexJS so that it
>can
>work not only with AS, but also with JS/Typescript or even C# and other
>modern languages. I understand that this is not very realistically today,
>but I'm just dreaming about Flex as a strong and modern RIA framework as
>it
>was 10 years ago. (: Unfortunatelly I have 0 experience of contributing
>open-source projects and have 0 time for it...
>
>
>
>--
>View this message in context:
>http://apache-flex-users.2333346.n4.nabble.com/HTML-Canvas-implementation-
>of-FlexJS-tp12049p12063.html
>Sent from the Apache Flex Users mailing list archive at Nabble.com.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Alex Harui
In reply to this post by flex capacitor


On 2/25/16, 5:33 PM, "jude" <[hidden email]> wrote:

>On Thu, Feb 25, 2016 at 9:24 AM, Alex Harui <[hidden email]> wrote:
>>But right now I am working on a component set that more closely matches
>> the MX and Spark component APIs in order to lower the migration effort.
>> However, just to get UIComponent to cross-compile, I have had to drag
>>in a
>> ton of ActionScript to be cross-compiled to JS so I am expecting a
>> significant download size for this component set, but if that's what
>> people want to use, well, then they can.
>>
>
>How are you going to go about it? The advantage of drawing the components
>yourself, rather than reuse DOM components is that the components look the
>way you expect.

The approach I'm taking is to get UIComponent to subclass the FlexJS
UIBase instead of what it does now, so effectively, each UIComponent will
end up being a Div.  In theory, the Graphics object in the Div becomes an
SVGElement.  It is going to be heavy and big, but I think it will be worth
the effort so we truly know how big it will be and how it will perform. It
might help us convince everyone it is worth the migration pain of
switching to the FlexJS Basic component set, or maybe it will be
acceptable in size and performance for enough folks to remain an option,
or maybe we'll discover that we can trade off a few things and find a more
interesting midpoint.

-Alex

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Alex Harui
In reply to this post by sta-ger


On 2/26/16, 12:53 AM, "sta-ger" <[hidden email]> wrote:

>OmPrakash Muppirala wrote
>> I don't think it will be too hard to build a Feathers like UI components
>> set on top of this.
>>
>> You are welcome to try :-)
>
>
>Sounds very interesting! (: But imho one of the biggest advantage of Flex
>is
>ability to use MXML layouts. So it's not enough just to build another one
>webgl based components framework. Is it posible to teach FalconJX to
>translate MXML layouts to something based on Lizhi's framework? Even more,
>it's not a bad idea to add multi-language suppurt for FlexJS so that it
>can
>work not only with AS, but also with JS/Typescript or even C# and other
>modern languages. I understand that this is not very realistically today,
>but I'm just dreaming about Flex as a strong and modern RIA framework as
>it
>was 10 years ago. (: Unfortunatelly I have 0 experience of contributing
>open-source projects and have 0 time for it...

All of the above has been designed into the FalconJX compiler.  MXML could
in theory be used for any other UI Framework if the framework implements
support for MXML.  All the compiler does now is add a up to three
properties (MXMLProperties, MXMLDescriptor, MXMLStateDescriptor) and
supplies encoded information about the MXML.  The framework just has to
decide when to interpret and apply the encoded information.  It still need
to be proven by someone actually trying it with a completely different
framework, but we want it to work that way.

The output from FalconJX doesn't have to be JS.  Someone can write a TS or
C# or other language output if they want and plug it in instead of the
JSEmitter.  And there can be different flavors of JS emitters as well.

-Alex

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: HTML Canvas implementation of FlexJS?

Dev LFM
We could try to "port" this: https://github.com/block-forest/rockdot-commons it was made for Dart+StageXL but the principle is the same... rendering on a canvas. If flexsprite really mimics starling, then it would be much easier to someone port Josh feathers also..

At this time I'm designing a plan to mix both.. html dom with divs for UI (material-lite), and flexsprite to render the editable content (the page).

My concerns are:
- IOC / DI / MVC
- AMF (unserialize of flex serialized objects)
- Debbuging / source-maps
- Crossbrowsing
- browser-zoom and impact on UI
- Hair loss / headache / stress
Loading...