<commit_before>
import Website.Blog (skeleton)
import open Website.ColorScheme
import Window
import JavaScript as JS

pageTitle = constant (JS.fromString "Interactive Programming in Elm")
foreign export jsevent "title"
  pageTitle : Signal JS.JSString

main = lift (skeleton everything) Window.width

everything wid =
  let w  = truncate (toFloat wid * 0.8)
      w' = min 600 w
      section txt =
          let words = width w' txt in
          container w (heightOf words) middle words
  in
  flow down
  [ width w title
  , section intro
  , width w video
  , section segue
  , width w editor
  , section rest ]

title = [markdown|
<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center;">
<div style="font-size: 4em;">Interactive Programming</div>
<div style="font-size: 1.5em;">Programming with Immediate Feedback</div>
</div>
|]

intro = [markdown|
<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
</style>

<br/>JavaScript proved that the development loop can be as short as refreshing
your browser. This is great for quickly iterating and testing an idea, making
programming more accessible and more fun.

This was the first step towards [interactive programming][ip]: the ability to
modify and interact with programs *while they are running*.
Articles like [Learnable Programming](http://worrydream.com/LearnableProgramming/)
explore the potential of interactive programming.
Projects like [LightTable](http://www.lighttable.com/) work on the tooling,
creating an IDE for interactive programming.

 [ip]: http://en.wikipedia.org/wiki/Interactive_programming

Elm takes the next step, exploring what it means to be a *language* for
interactive programming. Elm&rsquo;s online editor now allows you to modify
running code, so you do not have to restart your program to change its behavior:
|]

video = [markdown|
<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe src="//www.youtube.com/embed/zHPtvw8c3Lc"
        frameborder="0"
        allowfullscreen
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        width="640" height="480"></iframe>
</div>
|]

segue = [markdown|
<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
</style>
In Elm, this is called [hot-swapping](http://en.wikipedia.org/wiki/Hot_swapping).
Hot-swapping means *modifying running code*.

Support for hot-swapping is live, so you can [mess with Mario
yourself](/edit/examples/Intermediate/Mario.elm)
and play with the bouncing ball below. As you tweak the colors, shapes,
and physics in the code, you will see the ball update automatically.
|]

editor = [markdown|
<iframe src="/edit/examples/Intermediate/Bounce.elm?cols=100%25%2C150px"
        frameborder="0"
        style="overflow:hidden; height:400px; width:100%"
        height="400px" width="100%"></iframe>
|]

rest = [markdown|

<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
h2, h3, h4 {
  font-family: futura,'century gothic','twentieth century',calibri,verdana,helvetica,arial;
}
</style>

There are [many more examples](/examples/Intermediate.elm), so you can
continue to explore Elm and hot-swapping.

Perhaps the most interesting thing about adding hot-swapping to Elm was that it
was quite easy. It took about four days.

During those four days, it became very clear that the practicality of supporting
interactive programming was directly related to the abstractions (or lack-thereof) in
the language.

## How Hot-Swapping Works in Elm

signal graph, nodes are associated with a pure function and an immutable value

swap the pure function, keep the state

## Language Features that make Hot-Swapping easy

Not all languages are going to work well for interactive programming. There
are a number of key language features that make hot-swapping easy to implement,
and much more importantly, easy to use. 

Hot-swapping is fundamentally nicer to work with in a language that has:

 * [Immutable Values](#immutable-values)
 * [Static Types](#static-types)
 * [Predictable Structure](#predictable-structure)

I am not saying that all of these features are strictly required for hot-swapping
or interactive programming. I am saying that having them results in a better experience
for programmers. Let&rsquo;s examine these language features individually to see why
each provides concrete benefits for hot-swapping.

### Immutable Values

[Immutability](http://en.wikipedia.org/wiki/Immutable_object)
is a programming strategy that can be used in any language to make
code easier to understand, test, and debug.

Immutability means *values cannot be modified after creation*. You can
create new values, but you cannot change old ones.

In a mutable world, the behavior of the function depends not only on<commit_msg>Capitalize "Interactive Programming" throughout the article<commit_after>
import Website.Blog (skeleton)
import open Website.ColorScheme
import Window
import JavaScript as JS

pageTitle = constant (JS.fromString "Interactive Programming in Elm")
foreign export jsevent "title"
  pageTitle : Signal JS.JSString

main = lift (skeleton everything) Window.width

everything wid =
  let w  = truncate (toFloat wid * 0.8)
      w' = min 600 w
      section txt =
          let words = width w' txt in
          container w (heightOf words) middle words
  in
  flow down
  [ width w title
  , section intro
  , width w video
  , section segue
  , width w editor
  , section rest ]

title = [markdown|
<br/>
<div style="font-family: futura, 'century gothic', 'twentieth century', calibri, verdana, helvetica, arial; text-align: center;">
<div style="font-size: 4em;">Interactive Programming</div>
<div style="font-size: 1.5em;">Programming with Immediate Feedback</div>
</div>
|]

intro = [markdown|
<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
</style>

<br/>JavaScript proved that the development loop can be as short as refreshing
your browser. This is great for quickly iterating and testing an idea, making
programming more accessible and more fun.

This was the first step towards [Interactive Programming][ip]: the ability to
modify and interact with programs *while they are running*.
Articles like [Learnable Programming](http://worrydream.com/LearnableProgramming/)
explore the potential of Interactive Programming.
Projects like [LightTable](http://www.lighttable.com/) work on the tooling,
creating an IDE for Interactive Programming.

 [ip]: http://en.wikipedia.org/wiki/Interactive_programming

Elm takes the next step, exploring what it means to be a *language* for
Interactive Programming. Elm&rsquo;s online editor now allows you to modify
running code, so you do not have to restart your program to change its behavior:
|]

video = [markdown|
<div style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe src="//www.youtube.com/embed/zHPtvw8c3Lc"
        frameborder="0"
        allowfullscreen
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        width="640" height="480"></iframe>
</div>
|]

segue = [markdown|
<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
</style>
In Elm, this is called [hot-swapping](http://en.wikipedia.org/wiki/Hot_swapping).
Hot-swapping means *modifying running code*.

Support for hot-swapping is live, so you can [mess with Mario
yourself](/edit/examples/Intermediate/Mario.elm)
and play with the bouncing ball below. As you tweak the colors, shapes,
and physics in the code, you will see the ball update automatically.
|]

editor = [markdown|
<iframe src="/edit/examples/Intermediate/Bounce.elm?cols=100%25%2C150px"
        frameborder="0"
        style="overflow:hidden; height:400px; width:100%"
        height="400px" width="100%"></iframe>
|]

rest = [markdown|

<style type="text/css">
p, li {
  text-align: justify;
  line-height: 1.5em;
}
h2, h3, h4 {
  font-family: futura,'century gothic','twentieth century',calibri,verdana,helvetica,arial;
}
</style>

There are [many more examples](/examples/Intermediate.elm), so you can
continue to explore Elm and hot-swapping.

Perhaps the most interesting thing about adding hot-swapping to Elm was that it
was quite easy. It took about four days.

During those four days, it became very clear that the practicality of supporting
Interactive Programming was directly related to the abstractions (or lack-thereof) in
the language.

## How Hot-Swapping Works in Elm

signal graph, nodes are associated with a pure function and an immutable value

swap the pure function, keep the state

## Language Features that make Hot-Swapping easy

Not all languages are going to work well for Interactive Programming. There
are a number of key language features that make hot-swapping easy to implement,
and much more importantly, easy to use. 

Hot-swapping is fundamentally nicer to work with in a language that has:

 * [Immutable Values](#immutable-values)
 * [Static Types](#static-types)
 * [Predictable Structure](#predictable-structure)

I am not saying that all of these features are strictly required for hot-swapping
or Interactive Programming. I am saying that having them results in a better experience
for programmers. Let&rsquo;s examine these language features individually to see why
each provides concrete benefits for hot-swapping.

### Immutable Values

[Immutability](http://en.wikipedia.org/wiki/Immutable_object)
is a programming strategy that can be used in any language to make
code easier to understand, test, and debug.

Immutability means *values cannot be modified after creation*. You can
create new values, but you cannot change old ones.

In a mutable world, the behavior of the function depends not only on
{'fraction_non_alphanumeric': 0.0936109987868985, 'fraction_numerical': 0.012737565709664375, 'mean_word_length': 4.429747530186608, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 43, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6599469', 'n_tokens_mistral': 3019, 'n_tokens_neox': 2808, 'n_words': 1184}