Building a Serverless JAMStack app with Fauna: Part 1

I’ve written a handful of articles about this code and the access control pattern it uses in previous blogs. Moving forward I’ll group articles related to this code example as a series: Building a Serverless JAMStack App with Fauna. This app focuses on real-world usage of Fauna, including database schemas and access control. Access control can eat up a lot of time in the early phases of an app, so by making a template available, you can jump directly into writing code that works with your business objects, instead of spending energy implementing login.

TodoMVC is a classic single page example app that manages todo lists. I’ve extended it with user login, and multiple todo lists, and plan to add list sharing in a future version. This schema can provide the basis for a broad swath of interactive applications, so once you understand the data model, you can use Fauna for your app. In a hackday situation, you can start with the simple instructions in the Fauna Netlify template app, and begin writing winning code right away.

I’ve been collaborating with Netlify engineers to build JAMStack examples and had the opportunity to work with developers at Free Code Camp at Github in San Francisco. This experience reinforced the importance of easy on-ramps and clear starting points. You can catch up with some of the backstories of this code with this video from a FreeCodeCamp event hosted by Netlify or start with the steps in this “running” section here. 

Sharing code with the community opens the door for contributions, and we are lucky to have a major one from Shawn Wang who’s simplified the Fauna TodoMVC example app which you might have seen in a past demo. Most importantly, he also upgraded it to work with the latest React best practices like hooks. A fresh take on this app, with the same database logic underlying the new code, offers a chance for me to do some additional refactoring.

You can see a screencast of his work here:

If you want to learn more, read the excellent React Hooks documentation and Shawn’s hook repo.

I’m picking up from this code, with the goal of creating a reusable app template that demonstrates Fauna’s access control, and makes it super easy to get started coding. I’ll write more about the design goal of an example template app in the next post in this series. While I’m starting in the JAMStack, I expect my schema to be accessed from multiple runtimes including mobile and web. Also, I would like to make the schema more generic and easily reusable, which is mostly a matter of renaming some classes and functions.

To that end, I plan on refactoring the database usage apart from the identity concerns and bringing the schema setup logic into the database module. Once the Fauna code is fully encapsulated, I’ll be able to write tests that exercise the schema management code as well as the business logic. With those tests in place, the app will be in a position to illustrate best practices for full-stack development with Fauna. I’m currently in the middle of making this change, and almost to the point where I can begin writing tests. If you have a test framework recommendation, reach out to me on Twitter.

The data model for an app that manages multiple lists, and allows you to share those lists with other users, is strikingly generic. With a little encapsulation, I hope to be able to provide a hackathon friendly app starting point that can scale to social media success, or enterprise line-of-business complexity, all with today’s best practices. You can watch the progress of development in my fork of the repo here.

Throughout this series, we will be leveraging Fauna Cloud as the serverless database backend for this JAMStack app. Netlify will auto-provision your Fauna environment, so you don’t have to actually do anything to get started. If you want to get access directly to the Fauna Cloud, you can also sign up for free.

In other news, I was able to spend some time diving into the React Native ecosystem recently, and I found that adding Fauna to an app created by the React Native Starter Kit was completely easy. Also, the development environment has come a long way since I last checked in—tools like Expo and Yarn mean it is mature. Writing JavaScript with auto-reload on the phone has become so easy I think I’ll use it for teaching my kids to code.

Also I was recently the guest on the NoSQL Podcast, talking about Fauna consistency.