Introduction

Introduction to the Knot Language.

Why?

Why a new language? Why Knot? I often find myself wondering if I have appropriately satisfied this answer in my own head... Primarily I wrote it because I've grown tired of the problems I constantly find myself solving in development today. As some background, I've been working with TypeScript, webpack and React for the better part of the past 8 years, and for the most part I love it. After a lot of fiddling I've finally managed to hand-roll the perfect set of configurations and libraries to make every-day development a no-brainer.

However, not everyone has the time to develop and master each of these technologies, and moreover I don't think you should have to. What do I ultimately want every time I sit down to create a new project? I want to be able to create an application quickly that can grow to any size, and to use the best tools and components available to help me along the way.

I was inspired to create a language that could simplify away all of the boilerplate of attaching my style, state and view modules together without relying on a framework. A language that understood the relationships within my data and optimized for it automatically. A language that was designed to translate my description of an application or component to work just as well on the web as natively, or to be consumed by an existing Vue, React or Angular project.

It's my hope that Knot and its tools will replace your build system, linter, formatter, state management, routing, side effects handling and styling while remaining inter-operable with existing solutions by providing a pluggable compiler which can be configured for different targets.

Currently only JavaScript for the web is supported as a compilation target.

What?

Knot is a functional language with an imperative twist, similar to ReasonML. However it's real strength is the first-class support for entities such as state, view and style which allow developers to better describe the relationship between these key elements of an application, re-use and compose them easily and combine them all to construct connected and styled components without significant overhead.

Here's a taste of a simple component with styling and a value in state bound to an input:

style AppStyle {
  .field {
    fontSize: em(2);
  }
}

state FieldState {
  value: string;
  
  mut onChange(nextValue: string) -> $value = nextValue;
}

view App with AppStyle, FieldState ->
  <div>
    <input .field value=$value onChange=$onChange />
  </div>;