Wednesday 7 March 2018

Difference Between FrontEnd and Backend Developer - Weblason


Hello this article is meeting you in a good and well situation. Today we’re going to remind our self different between Front-end and Back-end Developer.

Last year when I was coding on Freecodecamp, I think they said after finishing some languages and so so so, Front-end Developer certificate will be collected, although for me I don’t know the meaning of Front-end certificate, so I search on Google and got the answer, so today am going to share my knowledge on that.

If you’ve just started learning web development you’ll probably have heard a lot of talk about frontend and backend programming. But what exactly do we mean by this? If you’re a beginner in the field, it can be hard to know not only which is which, but also what is covered by one or the other.

While frontend and backend development are certainly distinct from one another, they’re also like two sides of the same coin. A website’s functionality relies on each side communicating and operating effectively with the other as a single unit. Is one more important than the other? Nope. They both play very important roles in web development. So where should we start? Let’s flip a coin.

FRONT-END


As the name implies “FRONT” it simply means anything in our front and you know we see anything in our front that is the application of front-end too, user can see everything on the web pages.

Front end of a website is all what user can see and interact with on your browser. It is also referred to as “client side” it include all what the user can interact with directly like colors, text, buttons, images and navigation menus.

Let’s say you decide to start a business. You open a craft company and need a professional website to present your company to customers and tell them where you’re located. May be you’ll include some photos and some information about your product. All you need is Front- End Developer Technologies to build your website for you. So that’s it.

Front-End Languages
We have three languages for Front-end which are:

HTML: The fundamental coding language that creates and organizes web content so that it can be display by browser.

CSS: A language that deals with the design and style for Website content, such as layout, colors, fonts, e.t.c.

JAVASCRIPT: is a programming language deals with interactive elements like dropdown menu, contact form, modal e.t.c.

Together all these languages make up visually presented website.

In addition to front-end language you’ll come across framework like Bootstrap (which is the one am using currently on my upcoming website because it is interactive to mobile phone) Angular as well as JQuery, CSS extension like Sass and LESS.

So the craft website is being crated successfully and now new customers want to buy some craft work for their upcoming website, so your website needs to store information like user profiles, credit card, product and so on, this is where the Backend developer comes in.

BACK-END DEVELOPMENT

So far, what you have is an example of a static website - its content doesn’t really change much. For static sites, all the necessary information that determines what’s on the web page is in the frontend code itself. Static websites are good for showcasing things like businesses, restaurants, portfolios, or professional profiles. But if you want to turn your site into something that users can interact with, you’ll need to get more in-depth with regard to what’s going on behind the scenes of the website.

The backend (or “server-side”) is the portion of the website you don’t see. It’s responsible for storing and organizing data, and ensuring everything on the client-side actually works. The backend communicates with the front-end, sending and receiving information to be displayed as a web page. Whenever you fill out a contact form, type in a web address, or make a purchase (any user interaction on the client-side), and your browser sends a request to the server-side, which returns information in the form of frontend code that the browser can interpret and display.

Your new site will need to have additional backend components to make it a dynamic web application - a website whose content can change based on what is in its database, and that can be modified by user input. This is distinct from a static website, which doesn’t require a database because its content generally stays the same.

Server-Side Set Up
Your website needs a database to manage all the customer and product information. A database stores website content in a structure that makes it easy to retrieve, organize, edit, and save data. It runs on a remote computer called a server. There are many different databases that are widely used, such as MySQL, SQL Server, PostgresSQL, and Oracle.

Your app will still contain frontend code, but it also has to be built using a language that a database can recognize. Some common backend languages are Ruby, PHP, Java, .Net, and Python. These programming languages often run on frameworks that simplify the web development process. Rails, for example, is a framework written in Ruby. “Ruby on Rails” is a popular technology for building dynamic web apps that makes the process much faster.

Perhaps with all this customers or user can now order anything in your website through font-end and returns the query in Back-end which will display the result for the quantity and amount of product order.

So now you’ve got a dynamic web app that makes use of frontend and backend technologies. You use frontend languages to make your website look great and easy to navigate. Behind the scenes, the backend holds together all the frontend components, and makes it possible to do things like store purchase history and product details, create secure editable user accounts, and more. As you can see, both sides have very different roles. But it’s the two working together that ultimately defines user experience and makes it possible for a website to function at all.

I hope this article is being helpful, click the sharing buttons to share with your friends and let them know the Difference between Font-end and Backend development, if you have any question feel free to ask.







6 comments: