3. Interactions - kostmits83/m102 GitHub Wiki

3.1) Components of the application

Frontend

All things the browser can read, display and/or run. This means HTML, CSS and JavaScript.

HTML (Hypertext Markup Language) tells the browser “what” content is, eg. “heading”, “paragraph”, “list”, “list item”.

CSS (Cascading Style Sheets) tells the browser how to display elements eg. “the first paragraph has a 20px margin after it”, “all text in the ‘body’ element should be dark grey in colour and use Verdana as its font”.

JavaScript tells the browser how to react to some interactions using a lightweight programming language. A lot of websites don’t actually use much JavaScript but if you click on something and content changes without the page flickering to white before showing the new content, that means JavaScript is used somewhere.

Backend

All things that run on a server ie. “not in the browser” or “on a computer connected to a network (usually the internet) that replies to other computers’ messages” are backend.

For your backend you can use any tool available on your server (which is just a computer that is set up to reply to messages). This means you can use any general purpose programming language, eg. Ruby, PHP, Python, Java, JavaScript/Node, bash. It also means you can use a host of Database Management Systems eg. MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached.

3.2) Interaction between the components

There are two main architectures today that define how your backend and frontend interact:

Server-rendered apps The first is straight up HTTP requests to a server-rendered app. This is a system whereby the browser sends a HTTP request and the server replies with a HTML page.

Between receiving the request and responding, the server usually queries the database and feeds it into a template (ERB, Blade, EJS, Handlebars).

Once the page is loaded in the browser, HTML defines what things are, CSS how they look and JS any special interactions.