Frontend language

README.md

The idea: Create frontend apps extremely quickly.

It's usually ridiculous tedious to create a frontend, because not only do you have to write code three times, but things like admin panels are very repetitive.

To combat this:

• Combine HTML and JS together into one file, with extreme sugar to make this very fast to write
• Just about eliminate CSS necessity by providing components that just work
  • Sacrifice originality for functionality
  • Includes responsive grid - based on flexbox, but progressively enhances
  • Make it very to use HTML imports and existing JS, to allow for use of Polymer paper elements easily
• Make it extremely easy, and practical, to generate large amounts of UI code, to eliminate boilerplate

Uses incremental DOM as a memory-friendly alternative to a React-like VDOM. Also supports hot reloading, because of the relative simplicitly of re-rendering the DOM.

Should support reading TypeScript definitions, as well as easy interop with existing JS.

Leverages typing to prevent silly runtime errors. undefined does not exist. Includes a very naggy linter as well.

Highly opinionated - IDGAF, sorry ❤️.

bindings.jsx

// CSS selector syntax
<.btn.btn-lg />

// Event listener
<button @click={() => window.alert('Hi!')} />

// Class binding
<.btn .btn-success=!error />

// Attribute binding
<input :name />
<input :placeholder=hintText || 'Enter some text...' />

// Style binding
<div style.background-color=bgColor || 'red' />

// Child binding
<div>{<i />}</div>

events.jsx

function AlertButton(text:string) {
  function callback() {
    window.alert(text);
  }
  
  return (
    <button @click=callback>Click Me!</button>
  );
}

material.jsx

const App = ({title, user}) => (
  <paper-drawer-panel>
    <paper-header-panel drawer>
      <AppMenu :user />
    </paper-header-panel>
    <paper-header-panel main>
      <paper-toolbar :title />
      Hello
    </paper-header-panel>
  </paper-drawer-panel>
);

function AppMenu({user}, state) {
  const items = [];
  
  if (user) {
    items.push({text: 'Log Out', icon: 'exit_to_app'});
  } else {
    items.push({text: 'Log In', icon: 'social:person'});
  }
  
  return (
    <paper-menu>
      {
        items.map(item => {
          return (
            <paper-item>
              <iron-icon :icon=item.icon />
              {item.text}
            </paper-item>
          );
        })
      }
    </paper-menu>
  );
}

state.jsx

export default ({text}) => {
  return (
    <button @click={() => state.append('text', text)}>
      {text}
    </button>
    );
  }
};