I am not a young man, I do not work in a programming environment, I am not a full time developer, I have never sat in a computer science lecture and to be honest in the grand scheme of things I know very little about traditional web development (I actually learnt only last week that all javascript functions have an accesible arguments array....who’d have thought that!). I highlight my own lack of knowledge and experience as an example of what can be achieved when using a framework like Cerebral to build applications. But also as a testament to the support and knowledge shared by it’s contributors and community members.
My journey with Cerebral has been a somewhat serendipitous encounter. During the summer/autumn of 2015 I had been thinking about a number of possible ideas for a final year Forensic Science Degree project. Although uncertain about specifics I did know it would be in some way computer related. In October 2015 the world of fingerprint analysis met Cerebral.
A question posed by one of my research Doctors led me to read a thesis that examined the current state of the fingerprint analysis process. I was really surprised to find that one of it’s recommendations included the “Development of technology based systems and workflows”. Even with the wonders of modern automated fingerprint identification systems EVERY single identification is made and documented by a human being and it is still common practice to use physical images, a magnifying glass and paper. Despite all that we see in films & TV fingerprint identification hasn’t changed much since the 1920’s.
I had up to this point tried to dip my toe into web development/programming on a number of different occasions. The process usually went something like this copy / paste / install / clone / cli / generate boilerplate, spend two days trying to get it to work on a windows machine, try to make sense out of grunt, gulp, bower, npm... Leiningen does what? What is middleware? What is dependency injection?
A week or so after reading the first paper I happened to stumble across one of the initial Cerebral videos explaining state, signals, actions and views and with the help of yodas finger “I knew Programming”. Following a few hours further watching / reading the material released about the project I, for a change, felt really excited about trying once again to develop something, this time using Cerebral. It was late November. I had a working version of cerebralboilerplate 1.0 (cerebral 25.1). My app was running on localhost:3000 with two links that changed colour when I clicked them...Awesome!
The fingerprint examination process has four distinct phases:
-
Analysis – Examiner analyses unknown print and documents findings
-
Comparison – Examiner compares unknown to known prints and documents findings
-
Evaluation – Using all acquired information examiner makes (match / no match) conclusion
-
Verification – Independent examiner verifies result
So that was at least four pages I needed plus some type of home/landing page and a login page. The content and layout of each page would be driven by the requirements and documentation needs of the phase it represented.
I had little to no idea about how to actually structure an app, but from the material released with Cerebral I had components, signals, actions and state as my hooks. Each page would get a component folder and a modules folder. A few copy/pastes later I had six pages that each rendered a title retrieved from state... yes!!! Not only was I a ninja progammer, I could see the app.changeTitle( ) signal actually fire in the debugger, pass its wonderful payload on and then mystically update my model without any signal error. The debugger has been an absolutely invaluable tool to me throughout this project. The ability to visualise the entire data flow and easily spot “where and when” I’ve done something wrong has increased my productivity and understanding tenfold. After a couple of days playing around with signals I could comfortably get, set, shift, pop, push and merge my data. A few more days spent looking through research papers gave me a good idea as to the minimum / maximum levels of documentation required when undertaking a “standard” fingerprint examination.
One thing that I’ve always liked about the Cerebral project is that making sense of complexity has always been at it’s heart. The ability to read through and easily make sense about whats happening in my code was great. It was mentioned on a number of occasions that having explicit names for signals, actions etc, would increase the understanding further. I took this to heart and for me signal/action/state names were commonly over 40 characters long such as:
-
depositionMenuMatrixEffectValueButtonClicked
-
isSubmitComparisonModalMenuVisible
-
changeSubmitComparisonModalMenuVisibleToTrue
-
changeLevelThreeMarkerOrientationAngleCertainty
This approach made it really easy to write and think about signals and the data which they’d pass around. I could write signals and actions in a way that was both explicit and descriptive. This made the whole process of building my first UI relatively simple.
My first UI was built entirely from bootstrap snippets with onChange and onClick functions that fired verbosely named signals. That been said it worked, and usually at the first attempt. It took me about ten days to turn each of the 200 or so possible fields I had found going through the research into working inputs, checkboxes and text fields. It had been just over two weeks since I had powered up my first Cerebral project and to my absolute amazement I actually had the functioning documentation aspect of my project sorted. I had created a a big ass four page form! Don’t get me wrong, it probably wouldn’t have won any awards, but it worked, I understood it completely and it was something I could work on to improve as I learnt more. The fact that my AnalysisPageComponent was about 5000 lines long certainly meant I needed to learn how to refactor.
Virtually every major stumbling block I encountered during the first couple of months of the project was down to one thing, trying to develop on Windows. I spent three days trying to npm install fabricJS/canvas, but gave up when I found out the best available solution was to download and install the 8gb required for Visual Studio and “see” if it worked. I ultimately went for the highly technical option of inserting a script tag into my index.html.
I copied some initial code into my componentDidMount and BOOM!!! I had one red circle rendered on screen. I went with fabricJS for one reason, the website said you could make a drawing app just by setting canvas.isDrawingMode = true. They weren’t wrong and pretty soon I could import an image and I had a nifty little set of canvas drawing tools. I won’t try and take credit for any progamming skills whilst creating these tools. The entire development process consisted of copying/pasting then modifying every useful fabricJS demo or fiddle I could find. It never ceases to amaze me what persistent googling can solve. A little over 6 weeks into my project and I actually had something that looked half decent but more importantly worked. Documentation? Check! Image annotation? Check! Now I needed to tackle cloud storage.
I knew about Firebase following a previous encounter with an angularfire demo and a few hours of youtube videos. It therefore satisfied all of my requirements as an online cloud storage provider. If you are new to programming asynchronous stuff is hard and trying to understand React – Cerebral – Firebase as a beginner is really hard. I tried for a good week to get firebase up and running but had no success. I couldn’t get the slightest thing to work. So I turned to the cerebral community for help. My lack of knowledge has usually put me off asking questions on developer forums as I just end up realising I need to know 5 other new things to solve this 1 new thing. Despite this I posted a question to the chat server. Am I glad I did. After learning about the existence of gists I sent mySignalThatWasWayToLongAndDidWayTooMuchStuff to a community member. A few hours later and I received four beautifully refactored signals, each with a clear and basic explanation as to what was going on. I had used really explicit names for everything and seeing them refactored into something that was actually correct gave that “ah..I see” moment.
I’ve made a point to read every question, query and gists thats been posted on the Cerebral chat server and I’m always amazed at how much free time and effort the community gives over to solving other peoples issues and developing the project. I still dont understand 60% of what’s being talked about but just reading the issues being faced and the solutions offered by other developers has been a great learning tool.
Drop image files → convert to base64 → save to firebase → use dataURL in canvas and save all my documentation. Cloud Storage? Check!
It was the begining of December and I had all the parts of a fully functioning app. Each part was naive and basic, but they all worked and that was my only concern. In theory all I now needed to do to complete my app was reuse the fuctionality I’d manage to build so far.
Things could not have gone any better for my app / project over the last six months. It’s been used to validate postgrad forensic science work, we’ve just agreed a partnership with one of the largest UK police forces to use it for their validation and certification purpose, we’ve also been asked to present to the UK’s forensic science advisory group and I was offered a PhD oppourtunity. So, all being well, in 3 years I will be a Doctor of Forensic Science :-)
The greatest contributor to my current success is the Cerebral project and the community that surrounds it. It has allowed me to build something way beyond what I thought I could achieve, in just a few months. I hope that I can continue to learn as I develop this project, so that I can begin to contribute and give something back.
You can see me demoing one of the first versions of the app here (youtube)