Fyord

Components

Fyord allows you to build your UI using components that contain their own state, styles, and behaviors. Simply extend from the base Component class and import where you need them.

exportclassHeaderComponentextendsComponent{
private links = [
    { href: Routes.Home, label: 'Home' },
    { href: Routes.Examples, label: 'Examples' },
    { href: Routes.Styleguide, label: 'Styleguide' }
  ];

  Template = async () =>
    <header>
      <nav class={styles.nav}>
        <ul>
          {this.links.map((l, i) => <li key={i}>
            <a href={l.href}>{l.label}</a>
          </li>)}
        </ul>
      </nav>
    </header>;
}

Routing

Routing in Fyord is seamless. Simply use normal anchor tags! Local urls (which are not target=_blank) will be routed on the client. See the documentation to see examples of routing parameters.

exportclassRoutingExampleextendsPage{
  Route = (route: Route) => route.path === Routes.Routing;
  Template = async () =>
    <header>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/contact">Contact</a></li>
      </ul>
    </header>;
}

Styling

Styling components in Fyord is straightforward, whether you want global or component level styles.

Simply create a file with the .module.css and import to use! Prefer Sass instead? No problem, just change the extension to .scss.

import styles from'./contact.module.css';

exportclassStylingExampleextendsComponent{
  Template = async () =>
    <>
      <h1 class={styles.red}>Contact me!</h1>
    </>;
}

State

Maintaining app and component state couldn’t be easier. Using decorators, you can quickly create state at the global app store or the local component level that will automatically update your component UI upon state change.

exportclassChangeDetectionextendsComponent{
@AppStoreprivate userAge: number = 0;
@Stateprivate counter: number = 0;

  Template = async () =>
    <div>
      <p>User's Age: <b>{this.userAge}</b></p>;
      <p>Counter Value: <b>{this.counter}</b></p>;
    </div>;
}

And more...

JSX Templates

Create component templates Intuitively using familiar JSX syntax! Use the syntax and attributes you already know (class, events, etc.)

Testability

Fyord is designed with testability in mind! Testing Fyord components is like testing any other class. There are no life cycles or DI containers to pay tribute to here!

Pre-rendering

Fyord pages support three pre-render modes (static, dynamic, and hybrid), making optimizing for SEO or deploying a fully static site easy.