[FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

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

[FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
Hi guys,
I remember that there were some discussions that it would be nice to have something like JSFiddle or CodePen for FlexJS.
I also remember that Alex introduced a POC for live editing a couple of months ago.
Cause I've no idea if something like this could be achieved as-a-service and I'm honestly not smart enough to improve this approach I wonder if it would be an option to just make the compiler available as-a-service and build an app around it that consumes this service.

Although this approach is far away from live editing and you have to wait until the compiler is done I  think that FlexJS would benefit a lot from something like this:

There would be no more entry barrier to get in touch with FlexJS: Just call the (web) app, code and compile it with one click.
Folks could share useful FlexJS snippets and with the ability to store this stuff it could automatically grow to an archive of code snippets.
It would be very ergonomic to compile the code with different FlexJS versions or compiler options.
At least you would have one browser window that contains the code and the result so I think this could be also a little helpful tool during regular app development.

So I started a little POC regarding the service:
I've just installed nodejs express and make Josh's asconfigc available via an http endpoint.
This is just a few lines of code and it works as expected [1][2].
In the real world, the service would expect some FlexJS code and response with the compiled code or an URL where the code lives.
Next step would be to build a FlexJS app that implements a CodePen inspired UI and consumes the service.

Before starting with this I'd like to ask if you think that this approach is worth following it or if you expect too many issues (maybe also legal issues) or if you think it's completely useless.

Of course, it's a long way to making it happen and a powerful backend is needed and this is probably not for free. I'm not yet familiar enough with the various cloud services out there but I could imagine that something like 'AWS lamda' would work. Maybe Apache Infra provide something like this?

Thanks,
Olaf

[1] https://snag.gy/Bb83sq.jpg
[2] https://snag.gy/crM43o.jpg
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

yishayw
I certainly don't think it's useless. I've been imagining something similar and it's great to see you take it up. I wonder what the effort would be to adapt Moonshine to be the web text editor...
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Justin Mclean
Administrator
In reply to this post by Olaf Krueger
Hi,

> There would be no more entry barrier to get in touch with FlexJS: Just call
> the (web) app, code and compile it with one click.

Great idea!

> Before starting with this I'd like to ask if you think that this approach is
> worth following it or if you expect too many issues (maybe also legal
> issues) or if you think it's completely useless.

No major legal issues that I’m aware of that will trip you up. As long as you respect Apache’s trademarks (which is easily done by adding a disclaimer in a footer) and select a domain name that’s not likely to cause an issue.

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
In reply to this post by Olaf Krueger
For a while now, I've wanted to build something similar to TypeScript's
playground. I just haven't found the time yet.

https://www.typescriptlang.org/play/

Basically, one file/class in and one file out. The idea would be to keep it
super basic. Simply let people see the JavaScript that gets produced from
ActionScript and MXML with FlexJS. Maybe provide a couple of sample MXML/AS
files alongside an option to write your own code from scratch.

This could be a good MVP because it is something people will find useful,
but it can also serve as a foundation for a more complex CodePen-like
experience with multiple files in a simple project.

- Josh

On Apr 26, 2017 2:10 AM, "OK" <[hidden email]> wrote:

Hi guys,
I remember that there were some discussions that it would be nice to have
something like JSFiddle or CodePen for FlexJS.
I also remember that Alex introduced a POC for live editing a couple of
months ago.
Cause I've no idea if something like this could be achieved as-a-service and
I'm honestly not smart enough to improve this approach I wonder if it would
be an option to just make the compiler available as-a-service and build an
app around it that consumes this service.

Although this approach is far away from live editing and you have to wait
until the compiler is done I  think that FlexJS would benefit a lot from
something like this:

There would be no more entry barrier to get in touch with FlexJS: Just call
the (web) app, code and compile it with one click.
Folks could share useful FlexJS snippets and with the ability to store this
stuff it could automatically grow to an archive of code snippets.
It would be very ergonomic to compile the code with different FlexJS
versions or compiler options.
At least you would have one browser window that contains the code and the
result so I think this could be also a little helpful tool during regular
app development.

So I started a little POC regarding the service:
I've just installed nodejs express and make Josh's asconfigc available via
an http endpoint.
This is just a few lines of code and it works as expected [1][2].
In the real world, the service would expect some FlexJS code and response
with the compiled code or an URL where the code lives.
Next step would be to build a FlexJS app that implements a CodePen inspired
UI and consumes the service.

Before starting with this I'd like to ask if you think that this approach is
worth following it or if you expect too many issues (maybe also legal
issues) or if you think it's completely useless.

Of course, it's a long way to making it happen and a powerful backend is
needed and this is probably not for free. I'm not yet familiar enough with
the various cloud services out there but I could imagine that something like
'AWS lamda' would work. Maybe Apache Infra provide something like this?

Thanks,
Olaf

[1] https://snag.gy/Bb83sq.jpg
[2] https://snag.gy/crM43o.jpg



--
View this message in context: http://apache-flex-development
.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-FlexJS-
Compile-as-a-service-tp61369.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
In reply to this post by yishayw
I think Microsoft's Monaco editor would be good for this sort of thing:

https://github.com/Microsoft/monaco-editor

It's the core editor used by Visual Studio Code, packaged up as a
standalone component.

I recently saw that a company called TypeFox found a way to make Monaco to
speak the "language server protocol" used by VSCode, with the language
server running on the backend instead of in a separate process on the
client.

http://typefox.io/teaching-the-language-server-protocol-to-microsofts-monaco-editor

Getting Monaco to work with the NextGenAS language server on the backend is
probably not trivial (and it definitely should wait for a future
iteration), but it would be really cool to see IntelliSense/completion
working from the browser.

- Josh

On Wed, Apr 26, 2017 at 2:55 AM, yishayw <[hidden email]> wrote:

> I certainly don't think it's useless. I've been imagining something similar
> and it's great to see you take it up. I wonder what the effort would be to
> adapt Moonshine to be the web text editor...
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> FlexJS-Compile-as-a-service-tp61369p61370.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
>Simply let people see the JavaScript that gets produced from
>ActionScript and MXML with FlexJS.
This might be helpful but on the other side, this is already provided by any browsers dev tools.

>Maybe provide a couple of sample MXML/AS
>files alongside an option to write your own code from scratch.
Yes, I think a combination of pre-compiled samples and the option to compile is a good idea.

>I think Microsoft's Monaco editor would be good for this sort of thing
WoW, it really seems that Microsoft is transforming itself to a completely new company!

>but it would be really cool to see IntelliSense/completion
>working from the browser.
Definitely! But for now, I'd be happy to be able to build a very simple app that probably will just provide some text areas, we'll see ...

Thanks,
Olaf



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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
The difference between an online playground that shows the generated JS and
opening the browser dev tools is that you get instant results from the
playground. With the dev tools, you need to set up a project and build it
first. I think the playground would be useful for more casual visitors that
are still trying to figure out if they're going to download FlexJS at all.

- Josh

On Apr 27, 2017 1:10 AM, "OK" <[hidden email]> wrote:

> >Simply let people see the JavaScript that gets produced from
> >ActionScript and MXML with FlexJS.
> This might be helpful but on the other side, this is already provided by
> any
> browsers dev tools.
>
> >Maybe provide a couple of sample MXML/AS
> >files alongside an option to write your own code from scratch.
> Yes, I think a combination of pre-compiled samples and the option to
> compile
> is a good idea.
>
> >I think Microsoft's Monaco editor would be good for this sort of thing
> WoW, it really seems that Microsoft is transforming itself to a completely
> new company!
>
> >but it would be really cool to see IntelliSense/completion
> >working from the browser.
> Definitely! But for now, I'd be happy to be able to build a very simple app
> that probably will just provide some text areas, we'll see ...
>
> Thanks,
> Olaf
>
>
>
>
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> FlexJS-Compile-as-a-service-tp61369p61381.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
Josh Tynjala wrote
With the dev tools, you need to set up a project and build it first.
Probably I don't understand this.
My approach would be to just pass the compiled HTML/JS code to an iframe and to offer a link
to be able to open the iframe content in a new window.
I thought this way anybody would able to inspect the source code by just opening the browsers dev tool?

Thanks,
Olaf

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
I was talking about how I thought displaying the AS/MXML and JS side by
side could be a simpler project that acts as a stepping stone to the larger
CodePen/JSFiddle project. In this simpler project, the generated code
wouldn't even be run (maybe that's the part that you missed?), but seeing
the generated JS code would still be beneficial to users considering FlexJS
and AS/MXML. I suspect that a lot of the code from the simpler project
could be reused in the more complex project, so that's why I brought it up.

- Josh

On Thu, Apr 27, 2017 at 6:59 AM, OK <[hidden email]> wrote:

> Josh Tynjala wrote
> > With the dev tools, you need to set up a project and build it first.
>
> Probably I don't understand this.
> My approach would be to just pass the compiled HTML/JS code to an iframe
> and
> to offer a link
> to be able to open the iframe content in a new window.
> I thought this way anybody would able to inspect the source code by just
> opening the browsers dev tool?
>
> Thanks,
> Olaf
>
>
>
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> FlexJS-Compile-as-a-service-tp61369p61386.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
Josh Tynjala wrote
In this simpler project, the generated code wouldn't even be run (maybe that's the part that you missed?)
I think this is the part that I don't understand. Where do you think the generated code comes from?
I thought if it comes from the compiler it always runs?

Or is the idea to just prepare some pre-compiled examples and display the MXML/AS3 and HTML/JS side by side?

Sorry, I'm lost ;-)

Thanks,
Olaf


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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Alex Harui
These are all great ideas.

But it might be easier to understand the words if we could play with
actual code.  What do we really need to do in order to make this available
to the rest of the committers and our community?  Let's focus on that
first.  

Do we need a server?  We could use my CI server for now.
Do we need a repo to share the code?  Or should this go in TourDeFlexJS?
What else do we need?

Thanks,
-Alex

On 4/27/17, 7:42 AM, "OK" <[hidden email]> wrote:

>Josh Tynjala wrote
>> In this simpler project, the generated code wouldn't even be run (maybe
>> that's the part that you missed?)
>
>I think this is the part that I don't understand. Where do you think the
>generated code comes from?
>I thought if it comes from the compiler it always runs?
>
>Or is the idea to just prepare some pre-compiled examples and display the
>MXML/AS3 and HTML/JS side by side?
>
>Sorry, I'm lost ;-)
>
>Thanks,
>Olaf
>
>
>
>
>
>
>--
>View this message in context:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-development.2333347.n4.nabble.com%2FFlexJS-POC-JSFiddle-for-FlexJS-Compi
>le-as-a-service-tp61369p61388.html&data=02%7C01%7C%7Cf19acdb8c61746b360ed0
>8d48d7d4467%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63628901653899154
>2&sdata=5rfzxW2roJDMTbi%2Bs8pdjT5AePwC3Lr8Z%2FMVrtKBy%2Fo%3D&reserved=0
>Sent from the Apache Flex Development mailing list archive at Nabble.com.

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
In reply to this post by Olaf Krueger
Yes, I'm trying to say that a simpler starter project could be to display
the generated JS code side by side with the AS/MXML. And it would do
nothing more than that.

I'm not trying to tell you to do this instead of the CodePen/JSFiddle
project. I'm saying that this simpler project could benefit your
CodePen/JSFiddle project. It has a smaller scope, so you could release
something more quickly. Something that potential FlexJS users would find
useful too! Both projects will integrate with the compiler, though, so a
lot of the code that you'd write for the simpler project could probably be
reused in the more complex project.

Maybe you'd prefer to jump right into the more complex CodePen/JSFiddle
project, and that's totally fine! Just a suggestion.

- Josh



On Thu, Apr 27, 2017 at 7:42 AM, OK <[hidden email]> wrote:

> Josh Tynjala wrote
> > In this simpler project, the generated code wouldn't even be run (maybe
> > that's the part that you missed?)
>
> I think this is the part that I don't understand. Where do you think the
> generated code comes from?
> I thought if it comes from the compiler it always runs?
>
> Or is the idea to just prepare some pre-compiled examples and display the
> MXML/AS3 and HTML/JS side by side?
>
> Sorry, I'm lost ;-)
>
> Thanks,
> Olaf
>
>
>
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> FlexJS-Compile-as-a-service-tp61369p61388.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Greg Dove
try haxe has a great example of this type of thing also, with a lot of
pre-defined examples (but no mxml :) ).

https://try.haxe.org/

It may also be a useful reference for planning for future versions of
whatever we do.


On Fri, Apr 28, 2017 at 3:29 AM, Josh Tynjala <[hidden email]> wrote:

> Yes, I'm trying to say that a simpler starter project could be to display
> the generated JS code side by side with the AS/MXML. And it would do
> nothing more than that.
>
> I'm not trying to tell you to do this instead of the CodePen/JSFiddle
> project. I'm saying that this simpler project could benefit your
> CodePen/JSFiddle project. It has a smaller scope, so you could release
> something more quickly. Something that potential FlexJS users would find
> useful too! Both projects will integrate with the compiler, though, so a
> lot of the code that you'd write for the simpler project could probably be
> reused in the more complex project.
>
> Maybe you'd prefer to jump right into the more complex CodePen/JSFiddle
> project, and that's totally fine! Just a suggestion.
>
> - Josh
>
>
>
> On Thu, Apr 27, 2017 at 7:42 AM, OK <[hidden email]> wrote:
>
> > Josh Tynjala wrote
> > > In this simpler project, the generated code wouldn't even be run (maybe
> > > that's the part that you missed?)
> >
> > I think this is the part that I don't understand. Where do you think the
> > generated code comes from?
> > I thought if it comes from the compiler it always runs?
> >
> > Or is the idea to just prepare some pre-compiled examples and display the
> > MXML/AS3 and HTML/JS side by side?
> >
> > Sorry, I'm lost ;-)
> >
> > Thanks,
> > Olaf
> >
> >
> >
> >
> >
> >
> > --
> > View this message in context: http://apache-flex-
> > development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> > FlexJS-Compile-as-a-service-tp61369p61388.html
> > Sent from the Apache Flex Development mailing list archive at Nabble.com.
> >
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
In reply to this post by Josh Tynjala
Josh Tynjala wrote
It has a smaller scope, so you could release
something more quickly. Something that potential FlexJS users would find
useful too! Both projects will integrate with the compiler, though, so a
lot of the code that you'd write for the simpler project could probably be
reused in the more complex project.
I've got it, Josh! :-))
You're definitely right that this would mean to release faster... but I'm so curious how a compiler-as-service would work ;-)

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
In reply to this post by Alex Harui
>Do we need a server?  We could use my CI server for now.
Thanks for your offer!
I think we'd definitely need a powerful server that provides the service. I don't know for now if we'll get the power that would be needed for productive use for free.

>Do we need a repo to share the code?
If it's ok for all of you I'd like to improve my little POC step by step and if it's worth to share I'll put it to github repo including a working demo.

>Or should this go in TourDeFlexJS?
Don't know, I'd like to focus on the compile-as-service feature for now ;-)

Thanks,
Olaf

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
In reply to this post by Greg Dove
Greg Dove wrote
Never seen this before, the haxe guys have done a great job and I think you're right that this is something from which FlexJS could really benefit from...

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

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Olaf Krueger
In reply to this post by Olaf Krueger
Hi again,
I've had some time yesterday evening and improved the POC.
It is possible now to compile FlexJS code that is coming from the browsers Textarea. The compiled result is displayed via an Iframe [1].

The current worklfow is like this:
- Enter some code
- Click "Compile and run"
- The POST service is invoked with the code as payload
- A new tmp project dir is created at server side
- A Main.mxml with the passed code is created inside the tmp project dir
- The compiler is invoked
- The service response with the URL to the compiled js project and the compiler output

I'm using nodejs as server. [2]
Cause I've none at all experience with nodejs the code might be weird ;-)
All in al this is just a quick hack...

Next step would be to pimp the UI and try to integrate the Monaco or Ace editor.
Unfortunately, I've no proper internet connection at home for some days so this will take some time...

I'd appreciate any feedback if I'm on the right track!

Thanks,
Olaf

[1] https://snag.gy/4Md0lJ.jpg
[2] https://gist.github.com/anonymous/2632b00bf51bc77565657569217c75a4
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [FlexJS][POC] JSFiddle for FlexJS / Compile as-a-service

Josh Tynjala
Looks good, Olaf. Keep it up!

- Josh

On Fri, Apr 28, 2017 at 7:26 AM, OK <[hidden email]> wrote:

> Hi again,
> I've had some time yesterday evening and improved the POC.
> It is possible now to compile FlexJS code that is coming from the browsers
> Textarea. The compiled result is displayed via an Iframe [1].
>
> The current worklfow is like this:
> - Enter some code
> - Click "Compile and run"
> - The POST service is invoked with the code as payload
> - A new tmp project dir is created at server side
> - A Main.mxml with the passed code is created inside the tmp project dir
> - The compiler is invoked
> - The service response with the URL to the compiled js project and the
> compiler output
>
> I'm using nodejs as server. [2]
> Cause I've none at all experience with nodejs the code might be weird ;-)
> All in al this is just a quick hack...
>
> Next step would be to pimp the UI and try to integrate the Monaco or Ace
> editor.
> Unfortunately, I've no proper internet connection at home for some days so
> this will take some time...
>
> I'd appreciate any feedback if I'm on the right track!
>
> Thanks,
> Olaf
>
> [1] https://snag.gy/4Md0lJ.jpg
> [2] https://gist.github.com/anonymous/2632b00bf51bc77565657569217c75a4
>
>
>
> --
> View this message in context: http://apache-flex-
> development.2333347.n4.nabble.com/FlexJS-POC-JSFiddle-for-
> FlexJS-Compile-as-a-service-tp61369p61406.html
> Sent from the Apache Flex Development mailing list archive at Nabble.com.
>
Loading...