A trap that novice web developers can fall into is being overwhelmed by the plethora of tools and frameworks out there, thereby leading them to jump from one tool to another rather than diving in deep with any particular one to discover and utilize it to its full prowess.
Having gone back to my original application I realized there were a number of improvements that could be made to make the overall experience better. One such improvement was with regards to the fetching of data and how it was being handled in Pouchdb.
PouchDB has a number of methods that can be called upon to fetch data. There is allDocs to fetch all the docs with the same partition name and there is db.get to fetch an individual document from the database. There are also Mango Queries and Map/Reduce queries to filter through the docs based on different parameters respectively.
According to the official Pouchdb documentation allDocs and db.get are both fairly inexpensive and fast methods whereas in the case of Mango and Map/Reduce queries the developer must first create indexes based on the query parameters which are then mapped by Pouchdb to fetch the relevant documents. This makes the data fetching for these methods relatively slower.
The effect of this was visible in our application whereby sometimes it would take a few seconds before the data could be displayed on the page. Therefore, to counter this problem I decided to shift my dependence from Pouchdb to Javascript. I discovered Javascript higher order functions such as Array.map and Array.filter and realized that if these functions were used in tandem with the allDocs method in PouchDB then I could effectively utilize the fastness of PouchDB and Javascript in one fell swoop. As expected, doing so led to a noticeable improvement in the application with regards to how quickly the data was fetched and displayed.
The major part of the week was, however, spent exploring different libraries to include the functionality of qr code scanning in our application. For this I made a list of different libraries and weighed them against each other using their pros and cons and finally decided to settle on vue-qrcode-reader. This library, from the developer’s point of view, integrates very nicely into vue code as a single file component and, from the user’s point of view, has some nice design customization options builtin along with a loading indicator to represent the camera starting up. It also supports continuous streaming for high fps qrcode decoding.
The qr code will be used to fetch the header and payload for a jwt, the secret of which will be fetched from the database, and together these three will be used to mark the attendance for a given performance. This will eliminate the need for the Attendance taker to manually search through the event, venue and performance name. This small step towards automation will lead to the number of actions being undertaken by the attendance taker to queue a performance to be reduced by half.
0 Comments