Today is going to be a bit of a technical Vlog I’ve been refactoring things and moving things around so I wanted to discuss the changes I made from a software design and architecture point of view with you guys so you can tell me in the comments how completely wrong I
Was but that’s the whole point so let me try to share my screen with you and show you what I actually did all right so for a bit of context I’ve been working on this email client application and the main thing here is that you can organize your conversations in two
Folders and so far that’s the only thing that I’ve been focusing on within my code base so you can drag things around and organize them over here but the issue was everything apart from that was extremely hardcoded and messy and that results Ed in one mother of all commits
That I made a couple of days ago but I’m not going to go through all of the lines instead I created a couple of diagrams here to make it easier to discuss the changes but first let me try to describe the problems I had with my original
Solution so you can see in my original design the back end was actually handling most of the communication and most of the logic but that meant I had to have a database and even though I do like to believe I know how to secure a database I’m not working full time on
This and I have no desire to deal with any kind of data leaks because after all it’s an email client and it makes it very valuable to hack so I decided to basically nuke the database and get rid of it entirely now my application is based on electron and so while I was
There I actually decided to make a controversial choice and move all of the business logic into the view layer into the renderer process and I want to explain that next but first a quick mention of today’s sponsor ug green and one awesome change I made to my desk
Setup it’s actually a thunderbolt 4 Dock and this one is called revvo do Max by ug green and even though it’s a fairly compact device it actually has 133 different ports so let me walk you through on the back side most importantly you have three Thunderbolt 4
Ports one of them is upstream and two of them are Downstream you also have a display port so when you’re connecting external displays you can connect one up to 8K at 30 frames a second to any of these three ports and if you’re connecting two displays at 4K 60 you can
Choose any two ports from here in addition on the back side you have two USB a ports and an Ethernet Jack finally this is where the power car goes and this dock actually comes with 180 W charger on the front you have your TF
And SD card slot as well as a 3.5 mm Jack you have a 20 W USB C port and two more USB a ports and this whole thing can sit either on the side or vertically because you have the rubberized pads so let me actually show you what it looks
Like on my desk setup all right so on my desk setup I actually have two external displays running at 4K 60 in extended display mode on the Mac and they’re being connected via USBC cables to the back of the dock now on the front of the dock I actually have my headphones
Charging via the 20 W Port I have my SD card plugged in and I have my USB a port receiver for my mouse and then everything is connected to the MacBook via the Thunderbolt 4 cable which is actually included in the box which is really nice and I really like this setup
Because the USBC cables that are running the monitors are allowing them to act as USB hubs which allows me a lot of flexibility when it comes to my connections so if you have a setup similar to mine and you actually want to utilize the most out of your Thunderbolt
4 connections I highly recommend that you check out the link in the description and with that we are back to coding every electron app consists of two things the main process and you also have the renderer and so people traditionally put all of their business Logic on the election main process so in
My case that would have been handling accounts pulling for messages from Gmail managing all of the state and then through the bridge they would pass the data to the renderer who just simply renders views but I decided to actually move all of this over into the renderer
And so let me explain why I actually had to move to another table it’s getting really crowded here but anyway back to the renderer so the thing that I was looking at is actually crossplatform implementation of my app and actually turns out that both Android and iOS actively discouraged doing anything in
The background whatsoever except for a few categories of apps such as like music players or similar things you’re not supposed to run anything on the process that is in the background and so basically my electron main process became really really dumb or if I was trying to impress somebody I would say
Something like stateless but anyhow here’s the new architecture I still have the electron main process but it only has two functions it will pass through any authentication credentials to the browser window and the browser window is the one communicating with the Gmail API now so all of the state and all of your
Private messages are in the browser window and they never leave that process which makes it relatively secure and then the other thing that the electron main process does is simply save and load any file that the browser window thingss needs to be saved so that includes all the messages any
Configuration that the user chooses and that makes 90% of my code base actually portable between platforms and so finally I actually want to do a little code review with you guys and show you some of the most important parts of the code but first i’m going to get going home f
All right let’s do a little bit of code review first I’m going to walk you through the components in the code and then we’re going to look at some diagrams and explain the authentication and what all the components are actually doing all right so in the code we have
The local client which is the electron app and inside the local client we have the main process which is split between the electron app and the local server and the local server is mainly used for authentication and creating the user accounts in the first place and I’m
Going to explain that a little bit later on the diagram and then secondly we have the renderer and so here you can see that the first thing the renderer does is actually subscribe to the different events that we can receive from the electron main process we can receive the
URLs of the servers both the local server and the web server depending on if we are running in production or locally then we have the system configuration which for now is only used for the accent color of the UI and then most importantly we subscribe to any new
Accounts created because the user just logged in but anyhow the most interesting thing here is the way we load accounts and the user configuration and the messages so when we open the load accounts function you can see that we have a hardcoded file name and if I
Open up my data folder you can see that there is a file called accounts and this is the thing that I was explaining before where the browser window is actually dict ating what is getting saved into which file whereas the main process doesn’t really care or even know
What’s in the files and if we actually go to the electrone app itself you can see that handling the read file is simply reading the file and then decrypting it because we’re using the safe storage module from electron to encrypt and decrypt all of the data that
Is getting saved on the local file system because we don’t want other apps or malware to be poking around our files because for instance they actually do contain the user accounts so if you can see if I open here there is nothing to see because it’s encrypted and then same
Goes for save file which is simply writing the file and constructing the file path based on the name and some environment variable and so basically I have three main files I have the accounts I also have the user configuration file and I have the messages file now the messages file
Doesn’t really contain all of the message data it simply contains a list of these message info objects which are kind of like short snip of every message that we really need to display the UI because the UI here these are the messages these are the conversations constructed from these objects they
Don’t really need to have the message body or any attachments or anything like that we just need to know who the message is from and for which account it is so that we can just list them here so let me show you the diagram now all right so here’s the diagram illustrating
A simple flow for adding a new account so let me actually reset the state of my application by simply deleting all of these files and we can see what happens when we refresh the browser window so if I delete all of these files this will practically clear the state because
Again I don’t need to restart the state of my electrone app because it doesn’t really know or care what’s in the files so if I refresh this browser window right now it will actually start from my onboarding page because there was no file to be read for accounts
Configuration and messages so here I will skip through my login process with my Google account because I want to preserve some of my privacy but here you can see once I’m logged in I want to show you what actually happened behind the scenes and how I was able to load my
Account information into the renderer process so let’s take a look at the diagram so here everything starts from the browser window which is the renderer process because it already knows the local server URL because it actually receives it it will take the user to the web server passing in the local server
URL as one of the query programs the web server will take the the query Pam it will save it in local storage and then it will redirect the user to the Google authentication server now after that there is a classic o flow that happens and then this success page will actually
Then load the local server URL that was saved in local storage and will’ll make a cross origin request to our local server passing in the access token then the local server actually I can show you right here in the code the local server once it receives the new account account
On the account endpoint uh let me just find it it will send this new account to the event bus and the electron app is the only subscriber to the event bus and when it receives a new account it will actually invoke the onac account function of the JavaScript bridge and
This is how we actually get the new account into the renderer process so here what happens is I can select how many days and when I do that it will download all of the messages and you can see here that all of the new files for all of the messages have been created
And we also created this one messages file that contains basically the index of everything that I have here but you will notice that there is no configuration file saved anywhere here and this is because I haven’t changed my configuration this is just the default messages list as they came in from Gmail
Now if I actually go ahead and create a folder then you will see that at some point we did create a configuration file because this configuration now contains one folder and anytime I change my configuration by maybe adding a new folder or dragging things around I will actually be saving this file
Periodically and you can see it’s encrypted but this is pretty much the entire architecture of my app and the way I Envision this to work in the future is that all of your messages and accounts will stay locally present on your file system and only the configuration will be synced across all
Of your devices so only the folders and what’s inside of the folders but only passing in IDs of the conversations which is going to be just an encrypted version of the sender email addresses so that’s pretty much all that I have for you today but if you enjoy the video
Make sure to like And subscribe and I’ll see you in the next one
#Discussing #Architecture #App #Day #Life #Software #Engineer
For More Interesting Article Visit : https://mycyberbase.com/
