Get notified about Jessica Kerr

Sign up to a email when Jessica Kerr publishes a new video

good afternoon thank you for coming to
adventures in L we're going to explore
this programming language today we're
going to journey from hello world to
almost the peak of the Elm architecture
and along the way you'll see what makes
this programming language different and
how this programming language has made
me different because there's a lot of
things in the element that have
surprised me and made me question some
of my four ideas of what is good code as
we go through you'll see not only the
programming language but in an
architecture that is inside Alma so even
if you never use Elm itself the
architecture is indicative of a lot of
other architectures that are emerging
these days both in distributed systems
and in the web so I think you'll find
this pretty useful I'm Jesse Tron I work
with stripe and stripe reminds me of Elm
because they're both taking something
really hard and making it so easy that
it's possible where it wasn't before in
the case of M that is development in the
browser and apps that do really
complicated things without paying and
are maintainable in the case of
strengthens payments we make it possible
for people to build websites and start
accepting payments without waiting two
months for approval by a bank which is
really awesome at stripe I do not write
on I write in Ruby Scala go Python bash
and whatever needs done because my
passion as the developer is to take a
system that's useful and make it even
more useful so I'll maintain whatever as
a maintenance developer I really really
really appreciate Elm because it's not
JavaScript and it really focuses on my
feelings as a person both right now
while I'm writing the code and also
later
when I'm reading the code and when I'm
changing the code I love that about it
the first thing of to that out lets me
do that I couldn't do before or wouldn't
be bothered to is perfectly functional
program and by functional programming I
pretty much mean data and data out it
means I have a function that's the green
box
it receives some parameters which are
data it produces some output which is
in the world around it and every time
you give the same data you get the same
results so this is like supremely
testable reproducible predictable that's
like awesome but it turns out to be
really hard to do in most programming
scenarios a hundred percent elm code is
a hundred percent perfectly functional
and what surprises me is that it it does
that in the UI and I'm like what because
this is what UI code looks like to me in
my experience with like Java swing apps
and and how do we reconcile these two
when my friend Richard told me about how
other at a wedding I was like why are
you talking about how can you be but a
part of the function and functional and
UI well conceptually it's kind of like
this your code is a function of
everything that has ever happened that
you care about everything the server has
ever said to you every button the user
has pushed and the output is what you
want the UI to look like right now not
the actual UI but data that says I wish
oh you want a UI to look like that okay
right now it looks like this so I'm
going to do these like super performance
optimized minimal updates and make it
look exactly like you wanted and then it
will say oh it is something else
there's a new everything that matters
and you'll say oh I wish it looks like
this and I will just make it happen
so Elm is not the only programming
language currently that uses this
particular paradigm on the side of
making expressing the user interfaces
data and then the framework underneath
makes that makes a webpage actually look
like that the most popular example is
react to react inside JavaScript works
in a similar fashion it's not the same
code but it's similar ideas where you
output what you want the the dog to look
like is data and react makes it actually
look like that and in fact if you use
the redux library on top of that then
you're using the Elm architecture
because Redux the unsubscribing is
entirely based on Elm so see even if you
don't use own you can still use help
there's other ways to write that same
architecture you can do it in closure
script and it's called ijs both of which
compile to JavaScript this by the way is
discord discord is a character in My
Little Pony and he's my favorite
character because I discord can
manipulate reality and he can make any
of his wins come true he can change
anything about the world but most of
what he does is make chaos so he
- no did you close your script and Scala
jsut really these are these are pretty
much layers on top of JavaScript for elm
you need to know very little JavaScript
very little because conceptually oh is
not trying to be a JavaScript transpiler
the fact that it compiles to JavaScript
now is an implementation detail once
webassembly is a Big L will compile as
web assembly and elm is more than just a
language it's a whole language system so
one of the things that makes it possible
for me to do UI programming totally a
back-end developer and have it 15 years
but I don't have to learn the entire
JavaScript ecosystem
I don't need gulp and grunt and node and
ok well maybe I do a little bit of NPM
umm but I don't need phantom Jas and the
thousand thousand things that we build
our JavaScript apps out of I only need
the element language system and that's
much smaller because it's y'all so
that's one way that Ella makes it
possible for me to do UI when I couldn't
before really lowers that barrier the
other thing is is that it lets me do UI
without hating myself because in elm you
cannot your alpha is impossible to get
undefined is not a function that cannot
happen in elf all errors are compile
errors you see them your users do not
know you can solve bugs you can have
messed up logic it can have told it to
do the right thing but you can't access
a field that doesn't exist you can't try
to call undefined I hate this error it's
such a nightmare this is not what I want
JavaScript I want to go what were you
trying to find
where did it come from and L compile
errors give me that on the functional
side there's another nightmare that Elmo
saves me from and that is learning
hassle so this is Michael Bernstein
describing his experience of years his
is like three years of learning Haskell
well M is a language of compassion and
Evan who writes oh he doesn't want you
to endure years of misery and self-doubt
just to use this language Elm is a
language of the people it's an
enlightened language it wants the
greatest good for the greatest number
and I don't mean the greatest number of
people who are smart smart enough to
have chosen to learn category theory I
mean people who exist in the world today
lot of JavaScript developers a lot of
back-end developers like me and plenty
of people who have not done development
yet Elm is for us so L is in the same
family of languages as Haskell it's
they're both ML languages so it shares
some characteristics Elm has instances
of baaaad like list and maybe but it
does not have the generic von add it has
parameterised types when you have a list
you have a list of something like
generics in Java but it does not have
higher kind in types what even are those
the point is you don't have to care I'm
going to dealt with our kind of types in
Scala but really they're dirt elem
whenever there's a feature in the
language as it considers okay how useful
is this and how much complexity does it
add to learning the language and if it
adds a lot of complexity and you can you
can not use it if you're just willing to
type a little more my fingers work and
I'd rather do a little more work with my
fingers and less work with my brain
because I want to be able to save my
decision power for my actual business
logic and what I want my program
do all right and when I come back and
read that code I want to be able to
figure out what it's doing without
understanding all of those language
features okay
speaking of legends features I'm going
to do live coding but it would be rude
so you know what the symbols are that
I'm typing okay so L syntax in a
nutshell this is a function definition
the function name is substring and it
has two parameters quantity and strength
implementation of it I can call that
question by supplying the parameters so
here I'm defining a value impaler
location that is the result of substring
with three and STL 48 this represents
like a with a machine name like a server
that happens to be in the st. Louis
datacenter is number 48 um notice that
there's no commas here or like
parentheses you just line the parameters
up and they march into the function in a
list however here's a list literal it's
got the square braces around it and
there are comments between list items L
is a very statically typed language it
does all its magic it's magic like not
having any errors by checking types you
don't have to declare the types that
will do type inference but if you want
to declare the types and I almost always
do one for readability too so the
compiler should give you the error in
like the most localized location where I
messed it up you do that like right
before the equals is providing the
definition and the colon can provide the
type and this is a weird looking type so
this is a function type and your
representative functions such that if
you can man int then I will give you
something such that if you give me a
string then it will give you a straight
so the two parameters are here and here
and then the result is the last thing
are all curried that means you can think
of a function at
it has one parameter it just might
happen to return a function that has
another parameter and so on what that
means is you don't have to you never
have to supply all the parameters in
order to qualify so I can define a
function location code as sub string
where the quantity is three but that
other string is not specified so that
the type of location code is a function
of strange string because you've got
this int okay and you're left with a
string to string so that's like the
meaning of this weird function type
declaration syntax all right and then
this has the type of string and the list
the the list here is a type list string
to listen to type by itself it needs a
type parameter you have to tell it what
kind of things in the list and there can
only be one kind of thing in the list
and it can't be any or object because
those aren't things to know you have to
commit to a type that's going to be in
the list and they all have to be that in
this case I've got a list of strings up
we'll see in a few seconds how to put
things of disparate types in a list okay
one other function call syntax thing
there's this other way of calling a
function that you can take the last
parameter that you're going to pass
start with that and use this pipe
operator to send it through the function
so these two syntaxes are equivalent you
can think of it as the pipe operator in
UNIX like if you grab for something and
type that through stored whatever it's
great for chaining functions together
okay given that we have this location
code from string distrain these are the
things of straying well I would like to
be more specific than just string I'd
consider string almost a code smell
especially in Java so I can give it a
type alias and I can give it a name and
I can say location code is equivalent to
string this isn't going to find me
compile errors because they're really
equivalent but I can change strings will
you should code everywhere I mean
location code this is really expressive
I like that and super easy the type
alias is not creating a new type it's
just giving a name to a type and that's
even more useful when we have our
complicated types such as records so
records going on things like JavaScript
objects except you're never going to
accidentally call it the old bits out
there because the compiler won't let you
so it has members and those members each
have specific type as well I think
you've dropped something of type machine
here by using equal science to provide
values for each of the fields and if I
declare this as a machine as the
compiler will say oh a machine has this
and this and if I didn't provide that of
that then I'd get a compile error
immediately and not run time error all
right but maybe I want to make make up
my machine out of like I don't know some
stuff that I calculate ahead of time so
I want to calculate my location in my
tub and then return them in here and
nine the record well in elm there's no
such thing as this statement including
assignment statements there are only
expressions so I can't say send the
message over there and return this you
don't do that
you don't do that but you often do want
to give things names so for a sum in
particular you can use a let expression
or a leg lock and the let's says okay
here comes from names I'm just going to
give names to things and you do that and
then you can use those names in the
single expression that is the body of
the function every function body is a
single expression that returns data that
is how it's perfectly functional and it
took me a while to get my brain to work
that way this advantageous to learn new
way to think and most importantly it's
completely testable okay type aliases do
not create new types they only give
names to existing types however you can
create a new type with the type keyword
and this is creating a union type so see
I'm getting
messages in from somewhere and each one
is going to contain either the location
code or the number of the machine and
I'll put those together later if I want
to put those two disparate types in a
list then I can create a union type
machine Batum represents either of those
things and it has like two kind of
rapper types it can be either the
location with the location code in it or
it can be a number with an integer and
I've created two constructors here that
I can use to wrap strains to rap numbers
and then they can go at the same list
because this list of machine datum is
either of those days and finally we're
going to need to be able to do something
with those items in the list so we have
to be able to get these values out of
the little wrapper types there we do
that with pattern matching so maybe I
have a function I'm making a function
described that can't turn I opened a
machine data up into a strings along or
something and I do that with a case
statement so I say ok we're going to
we're going to swap based on what kind
of thing data is maybe it's a location
which case you'll you'll have a code and
go put that in the string maybe it's a
number you can put that string so each
separate type that is a machine data
gets converted to a string here okay so
that's how you can get things in and out
of your own types that you've defined
time for some hello world ok here I have
an empty s empty directory can you'll
see this in the back ok
good enough I'm going to start by making
an elm module called hello and trying to
make hello world out of this ok start
the module keyword you name it the same
as the file and then you have to say
which functions it exposes in this case
I'm going to expose main ok I will
usually in hello world you do like
ritalin or something well there's no
print Linnell that would be a statement
that would be like an effect we can only
return data so maybe we can just return
hello world's the strength will that
work Oh
notice when I hit save
it like like moved my function down a
little
it loves whitespace and it moves this
down that is being done by a tool called
LM format which is part of that own
language system L format says thou shalt
not argue about whitespace more spacing
or new lines Y spaces importance in
elements it's a significant whitespace
language
you shall not argue about spaces or tabs
taxes syntax error and you also chant
argue about whether to indent with two
or four spaces you're just going to
write out in format and it's not going
to white if you like a stupid linter
it's just going to fix it so I've got
the editor here running L format on save
okay
if we go up here I have installed L on
my computer which is the only
prerequisite for this well an elm format
of the editor plugin are separate but I
want to make which means compile this
module okay here is Elm being all like
functional programming on me when I ask
it to do something it goes out and makes
decisions about what it should do and
then it takes that data and presents it
to me and says okay would you like me to
have these effects that I've decided or
necessary well yes I would then so
pulling a few own okay now I download
stuff and it actually did the
compilation and we have a complaint
because string is not populate but it
doesn't just say bad name type exhume on
nope in L with the compile errors are
very much designed to be your friend I
can do a lot of compiler or driven
development in Elm
it gives me pretty far in this case for
instance it doesn't just say string is
not okay it says you gave me string but
I need this this or this
so I need to output either HTML data
structure or SVG if I'm going to make a
picture or a program which we'll see
later okay I'm going to choose HTML
because I want the simplest thing which
is some static
female that's what my hello world should
elton package install elm lang helm H to
our HTML and you might be like wait I
have to install a package just to like
do anything with the language yes yes
you have to choose are you doing HTML or
SVG because I'm not going to incorporate
the code for both automatically I'm
going to try to keep your JavaScript
file smaller so we pick one yes it's
very modular of of M and we say if l
package is another member of the l
ecosystem and it's important an
important one let me um see if i can
scroll that up for some title to make
sure it's at the top okay LM package
install says go get it and L does it
staying where it's like okay I'm going
to like look around and see what the
situation is tell you what I need to do
and the first thing it needs to do is L
package JSON is the file which was
created by that first L may forgot to
show you that contains all my
dependencies and it wants to add me of
your dependency to declare the one I
just asked it to install great notice
that it wants to add that with the
version range this is important so the L
package manager is the friend of the
main and the enemy of the library author
who just wants to publish something in
zero dot X because it won't leak publish
in zero X when you publish a package
shown you are committing to an API and
you will start with 100 which is ironic
by the still so as a package other you
have to commit and when you make release
aversion you're committing to an API and
L can be confident that anything higher
than the current version which is 100
because this just dropped two weeks ago
and smaller than the next major version
is going to work with my code by work I
mean compile that's because the own
package manager enforces semantic
versioning if admin in his publish Minh
HTML makes a bug fix or performance
enhancement he didn't release 101 that's
fine but if he adds a new exposed method
then that has to be one one oh it won't
let it not increment the minor version
and if he changes or deletes any exposed
type or function that that is 2.0 or he
can't release it at all so the API is
held study by the Elm package manager
which is aware of the types that new
modules have exposed paying for it oh it
also will like it forces that you have
documentation around all exposed methods
and they like at the top of the file and
a whole bunch of things that you like
all I just wanted to publish this but no
because what matters is not the one
person publishing as much as the
hopefully thousands of people using it
right so a package manager is my friend
and I can do like wages and versions in
this way
it's like I've got this in my own
package and somebody imports my library
and also import another library that
depends on HTML 1 1 3 or higher than
fine those are overlapping ranges elfin
result that were happy if the language
didn't overlap they wouldn't let me
import those two so you can't mess up
your transitive dependencies ok yes
oh you may add that to my pen JSON and
then you may download it and when it
downloads it it also gives to transitive
dependency virtual Dom and I'm going to
have both of those in my well in my own
stuff directory which is where L sticks
all that
don't commit elm stuff do commit I'll
package this is a definition this is
build output right so I'm going to have
rituals on in my own stuff but I'm not
going to be able to call functions in
first Bulldog from my code it won't see
them it'll be like that's not a thing I
I'm going to call virtual dog functions
for my code I have to declare it is my
dependency and put it in my own package
so no sneaky transitive dependency used
in LB I like that it's been very
declarative and specific okay so now we
have the elements UML package we can use
it we can import to HTML and main can
return the simplest one which is HTML
text okay this might actually work I'll
make good compiles and now what we get
is an index study HTML by default field
compiler output index dot HTML cuz
that's the bestest path to webpage open
it hello world
and we can inspect it and see that the
body contains a tiny piece of JavaScript
there's much more on the head that says
elm hello full screen which calls the
with that simple piece of text okay to
illustrate how how this translation
works a little more I'm going to put
that in a div div have a list of
attributes which is empty and a list of
children which is just this and we can
we're sure this is going to work now
compile refresh okay so now says hello
world exclamation point and it also you
can see the div right here so that
there's a very direct translation
between the data structure that your
program is outputting and the HTML that
appears in your page
in fact it's so direct that there is
such a thing as the HTML to L program
wherein you can like just type stuff em
or paste your HTML in here and it
appears in L for you and then you can
copy the elements to it in your code so
if you want to like convert a web page
to Elm you can just start with the
direct translation this also is an
expression of one of my principles that
I've had a question is code generation I
used to think that was dirty but then it
kind of occurred to me that I like
compilers so code generation isn't bad
and in fact an element there's a habit
of generating some code to start with I
do not put code generation in my build
step of us we have a compiler
oh but I do generous the code to start
with and then I'll go tweak it
stuff like serialization and
deserialization to JSON in like hospital
or scala you'd use type classes to make
that release extinct l doesn't have type
classes because those are really
complicated so instead you make the
serialization code really explicit which
can be a pain but hey there's a JSON
JSON or put up there's another one of
these programs that generates the
serialization code for me and then when
I want to change I just change it's no
big deal
so cogeneration not such a bad thing I
didn't think of it I do also do a lot of
cogeneration in Java with IntelliJ in
the IDE can do that we're not there yet
in the Elm IDs button could be okay
right so HTML is a pretty direct
translation I'm going to refactor this a
little
to make up you method that outputs this
and then I'll just call that four main
make sure that compiles if it compiles
it's going to work but it's usually true
at home for my page service now I want
this view function is currently of the
type HTML except in the new version of
album 17 HTML has a type parameter you
have to tell it what kind of thing would
you get back into your program if they
clicked a button or typed in a form
field or stuff like that
so you have to give it a type of some
type of that I or I could just say like
never because that doesn't happen here
and I that'll still work oh and I could
qualify that and say HTML dot HTML but
that's annoying
okay you've got that but this isn't what
I want I want to respond to the world
around me
I want my view function to be based on
the mouse position maybe that's
something that I could get in it's a
mouse position to HTML of yeah it
happens to work if I tell it that if you
push the button you you get this type
back but you don't actually push button
so it doesn't happen point is we get
that Mouse position which is a record
with X&Y in it I could do record
restructuring in the argument list and
then as in say things like x equals to
string x you have to do the conversion
explicitly it is not going to typecast
for you y equal
rolls and then we'll add the y2 string Y
and then this way we will be able to
have a page that in some way reacts to
the world so we should have X's X and y
and then for starters let's just pass
1000 so we can check with it this works
okay come back oh it doesn't error
message oh well okay this is one of our
fine support mouse and mouse is enough
of those things that you don't need in
every LM so it's not going to give it to
you by default I'll package installed on
like Mouse do that yes yes download the
things
thank you Wi-Fi and now we get the
compiler I wanted come here and I wanted
to do this because this is my favorite
compiler type as much actually I did
some point true is my second-favorite
compiler because my first favorite is if
you have circular dependencies you get
ASCII art so that's my number one
favorite compiler but number two is this
one and that's for personal reasons
because Evan cares so much about the
compilers helping you that there's a
whole repository dedicated to tell me
how to make this compiler matter how
good a compiler that you got have been
more helpful to you and in my case I'm
switching between languages so often
that yeah okay so I tried to use plus a
string concatenation but pluses for
length numbers and as you know when I
get this I have to go look up you just
drink a Tunisian and elves so I think
it's like oh I submitted the issue to
the repository and he said this is a
really common error I'm going to add a
special case in the compiler to make the
lives better so down here at the bottom
it says you need to use plus plus
operator not plus to append strings and
help so now I have to save me a trip to
the documentation rather frequently
and I'm happy and I can take plus plus
so it doesn't just tell me that I was
wrong
it says here's what was wrong I think it
might be because it did maybe you should
try this thing over here and then we do
and we can refresh and we get zero zero
because we had a constant okay it is
time to actually respond to the actual
mouse position and for that we need
something other than an HTML we need a
program we need our main to return a
the type of the arguments that you
expect to get from JavaScript when your
program is invoked so in this case I'm
cannon came back I'm just going to use
an empty record and the components of my
program I'm going to express this record
so there's going to be a few function we
know about that and there's going to be
an initial value of that mouse position
which is this and then the interesting
bit is there's going to be an input
source and that comes from the mouse
package it's Mouse moves and that's
going to supply the mouse position and
what I was going to do with this program
is it's going to take certain initial
one pass that to the view to get the
initial picture but then every time it
gets a signal from mouse moves every
time I move the mouse is going to have a
new value in the mouse position and it's
going to pass that into my V function
and produce the new version of the view
magic to update the existing views what
I wanted it to be okay
the usual way of creating the program
I'm getting that that program type is to
call HTML app in this case program with
flats that's the most complicated kind
of program you can make it on okay but I
don't want to start with most
complicated kind of program I kind of
want to build up to it so I kind of
cheated and I made I made a module that
will just let me convert this simplest
program components that I want into a
HTML app program with flats so that's
going to be input a view for one input
and I'm going to bring this file in and
get C we're going to need the program
here and I'm going to bring in my little
pay no attention to the function behind
the curtain
alright let's compile this oh sweet dis
compile okay so now we have a program
that should respond to something it
starts out at zero zero but as soon as I
move the mouse okay
things change okay so now we have
element moves I want to talk about
modularity an element how I do like sub
components and how I do some code
organization in order to do that I need
more than one component on the screen
and also this webpage does not have
nearly enough pictures next is as
interest my assets commit has images all
right now we have three pictures of my
daughter and we will go to MIT okay the
view becomes just the position view so
position is one component in this web
page in real life it would get its own
file for this method but it's small
enough this function but it's small
we're also gonna have a picture view
which is also a mouse position to HTML
and the picture view it only cares about
the exposition or will for now we can
ask it to make an image the image has no
children but it has one attribute HTML
attributes so it know it's a source
attribute and that accepts a string
which is the name of the file and I need
to import HTML oh yes
improv important
Oh No cannot find variable view rights
because I need to read the view function
the top-level view function that
combines these two so there we get the
mouse pointer and we create a div that
puts these two things together we get
the position view that gets to know
about the mouse position
we get the picture view that gets to
know about the mouse position and you
function again piles all right well okay
we have technically picture it's not
very pretty so we clearly need some CSS
what cently approach the CSS okay so why
did all the old compiler outputs index
dot HTML in real life I never wanted to
do that I want my own index dot HTML
please so I'm going to complete yours
and I want to create my own and I'm
going to paste the basics in there
where's my thinkest oranges okay so
here's a basic HTML file which
references the CSS to use element here I
need to add two things the script source
- I'm going to have a compiler put it in
ljs instead of index.html and in then
body all I need is that little script
tag very good script
away and in their open albums ah hello
because that's my module fullscreen
you can do element part of your screen
but here we'll do fullscreen
okay that's it except that I now have to
compile and I'll specify that I want the
output to go to ljs and then it won't
overwrite my index.html which will be
nice a bit I also need that CSS file
check out ok ok it's my work yay ok
who's the mess because the position is
so responding to the mouse you see my
daughter this is Linda better known as
dieter pointing up let's make a picture
respond to the mouse pointer because
that makes it way more fun maybe let's
see what's the middle the middle is
about 200 ok so let's say if X is less
than 200 then I want to use we'll go to
your left and I'm going to put this in
an image file equals sign just I have to
put this in the left log so we can let
the image file equal this ya equals your
left you can never have an if without an
else because in neither cases it has to
return the same type because it's only
data so it always has an else and in
this case we'll have Peter or right now
it's one of the other oh that failed
which mean format field which means it
doesn't compile the compiler will give
1:32 I have an extra done you have a son
at what age oh thank you yeah that would
make a lot more sons
Thanks all right yeah okay
she says boy over there no not put over
there over there
and point over there okay cool so so now
the picture and the position are both
responding to the mass movement there's
some refactoring that I feel the need
for here because um pretend this is
complicated business logic and I really
don't want that in my view that's that's
not the function that my business logic
belongs in I would really rather my view
be like well what direction do we want
to point and if it's left then we'll use
that picture and if it's right then we
use that picture that's what I'd like to
write and I would like to just receive
the direction instead of the X so I
could do that if instead of the mouse
position and I got like a custom type
we'll call it model and we'll make a
type alias for this represents like that
my application state my like business
important application state so the model
it can still have the X and y position
because the position to you will need
that but then it can also have the
direction which is well what is it okay
it's a direction I can make that up the
direction is either left all right
yeah yeah yeah the best hood I'd like to
have for my view function in order to do
that I will have to have something that
converts the mouse pointer the current
value of the mouse position to my model
and in this case we will just say okay
well
got the mouse position and as a message
so we can get its X we can get it twice
and we'll need to come up with some
direction do that let block and here we
will say 2 equals and now we get to say
if X is less than 200 that left else
right so we don't have to know how to
display left and right but we just have
the business concept if she's pointing
to the left or she's pointing to the
right that's great
I've got a couple of details not about
this design method my view it goes from
model to HTML both it to do that and the
last thing is to bring that lovely
decide method into the program flow I
can do that in the program what up here
there's a mechanism for that in my case
I'm just going to say and decide because
I have a function for this particular
set of configuration and that might
actually work so now we're going from
the input which is the mouse moves to
here it no longer has enough information
this is not an initial message it's an
initial State and so we need to provide
a direction I have our up what we'll use
that picture again okay well if up is
going to be a direction then better add
a case here and if I add a case here the
compiler will complain if I don't handle
it down here so we need another one of
tell me why can't I find variable X okay
because I think it's like a message dot
X or something at that point yeah
obviously you can't access something I
don't have all right dieter now what do
okay she starts going up it's or zero
that's the initial state and as soon as
I move the mouse
yeah the decisions are made and dieter
points over here
good job dieter okay so now I have the
decide and we're we're making decisions
separately from the view and I like that
but we're still only responding to the
position that we have are the the most
recent message that we've received the
current mouse position we're not
responding to everything that has ever
happened that I might care about okay
let's say we don't want dieter to just
respond to the mouse movement we want to
like click a button to make her turn
left or right
that will give us another source of
input to make a button
we need this we'll go down to the
picture view and instead of just an
image we'll need a div it has no
attributes it has some children which
include the image but also include a
button the button will have the child of
Texas's left and it needs an onclick
event so when I when I ask it to have an
on click event that on click event it
takes as an argument the message that it
should send back well what I really
wanted to send back is left I would like
to say we converted my return of
direction but the problem is all the
incoming messages that are going to hit
my decide which need to be the same my
decide function need to be the same type
and left and mouse position are two
disparate types so I've got to create a
union type okay how about evidence
left they say point left that would be
cool that would like make sense I make a
comment and we'll go ahead and make the
right button as well and it's going to
save point right that would make sense
and Allen format has added a bunch of
vertical space okay now have two buttons
they want to go left to right I need to
be able to return some custom message
type which can be either direction or
Mouse position so fine I can have points
in a direction or hey the mouse moved
and it went over here mouse position
great so now all my HTML is returning
messages you are returning a message
well you don't try to think what if you
did it would be a message my decide
method no longer takes just a mouse
position it can have either of these
messages and it can decide what to do
based on well it might get just to point
in a direction in which case in rockets
we will not going to know what X is then
I'm not going to know what Y is but at
least I know a direction point and at
this point if we get a mouse move then
we won't know what X's position X and we
don't why is but we don't know what
direction to go how about all it's about
that's up okay one of the can we need to
do is to make sure everything that we
get in is a message I'm going to tell
them send the mouse dot moves move
information through the mouse move
constructor for the message and now we
should get start with a model we get two
different types of messages from buttons
or from the mouse move let's see what
theatre does first we need to import
she not luring us as maybe
yeah
okay so that's more what where's my oh I
totally didn't just do that I've got
Direction equals that I would call the
nope yeah there's buttons but if I click
the button I forget to the mouse
position otherwise I forgets that whoo
bummer um great so what I need is for my
side function to have an additional
argument which is the previous value of
the model and this will be previous such
that direction is that and I can get the
direction out of the previous that will
be so convenient fortunately this is
also baked into the Elm architect well
it's not fortunate just this out it
actually works well previous direction
and this gets to be called
update and this point we're very close
to the natural Elmar architecture except
that we only have one input and we don't
do anything in JavaScript make Chrome
and I need to refresh ok data okay we
can move the mouse we click left hop
remembers the pointer remembers a
position we can click right yay okay the
only other things between here and the
Elm architecture are the theme it would
take the flags as an argument the input
can vary based on the model you can
decide that later and both we can put in
it an update can pass things commands
requests out to JavaScript and the yeah
we wanted to talk about Chris structure
but I don't really have time really all
the components have each of these pieces
and gets organized into files and get
assembled
domain is not penetrate with program
because one thing I noticed is that I
can't have send messages like I would
and then after model but I can't have
called functions from the other modules
and that violates encapsulation but that
has suddenly become okay now because if
I change the gear the compiler will
protect me and will make sure everything
is fine so I make much larger pieces and
I'm safe because of the types and the
immutability and they're not as
impassive ated but it works out also
I've given up on wanting my code to
sound natural to read like English I
don't want it to read like English I
want it to read like code doing Ruby now
not happy with it what I have it the
language I'm very happy with the work is
really fun as a much more for the
structure and explicitness of alan
there's no inheritance there's no magic
at all there's no type classes there is
nothing sneaky happening every function
call goes exactly one place so I really
think we could get a lot more out of our
editors this is my like gut feeling of
the ly ecosystem status at this point
lot of unix including in chicago when
the first l conference is in September
and st. Lewis is a pre-conference too
strange loop call for proposals going
out soon but generally it's a lot of fun
and the architecture has value outside
there's my favorite picture okay this is
Hugh he's a character in Star Trek who
can also bend reality to his whim and I
feel like an elm I get to live in Q's
world I get to live and start with the
next generation where I can like get a
cup of tea out of a thing in the wall
whenever I want you remember what that
thing is called I get to live in the
future where everything is organized and
makes sense and now and then if I really
need a pony I can just reach through
this portal and shake hands with
JavaScript so this is this is what Elm
has done for me it allows me to live
future and make pretty wise I'm justa
trama if you want to learn I'll go here
a guide at online the code for this
presentation is like github stripe is