35: Elm Forms

We've made a lot of progress over the past weeks and months. It's time to sink our teeth into New Notes form. At it's basic we want to have the text into, attach a file, and a create button. And then more!!!

Elm Forms But first a bit about where we stand. Once we get those pieces in Elm, I’d like to take the oppurtunity to push our app in a bit of different direction. I’ve noticed that on a on daily basis, I don’t really open meow notes, I don’t dog food my own side project. Now originally that wasn’t the point of Meow Notes. It’s purpose, if you’ve stuck with us this long bare with me, was to learn Elm really well by actually refactoring an existing project of a pretty good size. That’s Meow Notes. Now as we continue down this path, it’s served it’s functionality very well. We’ve mocked out a pretty successful side project. Complete with HTTPS, service workers, and a backend built entirely in lambda functions on aws. So, what do I use everyday? Well, twitter. Let’s make a twitter clone out of meow notes. mmmmmm, nah. But what if we turn it into a micro pub application? That could be kinda cool. Then even down the road we could add cross posting to twitter from our micro pub app? That sounds pretty cool. So let’s do that. Let’s piviot MeowNotes into a micro blogging platform! Forms For Real User Input, on input change. I was wondering how this would work. I sorta knew it would go through the update function to change the model, I mean, it has to. Coming from react, adding inputs can go one of two ways. Controlled inputs, or uncontrolled inputs. Uncontrolled is just going to be a basic ref to that dom node, which we can grab the target value of it at the time we need. As opposed to updating the state of that component to reflex the new value of that input as it changes. First thing I did? Go straight to the view and think about adding inputs. UGH. When will I ever learn!?! I need to add the information to my model first! So thinking about the model. We’ve got a note. It’s got an id, content, and createdAt date. So with a new note, we have content, but we don’t yet have an id for it, and we’re not taking into account any attachments. mmmm Yep, welcome to maybe town. We’ll create a new Note record for our new content. And we’ll set those fields that we know we can’t have anything to, like the id and createdAt to Nothing. Picks Micro.Blog Elm Static Resources MicroBlog User Input Docs Uncontrolled components React Extensible recorders with schoped labels Follow

JavaScript to Elm

Jesse Tomchak