Introduction
Have you ever heard about graphsourcing? Sure you have. UML system is a system where you make graph that define your system. Then you write code which must meet the requirements of your UML diagram. Then frontend developer also have to write frontend which is compliant with UML diagram and backend. Also graphic designer is the one that should know something about UML technology.
This is too much for me.
Graphsourcing good way
Few months ago we created our own graphsourcing tool named Slothking. Learning to use it may not be an easy thing, but benefits we have from graphsourcing are huge. First of all you need to create graph which defines your system. Then you generate frontend, backend, app and so on type definitions. So everybody knows whats going on
One state to rule them all
With all the benefits of graphsourcing, the one I like most is one state. It is possible to make one state with same types on backend and frontend. With fabulous typescript autocomplete you get a superfast workflow where frontend and backend devs dont have to talk to each other.
Proof of concept
As a proof of concept we rewrote our food delivery service system Foodeli in Aexol. First phase of rewriting backend we finished ( 3 people team) in 8 hours + we had everything in one place.
It's a perfect example because Foodeli ecosystem consist of:
- Administrator panel, Web
- Restaurant individual panels, Web
- Driver app, iOS, Android
- Client app, Web
And all of them have to use the same backend system.
Code
So how graphsourcing looks in practice?
Backend
Generation command:
sloth sync nodets foodeli api.ts Small Part of the generated code
export type DriverType = { _id?: ObjectId name: string phone?: string Address?: ObjectId | AddressType pushToken?: string snsEndpoint?: string snsSubscriptiom?: string foodeliDriver?: boolean User: ObjectId | UserType PESEL?: string deliveryRate?: number } export type GPSType = { _id?: ObjectId geoLocation?: ObjectId | geoLocationType Driver?: ObjectId | DriverType created?: Date } Types for endpoint and middlewares are also provided
Frontend
Generate api and state
sloth sync fetch-api foodeli api.ts Part of frontend state
const endpoints: { name: string; endpoints: { addOrder: (params:{props: { comments?: string; paymentForm: string; totalPrice: number; readyin: number; phone: string; Address: Partial<AddressType> | string; token: string; },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise< { Order: OrderType; }>; myOrders: (params:{props: { period?: string; token: string; },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise< { Orders: OrderType[]; }>; restaurantOrderDetails: (params:{props: { orderId?: string; token: string; },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise< { Order: OrderType; orderSteps: orderStepType[]; }>; updateOrderStatus: (params:{props: { status?: OrderStatus; orderId?: string; token: string; },method?: 'GET'|'POST'|'PATCH'|'DELETE'|'PUT'}) => Promise< { Order: OrderType; }>; } } = foodeli: { name: 'foodeli', endpoints: { addOrder: ({ props, method = 'POST' }) => fn(`${host}foodeli/addOrder`, { props, method, }).then(res => res.json()), myOrders: ({ props, method = 'POST' }) => fn(`${host}foodeli/myOrders`, { props, method, }).then(res => res.json()), restaurantOrderDetails: ({ props, method = 'POST' }) => fn(`${host}foodeli/restaurantOrderDetails`, { props, method, }).then(res => res.json()), updateOrderStatus: ({ props, method = 'POST' }) => fn(`${host}foodeli/updateOrderStatus`, { props, method, }), }, }, } //Small part of the state export type foodeliExtensionState = { Order: OrderType; Orders: OrderType[]; orderSteps: orderStepType[]; Restaurant: RestaurantType; restaurantDeliveryZone: restaurantDeliveryZoneType[]; geoParams: geoParams; deliveryCost: deliveryCost; dishCategoryList: dishCategoryType[]; DishList: DishType[]; dishVariantList: dishVariantType[]; dishAdditionList: dishAdditionType[]; Drivers: DriverType[]; Address: AddressType; deliveryZones: deliveryZoneType[]; Settlements: OrderType[]; }; So you just call generated endpoint with certain params on front end and you have typed response automatically injected to state using state. If everybody were using it , it would be a huge boost to Backend Driven development
Corona SDK Apps
Yes we are writing apps in corona so we decided we should have Api generator for Corona SDK too. Here is a small part of it.
local json = require 'json' local library = {} function library:init(host,errHandler) self.errorHandler = errHandler self.host = host self.requestTab = {} end function library:removeRequest(id) for i=1,#self.requestTab do if self.requestTab[i] == id then table.remove(self.requestTab,i) end end end function library:addRequest(id) table.insert(self.requestTab,id) end function library:cancelRequest(id) for i=1,#self.requestTab do if self.requestTab[i] == id then network.cancel( self.requestTab[i] ) table.remove(self.requestTab,i) end end end function library:cancelAllRequests() for i=1,#self.requestTab do network.cancel( self.requestTab[i] ) end self.requestTab = {} end function library:aws_sns_registerDevice(callback,token,platform,applicationArn, method) local requestId if method == nil then method = "POST" end local function networkListener( event ) self:removeRequest(requestId) if event.isError then if self.errorHandler then self.errorHandler(event) else callback(event) end else if callback then callback(event) end end end local headers = {} headers["Content-Type"]="application/json" local params = {} params.headers = headers local bodyParams = { token=token; platform=platform; applicationArn=applicationArn; } params.body = json.encode(bodyParams) requestId = network.request(self.host.."/".."aws_sns".."/".."registerDevice", method, networkListener, params ) self:addRequest(requestId) end Conclusion
Graphsourcing is so powerful man, all this code has been generated from visual graph!
I presented only micro parts of it as it is a huge one!
Alpha user?
If you want to become an alpha user, mail me for instructions or you can start your self for free, just by using few repos( as this is oopen source technology )
Slothking app
CLI
Boilerplate to start with backend
State manager based on unstated
Top comments (0)