If You Were a Web Application

A programming analogy

Sara Robinson
3 min readJun 20, 2013

When I tell friends I’m learning to program, their first question is usually “What language are you learning?”. The answer is difficult to explain in non-technical jargon because, if you want to create dynamic web applications you can’t really learn just one language. Programming requires understanding a whole suite of tools. Here’s my attempt at a jargon-free explanation.

Websites have two main components, the front-end and back-end. A front-end developer creates the appearance of the website (styling, font, colors, etc.) and the user’s experience navigating the website (what happens when you click or hover over a link, while you’re waiting for the page to load, or when you navigate between pages). Back-end developers build a website’s features, like the ability for users to pay for something on your site. They also decide how a site will store data. Some websites don’t have a back-end (like your neighborhood restaurant, or an “about me” page), but most interactive web applications do. So, imagine for a second, that a website is a person.

If you were a website, your skeleton would be your HTML or HyperText Markup Language. Are you tall or short? Is your right foot the same size as your left? Do you have a big head? HTML is a language that defines the way content is structured on a website. Let’s say a page has a main heading, a few lists with subheadings, and a form to create a new list. HTML uses tags to define the type of each piece of content, and where it is arranged on a page. A main heading, for example, is surrounded by tags <h1>like this </h1>. Every HTML page is divided into <head> and <body> sections.

But if you were just a skeleton, that would be kind of depressing. That’s where CSS comes in.CSS, short for Cascading Style Sheets, defines your style - what kind of clothes do you like to wear? What color is your hair? Your skin tone? If I wanted the background color of my website to be blue, I would write code like the following: body { background-color: blue; }. Simple as that.

So now you have a skeleton and some style, but wouldn’t it be nice if you could move? Maybe you want to make your right hand wave whenever you make eye contact with someone you know. You could probably use some JavaScript. JavaScript makes websites interactive. You’ve probably seen it in action when you click a button that prompts a pop-up window, or when a page changes dynamically as you type something into a search bar. To craft an optimal user experience, front-end developers typically work with HTML, CSS and JavaScript.

Now that your appearance is complete, it would be good if you had some functionality - like the ability to learn a new skill, prioritize a list of tasks, or give a presentation. Your nervous system handles all of this logic. If you were a website, you’d have a choice in the language you used to define this functionality. Ruby, Python, and Java are some languages used to write an application’s logic, but there are many others. Let’s say your website asks users to list a few hobbies and recommends products based on their selection. You would write the code for generating a recommendation in an object-oriented language like Ruby.

Finally, you’ll want a way to package all of these components together. That’s where frameworks like Rails or Django come in. You don’t need to use a framework, but they provide a nice way to organize all of your code in one place, along with guidelines for how it should be structured.

And there you have a living, breathing website.

--

--

Sara Robinson

Connoisseur of code, country music, and homemade ice cream. Helping developers build awesome apps @googlecloud. Opinions = my own, not that of my company.