Tutorial
This tutorial serves as a deeper-dive into Graphiti development, building an Employee Directory application. We purposefully built this to illustrate common - but non-trivial - scenarios present in many applications.
A core concept of Graphiti is Test-First - the most pleasant way to develop Graphiti is by starting with an integration test. But that can add a lot of noise to a tutorial like this. Though we’ll occasionally touch on testing - and the git diffs at the top of each section contain the necessary tests - we won’t test first for the purposes of this tutorial.
Server Side: Rails
Client Side: VueJS (diff-only)
- Step 0: Setup
- Run after
vue create employee-directory-vue
using Vue CLI.
- Run after
- Step 1: Define Models
- Step 2: Data Grid
- Step 3: Relationships
- Step 4: Filtering
- Step 5: Sorting
- Step 6: Total Count
- Step 7: Pagination
- Step 8: Basic Form Setup
- Step 9: Dropdown
- Step 10: Nested Form Submission
- Step 11: Validation Errors
- Step 12: Nested Destroy
- Step 13: Vue-Specific Glue Code