I built a POC Web App based on Dgraph. I Used Svelte for front-end. And Used Svelte-Apollo for Graphql communication with Dgraph. The middleware is missing here because Dgraph allows direct access to it from font-end using Graphql.
You can find the source at this github repo.
Why POC?
The aim of this POC is to evaluate the challenges that a web developer will face when developing a Web App with Dgraph as a database.
About the POC App
The app is a task tracker. You can add tasks under projects. You can also add subtasks under tasks. The whole thing is shown in the hierarchical structure.
Some features of the App
- It shows count of number of tasks for each project.
- It shows count of number of subtasks for each task.
- Deleting a project will also delete all its tasks and subtasks.
- Deleting a task will also delete all its subtasks.
- Options that can be performed on each element showup when you hover over than element.
App UI
There are two pages called Basic App and Subscribe App. Both have the same user interface but implemented differently.
Basic App
All the requests are HTTP requests. All the page requests and data manipulation requests are HTTP request.
Subscribe App
At the start the app subscribes with Dgraph using WebSockets. When the Dgraph data changes the app will receive updates. The data manipulation requests are done using HTTP requests.
The other difference between Basic App and Subscribe App is that in Basic App after each data manipulation request we need to send HTTP request to get updated data.
Note
Currently the app doesn't allow user to enter data. Whenever user clicks on Add Project/Add Task/Add SubTask; data is inserted with mock data. The image at the beginning of the article shows the mock data. The mock data structure is <Project/Task/SubTask> <count>. The count is unique only for the browser. Everytime you open a new session the count becomes 1. After each addition the count is incremented.
No comments:
Post a Comment