Make things pretty

[zepumph]

Today is dev meeting (relating to phetsims/tasks#980), it was mentioned that perhaps it would be good to get @chrisklus, the front-end whiz, in on this repo to help out making UI improvements. I'm not exactly sure what this will look like, but I'm making an issue to begin the discussion.

@chrisklus perhaps you just want to go for it, or start working with a designer. Or maybe we can talk and I can give you a tour of the limited things I know about the front end. For example it is using a few templating technologies, like handlebars and perhaps mustache too. There is also some fancy stuff in there about compiling the common code markdown files into the generated binder output.

[zepumph]

Let me know what you would like to do.

[chrisklus]

Thanks @zepumph. From dev meeting yesterday, @ariel-phet recommended I take a first pass and then work with a designer to make improvements. Perhaps you could give me a tour, and if I feel comfortable enough, I can go ahead and dive in.

[zepumph]

Sure thing. Let me know when you want a tour!

[chrisklus]

@zepumph gave me a very nice tour, so i'm feeling up to speed on how the front end is set up. Since it's using Handlebars and Bootstrap, I proposed porting this to React (the new website is in React)
to @ariel-phet, and he is in favor of this change.

For starters, I'm going to get a React environment working and then port and style the "Components by Sim" and "Sim by Components" pages that @zepumph recently created.

[chrisklus]

React has been difficult to get working with CDNs, and @mattpen thinks it will be messy to continue down this path. I was hoping this would work because anyone could load a live version of binder locally just like a sim, without any additional steps.

Instead, we could run it locally with npm. From slack:

Matt Pennington 10:39 AM
create-react-app might work, as once everything is set up it should be managed with npm, so other devs should just need to run npm start. Maybe worth asking the team during dev meeting today. I looked briefly through some pages describing how to get react running with a cdn and it involves a lot of polling weirdness.

He also mentioned that we could create a grunt task for this, so devs would just need to run grunt binder or something. We could also keep one running on phettest so designers could view the page whenever. Alternatively, I was thinking we could host this on one of our servers, so anyone on the team could visit it without having to run a command locally. Or we could do both local and remote options.

[samreid]

After developer meeting discussion, we discussed using a compile step instead of having that done inline in the browser via script type=text/babel. That seems pretty standard and would allow us to build the site. If in the future we figure how to get rid of the build step, the code maybe wouldn't need to change too much. We can also use filesystem watchers, to automatically compile on code changes.