DEV Community: CleverInsect

Microservice v Monolith Architecture

CleverInsect — Mon, 12 Apr 2021 07:29:11 +0000

What is Microservice Architecture?

Microservice architecture is architecture that structures an application into multiple different services which makes them much more maintainable and deployable. This is very useful when working with large applications because it increases the reliability and speed of deployment. Each service is responsible for a single task and by using APIs those services can work together to complete more complex issues.

Benefits of Microservice Architecture:

• They are easier to scale up due to the fact that these services are all independent and are separated by service boundaries. The whole application does not need to be scaled for one service only that service is affected.
• If one of the services were to fail, then it would not bring down the entire application because each service works independently from one another.
• Because all the services are independent it is much easier to add changes or to experiment without fear of destroying the entire application. Any mistake or error made only affects that one service.
• It is easier to add new feature to Microservice Architecture.
• When deploying or redeploying a service it will not require redeploying the whole application, but just the service.
• Microservices make it easier to choose which programing language and database to use because they do not require a standard to control and maintain everything.

Drawbacks:

• Microservice architecture is a lot more complex and because of all the independent systems, connections must be made between modules and the databases. All of those connections need to be monitored and handled carefully.
• Because of how complex this architecture is in order to manage one you need people who have experience and expertise with Microservices. You also need a lot of people to manage one.
• All the applications that have an independent service have to be deployed individually.
• Since all the services are independent and deploy independently it is difficult to test solutions that use this architecture.

What is Monolithic Architecture?

Unlike Microservice architecture Monolithic is a single large code base and all of the functions are in one place. This means that if there is a change or an update it will affect the entire application and developers make changes to the same system at the same time. Monolithic architecture is known as the standard method because it has been the main method for so long.

Benefits of Monolithic Architecture:

• Much easier to test and debug that Microservice architecture because Monolithic is one unit.
• It is much easier to update and make changes because it is all one application, and one change can affect the whole application.
• With Microservices you need to deploy each service separately, but with Monolithic is only requires one deployment because it is one system.

• Because Monolithic architecture was the standard method for so long most developers will know how to work with them.

Drawbacks:

• They are very difficult to scale up because it requires scaling up the entire application.
• Changing anything in the system is difficult because everything will be affected so all changes need to be carefully planned and managed.
• Applying new technology to a system that uses Monolithic architecture will require having the entire code rewritten.

Conclusion

Many large companies are transferring from Monolithic to Microservice architecture. Companies like Google, Netflix, and Amazon. This is because Microservice offers them more flexibility and scalability than their previous Monolithic architecture. However, both are useful in their own regards and one is not better than the other. Whichever one a company should pick depends upon their current needs and how large the company or project is. Microservice is very complex and requires a large and experienced team in order to manage it but is much more scalable and adaptable. Monolithic architecture however only needs a small group to operate it and works much better with smaller and simpler projects which don’t have the size that Microservice architecture is built for.

Video

What is Docker and Microservice Architecture?

Sources:

*The What, Why, and How of a Microservices Architecture | by Hashmap | HashmapInc | Medium
*What are microservices?
*Microservices vs Monolith: which architecture is the best choice? (n-ix.com)
*What is monolithic architecture? - Definition from WhatIs.com (techtarget.com)

Intro to Web Components

CleverInsect — Mon, 29 Mar 2021 09:15:16 +0000

Introduction

Web Components are a recent phenomenon that are slowly replacing JavaScript Frameworks and may be the future of web development. Web components are a set of web platform API’s that allow developers to create reusable HTML code. That code can then be used with other projects using any framework or web standards.
There are four main technologies that are part of Web Components. Those technologies are:
• Custom Elements- used to define elements that were created by the user.
• Shadow DOM- used to encapsulate HTML elements and can hide code from the rest of the DOM to prevent conflicting code from clashing.
• HTML Templates- used to add HTML elements to the DOM. Also allows you to reuse/clone elements inside the DOM.
• ES Modules- imports data like objects, functions, and variables from JavaScript files.
In this article we will go over how Web Components can improve accessibility, future proof development, and list some of the companies that use them

Accessibility

Accessibility is an important part of web design because if it is done right then anyone will be able to access and use your website despite any physical impairments. One way to improve the accessibility of your site through web components is by creating custom elements. With custom elements you can alter or change things about your site to make it more accessible. They allow you to create features designed to help people who are disabled. However custom elements don't inherently come with accessibility to things like keyboards so those will need to be added in. Another way is by extending or changing native elements through an HTML interface. Native elements are already designed to be completely accessible, but sometimes it is necessary to change things about them to improve the overall accessibility of the website. Custom elements do not come or initially have semantics or things like that so it would sometimes be easier to extend or customize the behavior of pre-existing elements.

Future Proof

Future proof means that the technology or software will not have to be drastically updated as new technology comes out and as standards change. Future proofing helps things withstand the passage of time and web components so far seem to be future proofed. This is because web components are not based on a specific front-end framework. JS Frameworks which is what web components could replace require specific frameworks in order to be able to work, but web components can work on any framework old or new. Front end frameworks constantly change, and new ones are always being created making the previous ones obsolete. However, since Web components do not rely upon specific frameworks they will never need to be updated or replaced.

Who Uses Them

Some of the companies that already use web components in their websites.

• EA (Electronic Arts): Some of the web components are circled in red.

• Webcomponents.org

• Brigham Young University

YouTube Video

Intro to Web Components

Sources:

dev.to(Benny Powers)
webcomponents.org
Mozilla.org
Ionos.com
mintsocial.com
medium.com

GitLab vs GitHub

CleverInsect — Mon, 22 Feb 2021 09:25:25 +0000

Git is a version control system that allows developers to keep their code organized by keeping track of previous versions of their code. It also allows other developers to copy the code and make changes to it. Developers can take another developers code and change it and then submit the revised code back to its original creator, this is known as a pull request. The original creator can then decide whether or not to merge that code with their work.

GitHub

One of the ways to use git is through GitHub. GitHub is a repository hosting service and a git repository stores all the different versions of code. This allows users to access previous versions of their code and allow them to compare the code they made and the code that was altered by other developers. With GitHub multiple developers can work on the same code and resolve issues faster. Some of the features of GitHub are it can compare different versions of the code, users can create a private repository but only have a maximum of three developers, and GitHub allows users to point out specific areas of the project and create milestones for where the project should be.

GitLab

GitLab is another git repository hosting service like GitHub, but provides a lot more features and ways for users to track what happens to their code. GitLab allows more than three developers to work on a private repository and it allows users to give and restrict permissions based on a developer's role. GitHub is also effective at tracking issues and developers can easily report any issues they find and can assign someone to correcting it. Developers can also create commit graphs and use reporting tools to monitor all the changes and work that is being done. GitHub does not have a built in deployment platform, but instead a developer would need to add another application for the code to be able to deploy. GitLab, however, does have built in and easy way to deploy code. GitHub and GitLab are very similar and provide the same things, but GitLab provides more than what GitHub has.

Personally I prefer to use GitLab. Even though GitHub was created first GitLab offers more. GitLab is more useful in planning, verifying, configuring, and monitoring.
Image Source: GitHub
Here is a Video were I go into more detail:
YouTube
Sources:
https://git-scm.com/
https://www.geeksforgeeks.org/difference-between-gitlab-and-github/
https://www.geeksforgeeks.org/bitbucket-vs-github-vs-gitlab/?ref=rp
https://about.gitlab.com/devops-tools/github-vs-gitlab/

Auditing a Website

CleverInsect — Mon, 15 Feb 2021 09:12:00 +0000

Auditing a website is a helpful way to find out what areas of your website need improving and how to improve them. For this example I audited YouTube.com and I can see which areas it needs to improve upon. I will only focus on three specific areas that could be improved and will explain some of the solutions to help these areas.
To audit YouTube I used Web.dev which measures the website using four different metrics:
Performance- looks for things that could potentially cause lag
Accessibility- looks for issues that keep users from accessing the webpages contents
Best Practices- audits for things like how HTML and correct image sizing perform
SEO- finds out how discoverable your website is

(Here is an image from Web.dev showing the results from YouTube's audit from Febuary 2021)

Server Response Time (Performance)

YouTube scored the lowest overall in performance and the poor server response time contributed to that. Server Response Time is the amount of time it will take for the first byte of the webpage's content to reach the user's browser. It the response time is too slow then the webpage will take too long to load and upset the users.
Some solutions to fix the Server Response Time is the optimize the server's query database and the application logic. Another solution is to upgrade the servers hardware to increase the CPU and the memory.

Server Images (Best Practices)

According to the audit, YouTube had images that worked well on desktops but the sizing of the images do not translate well over to mobile devices. Some of the images appear larger and take up more space on the screen on mobile devices than they do on a desktop.
There are many ways to solve this including using some of the services that are available like Sharp and ImageMagick that automate the resizing of the image for each device. Another solution is to provide multiple sizes of the image and let the user's browser decide which image to use. It is recommended to use 3-5 images so most devices can see the correct size of the image.

Tap Targets (SEO)

A tap target is used for devices that have touch screens and having an ineffective target will mostly effect mobile devices. A tap target is an area of the webpage that touch screens can interact with and some of the main problems is that the touch areas are too small and are too close together. This can easily cause a user to miss-click and will hinder them while trying to navigate through the website. This discourages users and makes it more difficult to use the website while operating a touch screen device. Search engines rank websites based on how mobile friendly they are, so not being mobile friendly could negatively impact the sites SEO.
However, the solution to this problem is very simple and will only require that the size of the targets is increased and that the there is more space between them.

That is how you audit a website and hopefully you will be able to use this information to find the flaws in your own website and improve them.
YouTube Video:
https://youtu.be/mJSSl8MgjLU
Sources:
https://web.dev/
https://web.dev/learn/

What is VueJS

CleverInsect — Thu, 11 Feb 2021 04:00:09 +0000

JavaScript:

To explain what VueJS is we need to first define what JavaScript is. JavaScript is used with HTML and CSS to create webpages, but unlike HTML which is used to display the information and CSS which controls the page layout, JavaScript is used to control the webpage's overall behavior. JavaScript is a way to make the webpage more interactive for the users. With JavaScript you can also change the contents of HTML and CSS.

VueJS:

VueJS is a progressive JavaScript framework. It is known as progressive because it is highly adoptable and can easily work with pre-existing applications. VueJS can split a webpage into different reusable elements. One of the major qualities of VueJS is that it is reactive. Reactive means that when data is changed or altered VueJS will automatically update the webpage to match the altered data.

My VueJS Component:

In Codepen I made a very simple resume using HTML, CSS, and VueJS. Using VueJS I created expressions to store the information and then had the expressions placed in the HTML code to have them displayed to the resume page.
Here is a picture showing VueJS expressions underlined in blue

In the photo below it shows the expressions being defined in VueJS

In the skills/interests section the expression used represents a list so I needed to use a for loop to have all the elements in the list to be displayed.
Codepen:
https://codepen.io/cleverinsect/pen/zYoBZye
YouTube:
https://youtu.be/DzpgAzONCo0
Helpful Sources of Information:
https://vuejs.org/v2/guide/index.html#What-is-Vue-js
https://www.w3schools.com/js/default.asp

Welcome

CleverInsect — Mon, 25 Jan 2021 06:44:37 +0000

Hi everyone, my name is Donal and I am from New York (the state, not the city). I am a junior at Penn State and I am a pursuing a degree in IST. Unfortunately, I have not been studying IST for very long, I have only been an IST major since my sophomore year (2019-2020). I originally went into IST because I wanted to be in an industry with a lot of jobs and have skills that are highly coveted by companies. However, I actually enjoyed learning about how technology works because to me it seemed like the knowledge and skills, I was learning was actually applicable and useful inside and outside of college.

I enjoyed learning more about technology because I didn’t know a lot about it to begin with. I especially liked learning about technology that I encounter on a daily basis like the internet and knowing how it works. I am still very new to IST, so I have a lot to learn. One of the aspects of IST that I enjoy the most is coding. I have always liked creating things and I enjoy creating things using code. I am an amateur when it comes to writing code, but, based on my own coding experiences, it has given me a lot of appreciation for many of the everyday systems that we use and it impresses me how much time, effort, and thought must have been put into creating those systems.

Some more information about me is that I am an avid reader and have read many books ranging from Dune by Frank Herbert to Frankenstein by Mary Shelley. I am also a massive comic book nerd and have seen all of the Marvel movies and have an ever-increasing comic book collection. However, books and stories are not the main focus of this blog. This blog will be dedicated to discussing many different technologies and how to use them. I am excited to learn more about new technologies and this blog will help me accomplish that.
Below is a link to a YouTube video about me explaining an everyday technology that I originally did not know a lot about: Touch Screens.
Link