Introducing the #WebDevSampler challenge

There are a lot of programming languages you can use to code the server for your web app, but regardless of which one you use, there are core concepts you will always need to know how to do. Some of those are things like routing, security, database interactions, serialization to formats like JSON, and HTTP.

With all the different concepts to be thinking about, and all the different tools and frameworks you can choose from, learning web development can be understandably overwhelming to get going with. But one thing that I find helps when learning a new tool, is breaking down what I'm learning into bite-size tasks, especially when they build on each other.

So for trying out a new language's web development stack, see if I like it, and get feedback on implementation patterns, I am trying something called #WebDevSampler as a set of bite-sized excercises for starting web development in a new programming language. The idea of the challenge is:

• #WebDevSampler assumes you know the fundamentals for the language, such as iteration, functions, data types, and compiling/running a program.
  • The ninth exercise assumes are familiar with using an HTTP client like cURL, httpie, or Postman to send a JSON payload to an HTTP endpoint.
  • The final two exercises, the database ones, do assume familiarity with talking to at least one kind of database. But I left it vague which database to use so you can use the one you like best. I am using SQLite in my own example.
• Each exercise is intended to be the relatively simple so the code changes it entails can demonstrate the concept.
• Each exercise builds on each other, so they are intended to be run in order.
• For any exercise, what you use to solve the problem is up to you, which is why what you build in an exercise is intentionally vague. You can use just the standard library in the language, or you can use dependencies like libraries, microframeworks, and even big frameworks (but I personally wouldn't start in a new language with the big Rails-like framework for that language, unless you know you want to be using that framework on the job).
  • In fact, you're encouraged to try tools out in your language and compare them to see which ones you like best, and to learn about which tools are commonly used on the job in your language's web developer community. And you're encouraged to try installing at least one dependency so you can see how package management works in the language.
• Want to do other experimentation with your code that's not on the exercises? Then you should! Going off the beaten path is a great way to learn more stuff, and you do a lot of that in a web development job!

The exercises are:

• (1) Get an HTTP server up and running, serving an endpoint that gives the HTTP response with a message like "hello world!".
  • Concept demonstrated: starting an HTTP server and processing an HTTP request.
• (2) Give that HTTP response as HTML, with Content-Type text/html
  • Concept demonstrated: editing the HTTP response using response headers
• (3) Adding another endpoint/route on your HTTP server, such as an /about.html page
  • Concept demonstrated: serving more than one HTTP endpoint
• (4) Serving an endpoint with an image or webpage in your file system
  • Concept demonstrated: serving content from a file system
• (5) Route to an endpoints using more complex route like /signup/my-name-is/:name, for example if I send a request to /signup/my-name-is/Andy I would get back "You're all signed up for the big convention Andy!"
  • Concept demonstrated: Parameterized routing
• (6) Write and run an automated test for your HTTP parameterized endpoint
  • Concept demonstrated: Automated testing with an HTTP endpoint in one of your language's testing CLI tools.
• (7) Escape HTML tags in your endpoint. For example, /signup/my-name-is/<i>Andy should be sanitized so you DON'T display your name in italics
  • Concept demonstrated: Basic input sanitization
• (8) Serialize an object/struct/class to some JSON and serve it on an endpoint with a Content-Type: application/json
  • Concept demonstrated: JSON serialization, which is done a lot creating backend APIs
• (9) Add a POST HTTP endpoint whose input is of Content-Type application/json, deserialize it to an object/struct/class, and then use some part of the object to produce some part of the HTTP response.
  • Concept demonstrated: JSON deserialization
• (10) Now have that POST endpoint save the content to some database (MongoDB, Postgres, Cassandra, any database you want)
  • Concept demonstrated: Database input
• (11) Now make a GET endpoint that retrieves a piece of data from the database
  • Concept demonstrated: Database retrieval

If you want to see my answers in Go, which I've been coding in professionally for 7 years, you can check them out here.

Where to after the challenge?

If you worked through the examples, congratulations and I hope you learned something about how web development is done in your language!

Since this was a sampler, the exercises were intended to give just a taste of each of the web development concepts they talk about. So if you are newer to web development, a good next stop would be to search the concepts that the exercises cover and keep learning more about them, for example in the input sanitization exercise, as I alluded to in the code comments, in a production app I would be more likely to be generating HTML using a library that has user data sanitization built-in, and also have a more rigorous set of unit tests to cover possible security holes. While in the database examples, I would be building out the rest of the CRUD (Create, Read, Update, Delete) methods to talk to the database.

If you've already done web development in another language, the next stop I would recommend taking is to look at more of the ecosystem of the programming language you did this challenge in. Like frameworks, package management, language idioms, and popular libraries for solving problems in web development.

And regardless of experience level, I recommend checking out your programming language's community, which in particular is great for networking (I got my first job in Go through networking at Boston Go in 2015!), getting familiar with other people's code in the language, and if you're looking to do public speaking in a new programming language, a meetup in that language is a great opportunity.

Finally, I definitely encourage you to share your answers in your language on here, tweeting at me at @AndyHaskell2013, on GitHub, or anywhere else with the hashtag #WebDevSampler