Hey, I got this new web project, but to be honest I haven’t coded much web in a few years and from what I’ve been reading it looks like the landscape changed a lot. You are the most up-to-date web dev around here, right?
-I guess you could say that.
Cool. I need to create a page that displays the latest activity from the users, so I just need to get the data from the REST endpoint and display it in some sort of filterable table, and update it if anything changes in the server. I was thinking maybe using jQuery to fetch and display the data? I know there are newer frameworks out there, but the more I read about them the more confused I get.
-Wasn’t jQuery the reason you quit web dev a few years ago?
Yeah, well I think I was doing it wrong. I couldn’t figure out why my app kept getting into weird states. Maybe you can teach me to organize my jQuery code better so I don’t get myself into so much trouble.
-It happens to the best of us. With jQuery you change the DOM in response to various events, and sometimes the sequence of events is different from what you expect. How you got to a particular state definitely can be confusing.
You aren’t convincing me I should get back into web dev.
-Wait; hear me out. With modern web frameworks you simply write how the state of your data maps to the state of your web page. It’s way less confusing.
OK let me think about that…wouldn’t that mean it redraws the page every time your data changes? I guess that could work. My users are all on desktop so it won’t be a big deal. It sounds like it would be really slow on mobile browsers, though.
-It doesn’t redraw the page every time. Modern frameworks are smart enough to figure out what part of the DOM needs to change and only touch that part.
Interesting. Which one should I use? The big ones are React, Angular and Ember, right?
-It’s popular enough that it’s not going away, but nowhere near as popular as the bigger frameworks. I’ve actually been writing a pretty ambitious web app in Ember lately. But come to think of it, Ember hides certain things I’d like you to explicitly see when you’re getting up to speed, so I’d be happy to show you how you’d implement your app using Mithril.
Great! Can we set up a few hours soon when you can show me how to set up all the libraries, scaffolding and boilerplate code? Which is better these days, webpack or browserify? I have to confess, the build setup is the most intimidating part of modern web development for me.
-We can skip all that for now. Once you get a feel for the main part of modern web dev you can just copy a build setup I made with nothing more than babel and rollup. The build system is really only a small part of developing a modern web app.
Skip all that? But I want to see my web app actually work.
-You will; I’ll show you. Let’s code up your app using Mithril now. You said it was a filterable table, right? Let’s make planets.html a filterable table of planets.
OK, you told me what Mithril is. Another library? What’s Babel?
Oh wait, actually I think I read about that. Isn’t it bad to run a transpiler in your browser?
-Yes. It adds significant latency. But for learning, why not? It will be easy to change later. For now, let’s start writing your planets.jsx file by setting up the state of your app.
-Mostly it’s just static content, but on that one line you have a concise description of what your app does. It takes an array of planets, filters them to just the ones that should be shown, and that filtered array is mapped to HTML table rows.
-Yes, possibly simpler than you think thanks to destructuring assignment.
OK, so I guess vnode.attrs.planet is how you get that planet attribute that was passed in. There’s only one line with an equals sign so that must be…oh wow, destructuring assignment, where have you been all my life?
OK, I see where you’re going with this. Those are filter functions. But I bet the event handlers you have to wrap around them can’t be that concise.
-They can with a little abstraction.
-But you have a meeting to go to and you wanted to see this working. Here, let me toss some data into a separate planets.json
file since you mentioned you needed to fetch data from the server. And now we just need code to fetch the data, put the data where your app can get it, and then mount the top-level component. Voila, it works.
-Sure thing. I love talking about it. Any time.
Thanks to Biagio Azzarelli, Ben Chauvette, Garrick Cheung and Patrik Johnson for their feedback on drafts of this.