Workshop: An exploration of modern web app development with React.js
A few weeks ago MetaLab sponsored and participated in Startup Slam, a one-day event of interactive technical workshops aimed at university students, organized by Sendwithus. We wanted to showcase some of the technologies that we use daily to build world-class web applications for our clients, with a focus on React. We’re huge fans of React here, and its small surface area would make for a good topic in only 90 minutes of workshop.
Our primary goal was engaging participants to make them excited about modern web application development. Over the course of 3 days/evenings, a few of our engineers built a single-room, browser-based chat application, and then removed some functionality for the participants to re-implement.
Tech stack
We wanted to focus on React but still give them an insight into the modern web development experience with all of the rich tooling we have available. So we set up a project for them which included:
- Webpack and Babel for asset compilation and JSX, ES6/7 compilation
- React component hot module reloading, which reloads our components on save while preserving their state (no more browser refreshes)
- Redux and Redux Devtools for application state management with a great debugger
- ESLint to make sure we’re writing good code (or at least point out the obviously bad code)
For a backend server we landed on Elixir and Phoenix, which are natural fits for a chat application. Elixir targets the Erlang VM, which was built for fault-tolerant concurrency, and Phoenix is an easy path with its built-in channel support. In a recent perf test of their channels, Phoenix hit around 2 million clients connected to a single channel on one machine. Safe to say we didn’t run into any performance problems from the server for our little workshop.
After a short presentation, we guided our participants through 3 exercises that would complete the chat application.
React components, properties, and JSX
The first concepts we introduced were JSX, properties, and the render() method, all fundamental to building React apps. We got participants to replace the static placeholder [title] and [topic] with dynamic properties in our Header component. This was a great place to show the value of propTypes as a component signature — we can see that Header expects a title and topic properties, and we can infer that Header receives them from somewhere.
After wiring, we’ll have a header with a topic and title showing:
Component composition
Our next exercise introduced the concept of component composition and passing properties into components. We built a number of components for displaying the different parts of messages including the avatar, name, time, and message content.
We had the component imports commented out to keep it simple for the participants. We wanted to teach React, not how you can mess up an ES6 import statement (look for our next article, 37 ways this local developer messed up an import statement — you won’t believe number 18!).
To see what props the Avatar, Name, Timestamp, and Content components expect, we told students to open up those files and check their propTypes. Once these components are added in place of [message] with the correct props passed in, our messages should now look something like this:
State, events, and child->parent communication
The third and final exercise introduced the concepts of component state, event handlers, and child->parent communication through functions passed as properties.
Participants had to wire up the chat input so that it actually worked instead of alerting “Implement me!”. This would give them a voice so they could join the conversation online. Let’s take a look at chat/Input:
By inspecting propTypes of our chat/Input component we see that it is passed a messageSend function — hmm, I wonder if we need to use that to send a message?
We can see that the onChange event sets this.state.value to the value of the input element on change. So all we have to do is change onKeyPress to call this.props.sendMessage(this.state.value):
Super, now we’re sending messages. But the input field doesn’t clear after submission. Forcing the user to clear the input after sending every message is bad UX, so we have to fix that by clearing the state after submission:
And we’re done! We can now use our chat application.
Takeaways
The workshop was a success. Out of the 60 participants, we had about 2/3 of them online and chatting by the end. We had an instance of the app on a projector during the workshop, and it was exciting to see people start to pop online and send messages. Many people came up to us afterward to ask more questions about React and Redux.
Our biggest oversight was not considering the platforms of the participants, which were split pretty evenly between OSX, Windows, and Linux. We had many people unable to get a dev environment set up (mostly Windows) and I feel that we failed to provide them a good experience. In the future, we would point these people toward a cloud VM provider like Koding, Cloud9, or Nitrous.
MetaLab believes strongly in fostering technical education and community, and this was a great opportunity to do so. It was also gratifying to share some of the excitement and passion that we have for building web apps.
PS. If you want to work alongside passionate engineers using forward-thinking technologies to solve challenges for some of the world’s biggest brands, we’re hiring.
