The big 2019 Frontend Armory update

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.

#New lessons and code

#React Fundamentals

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:

• Introduces Create React App near the beginning of the course.
• Uses JSX for most of the examples.
• Teaches state and effects using hooks.
• Teaches you to build a fancy pancy hooks-based fractal tree that reacts to mouse movements and clicks. Go ahead, try it below!

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import FractalTreeBranch from './FractalTreeBranch'

// The height and width of the entire window
const { innerHeight, innerWidth } = window

const FractalTree = () => {
  let [time, setTime] = useState(() => Date.now())
  let [mousePosition, setMousePosition] = useState({
    x: innerWidth / 2,
    y: innerHeight / 2,
  })
  useEffect(() => {
    let requestId = window.requestAnimationFrame(() => {
      setTime(Date.now())
    })
    return () => {
      window.cancelAnimationFrame(requestId)
    }
  })
  let fromHorizontalCenter = (innerWidth / 2 - mousePosition.x) / innerWidth
  let fromVerticalCenter = (innerHeight / 2 - mousePosition.y) / innerHeight
  let lean = 0.03 * Math.sin(time / 2000) + fromHorizontalCenter / 4
  let sprout =
    0.3 +
    0.05 * Math.sin(time / 1300) +
    fromVerticalCenter / 5 -
    0.2 * Math.abs(0.5 - fromHorizontalCenter / 2)

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        overflow: 'hidden',
      }}
      onMouseMove={event => {
        setMousePosition({
          x: event.clientX,
          y: event.clientY,
        })
      }}>
      <FractalTreeBranch lean={lean} size={150} sprout={sprout} />
    </div>
  )
}

ReactDOM.render(<FractalTree />, document.getElementById('root'))

React fundamentals is a huge improvement on the earlier React (without the buzzwords) course. There’s just a few outstanding issues:

• It only includes one video. I’ve recorded a few other videos this year, but ran into some issues on this front — I’ll go into more detail later in the update.
• Some of the later lessons in React Fundamentals are works in progress in that they’re still based around the older React (without the buzzwords) course.

I plan on updating the later lessons in the coming year, but for now you’ll find more details on building practical apps in…

#React, Firebase & Bacon

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:

• Setting up your Create React App & Firebase project
• Fetching and submitting data
• Working with simple forms
• Styling your app with styled-components, a popular CSS-in-JS library

Each of these lesson covers one step in the process towards building this landing page:

import { createBrowserHistory } from 'history'
import React, { useEffect, useState } from 'react'

import { NarrowCardLayout, StyledHaiku } from './components'
import Landing from './landing'

const history = createBrowserHistory()
const navigate = path => history.push(path)

function getRoute(location) {
  switch (normalizePathname(location.pathname)) {
    case '/':
      return <Landing navigate={navigate} />

    case '/privacy':
      return <Privacy navigate={navigate} />

    case '/thanks':
      return <Thanks navigate={navigate} />

    default:
      return <NotFound navigate={navigate} />
  }
}

export default function App() {
  const [location, setLocation] = useState(history.location)

  useEffect(() => history.listen(setLocation), [])

  return getRoute(location)
}

function NotFound({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        I couldn't find it
        <br />
        The page probably hates me
        <br />
        I'm really depressed
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function Privacy({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        Your privacy is
        <br />
        Very important to us
        <br />I wrote a poem
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function Thanks({ navigate }) {
  return (
    <NarrowCardLayout navigate={navigate}>
      <StyledHaiku>
        Thanks for joining in!
        <br />
        When we're ready to wow you,
        <br />
        You'll get an email.
      </StyledHaiku>
    </NarrowCardLayout>
  )
}

function normalizePathname(pathname) {
  if (pathname === '/' || pathname === '') {
    return '/'
  }

  // Add leading slash
  pathname = pathname[0] !== '/' ? '/' + pathname : pathname

  // Strip trailing slash
  pathname =
    pathname[pathname.length - 1] === '/' ? pathname.slice(0, -1) : pathname

  return pathname
}

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

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:

• Working payments (with Stripe)
• Server rendering (with Create Universal React App)
• Authentication (with Firebase)
• Onboarding flow
• Responsive layout

The main missing feature? Posting. Yep, it’s a social network that doesn’t let you post anything. There’s a reason for this, though: I want Vouch to eventually be a real, useful, open-source app — not just a demo. And to make that happen, Vouch is going to let you post JavaScript demos using the same Demoboard component that the course’s exercises currently use. This means that Demoboard needs to be a reusable component. And as of a few weeks ago, it actually is!

#Demoboard

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.

Demoboard is designed to be lightweight. It loads quickly, and loads even quicker when you have multiple demoboards on a page (as they’ll share the build worker). It’s also server-renderable, speeding up the time to initial content. It also works without a server at all — it can read everything it needs from a JavaScript CDN like UNPKG.

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?

#The mission

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.

But what should I teach? The obvious thing to teach was JavaScript and React. I know JavaScript and React. But there’s been something that’s made me increasingly uncomfortable about teaching web tech just for the sake of it: the advertising economy. I’m not a huge fan of ads. And that’s why I want to teach people to build apps without them.

Each piece of new content this year has been one step towards this mission:

• Demoboard helps teachers make quality material by simplifying the process of embedding exercises
• Vouch will encourage learning in public
• React, Firebase & Bacon is the roadmap to get where students are going

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.

#A more accessible price

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.

Join Frontend Armory Pro Now »

#Business and financials

In the interest of transparency and learning in public, here’s some data from the first year of Frontend Armory:

• Revenue for the first year was roughly USD $20,000 (2,160,000 yen)
• There have been 170 customers in total (and as far as I know, my mum didn’t sign up to pad the numbers!)
• Various hosting and business costs amounted to roughly USD $3,000
• Which all adds up to a huge loss if I value my time at even half of minimum wage

Let me share a few other business-related things I’ve learned over the first year, in no particular order:

• Curating and editing content from others is hard. It takes almost as much time as writing my own content. While I’d still like to publish other authors, I first need to learn to better market my own content.
• Extolling the virtue of my own content is mostly a waste of time. It’s far more valuable to have others vouch for my product than to do so myself.
• Surprisingly, organic traffic from google has increased significantly, even during periods where I haven’t been regularly blogging…
• But organic traffic doesn’t have a great conversion rate to paying customers.
• GitHub stars don’t pay the bills.
• Real-life workshops do pay the bills, but…
• Marketing and sales take a whole lot of time, which can’t be spent on creating content.

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.

#What else didn’t go right

If you’ve been following along since last year, you might have noticed a few things conspicuously missing from the new lessons and code.

#Videos

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:

• Videos take a lot of time to get to the quality I want.
• Unlike text, if the content changes, I can’t easily edit them; I have to start from scratch.
• I can’t take good video with two huge construction sites next door.

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).

#Navi

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.

#Communication

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.

1. The change from class components to hooks was quite hard on me. I don’t want to teach something that I haven’t had time to become confident with, which means I didn’t really have much to say for the first part of the year — I just didn’t have the experience using hooks in real world code to actually teach them.
2. Even after gaining familiarity with hooks, I’ve hesitant to spend much effort teaching many existing patterns, due to the near-certainty that they’ll soon be obsolete. The announcement of Concurrent Mode in October has only reinforced this opinion.
3. As a result, for the first part of the year, I wasn’t able to create much that I personally felt had enough value to broadcast to the world.

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.

#One last silly little thing

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:

• The Vouch source code
• All member-exclusive content
• Early access to new content
• The member’s lounge slack room (where I answer questions a lot more reliably than I do via Twitter or Email)

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.)

So join Frontend Armory Pro now »

Thanks so much for reading! Can’t wait to see you again at the next update :-)