Ideas for homepage example code

[johnridesabike]

Both reasonml.github.io and bucklescript.github.io have code examples at the top of their homepage, which got me thinking about the reasonml.org wanted to use something similar.

I think the Node.js about page nails this. Its example code is simple, short (14 lines), and shows you how to do something practical (get a server running). Anyone who just wants run a Node server can copy/paste this to get started.

As another example, the ReactJS homepage has several code samples that each illustrate different things like simple components or complex apps. It also lets you edit the code and renders the result next to it.

So what kind of simple, practical examples would make sense for Reason?

One idea I had is pattern-matching multiple values at once. Something like this:

type permissions = | NotLoggedIn | User(string) | Admin(string);
type loading = | Loading | Loaded | LoadingError(string);

[@react.component]
let make = (~permission, ~loading) =>
  switch (permission, loading) {
  | (NotLoggedIn, Loading) =>
    <div> "Loading login form..."->React.string </div>
  | (User(_) | Admin(_), Loading) =>
    <div> "Loading your personal page..."->React.string </div>
  | (NotLoggedIn, Loaded) => <LoginForm />
  | (User(userId), Loaded) => <UserPanel id=userId />
  | (Admin(userId), Loaded) => <AdminPanel id=userId />
  | (NotLoggedIn | User(_) | Admin(_), LoadingError(message)) =>
    <div> {j|Error loading page: $message|j}->React.string </div>
  };

This combines a few things that people may struggle to solve in their JS apps, like how to mange loading states and how to conditionally render based on several variables at once. Most importantly, it illustrates how Reason can provide elegant solutions to these problems.

There are probably better examples we can come up with, but this can be a starting point.

[austindd]

I like this idea a lot. Your specific code example makes a lot of sense coming from Reason, but it might be slightly verbose for displaying on the front page (IMHO). Still, the concept is great!

It's really important for people looking at a new language to be able to see some code written in that language, and for it to just "make sense" right off the bat. That gives people a positive feeling about the language, and makes it feel more approachable.

[ryyppy]

Cross referencing a similar discussion: https://github.com/reasonml/reasonml.github.io/pull/606