Front-End Development Fundamentals
Front-End development has become a popular career these days and it plays a very important role in the software development life cycle. As part of this blog, we will check the fundamentals of this career and some related concepts. Let’s take a quick look!
What is Front-End Development?
In the modern software development life cycle, it’s common to separate client-side and server-side development. Front-End development is also referred to as client-side development, while Back-End development corresponds to the server-side.
In other words, Front-End Development is the development of the Graphical User Interface (GUI), focused on everything the user will see and interact within the software.
What Do We Need to Develop on the Front-End?
If we state that Front-End web development is everything on the browser (GUI), it will then involve all that is needed for the browser to produce the user interface (UI). Some of the key elements involved on this are:
- Hypertext Markup Language (HTML)
- Cascading Style Sheets (CSS)
- JavaScript
- Web Assembly
A webpage includes a group of HTML elements that will define the content of the page. These HTML elements have different types. For example, there are elements to create forms, like text inputs, select lists, and buttons.
Sometimes these elements will need to be formatted to have a specific color, border, size, etc. Here is where CSS (Cascading Style Sheets) plays its part.
What about JavaScript? In simple terms, it’s a programming language that allows dynamic behaviors on website pages. By using JavaScript, we will interact with the elements and control their functions. Nobody wants to be a front-end developer without JavaScript. Not to mention that JavaScript manipulates the DOM (document object model), which makes up the base kernel for any modern front-end framework.
DOM Overview
The DOM (Document Object Model) is an API, DOM represents an XML or HTML document, and DOM is loaded in the browser. When a document is read through DOM, every part of document is what we call a “node”. The document represents a nodes tree, every node can have other nodes as children. Through DOM, we can programmatically interact with the document and add or remove nodes.
We can listen to changes and interactions of the node. A node is a programmatic object with properties. It is worth mentioning here that, in order to access any node, we need to use X-Path or full-path concept.
We can consider X-Path a unique address of the node, it indicates the location of the node through its parent, to the root. By giving every node an index number and level number, we will have a unique address of every node.
What is a Framework?
In simple terms, a software framework is a set of programmed functionalities that can be reused or extended, without the need of knowing the details of its implementation. It can be modified by adding more code segments. It provides a standard way to execute functionality and build software. It provides functionality as part of a larger software to make the development of software easier.
The framework uses shared resources, libraries, images, files, and references, and groups them in one package. This package can be modified to meet the needs of the project. The developer can also make use and take advantage of other libraries to create their own frameworks.
Conclusion
Building software is not just writing code; it’s a process that involves a lot of effort. That is why developers will always need a framework. When we write a large software program, we will start by building the framework with functionality that we will reuse for our software, based on existing frameworks.
We will need an abstract (generic) framework to help us in the development stage. It is time-saving and helps us focus only on our specific system functionality. Nowadays, there are several frameworks for website Front-End development. Some popular options are Angular, React, etc. They are more than just frameworks as they are also platforms ideal for developing front-end web applications.
