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

title = constant (JS.fromString "Elm 0.8 - Improve Everything")
foreign export jsevent "title"
  title : Signal JSString

main = lift (skeleton everything) Window.width

everything wid =
    let w = min 600 wid
    in  flow down [ width w intro,
                    container w 50 middle dots,
                    spacer w 10, width w midtro,
                    container w 50 middle crosses,
                    spacer w 10, width w postCross ]

intro = [markdown|

<style type="text/css">
p { text-align: justify }
pre {
 background-color: rgb(245,245,245);
 margin: 0 30px;
 padding: 4px 10px;
 border-left: solid 2px rgb(96,181,204);
}
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; background-color: #f8f8f8; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
pre, code { background-color: #f8f8f8; }
code > span.kw { color: #204a87; font-weight: bold; }
code > span.dt { color: #204a87; }
code > span.dv { color: #0000cf; }
code > span.bn { color: #0000cf; }
code > span.fl { color: #0000cf; }
code > span.ch { color: #4e9a06; }
code > span.st { color: #4e9a06; }
code > span.co { color: #8f5902; font-style: italic; }
code > span.ot { color: #8f5902; }
code > span.al { color: #ef2929; }
code > span.fu { color: #000000; }
code > span.er { font-weight: bold; }
</style>

<h1><div style="text-align:center">Elm 0.8 &ndash; Improve Everything
<div style="font-size:0.5em;font-weight:normal">*Too many improvements to fit in a pithy title*</div></div>
</h1>

This release has been in the works for quite a while now, and it is introducing
a ton of new features. The most important improvements and additions are:

* [Embedding Elm in HTML and JS](#embedding-elm-in-html-and-js) ([video demo](http://www.youtube.com/watch?v=xt07tLqa_m8))
* [Type annotations and type aliases](#type-annotations-and-type-aliases)
* [Input widgets can be created dynamically and updated programmatically](#dynamic-inputs)
* [Better 2D graphics API](#better-2d-graphics)
* [Performance and infrastructure improvements](#faster-currying-and-data-structures)
* [Inline documentation in the online editor](#inline-documentation) (thanks to Mads!)
* [Module tweaks, records to objects, WebSocket library, and new operators](#miscellaneous-experimental)

So this release finally answers the questions &ldquo;How do I dynamically create
buttons?&rdquo; and &ldquo;How do I embed Elm in HTML and JS?&rdquo; I think
this is a big step towards writing traditional web apps in the Functional
Reactive style. In the case of dynamic creation of buttons, it actually
required an approach that appears to be new to FRP.

There are a some breaking changes along the way, so I will be sure to bring them
up!

## Embedding Elm in HTML and JS

Elm can now be embedded directly in HTML or JS. This means Elm will
integrate with your existing workflow, whether you make web apps
or work with server-side JS. Using Elm is not an all-or-nothing choice anymore.

This lowers the barrier if you want to experiment with Elm and makes it
easier to convince your boss that it is okay to use Elm in an existing project.

The description of [how to embed Elm code](/learn/JavaScript-Integration.elm)
explains all of the details of the API.

The following video is a short demo of how to embed Elm in a `<div>`. 

<div style="position:relative; height:350px;">
<iframe width="600" height="350"
        src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0"
             style="position:absolute; margin-left:-300px; left:50%;"
        frameborder="0" allowfullscreen></iframe><commit_msg>Stronger note about breaking changes.<commit_after>
import Website.Skeleton (skeleton)
import open Website.ColorScheme
import Window
import JavaScript as JS

title = constant (JS.fromString "Elm 0.8 - Improve Everything")
foreign export jsevent "title"
  title : Signal JSString

main = lift (skeleton everything) Window.width

everything wid =
    let w = min 600 wid
    in  flow down [ width w intro,
                    container w 50 middle dots,
                    spacer w 10, width w midtro,
                    container w 50 middle crosses,
                    spacer w 10, width w postCross ]

intro = [markdown|

<style type="text/css">
p { text-align: justify }
pre {
 background-color: rgb(245,245,245);
 margin: 0 30px;
 padding: 4px 10px;
 border-left: solid 2px rgb(96,181,204);
}
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; background-color: #f8f8f8; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
pre, code { background-color: #f8f8f8; }
code > span.kw { color: #204a87; font-weight: bold; }
code > span.dt { color: #204a87; }
code > span.dv { color: #0000cf; }
code > span.bn { color: #0000cf; }
code > span.fl { color: #0000cf; }
code > span.ch { color: #4e9a06; }
code > span.st { color: #4e9a06; }
code > span.co { color: #8f5902; font-style: italic; }
code > span.ot { color: #8f5902; }
code > span.al { color: #ef2929; }
code > span.fu { color: #000000; }
code > span.er { font-weight: bold; }
</style>

<h1><div style="text-align:center">Elm 0.8 &ndash; Improve Everything
<div style="font-size:0.5em;font-weight:normal">*Too many improvements to fit in a pithy title*</div></div>
</h1>

This release has been in the works for quite a while now, and it is introducing
a ton of new features. The most important improvements and additions are:

* [Embedding Elm in HTML and JS](#embedding-elm-in-html-and-js) ([video demo](http://www.youtube.com/watch?v=xt07tLqa_m8))
* [Type annotations and type aliases](#type-annotations-and-type-aliases)
* [Input widgets can be created dynamically and updated programmatically](#dynamic-inputs)
* [Better 2D graphics API](#better-2d-graphics)
* [Performance and infrastructure improvements](#faster-currying-and-data-structures)
* [Inline documentation in the online editor](#inline-documentation) (thanks to Mads!)
* [Module tweaks, records to objects, WebSocket library, and new operators](#miscellaneous-experimental)

So this release finally answers the questions &ldquo;How do I dynamically create
buttons?&rdquo; and &ldquo;How do I embed Elm in HTML and JS?&rdquo; I think
this is a big step towards writing traditional web apps in the Functional
Reactive style. In the case of dynamic creation of buttons, it actually
required an approach that appears to be new to FRP.

There are a some breaking changes, so it is highly likely that your existing
Elm code will need to be modified to work with 0.8. If you are having truoble,
please let us know on the [mailing
list](https://groups.google.com/forum/?fromgroups#!forum/elm-discuss)
so we can help you out and get better documentation out for any confusing parts.

## Embedding Elm in HTML and JS

Elm can now be embedded directly in HTML or JS. This means Elm will
integrate with your existing workflow, whether you make web apps
or work with server-side JS. Using Elm is not an all-or-nothing choice anymore.

This lowers the barrier if you want to experiment with Elm and makes it
easier to convince your boss that it is okay to use Elm in an existing project.

The description of [how to embed Elm code](/learn/JavaScript-Integration.elm)
explains all of the details of the API.

The following video is a short demo of how to embed Elm in a `<div>`. 

<div style="position:relative; height:350px;">
<iframe width="600" height="350"
        src="http://www.youtube.com/embed/xt07tLqa_m8?rel=0"
             style="position:absolute; margin-left:-300px; left:50%;"
        frameborder="0" allowfullscreen></iframe>
{'fraction_non_alphanumeric': 0.10685508863270113, 'fraction_numerical': 0.032973844056030745, 'mean_word_length': 4.061480552070264, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 51, 'https://': 1, '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': '1671003', 'n_tokens_mistral': 2737, 'n_tokens_neox': 2457, 'n_words': 968}