Giving the shoemaker shoes
I built this site because I'm a software developer. Like many software developers, I do a lot of work on web based applications. Unfortunately, many (but not all) engineers don't have a website of their own. That used to be me.
We build web apps with Single Page Application (SPA) frameworks these days. Then, we use static site generators to turn them into multi-page, static websites. Well...isn't that lovely. While I do think the SPA approach is an improvement over the architectures that preceded it, count me amongst the many skeptics of it's long term viability. Its reign as the de-facto way to build web apps won't last forever. In any case, this being 2020, I've chosen to build this thing using the tools du jour, and that includes the following:
- Emotion and react-spring
What few people realize is that Typescript is actually older than React. It was open sourced in 2012. React surged in popularity in 2015 when large companies like Netflix and AirBnb adopted it. On the contrary, the Typescript hype train didn't depart until recently. But now that the train has left the station, it's accelerating rapidly.
Two things make Typescript different. I'm not sure which is more important.
The second is Typescript's approach to static type checking. Typescript is a gradual type system, which means that some variables and expressions can be statically checked at compile time, while others can be left untyped and checked at runtime. Type checkers should to help engineers, not hinder them. Typescript's checker can be told to "go away" when its user can't wrangle the type system to their liking. That is not the case in most other languages. Python, from version 3.5 and later, supports a similar approach entitled type hints. It has a much lower barrier to entry, since there is no transpilation step. One can choose to write type hints or not. The Python interpreter ignores the extra syntax, and separate tooling can be stood up to do the type checking. Python, however, doesn't run in a browser (yet). So for now, those of us targeting the web have to make other choices.
I could say more about Typescript. The decisions that team has made with regard to soundness and completeness, as well as structural vs. nominal typing, are fascinating. In the end, however, the point is that we all want to maximize productivity and minimize bugs. Typescript helps, and that's all that matters.
For many, React is considered the top framework for front-end development in 2020. Angular and Vue lurk close behind, with Vue gaining momentum quickly. React is my favorite, and the one I have the most experience with. So it was a simple choice to use it for this project.
I've only built small, toy apps in Angular. I have had the opportunity to do substantial development in Vue over the last year. In fact, a post entitled "10 things I like and don't like about Vue" is high on my list of things to write about in the immediate future. Vue 3 might change things a lot. It's written in Typescript, supports JSX, and has a composition API similar to that of React's hooks. So, take the next few points with a grain of salt.
- It's not obvious what variables are in scope, and thus can be referenced in a template.
- When things go wrong, template problems can be very hard to debug. Error messages typically come from the template engine itself, and thus can't be as accurate as messages thrown in user code.
JSX eliminates these issues. For those reasons, I personally find JSX to be a refreshingly unique take on a problem almost as old as the web itself.
React has always left important concerns such as routing and state management outside of the scope of the library. This has significant downsides. Routing and state management, in particular, are non-trivial aspects of any SPA. While "de-facto" solutions such as react-router and redux have emerged from the community, the fact that the React team itself does not maintain these projects causes real headaches in the real world. It's a legitimate reason not to choose React for a project, and in my opinion the library's biggest weakness.
That being said, recent releases have made things much better. The Context API released in React 16.3 does a lot for state management. In my last production React project, it was the only thing we used for state management. That says a lot about the quality of the API design.
The way we managed state in that app, however, would not have been possible if not combined with the hooks API released in 16.8. The hooks API is at minimum a unique approach, if not a groundbreaking one.
All three major libraries began with a class-based pattern whereby users extended from a base Component class provided by the library. Additionally, all three use some sort of component "lifecycle" API to impact the behavior of a component when different things happen. For instance, when it is loaded into the page, when it receives new values, and when it is removed from the page.
Emotion and react-spring
In any case, using CSS "objects" was an educational experiment for this project.
For animations, I'm using react-spring. I am no animation expert. What I've done in the past has always been minimal...just enough to give the app some polish. I find that styling an animation in a component frequently requires more lines of code than the rest of that component's styles combined. Using react-spring makes writing animations feel more natural, while also keeping the animation concern somewhat separate from the plain styling concern. I like that.
I shouldn't say too much more in this blog post, however. If you want to hear more of my opinions on the topic of styling web apps, you can check out my talk from Philly ETE 2020, with the guy who taught me everything I know about the subject.
This is in no way critical of the creators and maintainers of the Gatsby project. From what I can tell it's a great project and a great community. The documentation is fantastic. There is a well-maintained plugin for nearly every adjacent requirement I can think of (such as deploying to AWS S3 and Cloudfront). And there is a long list of well-known companies that are running it in production. Those are the tell-tale signs of a battle-tested technology.
so are they sandals, sneakers, or ski boots?