When I first started in the web world I had no idea what a "Front End" or a "Back End" was, I knew that "Full Stack" meant doing both, but that didn't help much. Engineering fields can be very intimidating, and many times we don't know what something is but there is often talk of things being "trivial", said usually with a condescending tone, and it scares us away from asking. Well I don't believe in a dumb question. If you don't know something it's because you were never taught it. There are very few innate behaviors, like breathing. Most of what we know is learned. So let's learn you real good like.
Front End
All bow to the mighty Front End Triad! Front End development is all about the client side of things. The client is usually meant to mean the browser. Browsers are the internet browsers, be that Firefox, Chrome, Opera, Edge, or (unfortunately still in use) Internet Explorer.
The Front End is concerned with how things look and act. This is where we create the interfaces that people will use to interact with our website or web application. As such there are many complex factors Front End developers take into account. User Experience, User Interfaces, Web Design, the list goes on, and they're outright professions on their own. Rather than delve into the sub fields, let's look at the main triad of the front end.
HTML
HTML (hypertext markup language) is the scaffolding of a web page. Think of it like the physical structure of a web page. We have HTML elements that act as "tags" for different items. Want a header? Use one of the header type elements. Paragraph? There is a paragraph element. The site content all goes into an element, and the browser then knows how and where to place it. It doesn't matter what new framework or library you use, from React to Angular to Vue; everything in the end goes into HTML.
CSS
CSS (cascading style sheets) is all about styling the elements. You can change fonts of specific elements, font color, background color, change element shapes, do complex animations. CSS is very powerful, and often times you could make a static website using just HTML and CSS together, though it would be very plain comparing it to modern sites.
JavaScript
JavaScript is a programming language that was created specifically for use in the browser. It has since grown into a behemoth. If you want your site to do anything, you'll need JavaScript. By "do anything" I mean interact with web APIs, a Back End server, update style items based on a user input. Think of HTML and CSS as the base tools for web development, while JavaScript is the skilled artisan controlling the tools to create things.
You can use JavaScript to change elements or styles based on mouse scroll events, mouse click, mouse entering an area, changing the options in a drop down menu based on an option selected, or changing one specific menu based on an item selected, etc. JavaScript allows us to turn our page from a static page into an application that has behaviors.
The biggest item JavaScript is used for is the sending and receiving of data from server Back Ends. We will constantly use web APIs in Front End development, by simply pointing JavaScript methods (like fetch or AJAX requests) at different server URLs. Those URLs respond with data based on the URL given, and we can then work with that data via JavaScript to place the data into HTML elements and style them with CSS to create content that the users are after.
But what is a back end?
Back End
The two basic parts of a Back End would be the HTTP server that handles requests, and the database. The way the internet works, to keep it simple, is that you enter a URL in a browser; that URL corresponds to a server somewhere, and your pressing enter sends a request to that server. The HTTP server receives that request, and responds however it has been set up to program. Most send back their front end package of HTML, CSS, and JavaScript. Some that send back data in various formats, or are set up to receive data, work some magic on it, and then send it back. These servers need a place to store information, which is where a database comes into play. The database is essentially the hard drive of the site or application. It stores data, can add data, remove, and update data. The standard database actions is what CRUD is: Create, Read, Update, Delete.
The best example is a simple social media type site. We type the URL into our browser and go to the site. I'll break this out front to back:
- Back End: HTTP server receives our request for the base URL route and sends back the front end package of HTML/CSS/JS that is the landing page
- Front End: We see a log in form and a sign up form. We fill out the form with a username, email address, and password then click submit.
- Back End: The submit form button shoots off a simple request to the HTTP server that is just another URL tied to a route on our back end server that is a different URL than the standard log in. It takes the data (username, email, password) from the form (because it was programmed to handle those specific fields in specific ways) and checks it against the database to see if your username or email is already in use. If it is, it is programmed to send an error back telling you which item was already in use. If it isn't, it then activates a function written to save the data to the database, and sends a redirect url to the browser (the user).
- Front End: We are redirected by the back end, which automatically pushes us to a new URL where we then see our logged in home page on the site. The front end code JavaScript then talks to the back end API, requesting this specific user's data for their profile, because at this point everyone gets the same profile page, but the only difference is what data goes into it. JavaScript is what gets that data and places it into the correct elements around the page.
- Back End: receives the request from the front end for the specific users data at a different URL route, which fires off a function that takes the data sent by JavaScript and searches the database based on that information, then returns what it found to the front end JavaScript code.
- Front End: receives the response from the back end which is the data found in the database for that user, and then fires off code to populate the fields of the page.
The above leaves quite a lot unexplained, and is broken up a bit more than it usually is in terms of flow for the sake of clarity, but I hope it gives a good overview of what the differences between Front End and Back End are. Which leaves the last item...
Full stack, as you've probably guessed, means that you "do it all". Full Stack is code for "we don't have the money or want to spend the money to hire the correct number of people, so we're going to ask you to do the job of several people without an increase in pay rate". Sometimes it's fine, my internship and first gig were both Full Stack, but that's because my internship was set up to give me some hands on everywhere to figure out what I liked, and my first gig was a tiny team that didn't push me too hard and was more interested in helping me learn. If that's the case for you, then jump on it! My two cents (take it or leave it because who the hell am I anyway?) is to pick a side and focus on that, and do the other thing in your spare time to keep up with it but don't kill yourself. I think you will easily find what you enjoy doing more as they are very different areas.Full Stack
I hope this was helpful, more to come soon!
// Corey
Comments
Post a Comment