Separation of Web Roles

fullstack

I'm exploring all the different facets of web development to gain a better understanding of roles.

Content

Skills required: SEO, Marketing, Writing

Purely interested in the raw information being delivered and it's structure.

Frontend

Graphic Design

There's the sketch of what it should look like - think of that as a flat image. It only has design information.

Has no interest in how the design will be achieved in code

Some elements have different states. On / Off. Collapsed / Expanded. What they should look like in different screen sizes (responsive).

Web Design

Skills required: HTML, CSS

Reproduces the graphic design using code (html and css)

User Interaction

Depending on how you create the client interface this could be built in JavaScript (client side)

All programming done at this level is purely focused on visual displaying the current state of data, and collecting user input to send to the back end.

Server Rendered

These are pages that you want indexed. It is separated from backend because it focuses on VIEW

SSR

A quick comment: Google may be able to understand JS, but Twitter, Facebook (and most likely the next big thing) don't. Need to be able to provide HTML (not dom rendered by javascript) to provide opengraph data and content that is indexable.

I have new thoughts on this. If your content needs to be indexable it should be rendered as Static HTML. Web Applications do not need to be rendered as HTML. If you want to add app functionality to static HTML (maybe a fancy search function), that would be Static HTML with a JavaScript component. The fancy search function doesn't need to be indexable, but the search results do.

I feel that systems that are designed to turn JavaScript into HTML (aka SSR) are introducing a complexity. I think this comes from the new fashion of using javascript as a server side programming language.

So. Serve Static HTML. Enhance with Javascript, which is the whole thing behind Jamstack it would seem.

Backend

The business side of your application.

API

Add API endpoints to your models

Systems

The management of the server infrastructure

Database

Message Queues

Websockets