It's been a big year for Frontend Armory – with new lessons, code, videos, a new mission and a new price.
G’day there! It’s been about a year since my last status update, and a big year at that. I’ve released a bunch of new lessons and code, a couple new videos, a new direction for the site, and a much lower price. But before talking about any of this, let’s rewind to earlier this year.
React hooks were released.
Hooks promised to completely change the way you’d write React apps. Which at the time, sounded like a whole lot of work. It meant that you’d need to learn new patterns, new ways of thinking, and new libraries. Given this reality, it took some time before I was truly convinced about the merit of hooks — but after using them in the real world for some months, you can consider me convinced. Hooks are pretty great.
At least, hooks are great as a developer. As someone who’d just gone full time on Frontend Armory and spent months writing a course on React with class components, hooks were pretty bad timing for me. They’re a completely different beast to class components, and I needed time to get comfortable with them before I could teach them. This left Frontend Armory in a slightly different position than I expected it would be just one year back — so let’s talk about what has changed.
When I launched Frontend Armory last year, it had just one course: React (without the buzzwords). And then like a week later, I heard the first news about React Hooks. Doh.
The thing about hooks is that they’re not just a different way of writing class components — they’re a completely different way of thinking about state and effects. Basically, I needed to rewrite a large part of the course. So in 2019, that’s what I did.
The updated course is called React Fundamentals. It now:
React fundamentals is a huge improvement on the earlier React (without the buzzwords) course. There’s just a few outstanding issues:
I plan on updating the later lessons in the coming year, but for now you’ll find more details on building practical apps in…
In recent years, it’s become much easier to learn advanced React features — mostly due to the massibe imporvements in the React docs themselves. But at the same time, there are now more concepts and tools to learn, and more ways that the various pieces can fit together.
As a result, while React itself has become easier to learn, it’s also become less clear how to put it to use in real world apps. And that’s where React, Firebase & Bacon comes in.
This work-in-progress course aims to be a step-by-step guide to building a real world app from the ground up. So far, it includes lessons on:
Each of these lesson covers one step in the process towards building this landing page:
In fact, the above landing page is open source, with separate branches for each step — including the ones that aren’t yet covered in the course.
Okay, okay but… why bacon?
Before answering this, I need to stress that this course is currently a work in progress. I’ll be releasing updates on a when-they’re-done basis — but the direction of the course is set in stone. Let me explain: once the course is complete, it’ll teach you to build a real-world app that makes bacon (money). The app you’ll be building is called Vouch, and Pro members already have access to a significant chunk of the source for the finished product.
Vouch is the companion app to React, Firebase & Bacon. It’s an advertising-free social network, and as with the course, it’s a work in progress — but it’s a lot further along than the course content itself. It’s source is exclusively available to Frontend Armory Pro members, including:
I’m often asked the question: why does Frontend Armory use its own Demoboard component? Why not just use CodeSandbox? It’s a great question, and honestly, there are a lot of ways I could answer it. To start with, CodeSandbox didn’t even exist when I started work on the first version of Frontend Armory. But there’s another, more important reason.
CodeSandbox is designed to let you edit real world code in the browser. It’s amazing at what it does, but Demoboard — the editor that runs the fractal and landing page examples above — does something different. It lets you quickly throw together small demos. And moreover, it lets you render a lot of those demos on a single page.
As of a few weeks ago, Demoboard is now open source.
Documentation is still to come, and the API is subject to change — but even in its current state, you can embed Demoboards in your site or docs with a simple
yarn add @frontarm/demoboard. You can see how to do so at demoboard.io — where the open-source demoboard project will be living from here on out.
Demoboard is the engine that drives Frontend Armory, and it’ll be the engine that drives Vouch too. But why Demoboard and Vouch? And why bacon?
Without going into the details, I grew up in a place with a rather low socioeconomic rank. Remote work on the internet was a ladder up for me — and it’s a ladder that I want to help keep open for others. But actually, when I started Frontend Armory, I hadn’t yet realized this. All I knew was that I wanted to teach.
My mission for Frontend Armory is to teach people the skills they need to build apps that charge money.
Each piece of new content this year has been one step towards this mission:
This mission has helped give better direction to Frontend Armory’s content over the past few months — and it’s also resulted in another important change.
Pricing is hard.
On one hand, for a service like Frontend Armory to be sustainable, it needs to cost money — because I need to be able to feed and house my family. On the other hand, if the price is too high for the people that actually need it, then I’m basically just wasting my time. The price needs to be sustainable, but it also needs to be accessible.
When I first launched Frontend Armory, the price was $40/month or $250/year. However, it soon became apparent that this put it out of reach for a lot of people who needed it most. To try and strike a better balance with accessibility, I’ve cut Frontend Armory Pro’s monthly price by more than half.
Frontend Armory Pro is now just $18/month, or $180/year.
In the interest of transparency and learning in public, here’s some data from the first year of Frontend Armory:
Let me share a few other business-related things I’ve learned over the first year, in no particular order:
Initially, my plan was to create content for Frontend Armory full time — and for the better part of a year I managed to do so. However, it turns out I still have a lot to learn about marketing and business. With this in mind, for at least the next half year, I’m aiming to spend only 2–3 days a week on Frontend Armory. I’m treating this as a bit of a time to recharge and try new things without the stress of a limited runway.
If you’ve been following along since last year, you might have noticed a few things conspicuously missing from the new lessons and code.
So far, Frontend Armory’s content has mostly been text and demo based — because in my opinion, these are usually the best mediums for building a deep understanding of a topic. But with this said, video does have its place. In particular, I’ve wanted to create video introductions for course topics, and video solutions for the more involved exercises. In fact, early on in the process of planning the React, Firebase & Bacon course, I did create a couple videos. Here’s what I learned:
In any case, I have learned a lot about video, and plan on having another go once the text for the first few parts of React, Firebase & Bacon is done — and once the construction next door finishes (or I give up waiting and move).
Towards the beginning of the year, I released a new version of my Navi router — with hooks, and a bunch of other neat features. Navi has come a long way, and is used in a number of production apps — including Frontend Armory and a number of apps by other contributors.
Recently though, the React team has been heading in a new direction, which makes me unsure of whether Navi has a future. React itself is gaining more and more responsibility, which makes it less and less certain that external state management solutions like Navi will continue to work well into the future. In particular, I’ve even seen talk of React integrating with bundlers and the server itself. Due to the uncertainty this brings and my limited time, I’ll be pausing work on new features, and continuing only with basic maintenance.
If you’ve read this far in, then thanks for reading! And also, chances are you’re someone who might have noticed that I haven’t been hugely communicative over the past year.
There are a number of reasons for this, but let me cover a few of the big ones.
Over the past few months however, I felt like I’m gaining my feet again. Instead of teaching React itself, I’ve focused on teaching how to build apps that use React. Instead of teaching the latest React patterns and APIs, I’ve been teaching the tools that I use right now in a real app. And while I’m not going to promise you updates at any specific frequency, I will be more communicative over the coming year.
Near the beginning of 2019, I bought a big Lego rocket, and I gave myself a rule: one page of the instruction booklet gets built for each major piece of content that goes online.
Here’s an image I posted just after I got the rocket, on January 23:
And here’s the rocket now — after building 76 pages:
As silly as it sounds, the rocket has been a great motivator for me. Each time I add another brick to the rocket, it means I’ve taken one more meaningful step towards helping people to learn skills that can build them a better life.
If you’ve already become a Frontend Armory Pro member, then you’ve helped build 76 pages of rocket towards that goal. And if not, then now’s the perfect time to join! You’ll not only get immediate access to:
If you join in now, you’ll also be helping to move another 100 pages closer to the goal of creating Frontend Armory, Vouch and Demoboard — and helping people teach themselves a valuable skill in the process.
(Oh yeah, and since it’s late November, I’ve dropped the yearly price from $180 to $150 — it’ll stay at that price until November 31.)
Thanks so much for reading! Can’t wait to see you again at the next update :-)