We're all running out of time
So let's try to make the best use of it
What task do lots of software developers hate but have to do?
CRUD
The thing is, you still have to do it.
So that's what this talk is about.
Step 1: Context
When
will this talk help you?
Why
do you need this talk?
What
is this mystery tool?
Okay, so?
Case study
Recap
Step 2: Introducing **** to save time and do your job better
It's fast
It's effective
It's flexible
Ready? Let's start!
Step 1: Context
### The situation (When) * Project that works with data in a relational database * Must see & understand the information in real time * You (or stakeholders) are not SQL wizards --- ## What would you use? --- ## What would you use? * CSV? * Excel / Google docs? * SQL directly? * Supabase / Firebase? --- ## What would you use?
CRUD App
* Meet above requirements (Keep data relational, real-time, intuitive to change data) * Communication - Allow nontechnical stakeholders to manipulate the data directly
Why - an illustration
## ??? TT_TT ![Excel suffering](images/dataForGameExcel.png) --- ### Any manual/non database way leads to... * inconsistencies in naming * developer(you!) doing data transformation * *painful* back and forth with stakeholders --- ### And the database way... ```SQL INSERT INTO Articles (title, content, numTimes) VALUES ( 'Unlikely stakeholders can interface with DB directly', 'It is likely you will be asked for every bit of data', 2147483647 ); ``` --- ### And the database way... ```SQL INSERT INTO Articles (title, content, numTimes) VALUES ( 'Unlikely stakeholders can interface with DB directly', 'It is likely you will be asked for every bit of data', 2147483647 ); ``` ## also leads to pain
What: React Admin
React-Admin
Improve
communication
With your (
non-tech
)
stakeholders
As soon as possible
Set up and build fast
### Just 13 lines of code to set up a basic dashboard ```ts import React from 'react'; import { Admin, Resource, ListGuesser } from 'react-admin'; import simpleRestProvider from 'ra-data-simple-rest'; const dataProvider = simpleRestProvider('https://domain.tld/api'); const App = () => (
); export default App; ``` --- ## Guessing your CRUD set up ```ts [3] const App = () => (
); ); ``` --- ## So easy! ![List guesser image](images/ListGuesser.png) --- ## Great, well-developed documentation * Tutorials * Demos
Effective: all the features you need
## Relational Designed to just work for relational DBs. You can use your own logic but it takes care of the basic stuff --- ## Used by _more than 25,000 companies_ * Actively Mantained + Robust * Already mature (few bugs) * Active developers
Flexible for your needs
## Backend agnostic More than 50 adapters for popular API flavors Or build your own. --- ## Open source (or enterprise) 0 fees for open-source version (Perfect for own projects) Enterprise support (if you're at a company or want extra features) --- ## Customisable * Write your own logic * Customise the UI (it's just React)
Case Study: Code Blue
## Code Blue = My Final Year Project > [A serious medical game to help doctors learn how to prioritize cases in a ward]() * Made do with Excel at first * Not an SQL wizard :( Lots of data transfer
The deliverable...
Other concerns?
Development during FYP
Handover after FYP
_Originally there was an iframe here to my FYP dashboard_
If you do work with
Complicated relational data
That needs real-time updating
And external stakeholders must be able to CRUD
BECAUSE
Don’t waste time
It’s flexible & robust
Get on the same page (dashboard) with stakeholders!
Build dashboards
fast
with React-Admin
https://marmelab.com/react-admin/
talk by
kaixin-hc