Web Technology Basics Any Startup Founder Should Know

Laptop and phone
Photo via Pixabay

Web technology is evolving at an exponentially fast rate, and if you're a non-technical founder then it's understandable that you're not completely over the inner workings of your startups technology stack.

However, your life and that of your team will be made significantly easier if you know a few of the fundamentals of web technology. So today, we're going to touch on some of the basic components of the web so that you're aware of the building blocks that make web and mobile apps possible. Let's get into it…

The "Client" and the "Server"

The client and the server, or front-end and back-end, are words that software engineers use a lot. It becomes a necessity as the front/back divide is significant in the technology stack of any web or mobile application. These two areas are in a way separate from each other – although at the same time they are also dependent on each other. They are connected to each other via the internet.

The easiest way to explain them is like this. The front-end of a website is all the website code, markup and logic that lives in your web browser. The back-end is all the code and logic that runs on the remote server machine that is hosting your application. The server machine will typically be situated in a data center located somewhere "over the other side of the internet".

Understanding these two key components is key to understanding how web technology works. The concept is the same for mobile apps, although there are some differences - but we will get to that later.

The Client stack – HTML/CSS and JavaScript

Traditionally, web pages have been made up of three technologies; HTML, CSS and JavaScript. Although there are many variations of these three, we're going to keep the scope of this article small so that it's easier to understand.

HTML

HTML is what's called a "markup language". Basically, it is a language that lays out the content of a web page - in a semantically correct way. As Wikipedia states, "Semantic HTML is a way of writing HTML that emphasizes the meaning of the encoded information over its presentation (look)".

So, in the case of a heading in a web page, for the HTML to emphasize the meaning of the heading, you would use the H1 tag. The browser will see this H1 tag when rendering the page and will increase the font size of the information contained in the tag accordingly.

HTML can be used by itself to create a web page. But it won't look great. This is where we need CSS.

CSS

CSS is an acronym for Cascading Style Sheets. It is used to style the HTML markup that has been included in a web page to make it aesthetically pleasing. The more modern version of CSS, CSS3, also offers a way to produce effects and animations.

Traditionally, CSS is included in a webpage either embedded in the HTML itself or included as separate files that are referenced by the HTML. The CSS rules themselves are defined in a hierarchy that can at times become very complex.

HTML, when combined with CSS, allows us to build well-structured and stylised web pages. However, it lacks the level of interactivity that modern web users expect. This is where JavaScript comes in to play.

JavaScript

JavaScript is a versatile scripting language that can be used in many contexts. In the more traditional sense, it can be included in web pages to make that page reactive to the users' actions. JavaScript is arguably a fully-fledged programming language, so it can be very powerful but with that power - difficult to learn.

JavaScript is referenced by a HTML web page in much the same way as CSS is. The most common things that JavaScript is used for is calling logic on specific events that are triggered by the user. These might be simple mouse clicks, the user hovering over a certain area of the page, or the user scrolling past a point in the page etc…

Modern web browsers are also opening up a whole lot of new functionality that allows developers to write JavaScript to tap into native browser and device features such as geolocation, notifications, offline storage and a lot more. These new features are what are what developers are particularly excited about, and what paves the way for the next generation of web applications – Progressive Web Apps.

What happens on the Server

As mentioned earlier the server is in most cases a remote machine, or machines, located in a far away data center. This machine hosts the code files that a developer has created and published. The server will also have one of the various web server programs that can "serve out" the website when web requests from clients (web browsers) come in.

When a user types the domain name of a website or web application into their browser, a web request will be sent across the internet and channeled to the server machine. In the response will be the HTML, and in turn the CSS and JavaScript files discussed earlier. They will then sit in the user's browser and do what they are programmed to do to render the interactive web page for the user to act upon.

So, what actually happens on the server? In a nut shell, each web request will trigger some server-side logic that has been coded by the developer. This logic might perform some action such as fetching some data from a database, accessing a file from storage, authenticating the user or even communicating with another server.

In general, the server will run some logic and most likely interact with a database. And will conclude the process by returning a HTML response containing all the necessary client-side files, or at least, references to those files.

As with the client-side scripting libraries, there are many server-side programming languages available. Which is used will either come down to the preference of the business or developer that is building and maintaining the web application. But for example, some of the more common ones are Python, PHP and ASP.NET.

How does a mobile app differ?

Mobile apps operate, at a high level, in a very similar way to a website or web app. The key difference is that the client-side of the mobile app is packaged up, published and installed via one of the app stores in advance.

Once installed, a mobile app will make web requests in a similar way to the browser-based counterparts. The web requests however will not be requesting HTML and CSS but instead data in a raw format, possibly JSON or XML. This data will then be used by the mobile app itself and injected into views that the user will see and interact with.

Mobiles apps can be built in a number of different ways and using a number of different languages. All with the pros and cons, much like in the web-based client and server-side space. The most well known and widely used are arguably the native languages for iOS and Android, Objective-C or Swift and Java.

The next steps to learn more

Web technology is here to stay and it is only going to become more powerful and sophisticated as time moves on. I feel it's important for any founder of a startup or business to have a grasp on how basic websites and more elaborate web applications and mobile apps operate at a high level.

To learn the ways of web or mobile app development properly, it's critical to first be aware of how websites and mobile apps work. We've covered this at a high level today. To enhance your skills in further, the first steps I would suggest are to learn the basics of HTML and CSS. I feel that these two markup languages are a nice entry point to the world of web development.

Once you've got your feet wet with HTML and CSS, try out some JavaScript. Alternatively, you could go straight into the server-side coding using languages such as Python or ASP.NET. I even find TypeScript + NodeJS to be a good language to start on as it is a more structured and well-rounded form of JavaScript.