2018-04-15 admin

If you have ever visited a sit-down restaurant, then you can understand the difference between front-end and back-end in web development.

When you are just getting started with learning web development, you encounter a series of concepts that completely overwhelm you.

Databases? Servers? Client-side? Server-side? AJAX?

Fortunately, you only need to understand HTML and CSS to build your first website, and you can do it locally on your computer. But if you want to understand how your site can eventually go live on the web, you need to understand the concept of front-end vs. back-end.

Here’s the general idea: just like there is a waitstaff and kitchen staff in a restaurant, front-end and back-end divides the functionality of your site. It allows each side to do what they are good at.

In the case of kitchen staff, that means cranking out high-quality food efficiently. The waitstaff are experts at working with customers and creating a customer experience.

In web development, the front-end is also sometimes called the client-side, while the back-end is also called the server-side.

Here are the roles that the different technologies play in the front-end v. back-end of a web app. In order to understand this tutorial, you will just need to understand the basics of HTML and CSS.

An Intro to the Front-End

Let’s look at the front-end first. Front-end code creates a user interface, a structured way for web visitors to interact with your code. In our example, that is a table within your restaurant- a place where a controlled interaction happens between customers and the restaurant staff. So, think of the table at the restaurant as the website, like mysite.com.

First, users (or customers) need something that they can browse. In a restaurant setting, this is the menu, obviously! It is a static piece of content that should make it easy for customers to understand their options.

From a front-end developer’s perspective, this is similar to HTML and CSS. These two languages allow you to build static content.

But there’s one thing that is obviously missing. You can’t shout at the menu and expect something to happen! You need a way to communicate that order to the kitchen staff.

This is where the waitstaff comes in. Waiters and waitresses can help you understand the menu, answer any questions, and then take your orders to the kitchen staff. They are experts at interactivity– understanding what you want to do. That’s where JavaScript comes in.

As a developer, JavaScript will help you accomplish multiple goals. It can give the user a great experience on the page, and help them find the right information. It is also the language used for sending user requests to the back-end. In other words, when you write JavaScript, it does not automatically mean that you are communicating something to the back-end. JavaScript is part of the front-end, and can solve plenty of problems without ever talking to the back-end.

I summarized both parts through the process of choosing a meal. When users arrive at your site, they have a goal in mind. Your code must help them accomplish that goal.

  1. They must be able to quickly browse to see what you offer (HTML/CSS)
  2. They must be able to quickly find more resources that will help them make a decision (Interactivity/JavaScript)
  3. They must be able to take an action that will lead them closer to their goal (User Request/ JavaScript)

An Intro To The Back-End

Have you ever been inside a restaurant kitchen? It is a high-stress environment, to say the least. It has a TOTALLY different environment than the one that the customers see. You could even say that the waitstaff and menus provide a friendly, perfectly-formatted version of what goes on in the kitchen, without revealing any of the processes.

This is similar to the back-end of your web application, or the code that runs on the server-side. Just like the kitchen, the server is in a different location than the user interface. It uses different languages to communicate.

Since a server is really a computer in a remote location, it has a lot more computing power than the browser on any given computer. Much like the kitchen staff, the focus is on efficiency and productivity.

Think about the complexity of a restaurant kitchen. It must have all the ingredients in the right place at the right time. All the staff must know their job at any given point. And they must produce the same meals with the same quality over and over again. Similarly, a server must organize the data from your web app in order to send the right response at the right time.

The server must send a response whenever it receives a request. In the case of the restaurant, this response could be:

  • The food
  • A notice that the kitchen has run out of stock for that meal
  • A follow-up question that the waiter did not ask

No matter what, the response is delivered to the customers via the waiter. That is JavaScript code.

Popular back-end languages and frameworks include Ruby, Ruby on Rails, node.js, PHP and more.

Why We Need Both Front-End and Back-End

Here’s a practical reason that we must run different code on the client and server-side. Al standard browsers only understand HTML, CSS and JavaScript. So that is one easy reason that we can’t use server-side languages in the browser.

The other reason is that we allow each side to focus on the challenges that they are uniquely qualified to handle. Can you imagine if the chef had to take the place of the waiters? It would be a customer experience distaster! So, we are fortunate that we have one side specialized in user interface, and another specialized in server-side challenges.

Sites That Are Strictly Front-End

Imagine that you own a business that does not sell anything online. Let’s say that you own a local flower shop.

In that case, you have no need for a back-end since there are no complex calculations. You only need a front-end, and perhaps a contact form that can direct any inquiries to your email inbox.

In other words, some sites are just meant for browsing and taking some sort of action that the website does not need to handle. You don’t need to write a back-end for every type of site. You can use Github Pages to put your custom front-end live on the web if you don’t need a back-end.

Get the Latest Tutorials

Did you enjoy this tutorial? Give it a clap, and sign up here to get the latest visualized tutorials from CodeAnalogies:

<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...