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.
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:
- React (GitHub) (most likely with a flavour of Flux (GitHub))
- A frontend framework from Facebook that is taking the web by storm. Probably my personal favourite from what I've seen so far.
- It even let's you build for native devices!
- Angular (v2) (or if you like outdated for some reason AngularJS (v1))
- Also available for native devices
- I was a big fan of AngularJS (v1), and I want to like v2, but I don't think it will be my main choice.
- There are a TON of other frontend frameworks, of varying popularity and support. I won't delve into them much, but there's heaps of info out there
- Ember
- Vue.js
- From reading around the web, there's a decent amount of good stuff talking about Vue. In the end I decided against it since it's not supported by a big backer, and the skills aren't as useful on a resume. That said, for a personal project it could be a great fit!
- https://vuejs.org/guide/comparison.html
- http://blog.evanyou.me/2015/10/25/vuejs-re-introduction/
- http://vuejs.org/2016/04/27/announcing-2.0/
- vue, vue-rx, vue-resource, vue-router, vuex, revuew
- Aurelia
- Riot (v2)
As with most things, every man and his dog has their own opinion, so here are a few comparisons I found useful:
- "Comparison of Angular 2 and React" by Mark Volkmann and Lance Finney
- "Angular 2 vs. React" by Itay Herskovits
- "Angular 2 versus React: There Will Be Blood" by Cory House
- "Vue.js vs React.js" by Richard LaFranchi
- "Why doesn’t MDG just adopt Vue.js and forget about React vs Blaze?"
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.
- Bootstrap (v4)
- Released by Twitter, and arguably one of the most used frontend UI frameworks out there.
- React-Bootstrap (GitHub)
- ng-bootstrap by the angular-ui team (GitHub)
- ng2-bootstrap by valor-software (GitHub)
- Foundation
- While not as well known as the other two mentioned here, those that make use of foundation swear by it.
- React-Foundation (GitHub)
- React-Foundation-Components
- Material Design
- Following a set of design principals from Google, this lays out a slick, consistent look and feel.
- Material Design Lite
- For React (GitHub)
- For Angular (v2) (GitHub)
- For AngularJS (v1) (GitHub)
Can't decide? Try some comparisons:
- "The Rundown: Bootstrap vs. Google MDL vs. Foundation" by treehouse
- "State of affairs: Bootstrap 4 vs Foundation 6.2" by Danny Herran
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)
- This used to be my choice, but looking at the other options available now, I think i'll be moving on.
- As always, there are a bunch of arguments for and against..
- If you're looking for a way out, why not decaffeinate?
- 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.
- Akka-HTTP
- Taking the power of asynchronous, message based actors, and applying them to HTTP. Definite win.
- Bootzooka (GitHub)
- "Bootzooka is a simple application scaffolding project to allow quick start of development for modern, web based applications."
- While not perfect, it's a decent implementation of a starter app, tying together some useful technologies.
- Play Framework
- "Play is a high-productivity Java and Scala web application framework that integrates the components and APIs you need for modern web application development."
- Scalatra
- "Scalatra is a simple, accessible and free web micro-framework. It combines the power of the JVM with the beauty and brevity of Scala, helping you quickly build high-performance web sites and APIs."
- Lift (GitHub)
- "Lift is the most powerful, most secure web framework available today. There are Seven Things that distinguish Lift from other web frameworks."
- http4s (GitHub)
- "A typeful, purely functional, streaming library for HTTP clients and servers in Scala."
- Finatra
- "Fast, testable, Scala services built on TwitterServer and Finagle."
- Hypernova
- "A service for server-side rendering your JavaScript views"
- While not a choice unto itself, this should help speed things up and keep your site nice and search engine friendly.
- There will be a number of opinions spread throughout the net, including:
- You also have all of your other typical options
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.
- Webpack (GitHub)
- "Webpack is a bundler for modules. The main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset."
- "Webpack: When To Use And Why" by Andrew Ray
- https://github.com/webpack/less-loader
- https://github.com/shakacode/bootstrap-loader
- Gulp (GitHub
- Gulp is a streaming javascript task runner that lets you automate tasks.
- Grunt (GitHub)
- Grunt is basically the older, less streaming, less awesome version of Gulp.
While a little different in purpose to the things mentioned above, getting everything nicely tested and deployed is always good:
- Bitbucket Pipelines: "Build, test and deploy from Bitbucket"
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