Welcome!
We’re going to cover the basic architecture of web applications today. Mostly every web application has 3 parts that people commonly talk about: client, server, and database.
Client
This page you are reading right now is rendered to the screen by your computer. It can be any sort of device capable of connecting to the Internet and making a request, even a smart fridge. We call these devices clients. Your computer handles turning the code sent by the server into a functioning web page. It does this usually through a browser like Google Chrome. Your browser has a rendering engine built into it. It takes the HTML, CSS, and scripts (usually JavaScript) and turns those into an interface that a human can actually interact with. The shorthand name for the output of the browser is the Document Object Model, DOM for shot.
Most about Clients and the DOM in a future post
Server
This is the part that is not your computer. This is someone else’s computer. This is the “cloud.” The server handles requests from a client. The responses are usually either a webpage for the client to render, or data that an application has requested. Things like logging in or submitting a form are requests to a server to do something for the client.
Database
Often, applications will need some place to store data permanently. MySQL and MongoDB are databases that people use for this purpose. This post is saved in a database somewhere. A client goes to a URL, which makes a request to the server for this post. The server retrieves it from a database and gives it back to the client.
In most cases, you don’t want a client talking directly to a database. Why? Because if anyone on the Internet can connect to your database directly, then can get any of your data and do whatever they want with it.
In every diagram, databases are cylinders. That’s because they used to look like this.
That’s cool and all but I want to code
Right, you’re about to become a Javascript developer. One of the perks of writing Javascript is that your browser can be your development environment at the same time. In Chrome, hit CTRL+SHIFT+J on your keyboard to open up your developer console. Firefox is CTRL+SHIFT+K. If you are using Safari or Edge, do yourself a favor and do your coding in Chrome or Firefox.
It’s a tradition in software development to write Hello, World as your first program.
In Javascript, this is written like so
console.log("Hello, World");Paste that into your developer console and hit enter. It should output “Hello, World” just beneath where you typed.
Congratulations! You’ve just written your (maybe) first line of Javascript. Let’s break down what’s happening here a bit.
console is built-in to Javascript. We would call it an object or class.
Using . tells Javascript that we want to access some property of the object.
log is a function on the console object. Functions are pre-written pieces of code that take in some input, and optionally produce some output. Functions in Javascript take their arguments in between a set of parenthesis. If there are multiple arguments, they are separated by a comma. log tells JavaScript to print out whatever is passed in. It’s useful for debugging and getting more information about the state of the program.
In this case, we gave the log function, the argument “Hello, World”. Strings in Javascript must be surrounded by quotes, although you can use single quotes (‘) or double quotes (“)
Putting this all together, we call this a statement. Statements in JavaScript are usually ended by a semicolon for readability. It’s not required by the language itself though.
That’s it for today. Leave a like or a comment to help me tailor this more to your needs, and I’ll see you next time at BowTiedSamson’s Temple of Code.