Author: Chris Anderson
Date: January 23, 2019
Originally published on the Fauna blog.

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 FaunaDB. This app focuses on real-world usage of FaunaDB, 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.

You can start with the simple instructions in the FaunaDB Netlify template app, and begin writing winning code right away.

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 FaunaDB for your app. In a hackday situation, you can start with the simple instructions in the FaunaDB 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.

Thanks to Shawn Wang for simplifying the FaunaDB / Netlify TodoMVC example app, and upgrading it to use React hooks.

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 FaunaDB 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 FaunaDB’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 FaunaDB 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 FaunaDB. 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 FaunaDB Cloud as the serverless database backend for this JAMStack app. Netlify will auto-provision your FaunaDB environment, so you don’t have to actually do anything to get started. If you want to get access directly to the FaunaDB Cloud, you can also sign up for free.

Other Dev News

In other news, I was able to spend some time diving into the React Native ecosystem recently, and I found that adding FaunaDB 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 FaunaDB consistency.