Web development for non-developers
A short introduction on how websites works for non-technical entrepreneurs.
This is an article aimed at non-technical entrepreneurs. I think it is really important for entrepreneurs working in the web industry to have a decent understanding of how websites works. This article will provide some very basic insights into the underlying technologies of the web. I will briefly discuss front end, back end, how the internet works and what a framework is.
Disclaimer: Bear in mind that this article contains of some pedagogic lies and simplifies a lot of concepts.
Understanding the internet
How does it work? A website is typically stored on a server somewhere in the world. When you want to access a website, you type in something like «facebook.com» in your web browser. What happens now behind the scenes is that a request is sent to facebook’s servers. A server is simply a computer that is specially made for storing and computing a lot of information. Your laptop could in fact be a server, although facebook’s servers probably looks more like this:
After you’ve made your request, facebook’s servers will most likely respond by sending you back three types of files. One HTML file, one CSS file, and one Javascript file. Together, these 3 files makes up what you see in your browser window. This is the “front end” code. We typically divide web development into front end and backend code.
Understanding front end code
The «front end» is named so because it represents the code that actually is sent to the end users computer. It is the code that tells the web browser how to display the site. As mentioned this code consists of three different types of files: HTML, CSS and Javascript.
HyperText Markup Language (HTML) files is the content of the website. They can include writing, links, pictures, and even sound and video. HTML is used to mark and describe each of these kinds of content so the web browser can show them correctly. HTML can also be used to add meta information to a webpage. Meta information is information about the web page. For example, the name of the person who made it. Meta information is not usually shown by web browsers.
Example of HTML code:
Result:
The Cascading Style Sheets, or CSS, is are files that style a website. It is a way to change the look of the HTML code.
Example of CSS code:
By adding a reference to the css file in the HTML code, we get the following result:
The two pictures below shows Facebook with and without CSS. Note that all the content of the site is present even without CSS, but it looks just awful.
Javascript is a scripting language that runs in the web browser. It handles the logic of the front end code. It tells how the elements on the screen should act. It is also what triggers HTTP requests to the backend.
This example gives instructions to hide the paragraph text («p») when the button is clicked:
Understanding back end code
As many people tend to say: «this is where the magic happens». While the front end code is sent to every computer requesting a website, the backend code is not. The backend code sits on the server side. The backend consists of a server, application and a database.
The Database is where all the data is stored. You can think of it just as a huge spreadsheet like this:
Databased is often handled by systems like MySQL or MongoDB. Read more about them here: http://www.scriptrock.com/articles/mysql-vs-mongodb
The Application is the code that handles incoming request from the front end. It’s the logic that acts as a communicator between the database and the front end. This code will often also perform complex operations on the data. The application logic is often written in programming languages like Python, Ruby, Java, Scala, Javascript or PHP.
More on languages:
http://knowledgejam.org/home/2014/4/14/backend-web-langauges
http://rz.scale-it.pl/2013/03/08/which_programming_language_should_you_use_for_a_web_backend.html
The communication between front end and back end is done via the HTTP protocol, typically a via a HTTP GET or HTTP POST. More on HTTP:
http://simple.wikipedia.org/wiki/Hypertext_Transfer_Protocol
HTTP GET is called from the front end when you want to get some data. For instance a list of names.
HTTP POST is called from the front end when you want to save some data in the database. For instance an image you post on Facebook.
Understanding frameworks
A web application framework (WAF) is a software framework that is designed to support the development of dynamic websites, web applications, web services and web resources. The framework aims to alleviate the overhead associated with common activities performed in web development. Or to put it this way: There is a lot of complex stuff you can do with a website that requires a lot of code. Frameworks are used everywhere to decrease the amount of code you have to write and make life easier for you.
Popular front end frameworks:
Angular JS
React JS
Twitter Bootstrap (CSS)
Popular back end frameworks:
Django — Uses Python
Laravel — Uses PHP
Node JS — Uses Javascript
Ruby on Rails — Uses Ruby
And at last, an in depth comparison of frameworks:
http://en.wikipedia.org/wiki/Comparison_of_web_application_frameworks
So thats it! Thank you for reading. I hope some of it was helpful ☺
Relevant links:
http://blog.teamtreehouse.com/i-dont-speak-your-language-frontend-vs-backend
http://www.codeup.com/different-types-of-programmers-front-end-vs-back-end/
http://www.inc.com/larry-kim/9-places-you-can-learn-how-to-code-for-free.html
