Front-end Technologies | A Software Tester should be aware of…

Recently in an interview, there was a question about the front-end technologies you are aware of. You might think why this question for a tester? Or why a tester needs to know about the technology stack? Simple – We all are part of the technology as much as developers are a part of quality assurance. If developers need to know the basics of unit testing, test scripts, automation – then why a tester should not be aware of the recent front-end technologies? Additionally, it is when you know about the technology stack that you can provide valuable inputs from overall product experience perspective. No knowledge is enough, and every knowledge brings out the best in you – it eventually helps. So stop fretting about the fact that why Software Testers are being asked technical questions about programming and tech-stack. Instead, let’s divert our attention to the topic in discussion – different Front-end technologies.

Top 10 Front-end Technologies

This article covers 10 of the most popular front-end technologies which everybody in the technology business should be aware of. So next time you go for an interview or join a new project – always tend to learn different technologies that build a product. Though QA is one of the part, but it makes all the sense to know about the complete product & technology that you are about to deliver. Quickly lets jump on to the top ten front-end technologies arranged chronologically,

  1. HTML (1990)

Provides building blocks to all websites, particularly text and images.

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.

  • 1995: HTML 2.0 was the first standard HTML specification.
  • 1999: HTML 4.01 was a major version of HTML.
  • 2012: HTML-5 version which is an extension to HTML 4.01.
  1. JavaScript (1995)

A web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

JavaScript, often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. JavaScript is a programming language that adds interactivity to your website (for example: games, responses when buttons are pressed or data entered in forms, dynamic styling, and animation).

  1. Flash (1995/96)

A multimedia and software platform used for authoring of vector graphics, animation, games and rich internet applications (rias) which can be viewed, played and executed in adobe flash player.

Flash is a software technology for creating and managing interactive multimedia web applications like web sites, animations, movies, games, advertisement banners and more. It gives you almost unlimited options in the design of your pages. Web browsers cannot render Flash media themselves. Instead, Flash is primarily rendered via the proprietary, but freely available, Adobe Flash Player. Flash is ubiquitous on the Web, both because of its speed (vector-based animations, which can adapt to different display sizes and resolutions, play as they download) and for the smooth way it renders graphics. Flash files, unlike animated but rasterized GIF and JPEG, are compact, efficient, and designed for optimized delivery.

  1. VBScript (1996)

Used to give functionality and interaction to web pages. Can also be used to create applications that run directly on a workstation running Microsoft Windows.

Microsoft VBScript (Visual Basic Script) is a general-purpose, lightweight and active scripting language developed by Microsoft that is modelled on Visual Basic. VBScript was created to allow web page developers the ability to create dynamic web pages for their viewers who used Internet Explorer. With HTML, not a lot can be done to make a web page interactive, but VBScript unlocked many tools like: the ability to print the current date and time, access to the web servers file system, and allow advanced web programmers to develop web applications. Nowadays, VBScript is the primary scripting language for Quick Test Professional (QTP), which is a test automation tool.

  1. Ajax (1999)

Gives actions within applications for better responsiveness. Allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script. Using AJAX, you can update a web page without reloading the page, request/receive data from a server after the page has loaded and send data to a server in the background. A user can continue to use the application while the client program requests information from the server in the background.

  1. JQuery (2006)

Make it much easier to use JavaScript on your website. jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

JQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. JQuery’s syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. JQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. It simplifies HTML document traversing, event handling, animating, and Ajax interactions for Rapid Web Development.

  1. Node.Js (2009)

For developing server-side and networking applications.

Node.js is an open-source, cross-platform JavaScript run-time environment for executing JavaScript code server-side. Historically, JavaScript was used primarily for client-side scripting, in which scripts written in JavaScript are embedded in a webpage’s HTML, to be run client-side by a JavaScript engine in the user’s web browser. Node.js enables JavaScript to be used for server-side scripting, and runs scripts server-side to produce dynamic web page content before the page is sent to the user’s web browser. Consequently, Node.js has become one of the foundational elements of the “JavaScript everywhere” paradigm, allowing web application development to unify around a single programming language, rather than rely on a different language for writing server side scripts.

  1. AngularJS (2010)

Built for dynamic web apps. With AngularJS, use HTML as the template language and it allows for the extension of HTML’s syntax to convey the application’s components effortlessly.

AngularJS is a JavaScript-based open-source front-end web application framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. It can be added to an HTML page with a <script> tag. It extends HTML attributes with Directives, and binds data to HTML with Expressions. The framework works by first reading the HTML page, which has additional custom tag attributes embedded into it. Angular interprets those attributes as directives to bind input or output parts of the page to a model that is represented by standard JavaScript variables. The values of those JavaScript variables can be manually set within the code, or retrieved from static or dynamic JSON resources.

  1. Responsive Web Design (2010)

A web design approach aimed at crafting sites to provide an optimal viewing experience – easy reading and navigation with a minimum of resizing.

Responsive web design (RWD) is an approach to web design which makes web pages respond to the user’s behavior and environment based on screen size, platform and orientation, i.e. render well on a variety of devices and window or screen sizes. A site designed with RWD adapts the layout to the viewing environment by using a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. Responsive web design has become more important as the amount of mobile traffic now accounts for more than half of total internet traffic.

  1. ReactJS (2013)

Create large web applications which can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in application.

React is a front-end JavaScript library developed by Facebook. React allows developers to create large web-applications that use data and can change over time without reloading the page. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. It aims primarily to provide speed, simplicity, and scalability. React processes only user interfaces in applications.

Front-end Technologies | You should know

With this we conclude out top 10 front-end technologies list. Hope this article helped you get an overview about the old, ever-green and trending front-end technologies. Don’t just read this article, the next step would be to inquire about the technologies being used by your current project and be aware. Also note that this list is by no means exhaustive. If your project uses some other, please mention it in comments and we will try to update this list of front-end technologies. Thanks for reading & don’t forget to share…



Leave a Reply

Your email address will not be published.