I have always been comfortable with HTML, and first applied a CSS rule (inline) waaay back in the Netscape 3.0 days:
Up to about 2015, I'd been happy enough with the basic tools - JQuery for DOM-smashing and AJAX, Underscore/Lodash for collection-manipulation, and bringing in Bootstrap's JS library for a little extra polish. The whole thing based on full HTML being rendered from a traditional multi-tiered server, ideally written in Scala. I got a lot done this way.
I had a couple of brushes with Angular (1.x) along the way and didn't really see the point; the Angular code was always still layered on top of "perfectly-good" HTML from the server. It was certainly better-structured than the usual JQuery mess but the hundreds of extra kilobytes to be downloaded just didn't seem to justify themselves.
Now this year, I've been working with a Real™ Front End project - that is, one that stands alone and consumes JSON from a back-end. This is using Webpack, Babel, ES6, ReactJS and Redux as its principal technologies. After 6 weeks of working on this, here are some of my first thoughts:
- Bad The whole Webpack-Babel-bundling thing feels really rough - so much configuration, so hard to follow
- Good React-Hot-Reloading is super, super-nice. Automatic browser reloads that keep state are truly magic
- Bad You can still completely, silently toast a React app with a misplaced comma ...
- Good ... but ESLint will probably tell you where you messed up
- Good ... but React PropTypes can partly help to ensure arguments are there and (roughly) the right type
- Good Redux is a really neat way of compartmentalising state and state transitions - super-important in front-ends
- Good The React Way of flowing props down through components really helps with code structure