Java + React + SASS = ❤
TL;DR: I’m using the following languages, frameworks, and libraries to make my dev cycle fast and (hopefully) future-proof as the project expands: Java8, ES6, React.js, jQuery, Closure Templates, SASS, Dropwizard (Jersey, Jackson, Jetty), Guice, and Gulp.
Wanted to write this up because I’ve been having a number of conversations lately about what I would build a new webapp in.
I recently started a new project, Bold. And if all goes to plan, the product will be a large, complex web application; so I was pretty keen on using a stack that could start small and simple, but grow in complexity without later shooting myself in the foot.
From the start, I had several of my own requirements:
- The front-end should support both server and client-side rendering (which meant the template engine should run on both)
- The web server should be highly-concurrent (e.g., 300+ QPS)
- Development should be fast (Instant modify code and refresh cycle)
- Javascript and CSS should be well-structured and componentized and minified in production.
Server-side rendering
For server-side, I am intimately familiar running large-scale web services in Java, Go, C++, Node. The choice came down to Java and Go, because I’ve seen first-hand the problems arise from highly-trafficked Node servers, especially when requests are even a little computationally expensive (read: serialization), thus blocking all other requests.
I built my last project on top of Go, which was a lot of fun and scaled very well, but the lack of generics was a difficult pill to swallow on a weekly basis. Also, I figured I would land on using React, which is possible with Go and some open-sourced Javascript engines or some other local bridge voodoo. With the recent hardening of Java’s native Javascript engine (Nashorn) and all of the great features of Java 8, I believed Java would be the best choice.
As for the webapp framework, I chose Dropwizard with support for Guice (using a Guice-HK2 bridge).
To make this work, I built a simple React bridge and view template renderer for server-side rendering. (Source code incoming)
Fast development
For code running in the browser, I experimented a bit more. I needed to figure out three parts: how to structure the client code, how to render CSS, and how to render HTML on the client and the server.
I chose to write my client-side code in ES6. I selected React (with jQuery for support) and SASS for the view layer.
This has been wonderful thanks to the constructs of ES6 and componentization of React and SASS. The only trick was to make development fast, because ES6 and SASS require a build step.
For this, I use gulp with watchify to listen to any file changes, which then rebuilds on the fly with babel and SASS compiler (very quickly) and creates a minified (or not) bundle available for the server to serve locally.
Here’s an example of my gulpfile: https://gist.github.com/guitardave24/7ca20b36559366b13b32
So far, this has worked out quite well!