DEV Community: nzp126

Microservice or Monolith Architecture?

nzp126 — Mon, 12 Apr 2021 17:50:31 +0000

Application Monolith

Server-side applications can come with either a modular hexagonal or layered architecture with four main parts: presentation, business logic, database access, and application integration. The presentation deals with the HTTP requests coming into the server and processing the HTML/JSON to structure it. The others are pretty self-explanatory (business logic is the applications business logic, etc.). When deploying your application, these four parts come together to make a monolith of code. This is called Monolithic Architecture and it's structured like this for a couple of reasons. The most dominant reason and the only reason it is still integrated so frequently is that it is so simple. It's simple in developing, testing, deploying, and scaling. With this simplicity does come some drawbacks, unfortunately. These drawbacks revolve mostly around complexity and run-time as once an application gets too large, the monolith structure starts to struggle. Other struggles include redeploying after every update, conflicting resource requirements, and sometimes even reliability. Overall, this architecture is very convenient and easygoing that tends to struggle once the application gets larger and more complicated. In the modern age and where application building is headed, it will eventually be outdated and underpowered as the future hopefully holds larger and more complicated projects.

Microservice Architecture

Looking at the monolith picture above, you can visualize it as one unified structure using the four different blocks. With microservices, they significantly affect the database and application relationship. This is because microservice architecture splits your application into smaller, embedded services that have their own business logic and adapters to act on their own and create individual actions. Each service is different and acts on its own so instead of sharing one big schema (like monolith), they each have their own connection to a database. Because microservice architecture utilizes multiple databases there is most likely going to be data overlap but in return, it ensures loose coupling. The benefits that come from using this architecture start at tackling complexity, enabling a team to work more cohesively and effectively, reducing the struggle to adopt new technologies, and enables technologies to be updated and scaled independently. As you can tell, microservice architecture handles all the problems that monolith architecture couldn't but this also comes with drawbacks. The drawbacks are a lot more complicated and less straightforward. For instance, the first problem is complexity. Once you add multiple services that all have separate motives, it becomes a lot harder to understand where a problem is coming from, and fixing it can become lost in the order of operations of how the site is populated. Testing a microservice application can also be a lot more complex in the sense that you would need to launch that service and any services that depend on it, in order for it to work or be tested in general. This also means that deploying and running your site will be harder because each service will need its own runtime instance and each instance is going need to be configured, deployed, scaled, and monitored.

Summary

Monolith = easier and lightweight
Monolith != able to handle heavy loads and convenient
Microservice = effective for large projects and accessing information from multiple places
Microservices != simple in any way or able to be implemented with haste.

Sources

Monolith Pic
Information Article
Microservice Pic

Video

Link

Why Your Business Should Be Using Web Components

nzp126 — Tue, 30 Mar 2021 18:02:09 +0000

What is a web component?

Have you ever heard of an HTML element? If not you can find out more about them here. In essence, an HTML element is something that allows developers to structure webpages. This brings us to a web component, which is a bundle of code that allows users to create and customize their own elements to match their individual webpage. Web components have been around since 2011 and in the coding world, we consider that new. Because it is "new", a lot of websites or companies haven't updated their HTML structure with web components yet. The silver lining here is that some have and are starting to normalize them. In this blog, I will be delving deeper into what companies are utilizing web components and why that is helping them out so much.

Why web components?

If you're reading this and you've never developed, worked on, or inspected a site, it can be very complicated and embedded. Web components allow for these complicated sites to be organized and designed in a way that allows for effortless readability and accessibility. Let's look at an example to give you some context. You know how when you go to a site like YouTube, there are a bunch of squares, all with thumbnails, and evenly spaced? That's a web component. "Well, how do you know?" Look here: Normally when you go to a webpage there are standard HTML elements loaded to the page. Here we can see that this HTML element is styled specifically for YouTube. Basically, YouTube branded HTML. This makes it seamless for YouTube developers to go in and change or style something because they have customized element names that style their entire site.

If We're Being Real

"What is the correct approach going forward with web components" is a question that has been floating around the internet for quite some time and no one really knows the answer. In a perfect world, every company that has a high-functioning website would have someone develop a web component that is customized to their respective site. This would take time, money, and resources and because we live in an "old person" world, the likeliness of that happening is around 0%. That's why as of now, it is best to look at the companies that have done it successfully and how that has benefitted them since reformatting. Here is a look at pre-web-component YouTube: Gross right? That's because it was a jumbled mess of code that displayed videos in a fumbled mess. As time passed, Google acquired YouTube, and with that came a lot of funding. With this funding, they didn't just make slides at their HQ, they had someone reformat the website to make it more appealing and easier to work with. Because of this updated site, YouTube became unmatched (it already kind of was but this was the nail in the coffin). It is now the kingpin in the video uploading space and the next closest thing (Vimeo) isn't even in the conversation as of now. This shows just how powerful web components can be, especially if they are implemented correctly and sooner rather than later. Other sites that have started to use web components are Xfinity, Nintendo, and EA-Games, to name a few.

Video! (Sorry I got cutoff in it)

link

Can you guess what's wrong with my Highschool's website?

nzp126 — Tue, 23 Feb 2021 04:23:13 +0000

The Breakdown

In order to fully understand why I had such a bad relationship with my Highschool website, we need to look at the finer things. In this blog post, I will be referencing a website called web.dev. Web.dev is a performance monitoring website that runs any site using a given URL and spits out scores 1-100 based on four major categories; Performance, Accessibility, Best Practices, and SEO. Now I had a personal disdain for my Highschool website (scasd.org/highschool:scahs for short), and now I'm going to show you why using logic instead of emotion.

The Start

The scahs website has improved since my graduation 3 years ago, but it still has the same fundamental problems. The first of those being the amount of render-blocking resources there are. Lighthouse provides us with the exact amount of time is being used and how it compares to other problems. Render-blocking resources are our greatest concern in the worst scored category: Performance.

Render-blocking resources are any files within the CSS or JS code that would end up taking the website longer to load. In my case, the scahs website has 3.81 seconds of loading those files every time I open the webpage. That might not seem like a lot of time but having to go to that website every day for 12 years, added up. The most common way to eliminate render-blocking resources is to use an application that does it automatically. One app I've seen used is WordPress which is a plugin that automatically helps eliminate those slow resources. If you wanted to do it yourself, another solution would be to use async/defer on your body or script tags in order to load everything at the same time rather than waiting for the CSS/JS to load.

Anotha One

The 11/100 Performance score showed me that my frustrations growing up using the scahs site wasn't just nonsense and that I was the true genius among kids who didn't fall for their pretty layout charade. With that in mind, I decided to investigate what else was wrong internally. As you can see from the first picture, my school administration loved big pictures to cascade everything. This brings us to our next problem: image proportion.
Here we can see that every time I loaded to do homework or check if I had a snow day, I was wasting 1 second to load some overly sized pictures. What a waste. I found that a way to resolve this could be using responsive images so that multiple versions of each image are made which allows you to specify which version you would want to use in your HTML/CSS. You could also use Image CDNS; another strategy used to combat image proportion which utilizes API functionality to help cut down on 40-80% of image size so the site runs smoother.

Dagger

To finish, I wanted to branch out to a different category, so what I ended up going with was the second-worst scored category: Best Practices. The largest problem within this category was links to cross-origin destinations are unsafe, and I'm going to explain why that was a problem. In Highschool, homework, and links were non-negotiable. Whatever online site my teacher trusted, I was forced to click. Though this never affected me personally, seeing something as potentially risky as a rouge virus link makes me a bit uneasy. Especially because it could have been avoided. From what I read, the best way to combat this is to add noopener and noreferrer typing to the rel attribute within the link tags. This will prevent a new page from being able to access the window opener property and ensures it runs in a separate process.

Links

Thanks for reading.
If you need help visualizing any of this, check out my YouTube vid: here

Committing to GitHub using GitBash/GitHub Desktop Client

nzp126 — Mon, 22 Feb 2021 23:24:54 +0000

The Basics

Working your way around GitHub can sometimes be a daunting task. There are seemingly infinite ways to upload, update and create files using Git. GitHub's main function comes in the form of repositories: essentially folders that house almost all amounts or types of information. The way these folders are accessed and modified is what you clicked on this blog post for, so let's get into it.

Git Bash

Git Bash is a source control management system (command line), that allows for easy storage management. You can download Git Bash here and once that downloads, I'll walk through the steps I took in order to commit using the command line. To start, I wanted to create the test repository I made using the clone command. To do that, I first got the link to my repository that GitHub offers me under the "code" tab, then copy and pasting that link into Git Bash like so: git clone https://github.com/nzp126/GDDemo.git. Now before I continue, I need to add that I modified a txt file within my repository in order for the Git Bash to display that a change had been made. Now that I have my file that's modified, I want to select that file in order to push it to the master branch on GitHub's server. The command for this is git add yourFileName.txt. This command places the file in the staging area right before implementation. This basically says the file is ready to be committed but is waiting in order to give the user more time to add more files to change if need be. Now that the file's ready we can now commit that file by using the command git commit -m "first version edit of the text file". The -m makes sure there's a comment being added to the commit so another user working on the same repo knows what's going on. All that is left to do is push it to the main server by using git push. You have now made your first commit using the Git Bash!

GitHub Desktop Client

Think that was hard? Good, this will be super easy. In order to make commits using the desktop client, first, download it from here. Next, you will need to sign in to your GitHub account in order to link your repositories. After that comes the easy part, make all the changes in the world! Within your main GitHub folder with your repositories, any changes you make will automatically display on the desktop client. You are also able to create repositories right on the client and make changes to those repositories at any point. Once these steps are complete, on the left side of your screen, it should show the files that changes were made to, and below that, a spot to put the summary of your commit and a description of what is being done to the file. We're cookin' with Crisco now time to push it - to GitHub. Parallel with the "changed file" tab, should be a button that says "Update Origin" which will update the repository on the GitHub server. Congrats you just learned how to commit using the desktop client!

Links

If you get stuck, follow along!
YouTube

VueJS is easy and everyone should learn it

nzp126 — Tue, 09 Feb 2021 20:42:49 +0000

What even is JueVS and why is it easy?

VueJS is a JavaScript framework that allows for the effortless implementation of UIs and front-end applications. Over the past couple of years, it has increasingly become exponentially more popular among developers and companies are starting to take notice. The reason for VueJS's rise in popularity is mainly due to how fast and lightweight it is, along with requiring less of a learning curve like most other JS frameworks.

Where to begin?

The installation will be your first step in becoming a VueJS pro. You can download 2 versions of VueJS from their website Link. The two versions available currently are Development (which comes with error messages and is recommended for newer developers) and Production (implemented at the command line and does not come with any error messages).

What I'll be demonstrating today

Prior to this assignment, I had a draft resume written up in basic HTML and CSS. With this, I'm going to be demonstrating how I implemented a VueJS component in order to simplify down my cluttered code. For example, before VueJS, I had a multitude of list items and variables that were scattered around the entire resume which acted only as text headers. Now my code has variables I can refer back to at any point and a specific area where all my variables will be.

My Code and Video

Explanation
My Code