Frameworks

Frameworks today basically make up your whole front-end, so it's important to have an understanding of what they are and how they work. They are in charge of handling all of the user interaction between their computer and the app that they are trying to use. The front end of an app asks many questions during this interaction like: What is this data? Where should it go? How do you want me to do that? Most frameworks today answer these questions through communication between the Model, View, and Controller components. The view is in charge of what is shown to a user using UI/UX - how can I convey the idea to the user? The controller keeps track of any inputs from the user and triggers the correct events to make sure that input is being handled correctly. And finally, the model is the brains of the operation, keeping tabs on all of the data that is included in the application.

This MVC architecture makes up about 80% of frameworks today, making it very worth while to understand if you wish to become a front-end developer. Personally I like to develop an application from the users perspective, so lets start by going more into detail about the view. What a user first sees when opening an app for the first time is very important, 9 times out of 10 if it feels sluggish or confusing within the first 5 min a user will simply find another. It's important to make available actions apparent immediately to a user, like a simple button for example, everyone knows what a button looks like, but what they do is not always obvious, so simply having the cursor change when a user is hovering over it can immediately convey an idea to a user. Next you should ask "how does this affect the user's experience?". Does it make sense to place that button where you put it? You never what someone using the app to feel lost, but you also never want them to feel like they are being blindly guided, give them the freedom to figure it out for themselves. The overall goals of making the view are to make the UI clear and readable, quick to render, and have it be convenient and logical.

The view works hand-in-hand with the Controller, which is in charge of keeping track of all user inputs. It's pretty straight forward, when a user actually creates an input, like clicking a button, the controller is what takes care of that. It is constantly listening for events to happen and preforms the correct actions corresponding to the data. If a user is signing up for example, the controller is listening for the event of the user submitting their credentials. In this case it takes the data from the forms and has a check to see if everything is filled out correctly, if not an alert will be sent to the user specifying what needs to happen. If, in this case, everything seems to be good to go it will send that information to the Model.

The Model is the main component of a front-end framework and is in charge of knowing what all of the data on the app is, where it goes, and when it should be used. Upon the completion of a controller call, the data is sent to the model to be sorted and stored. The model is what does all communication with the server, sending all information to be stored in the database through the server and responding accordingly. This, in turn, changes the view to display what the user expects to see. Take YouTube for example, when you click on a related video you expect to go to that video's page right? What's happening is on the view the user see's that a video is clickable so they click it, the controller see's we clicked that video and grabs the corresponding data to relay to the model, the model then see's that information and finds correct page from the backend and sends that to the view. It's a big cycle that looks like this:

In conclusion, front-end has come a long way, almost all of the work can be done through frameworks like: Angular, React, Vue, and many more. While the syntax of each of these may vary vastly, if your goal is to be a front-end developer, learning the basic ideas behind framework communication is extremely important. Always think from a user's perspective, if it doesn't make sense to them, then it doesn't make any sense to make it.