What is Front-End Development?

When it comes to web design, "Front-End" and "Back-End" are among the most commonly mentioned terms. In fact, Front-End can also be called "Web Design" and Back-End can be called "Web Development". While these two terms often seem to create confusion for those outside the industry, it's not hard to explain the difference. To put it simply: Front-End allows you to design and enhance the user interface that you interact with when you enter a website; Back-End is the name given to the development of the server, the server part, and the base software behind the scenes of this website. In this article, I will talk about what languages Front-End Developers need to learn and the content of these languages.

What Do Front-End Programmers Do?

The Turkish equivalent of Front-End is "Ön Yüz". People who create the visual side of a website using technologies such as HTML, CSS, and JavaScript that make up the front of a website in the process of being built are called Front-End Developers. The colors to be used on the website include many tasks such as the placement of the contents, the selection and implementation of the font.

If you ask what HTML, CSS, JavaScript means, roughly HTML is the skeleton of a person, CSS is the muscular system added to the skeleton, and JavaScript is the functions added on top of that body. Let's start a thorough examination.

THE HTML

Hypertext Markup Language (HTML) is the language used to create web pages.

It's like a man's skeleton. There is no beautification in this structure, which is the skeleton of the website. The elements to be used are located on the site in its simplest and simplest form. Html, the markup language, is the system used to prepare web pages. Html, which is not a programming language, is used to create websites that we use on our computers. Browsers such as Chrome, Firefox, and Internet Explorer process html codes and convert them to web pages.

What DOES HTML Offer?

·        It allows content such as images, text and videos to be positioned on the web page.

·        It ensures that these generated content is displayed correctly on websites.

·        Provides search engines with information about their websites.

It is not necessary to install a program on computers to write HTML code. A text editor can create html pages in the middle, such as Wordpad, notebook, or word. Tools such as dreamwear, sublimation Text and notepad++ can be used to make code writing easier. When saving written html code, it must be saved in a way that browsers such as htm, xhtml, and html understand.

CSS

CSS stands for "Cascading Style Sheets" in English and means "Cascading Style Sheets". It's like adding muscles to the skeleton. Visual changes and beautifications made on HTML on the website are provided with this technology. The answer to the question "What is CSS?" is a definition language that allows websites to be visually shaped and has its own rules. CSS is one of the most basic web technologies, along with HTML and JavaScript, and offers a lot of visual control over web pages.

With CSS, you can gain effective and functional control over the layout, colors, fonts used, intermediate titles, visual effects, and other visual elements of web pages. For user-friendly and visually impressive websites, HTML and JavaScript, as well as written CSS code, are extremely important. Effective CSS encoding offers websites a high availability.

Bootstrap

Bootstrap, a free CSS framework, is an open source design tool. You can easily make themes and designs for phones, tablets, and desktops that make your site appear differently and proportionate to the size of your device.

Bootstrap, which includes all the elements required for a site, allows you to design suitable for all devices using these ready-made elements when designing. This means that it is quite easy and practical to create a new design with codes that are ready for everything.

Styles, images, and JavaScripts have previously been mounted inside Bootstrap. All you have to do is call them. Bootstrap 3, the latest version of Bootstrap, works seamlessly from the latest versions of almost any internet browser, such as Chrome, Safari, Firefox, Internet Explorer, Opera.

JavaScript

JavaScript is one of the most popular software languages in the world with over 20 years of history. It is also one of the 3 basic software languages for web developers. Manages the behavior of Web pages.

JavaScript can be learned quite quickly and easily and can be used for most purposes, from increasing the functionality of websites to running games. What's more, thanks to sites like Github we can find a lot of JavaScript drafts and applications for free.

Why is JavaScript important?

JavaScript has several advantages compared to its competitors, especially in certain areas. Some of the JavaScript benefits are as follows:

·        You don't need to use a compiler because web browsers interpret it with HTML;

·        It is easier to learn than other software languages;

·        Errors are therefore easier to solve;

·        It can be set to specific web page elements or exceptions, such as clicking a mouse or hovering over a cursor;

·        JS can run on multiple platforms, browsers;

·        Using JavaScript, you can evaluate input and reduce manual very controls;

·        It makes websites more interactive and attracts visitors;

·        It is faster and lighter than other software languages.

JQuery

JQuery is the most widely used JavaScript library in the world and aims to provide a free and open source technology that makes javascript easy to use over the Internet.

One of the biggest advantages of JQuery is that it works consistently in all browsers, so it is easy to use in all environments.

Because it is a JavaScript library, developers can use the library to provide web software with many functions that they create with JavaScript.

jQuery is a JavaScript library with fast, small, cross-platform and rich features.

It's entirely up to you what you can rate the library as. You can use it for slider animation effects on your website, for your web applications themselves, or for visualization areas.

Angular

A Javascript-based framework used to create web, mobile, and desktop applications. Angular applications include the use of Typescript, a language built on top of Javascript, in constitation with Html, Css. The code written in Typescript is first compiled into Javascript and then processed in the browser. The use of Typescript is not mandatory for developing angular applications, but it will be more useful to use thanks to its ease of use and advantages.

Angular Advantages

1 – Angular's SPA (Single Page Application) support

Single Page Application (SPA) is a website design approach that JavaScript dynamically creates by modifying only dom elements of the changing page on the existing page, rather than loading new HTML pages of the content of each new page.

2 – Two-way data binding

In Angular 2 and later, we automatically connect data between the View and Controller layers using ngModel Directives. In this way, any change on the same variable triggers the change of the relevant fields on the entire page thanks to the Angular two-way data binding.

3 – Modular Architecture

Thanks to the modular structure of angular, we can disassemble our application and make it reusable. We can group these modules together with component, directives, pipes, and service.

In addition, another advantage of modules is the layz-loading structure. In this way, we can group one or more features and install them as needed, so if used properly, it will significantly improve application performance.

React

React is the most popular JavaScript library used to create a user interface (UI). Websites use a method that provides a great response to user output to process.

The components of this tool were developed by Facebook. It was released as an open source JavaScript in 2013. It currently outpertracks its main rivals such as Angular and Bootstrap, which are at the top of their bestseller list.

React has been used by hundreds of major companies, including Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, and Instagram. This is proof that the competitive advantages of this tool are unrivaled.

React Benefits

1 – Easy to Use

React, an open source JavaScript GUI library, has the biggest focus; UI tasks are to complete efficiently. It can be classified as "V" in the MVC mold (Model-View-Controller).

2 – Supports Reusable Components in Java

React allows you to reuse components developed to other applications that use the same function. Component reuse is an unusual feature for developers.

3 – Easier Component Writing

The React component is easier to write because it uses JSX, a optional syntax extension that allows you to combine HTML with JavaScript.

JSX is a perfect blend of JavaScript and HTML. The entire website describes the build writing process. In addition, the extension used makes it easier to handle multiple functions.

4 – Better Performance with Virtual DOM

React WILL update the DOM (Document Object Model) process efficiently. As you can imagine, this process can cause a lot of problems in web-based applications. Luckily, React uses virtual DOMs so you don't have to have this problem.

This tool allows you to create virtual DOMs and host them with a memory. As a result, every time there's a change in the actual DOM, the virtual one changes instantly.

The system will prevent the real DOM from forcing continuous updates. This will not slow down your application speed.

Vue

VueJS is an interactive front-end library or framework used to develop user interfaces. It is one of the most popular front-end technologies of recent times. In fact, by the end of July 2018, github had 108,000 stars, outpacing its biggest rivals React and Angular.

VueJS Benefits

1 – Low size and speed

The lower the size of a library, the better. One of the biggest advantages of VueJS is its size. VueJS size connected to the installed plugin is between 18 – 21KB. Its size-dependent speed is also much better than its competitors.

2 – Ease of learning

It provides ease of learning with easy-to-understand documentation and simple syntax.

3- Flexible construction

It allows you to produce different add-ons or different solutions depending on the status of your project. It doesn't force you to include an app in your project that you won't use.

4 – Simple Integration

As in the example above, you can use it in your project by including only the js file.

5 – Community

VueJS, which has a rapidly growing community, will be a very important advantage in finding answers to the problems you will experience during the development phase. It will also make you very easy in plugins that are prepared almost for the most problematic.

6 – Virtual Dom Structure

Virtual dom is a feature used by react. The advantage is that as the project changes, the dom in memory, not the dom, is updated and the differences are reflected in the actual dom at the appropriate time.