Tumblr themes with React.js
tl;dr: I re-wrote a tumblr theme in React, and albeit hacky, it's great.
Tumblr themes suck. As someone who has developed websites for fun and profit, I can safeley say there's a lot of good ways to do web out there, and a lot of ugly ones too. Tumblr themes take a spot near the top spot on the latter category.
There's a few reasons this is the case. First, it's all a custom templating language with hacky semantics. The "custom" part of this means there's little tooling to help development; if you want to test a theme, you have to apply it to a blog. This gets annoying becasue there's no public API endpoint to update themes. One has to phisically press the buttons and switch the apps to copy, paste, and save the theme from Sublime, vim or whatever editor one uses, to the web editor because, lets be real, you know your shortcuts and love your plugins too much to use the web editor. On top of this, for better or for worse, it's all on a single page. The dopeness of the theme you're building is phisically limited by the amount of lines you can bare scrolling through before going nuts and flipping your table out of the ground.
It doesn't have to be this way. For as long as the web has been around, people have been working on ways to make front-end easy. Aproaches have come and gone, and we've gotten better at it than your usual search and replace. Which brings me to React.
I like React becasue it enforces good, functional modularity. This conceptually works like a charm for tumblr blogs. You have the overarching class "Post", but several different subclasses that are largely the same, albeit different in certain key aspects. There's a lot of parts that need to be repeated many times, once per post. The idea of a theme itself is already "single page". The current state of tumblr themeing is screaming React any way you put it!
So I built it, and it's not complicated at all. One just needs to build a "blog object", including an array of "post objects", and then render it with a "Blog" react class that instantiates different "Post" classes for each kind of post in the array. Throw in some other classes for header, footer, notes, and you're set.
This is pretty standard React, but how do we build this object? Because the official Tumblr API is rather weak as compared to the templating engine in terms of information available, I just made a theme that renders JSON (as in JavaScript Object Notation the concept, not the standard) instead of html. Straightforward. We hand this object to our react class and we're set.
Writing JSX is nicer than writing HTML (very biased opinion here).
You can split a theme into SEPARATE FILES. You can have a file with your class for audio posts, one with the class for video posts, one for the overall topology of the blog. You name it. You don't need to have files over 500 lines and furthermore, you don't have to worry about indenting like 15 levels in anymore!
You can theoretically test locally. I haven't done this, but if you copy the JSON object which builds the blog, it'd simply be a matter of rendering the blog to that object. It's a pretty big object, so you probably wouldn't want to do write it by hand. This brings me to the next point:
When testing locally, you should be able to test blog components INDIVIDUALLY. Woot woot! Say you're writing a killer text post component for your blog, with fancy controls for changing the font size, revealing images, highlighting and sharing text, etc. You save the json object for text post only, and test this text post component on its own until you're ready to plug it into the blog itself. No more rendering the entire blog just to check if that small fix worked.
You can put very little on the tumblr-templated html theme, and a lot on external files. The theme essentially just creates this JSON object now: this should be very little, very generic, very static code. The heavy-lifting is done by independent javascript classes you can load from wherever: your own server or even github. YES, GITHUB. You can edit locally and publish by doing a GIT PUSH. Unfortunately, github caches the raw file, so the changes are not reflected instantly but rather within a minute or two. In any case, skipping the login-to-tumblr step, and not having to deal with keeping the published theme synchronized through copy-paste is a big plus, and waiting for cache invalidation is nothing new; tumblr caches its html themes too.
You can get started with a new theme quickly, preciseley because the tumblr-templated html is so generic, and your code can potentially be much more modular and well organized.
Of course, this approach has its downsides. When using tumblr's blog-apparence editor, previews don't work since for security reasons Tumblr blocks cross-site requests (I presume this is why). Also, following my approach, the availablity of the blog now depends on the reliablity of two sites instead of one. Github is pretty reliable, but it is still an increase in risk I guess.
On top of this, my implemntaiton is hacky and experimental of course. You shouldn't run anything too important on it. I've tested it with several post types, but I'm sure there's still bugs. Also note, I didn't leverage the full extent of available theme tags. There's a lot.
There's definitley room for improvement, but you can already delve into the code and see for yourself how much better it is than your usual tumblr template. I can't help but imagine how great it would be if this was the standard way to write themes, there's LOTS of potential.
Picture this: Tumblr themes are distributed as npm packages. The library exports a "Blog" class that can render the theme, and a "params" object that describes properties configurable by the user.
Tumblr themes would be distributed over npm, and even served through a npm cdn -the infrastructure is there already. Themes would use semver, and it would be easy to roll-back if somethings is broken, inform developers about issues using github, and prompt users to update if a new version is available; say one that supports new elements just released by tumblr, like the blog ads they mentioned a while back, or security updates.
HOW GREAT WOULD THAT BE. Pretty great. The updates thing might not come for a while, but the React, npm and github thing should be possible today. Want to give it a shot? Check out the source for the theme I react-ified, and delve right in, develop some themes in react! Of course, direct quesitons, comments and concerns to my ask inbox, as a github issue, or in a tumblr-DM. I'll be happy to hear about anything you build!
blakekathryn
vaporwave
discoholicmusic
stormborns
andulkaphoto
titsay
germansingergirl
pixelskylines
origamiaround