Front-End Development: Key Concepts , tools and technologies
In the world of software development , whatever is built falls into two categories: Everything that is seen by the user and the process that happens in the background. The first category, in which you see and interact with as visitor of website or end user of mobile app is considered as frontend and the process that fetch the data from database and speed with which the data is delivered falls into the back-end.
In this post ,we will be knowing more about front — end development and technologies that can be used for front end development of web- development.
The front end stack is made up of many different languages and libraries.But there are three main front-end coding languages are HTML(for basic page structure and content),CSS (for visual editing) ,and JavaScript (for making websites interactive). Together, they create the underlying scaffolding that web browsers use to render the web pages that we interact with every day. All other libraries and front-end engineering are built upon these three main languages.
HTML
HTML or Hypertext Markup Language, is used to structure a web document. HTML is composed of a series of shortcodes called tags, normalized into a text-file by a site creator. The text is then stored as an HTML file and observed through a browser. The browser scans the file and interprets the text into a visible form, and in the best case, renders the page .However, HTML is not intelligent , i.e. its doesn’t make any decisions or fetch any data , it simply renders the page.
CSS
Cascading Style Sheet is what gives the web page visual appeal makes it look better in terms of design, layout, and variations for diverse devices with different screen sizes.In simple words , CSS dictates the presentation of HTML elements on the webpage.It is the reason why the site doesntlook like white background and bunch of text and blue hyperlinks. It makes ahuge difference. Try loading basic html of gmail web interface sometime , will definitly help you understand the importance of CSS. CSS uses selectors to communicate with HTML and style them.
A new trend with styling is to use what is called a CSS pre-processor. These include Less, Sass and stylists. Pre-processors are scripting languages that compile to CSS for the browser and are very popular as they expedite the development process. They accommodate some programming logic.
SASS means Syntactically Awesome Style Sheets. Sass runs on Ruby and is rendered on the server side. Due to its Ruby language origin, the installation is provided via so-called gems (multiple Ruby/Rails libraries).
LESS stands for Leaner Style Sheets. It’s a JavaScript library and is rendered on the client side in the browser. Developers choose LESS much more regularly when using JavaScript with style sheets. It resembles composing regular CSS. The technology allows for reusing pieces of CSS within LESS files.
JavaScript
JavaScript is what makes the website alive. It is a runtime language for web browsers.JavaScript (JS) is one of the most popular scripting languages. It’s mostly renowned for providing a full stack of technologies for both front-end and back-end development.As for this post we are talking about front-end, JavaScript is used to make web pages dynamic.
JS boosts a website’s overall interactivity. It enables modeling animated UI components such as image sliders, pop-ups, extensive site navigation menus, and more. JavaScript provides a website with extended functionality that isn’t otherwise achievable with HTML and CSS alone. JavaScript allows web pages to reply to users’ actions and dynamically refresh themselves.Java script provides many frameworks and libraries. Some of them are discussed further.
Popular Frameworks or libraries in front-end for web development.
What do you see when walking around and staring at the cityscapes? Probably, among the first things are shop fronts, shining and beckoning, created to draw you inside. You choose the most attractive, open the door, and enter.
The same happens on the web. Surfing the Internet for things you need, you come up with the most engaging site, open it, and there you are.
That is why it is important to design a creative, interactive ,user friendly , attractive ad responsive front end. Most popular technologies used to do so are mentioned below,
- Bootstrap:
Bootstrap was released on 19th August 2011 under MIT license. It is an open-source CSS framework to build dynamic websites and web applications. It is built by Mark Otto at Twitter as a framework for consistency.
Bootstrap, as a front-end development framework, allows websites to be highly responsive with its fluid grid layout and gives a mobile-ready platform perfect for all the devices.
It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.
2.Tailwind:
Tailwind is a CSS framework created by Adam Wathan. It is very much similar to bootstrap. It has different classes for themes, layouts, grids and many more.We can embed Tailwind css in different frameworks such as React js, vue.js, etc.It’s installation is also easy through NPM.Using different classes from it developers can save a lot of time for writing their own css’s.
Tailwind UI is a collection of professionally designed, pre-built, fully responsive HTML snippets you can drop into your Tailwind projects.It uses icons from Heroicons to make it easier for developers.
3.React.JS:
React JS is a JavaScript library used in web development to build interactive elements on websites.It follows a component oriented approach.
It was released and 2013 and was made by Facebook.
React JS is most popularly used for development of Single page application.(SPA).
A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages.
It creates virtual DOM in memory and updates the virtual DOM first and then makes changes to the browser DOM.So the main advantage is that virtual DOM only updates the elements which are changed and not the entire component or parent tags etc.
How,ever while working with React JS one thing to take care about is that react and bootstrap shouldn’t be used together as the virtual DOM and the actual DOM used by bootstrap can clash with each other.
4. Angular:
First, not to mix everything up in this blog we are talking about Angular , not AngularJS (which is a different and older framework.)Right now Angular 2 is used as an umbrella term for all the versions of Angular released after AngularJS. They are Angular 2, 4, 5, 6, 7, 8, and 9 (released on Feb 6, 2020).It’s an open-source framework mainly used for creating web apps, single-page web apps, and hybrid apps. Angular is built on TypeScript, developed and maintained by Google.It is also used for development of single page applications similar to react JS.
But there’s one big difference between Angular and React: React.js uses virtual DOM (Document Object Model — allows accessing and changing document contents, layout, and even structure). While Angular 2 operates on real DOM.
While virtual DOM allows us to update the changes without rewriting the entire HTML doc virtually. This renders updates much faster and ensures fast performance — no matter of the apps’ size.Although Angular is a full front-end framework, the real DOM feature makes it’s apps slower when dealing with a ton of data requests.React and Angular also differ in other factors like data binding , component architecture, performance ,etc.
However , Stack Overflow names React.js the most loved and most wanted web framework by developers (74.5%). Angular has a lower rate — 57.6% of developers are interested in working with it.
Example use cases for angular and react can be:
5.Flutter for front-end development:
Flutter is Google’s cross-platform and open-source UI software development toolkit.Flutter uses Dart programming language which was introduced by Google in 2011 and is rarely used by developers.It is used for building beautiful, responsive, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.It is used for building beautiful, responsive, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase
Some of the major pros of using flutter are, Ready-made and custom widgets for fast UI coding Hot reload function for instantaneous updates,Portability-Using a single code base, you can develop only one user interface design and use it for both platforms android and IOS.
However , the disadvantages like , massive file size ,lack of third party libraries, weak iOS features support cannot be ignored.
Front-End Technologies curated in this post are some of the best with huge communities backing them.And the success of the applications built integrating the technologies stands as a testimony for their potential.There many more such technologies like , Vue.JS , zurb foundation,ELM, Iconic, etc. You can read about all these and explore more about front-end development.
Thank-you!!!
