Refresh homepage

[jasonLaster]

Yesterday we discussed kicking off a couple Esprima website improvements. I think the homepage could be revisited.

One aspect I'd like the homepage to do a bette job with would be education. A lot of people in the JS community are learning about ASTs for the first time and it would be nice if they could have a better idea of how a program maps to an AST and maybe even CST.

To that effect, I put together a wireframe of an interactive component that could be on the landing page. The boxes below are placeholders for additional content. I intentionally left everything else vague so as to not get lost in the details.

[fkling]

FWIW, I built http://astexplorer.net/. Happy to talk about integration opportunities if you are interested. Either way I'm curious what you come up with on the educational side!

[jasonLaster]

@fkling nice tool. I coud definitely see that being useful.

[hzoo]

And there's a cst PR in astexplorer in progress fkling/astexplorer#38

[jasonLaster]

Thanks @hzoo following the discussion

[hzoo]

Oh and I guess I'l see you at that open source workshop later? Maybe can get some contributors to help out here

[jasonLaster]

@hzoo great! Let's definitely pair on this Sunday. I'll be ramping up on the AST explorer to prep

[fkling]

Also let me know how I could help! E.g. we could have a minimal version of the astexplorer, without toolbar and fixed parser, which could then be embedded (iframe) into the the page.

Or we could create a JS API for the astexplorer, which would give you more control over where / how to render / embed it, and let you interact with it programmatically.

[hzoo]

we could have a minimal version of the astexplorer, without toolbar and fixed parser, which could then be embedded (iframe) into the the page.

@fkling That sounds like the simplest thing to do and of course you're second idea is more powerful if we want to extend it - Maybe we just need to brainstorm more about how it could work and how it can teach people about ASTs?

[fkling]

Maybe we just need to brainstorm more about how it could work and how it can teach people about ASTs?

Definitely. In theory, astexplorer would support different visualizations of the code / ast in the right hand panel. The challenge is to come up with a visualization / representation that "teaches" somehow.

And of course this is only one part of the teaching. Documentation (which is probably outside of astexplorer's scope) is another big part.

[hzoo]

https://github.com/estree/estree could help with that? There's estree/estree#66 (examples) and I started a PR for it. I'm not sure what else - making jscs/eslint rules helps (that's the only reason I know any of it)

[jasonLaster]

we could have a minimal version of the astexplorer, without toolbar and fixed parser, which could then be embedded (iframe) into the the page.

@fkling ideally, we would be able to require it as an NPM module and customize how it is shown. In our case it would be an editor / visualizer.

Maybe we just need to brainstorm more about how it could work and how it can teach people about ASTs?

• Embedded documentation is a great idea.
• Esprima has lots of demos as well. Ideally the homepage would surface the demos as different use cases for an AST powered tool.
• For visualizations, I'd like to take a crack at the the flamechart / tree view inside of the AST Explorer at some point. I think it could give a good birds eye view.

[fkling]

ideally, we would be able to require it as an NPM module and customize how it is shown.

Sounds good to me. If you have any concrete ideas about the API, let me know.

Embedded documentation is a great idea.

You mean into the visualization? Do you have any concrete ideas? At some point I though about showing little (i) icons next to a node, but wasn't sure what kind of information to put there.

For visualizations, I'd like to take a crack at the the flamechart / tree view inside of the AST Explorer at some point. I think it could give a good birds eye view.

That would be awesome!

[ariya]

It seems that AST Explorer already establishes itself as an AST exploration tool for power users. I doubt that we need to radically change Esprima homepage, nor its simplistic parser demo. So @jasonLaster, unless you have a concrete plan to work on this, I'd rather not keep this issue open for an indefinite time. What do you think?

[jasonLaster]

@ariya I'm fine closing it. I'd like to get to it at some point but this ticket isn't necessary.