Getting started with Frontend Development
This article is the third part of Week of Web(#WOW). If you don’t know what #WOW is here’s a card to it.
In this article, we will be learning about frontend architecture and know what goes behind the process of creating the whole application where a user can view and interact with it.
What is Frontend Development?
Frontend development is the process of developing a graphical interface through which a client can view and interact with the application.
For example, while viewing this article, the content is presented in such a way that you could differentiate between a heading, a paragraph or even a quote. Also, all the pictures are well defined with proper dimensions so that it doesn’t interfere with your experience in reading the content. This was about reading the content, perhaps you could also interact with this article by clicking on the clap button and writing a comment below.
You could also go to Coder’s Capsule Home Page and follow our publication.
Wink Wink ;)
So here you are the client and all the content is being rendered on your computer. Hence Frontend is also known as client-side rendering.
How to develop a frontend architecture?
A frontend developer creates websites and applications using web technologies, like HTML, CSS and JavaScript, that are rendered on Open Web Platform or are sent as an input to non-web-based environments (for example, to run it as a mobile application, or a desktop application)
Hypertext Markup Language (HTML)
HTML is the most important and basic part of building a website. HTML helps developers create documents by using a proper syntax which can later be rendered by anyone on the web later.
This syntax defines what a component is in a document. These components could be a heading, a paragraph, an image, a table or even an input textbox. All these components are displayed in the order they are typed from top to bottom.
Cascading Style Sheets (CSS)
CSS as the name suggests is used for styling your HTML documents. It is also a scripting language that can define the looks of each HTML document.
For example, a paragraph can have a red coloured text with a yellow coloured background. Or you could make the font of your text a little bolder and underline it. All the visual changes appear here and those boring HTML components can live with crazy styles now.
You will appreciate the difference CSS can make when we get into building our ToDo list app in the next article
JavaScript (JS)
This is where your application comes to life. JavaScript is a programming language unlike HTML and CSS being scripting languages.
Feel free to laugh at people who say they can program in HTML xD
Since JavaScript is a proper programming language it comes with conditional statements, mathematical computations, functions, classes, objects and the list goes on. These properties of a programming language can help us with various ways to interact with our application.
For example, when you click on the clap button in this article, it changes its colour and a pop up appears with the number of times you clapped and as you keep clicking the clap button the number keeps increasing. This feature would be impossible without JavaScript.
Therefore we could create an analogy of these web technologies to a human body where HTML is the skeleton that defines the structure of the human body, CSS is the skin that defines the looks of the human body and JavaScript is the muscle tissue through which the human body could move and interact in their life.
What are the different ways of presenting a Frontend?
As I quoted earlier,
“A frontend developer creates websites and applications using web technologies that are rendered on Open Web Platform or are sent as an input to non-web-based environments”
Let’s discuss these environments now
Web Browsers
Web Browsers are software used to fetch, display and go through various kinds of information on the world wide web. This is the most commonly used platform due to the fact that web browsers are available on all kinds of devices like desktops, laptops, tablets or phones (including those keypad ones).
A few popular browsers are (in the order of decreasing popularity as of writing this article)
Headless Browsers
Headless Browsers are similar to web browsers. The only difference is they come without a graphical user interface(GUI) and can be controlled using a command-line interface(CLI).
A few commonly used headless browsers are:
If you don’t know what CLI is refer to this article
Native Applications
Native applications allow developers to create frontend architecture to work natively on the operating system of their choice. That means the application could be directly installed on their operating systems like Windows, iOS and Android.
For Example, Microsoft Teams works on this technology and displays web content inside its own native application based on the operating system which could be Windows, iOS or Android.
A few popular Native application development frameworks are:
- Electron(Used for desktop applications)
- Flutter(Used for cross-platform applications)
- React Native(Used for cross-platform applications)
So basically we could create a frontend architecture for web, desktop, mobile or even any other digital equipment( say a smart watch or a smart TV).
And that is how frontend architecture is developed.
In the next article, we get started with actually writing scripts in HTML where I will explain all the HTML tags along with the whole structure.
This is Vinayak Tekade from Coder’s Capsule in collaboration with Developer Student Clubs Amrita School of Engineering Bengaluru signing off.
Follow me on LinkedIn and Twitter.
Looking forward to learn, teach and grow together. Check us out on Instagram for more similar content.
