Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Browser frontend #13

Open
quchen opened this issue Apr 29, 2016 · 4 comments
Open

Browser frontend #13

quchen opened this issue Apr 29, 2016 · 4 comments

Comments

@quchen
Copy link
Owner

quchen commented Apr 29, 2016

Looking at the STG in a browser is probably nicer than in a console.

@quchen quchen mentioned this issue May 12, 2016
@quchen quchen modified the milestone: Long-term goal May 12, 2016
@quchen quchen changed the title HTML prettyprinter Browser frontend May 27, 2016
@quchen
Copy link
Owner Author

quchen commented Jun 15, 2016

Some specific questions to answer:

  • Evaluation model?
    • Pre-render everything: simple, does not allow infinite programs
    • Start a server that answers requests about program states? More complex frontend, allows infinite programs as it can answer on-demand
  • What frontend technology to use?
    • Elm is user-friendly and seems to be quick to develop in, and I know people that I can ask support questions
    • Purescript is very interesting, but I'm completely unfamiliar with it
  • How to send data to the frontend? Pre-render it, serialize it as JSON?
  • What's a good design to show everything at the same time nicely?

@quchen
Copy link
Owner Author

quchen commented Jun 6, 2017

Talked to @reinh on IRC, he proposed to add a React frontend if given a proper exchange format – awesome!

@reinh
Copy link

reinh commented Jun 6, 2017

Regarding evaluation model, I say start with (1) and we can add (2) over time. It'll be nice to see something quickly even if we can't work with every program.

Regarding frontend: I do React for my day job atm so I would be most productive in that. I've done some tiny personal projects in Elm and Hello World apps with PureScript's pux and halogen so I don't have much experience but I do like both of those choices in theory.

Regarding the wire format, I see a few obvious options:

  • Pre-rendered HTML with class names that are recognized by some highlighting system. Advantages: Can be injected directly into the DOM, styling "for free". Disadvantages: Can't be used for any other purpose or modified in any way.

  • Pre-rendered HTML with semantic class names or other attributes. Advantages: Can be injected directly into the DOM, only needs a stylesheet. Disadvantages: Difficult to use for any purpose other than directly embedding into the DOM or to modify or pre-process in any way.

  • JSON: Advantages: Very easy to use in JavaScript-land. Probably trivial to generate in Haskell-land. Can be processed or munged easily. Disadvantages: A slightly less nice format for representing a token stream than, say, XML. Requires a template system or similar for rendering to HTML, but that's basically what (say) React is anyway.

XML could theoretically be better than JSON here if it had reasonable support on both ends but it doesn't... and also who wants to use XML, seriously.

I think generic generation of ToJSON instances for a list of program states would be a reasonable first try for a wire format.

@quchen
Copy link
Owner Author

quchen commented Jun 7, 2017

  • I agree on the evaluation model. On the STGi side I have a list of program states anyway, so switching this to a more complex delivery model is just a matter of standard operations.
  • Frontend: I don’t really care, the goal is having something usable and somewhat modern. I encourage using Elm and Purescript since I simply think they’re cooler, but that’s as far as my arguments go.
  • Wire format: I’m currently rewriting the code to using my prettyprinter, for which I could easily write a HTML backend (or semi-HTML with custom tags, or whatever React likes to use). I agree JSON is preferrable, and indeed easy to provide, but shifts quite a bit of (redundant) layout work to the frontend. I think an HTML format with semantic tags (so we can easily create e.g. anchors/links for all memory addresses) is the best solution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants