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.
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 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.
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.
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.