Starting a New Web Application (Part 1): An Exploration of Options

Finding myself with some free time (and looking into starting a new project), I thought I might catch myself up on the state of web technologies, and what might be a good stack to work with.

The details collected here are most certainly not a complete layout of the entire landscape, and there will no doubt be leanings toward my personal tastes (reactive, api-driven, etc). You should use this more as a starter into your own deeper research than as a source of ultimate truth. With that out of the way, let's get into it!

Quicklinks

Frontend

The frontend is the pretty, interactive, main part that people will be seeing. You can have the most amazingly streamlined and perfect backend code, but noone's going to notice and love it without a strong frontend to back it up.

Frameworks

The days of raw JavaScript and jQuery selectors is long gone. We're looking for a nice, modern framework to help put together our frontend. Here's a little selection of some of our options:

As with most things, every man and his dog has their own opinion, so here are a few comparisons I found useful:

UI

Even if you like to go oldschool and code your site by hand in notepad/vi, you can't deny the ease/benefits of using a frontend UI framework.

Can't decide? Try some comparisons:

Scripting

Modern web apps live by the functionality they enable in the browser, and to do this, we need a JS-esque language. Your chosen frontend framework may sway your choice (eg. Angular (v2) has a strong preference for TypeScript), but ultimately, it's up to what you/your team feel comfortable with. With so many options out there, it's hard to pick.. And of course, you could always stick to plain JavaScript.. and with the new features coming in ES6 (eg. promises) and beyond, it might be a good choice.

  • Babel
    • A transpiler that lets you play with all the fun features of JavaScript ES6 and beyond, while maintaining compatibility with all of the older browsers.
  • TypeScript (GitHub)
    • "TypeScript is a typed superset of JavaScript that compiles to plain JavaScript"
    • If you're using Angular (v2) and like sticking to convention, this is the one for you.
  • CoffeeScript (or maybe v2)
  • Flow (GitHub)
    • While it's not a language unto itself, it does allow you the benefits of typed JavaScript without having to dive into something like TypeScript.
  • Scala.js
    • A little left field, this transpiles Scala code into JavaScript. While I probably wouldn't see myself using this as a main choice, it could make for some interesting reusability between front and backend.

Backend

My preferences for backend tech stacks lean heavily towards Scala and the Lightbend Reactive Platform these days, but I will make quick mention of some of the other options available.

Tooling

With the crazy mix of technologies and steps involved in modern web app development, it makes a ton of sense to tie it all together with some automation.

While a little different in purpose to the things mentioned above, getting everything nicely tested and deployed is always good:

Conclusions

Hopefully this has given you a decent starting point for figuring out what combination of technologies is going to work best for your next project. If you want to see the direction I've decided to go, make sure you read on in Part 2.

Have I missed something important? Not given love to your favourite stack? Got a cool pointer? Or just want to say hi? Let me know in the comments!

Updates

  • 2017-04-11 Added some more backend web frameworks, updated akka-http link, fixed some formatting