<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Erland Kjensli</title>
    <description>The latest articles on DEV Community by Erland Kjensli (@erland_kjensli_e3e4076039).</description>
    <link>https://dev.to/erland_kjensli_e3e4076039</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4132144%2Ff6e0c682-e629-4d5d-b129-76445fe4dcf4.jpg</url>
      <title>DEV Community: Erland Kjensli</title>
      <link>https://dev.to/erland_kjensli_e3e4076039</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/erland_kjensli_e3e4076039"/>
    <language>en</language>
    <item>
      <title>FlowScript 0.1: A semantic language for describing applications before implementation</title>
      <dc:creator>Erland Kjensli</dc:creator>
      <pubDate>Fri, 18 Sep 2026 22:54:48 +0000</pubDate>
      <link>https://dev.to/erland_kjensli_e3e4076039/flowscript-01-a-semantic-language-for-describing-applications-before-implementation-3pn3</link>
      <guid>https://dev.to/erland_kjensli_e3e4076039/flowscript-01-a-semantic-language-for-describing-applications-before-implementation-3pn3</guid>
      <description>&lt;p&gt;I've been exploring a question that sits somewhere between software architecture, DSL design, application modeling, UX structure, and programming-language design:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Can we describe the semantic model of an application in a compact, human-readable notation before implementation begins?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That experiment is now public as &lt;strong&gt;FlowScript 0.1&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;GitHub repository:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The current release is an experimental working draft:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript/releases/tag/v0.1.0" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript/releases/tag/v0.1.0&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  From flowcharts to application semantics
&lt;/h2&gt;

&lt;p&gt;The idea started from a familiar problem.&lt;/p&gt;

&lt;p&gt;Flowcharts are useful for showing sequences, decisions, and transitions. But modern applications contain much more than a sequence of boxes and arrows.&lt;/p&gt;

&lt;p&gt;An application also has:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;structure and hierarchy&lt;/li&gt;
&lt;li&gt;logical destinations&lt;/li&gt;
&lt;li&gt;UI structure&lt;/li&gt;
&lt;li&gt;navigation&lt;/li&gt;
&lt;li&gt;user interactions&lt;/li&gt;
&lt;li&gt;actions and side effects&lt;/li&gt;
&lt;li&gt;conditions&lt;/li&gt;
&lt;li&gt;state&lt;/li&gt;
&lt;li&gt;context and dataflow&lt;/li&gt;
&lt;li&gt;validation&lt;/li&gt;
&lt;li&gt;asynchronous behavior&lt;/li&gt;
&lt;li&gt;errors and feedback&lt;/li&gt;
&lt;li&gt;reusable structures&lt;/li&gt;
&lt;li&gt;responsive presentation&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Trying to represent all of this as a traditional flowchart quickly becomes awkward.&lt;/p&gt;

&lt;p&gt;That led to a different question:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What if the diagram is only one possible projection of a more fundamental application model?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;FlowScript explores that idea.&lt;/p&gt;

&lt;h2&gt;
  
  
  The central idea
&lt;/h2&gt;

&lt;p&gt;The current proposal is that FlowScript should describe the &lt;strong&gt;semantic model of an application&lt;/strong&gt;, rather than its implementation.&lt;/p&gt;

&lt;p&gt;In other words:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Describe what the application is and how it behaves before deciding how it is implemented.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A FlowScript document should ideally remain meaningful if the implementation changes.&lt;/p&gt;

&lt;p&gt;It should not need to know whether the eventual application uses React, another UI framework, a particular backend, a particular database, or a particular deployment architecture.&lt;/p&gt;

&lt;p&gt;The implementation is downstream.&lt;/p&gt;

&lt;h2&gt;
  
  
  Structure is not navigation
&lt;/h2&gt;

&lt;p&gt;One of the first problems that appears in application modeling is that hierarchy and navigation are easy to confuse.&lt;/p&gt;

&lt;p&gt;Suppose we have:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;page:LIST
    list:ITEMS
        item:ITEM
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This tells us something about structure.&lt;/p&gt;

&lt;p&gt;It does not necessarily tell us that the user can navigate from &lt;code&gt;LIST&lt;/code&gt; to &lt;code&gt;ITEM&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;That relationship should be explicit:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;page:LIST
    list:ITEMS
        item:ITEM
            goto:DETAIL

page:DETAIL
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This distinction may seem small, but it matters because hidden inference makes models ambiguous.&lt;/p&gt;

&lt;p&gt;FlowScript currently treats the structural tree and the navigation graph as related but separate concepts.&lt;/p&gt;

&lt;h2&gt;
  
  
  Structure, navigation, and state are different graphs
&lt;/h2&gt;

&lt;p&gt;A mature FlowScript document will probably contain multiple overlapping structures rather than one universal graph.&lt;/p&gt;

&lt;p&gt;At minimum:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Structural tree&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;What contains what.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;LIST
└── ITEMS
    └── ITEM
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Navigation graph&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;What can lead to what.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;LIST → DETAIL
DETAIL → LIST
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;State graph&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;How state changes.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;ACTIVE → ARCHIVED
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These relationships may refer to the same semantic objects, but they answer different questions.&lt;/p&gt;

&lt;p&gt;That separation is one of the core ideas being tested in 0.1.&lt;/p&gt;

&lt;h2&gt;
  
  
  Structure is not presentation either
&lt;/h2&gt;

&lt;p&gt;Another important distinction is between the logical application model and the way that model is presented on a device or viewport.&lt;/p&gt;

&lt;p&gt;For example, the same logical destination might appear as a complete page on a compact layout and as a pane alongside other content on a larger layout.&lt;/p&gt;

&lt;p&gt;The semantic identity should remain the same.&lt;/p&gt;

&lt;p&gt;Conceptually:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;page:DETAIL
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;could be presented as:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;compact
    DETAIL

regular
    LIST | DETAIL

expanded
    NAVIGATION | LIST | DETAIL
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The presentation changes.&lt;/p&gt;

&lt;p&gt;The application model does not.&lt;/p&gt;

&lt;p&gt;This leads to a broader hypothesis:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Responsive UI can be treated as a projection of the semantic model rather than a collection of separate application hierarchies.&lt;/strong&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Actions are not navigation
&lt;/h2&gt;

&lt;p&gt;Another distinction is between what the user does and what the system does.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;button:"Save"
    action:SAVE
    goto:HOME
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There are two different semantic events here.&lt;/p&gt;

&lt;p&gt;The user interacts with a control.&lt;/p&gt;

&lt;p&gt;The system performs an action.&lt;/p&gt;

&lt;p&gt;Then the navigation context changes.&lt;/p&gt;

&lt;p&gt;Keeping those concepts separate makes behavior easier to reason about and potentially easier to reuse.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conditions are not state
&lt;/h2&gt;

&lt;p&gt;FlowScript also explores a strict distinction between conditions and state.&lt;/p&gt;

&lt;p&gt;A condition asks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Is this predicate true?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;condition:USER_AUTHENTICATED
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;State asks:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;What state is this object or process in?&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;state:LOADING
state:ERROR
state:ACTIVE
state:ARCHIVED
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The distinction becomes important when models become more complex.&lt;/p&gt;

&lt;p&gt;A state machine, a boolean predicate, a visibility condition, and a permission rule may all affect what the user sees, but they are not necessarily the same semantic thing.&lt;/p&gt;

&lt;h2&gt;
  
  
  A deliberately small syntax
&lt;/h2&gt;

&lt;p&gt;One design goal is to keep the written notation simple.&lt;/p&gt;

&lt;p&gt;The current direction is roughly:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;keyword:value
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;with indentation expressing semantic nesting.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;page:DETAIL
    heading:"Detail"

    field:VALUE

    button:"Save"
        action:SAVE
        goto:HOME
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The syntax is intentionally lightweight.&lt;/p&gt;

&lt;p&gt;The underlying semantics should be much stricter than the notation looks.&lt;/p&gt;

&lt;p&gt;That gives us an important design principle:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Syntactic simplicity, semantic strictness.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A future parser should be able to validate references, nesting, targets, conditions, state declarations, and other relationships even though the source remains relatively easy to read and write.&lt;/p&gt;

&lt;h2&gt;
  
  
  What FlowScript is not
&lt;/h2&gt;

&lt;p&gt;FlowScript is not intended to replace programming languages.&lt;/p&gt;

&lt;p&gt;It is not intended to replace:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TypeScript&lt;/li&gt;
&lt;li&gt;JavaScript&lt;/li&gt;
&lt;li&gt;HTML&lt;/li&gt;
&lt;li&gt;CSS&lt;/li&gt;
&lt;li&gt;backend code&lt;/li&gt;
&lt;li&gt;API schemas&lt;/li&gt;
&lt;li&gt;database schemas&lt;/li&gt;
&lt;li&gt;visual design tools&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The idea is to operate at a different level.&lt;/p&gt;

&lt;p&gt;A FlowScript document could describe the semantic structure and behavior of an application, while implementation technologies determine how that model becomes software.&lt;/p&gt;

&lt;h2&gt;
  
  
  The possible long-term direction
&lt;/h2&gt;

&lt;p&gt;There is a larger hypothesis behind the project.&lt;/p&gt;

&lt;p&gt;If a semantic application model can be expressed rigorously enough, the same source could potentially support multiple projections.&lt;/p&gt;

&lt;p&gt;For example:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;FlowScript
   ├── hierarchy diagram
   ├── navigation graph
   ├── state diagram
   ├── responsive presentation map
   ├── documentation
   ├── test cases
   └── eventually implementation scaffolding
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That is not what FlowScript 0.1 does.&lt;/p&gt;

&lt;p&gt;It is a direction that becomes interesting only if the underlying semantic model turns out to be useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why release it this early?
&lt;/h2&gt;

&lt;p&gt;Because the hardest part is probably not the syntax.&lt;/p&gt;

&lt;p&gt;The difficult questions are semantic.&lt;/p&gt;

&lt;p&gt;Which concepts are actually fundamental?&lt;/p&gt;

&lt;p&gt;Which concepts overlap?&lt;/p&gt;

&lt;p&gt;Which distinctions are necessary?&lt;/p&gt;

&lt;p&gt;Which concepts are too specific to one kind of application?&lt;/p&gt;

&lt;p&gt;What is missing?&lt;/p&gt;

&lt;p&gt;What should never belong in the language?&lt;/p&gt;

&lt;p&gt;Those questions are difficult to answer in isolation.&lt;/p&gt;

&lt;p&gt;So FlowScript 0.1 is being published as an &lt;strong&gt;experimental working draft&lt;/strong&gt;, specifically so that other people can challenge the model.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I am looking for
&lt;/h2&gt;

&lt;p&gt;The most useful feedback at this stage is not:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I would write this syntax differently."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Syntax can change.&lt;/p&gt;

&lt;p&gt;More useful questions are:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does the semantic distinction make sense?&lt;/li&gt;
&lt;li&gt;Is a concept actually general?&lt;/li&gt;
&lt;li&gt;Is something being modeled at the wrong level?&lt;/li&gt;
&lt;li&gt;Are two concepts actually the same thing?&lt;/li&gt;
&lt;li&gt;Is an important semantic category missing?&lt;/li&gt;
&lt;li&gt;Can the same model describe very different applications?&lt;/li&gt;
&lt;li&gt;Could two different implementations use the same FlowScript description?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Concrete examples and counterexamples are particularly useful.&lt;/p&gt;

&lt;h2&gt;
  
  
  The current development order
&lt;/h2&gt;

&lt;p&gt;The project deliberately follows this order:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;concepts
   ↓
semantic model
   ↓
vocabulary
   ↓
syntax
   ↓
grammar
   ↓
validation
   ↓
tooling
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The reason is simple.&lt;/p&gt;

&lt;p&gt;If grammar is frozen too early, it can make the language look precise before the underlying model is actually understood.&lt;/p&gt;

&lt;p&gt;FlowScript 0.1 is therefore more interested in &lt;strong&gt;semantic review than syntax freeze&lt;/strong&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where the project is now
&lt;/h2&gt;

&lt;p&gt;The first public draft is available on GitHub:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The specification is here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript/blob/main/docs/FLOWSCRIPT-0.1-DRAFT-SPECIFICATION-2026-09-18.md" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript/blob/main/docs/FLOWSCRIPT-0.1-DRAFT-SPECIFICATION-2026-09-18.md&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The roadmap is here:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript/blob/main/ROADMAP.md" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript/blob/main/ROADMAP.md&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The current release is:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/erlandkjensli-hue/FlowScript/releases/tag/v0.1.0" rel="noopener noreferrer"&gt;https://github.com/erlandkjensli-hue/FlowScript/releases/tag/v0.1.0&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The project is intentionally open to discussion, criticism, examples, alternative models, and independent implementations.&lt;/p&gt;

&lt;h2&gt;
  
  
  The main question
&lt;/h2&gt;

&lt;p&gt;For me, the central experiment is this:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Can a person who has never seen the implementation understand the application's architecture and behavior from the FlowScript model alone?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;And an even stronger test:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Can two different implementations of the same application be described by the same FlowScript?&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;If the answer eventually turns out to be yes, FlowScript may be doing something more interesting than drawing flowcharts.&lt;/p&gt;

&lt;p&gt;If the answer is no, the experiment should tell us why.&lt;/p&gt;

&lt;p&gt;That is what I would like to find out.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;I'd particularly like feedback from people interested in programming-language design, DSLs, software architecture, application modeling, and developer tooling.&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>opensource</category>
      <category>architecture</category>
      <category>programming</category>
    </item>
  </channel>
</rss>
