Embrace the MVC!

Jefferson Duong — Fri, 25 Jan 2019 04:24:05 +0000

Do you mean Marvel vs Capcom?!

No! I'm talking about MODEL, VIEW, CONTROLLER! MVC is an important architectural pattern, or just a methodology/guidelines to follow, in order to build an effective full stack application. The key reason for this methodology is to map out all of the entities and how they will interact with each other.

What is Model, View, Controller?

Creating separate sections of code that handle specific goals for the program is important and is called the separation of concerns. A perfect example for an understanding of MVC and our separation of concerns is HTML, CSS, and JavaScript. HTML will handle the content, which is the model, CSS handles the styling, which is the view and JavaScript handles the logic, which is the control. They all handle specific parts of the program, which is a proper separation of concerns.

To further expand on the web development functions of each of the aspects of MVC, the model pertains to the entities of our application. The best way for me to explain what an entity is to give an example. An individual person can be imagined as a model, USUALLY a person will always have a first name, a last name, and a favorite color. We can add all of these together to create a model that would look like this:

{
firstName: 'Peter',
lastName: 'Parker',
favoriteColor: 'red'
}

The model contains one of the most important bits of information pertaining to an application: the information to be handled. The counterpart to this important is the controller, which handles how the information is handled. The view is simply the different way that we may present the data from our models. In the example of a website, our controller handles user requests and calls the appropriate routes and models and sets the proper view. An example of this would be in Express, when a user clicks a form submission button, controller will be called to render the new page.

Advantages

Some of the advantages of employing the MVC architecture are code reusability, simultaneous development, and ease of modification. Code reusability is a highly desired feature of any program or application, there's even an acronym for it! DRY, Don't Repeat Yourself, is a key principle in programming, if a programmer thinks that they might repeat themselves even twice, it is highly recommended that they restructure that block of code so that it may be used repeatedly, as it likely will if the application scales larger. Simultaneous development allows for multiple developers to work on the same project, but different aspects of it to allow for much more expedient results. An example of this would be for a developer to handle the JavaScript of a website while another works on the HTML and CSS, while obviously maintaining communication to prevent syntax and parameter errors.

Adopting the MVC architecture will undoubtedly increase efficiency within any program. It allows for code reusability, scaling, and separation of concerns. Though, no matter how hard the code is, it'll always be an EASY DAY!

Lets Learn Pug!

Jefferson Duong — Mon, 07 Jan 2019 19:35:37 +0000

What's PUG?

First of all, what IS pug? Pug is a template engine to write our HTML documents using a blend of JavaScript and HTML's syntax. This blend allows us to do things that are utilized in both JavaScript and HTML, such as creating and storing variables, creating functions, interpolating variables, creating and filling HTML documents with the exclusion of element tags. Using pug allows for cleaner code, since element tags are excluded, while maintaining the flexibility of JavaScript by allowing us to implement variables and functions within the same file.

The exclusion of element tags allows for much cleaner code. At first, I was a bit confused and spent more time on making sure the indents were in the proper place, but after adjusting I don't think I would go back to traditionally typing in an HTML file. The exclusion of tags also made it easier to debug due to lost closing tags, or any missing characters. Pug also allows for simple element creation and adding IDs or classes. A div with the class name of "hello" would simply be typed as '.hello'.

.hello.anotherClass.andAnotherOne
        h1 I have created a div that has 3 classes, and an h1 element inside of that div!

However, due to the engine not using any tags, or brackets, there is a large emphasis on indents. Instead of placing content within tags, they are simply indented to show which element is the child/parent.

At first, I wasn't quite sure what to do with any kind of JavaScript functionality in an HTML document while I was trying to replicate Medium's website as a classwork assignment. However, after creating it and going back and seeing that there were multiple elements repeated, I found a perfect spot to implement some JavaScript code to reduce lines in my HTML.

In this code segment, the code that you see above the for loop was repeated 5 times to produce 5 articles. Instead of creating 5 blocks of the same code, a for loop was created to create the same article 5 times. Since pug can create variables, an array can be created to store the links, and the loops can create these elements with those URLs!