The History of Frontend

4.1 The History of Web Development: From HTML to HTML5 and CSS3

In the early 1990s, the world witnessed the birth of web development thanks to Tim Berners-Lee. He was actually the first frontend developer: he came up with HTML and wrote on it himself, and even created the first browser. A true frontend dev won’t be stopped by the lack of a browser.

Though CSS and JavaScript weren't around yet, so creating websites was simpler. You could say Tim Berners-Lee was the first old-school developer who was into frontend before your JavaScript and CSS came around.

In 1995, the Internet Engineering Task Force (IETF) approved HTML 2.0 as the first official HTML standard. This version included essential tags and attributes that allowed the creation of basic web pages. HTML 2.0 laid the foundation for the future development of web development.

HTML 3.2 and HTML 4.0: Expanding Capabilities

The year 1997 was a significant milestone in the history of HTML. In this year, HTML 3.2 was released, developed by the W3C consortium. This version included support for tables, Java applets, and mathematical formulas, greatly expanding the capabilities of web developers.

Later that year, HTML 4.0 was released, bringing significant improvements. The inclusion of CSS style support, enhanced semantics, and new elements made HTML 4.0 a powerful tool for creating more complex and structured web pages. The introduction of CSS styles allowed developers to separate content from its appearance, which made style management easier and simplified design implementation.

CSS: Revolutionizing Webpage Styling

The first CSS (Cascading Style Sheets) standard was released by W3C in 1996. CSS enabled developers to style HTML documents, separating visual elements from the page structure. CSS1 offered basic styling capabilities for text and background images.

In 1998, CSS2 was introduced, adding new features such as media queries support, absolute and relative positioning, as well as more complex print styles.

CSS3, which began appearing in 2011, introduced a modular architecture. This allowed new features to be implemented gradually, including animations, gradients, transformations, and improved layouts.

HTML5: A New Era of Web Development

HTML5, developed through the combined efforts of WHATWG and W3C, became a significant update and was officially introduced in 2014. HTML5 added support for multimedia (video and audio), new elements for enhanced semantics (such as <article>,<section>,<header>,<footer>), improved formats for web forms, and new APIs for graphics and multithreading.

HTML5 greatly expanded the capabilities of web developers, allowing for the creation of more interactive and dynamic web applications. Support for multimedia elements and new APIs made web applications more powerful and functional.

4.2 From jQuery to Angular and React

The faster the internet got, the heavier web pages became. They had more and more CSS and JavaScript. To simplify the writing process, various libraries began to be used. One of the most popular became jQuery.

jQuery: Simplifying JavaScript Work

jQuery was created by John Resig and released in January 2006 at the BarCamp conference in New York. The goal of jQuery was to simplify interaction with HTML documents, event handling, animations, and AJAX interactions for rapid web development.

jQuery quickly gained popularity thanks to its simple and intuitive methods that hid the complexities of working with JavaScript and cross-browser issues. Its main functions include:

• Selectors that made it easy to find and manipulate DOM elements
• Simple event handling
• Animations and effects
• Integration with Ajax for creating interactive web pages

jQuery changed the approach to web development, making it more accessible and convenient for developers.

Angular: Introducing Dynamic Web Applications

Another response to the increasing complexity of web pages was the emergence of the Angular framework. AngularJS was first introduced by Google in October 2010. The project was created by Miško Hevery and Adam Abrons to simplify the development of dynamic single-page applications (SPA).

AngularJS provided powerful tools for client-side development, including:

• Declarative data binding through directives
• Built-in services for working with HTTP requests
• Two-way data binding that allows the view to be automatically updated when the data model changes
• Modularity and testability of code

In 2016, Google introduced a fully reworked version of Angular (Angular 2 and above), which became a platform for developing scalable and high-performance web applications using TypeScript.

React: Revolutionizing UI Rendering

React was created by Jordan Walke at Facebook and first released in March 2013. React was Facebook's response to the need for improved performance and support for complex user interfaces.

React introduced a new approach to user interface development based on components and the virtual DOM:

• Component-based architecture, enabling the creation of reusable and isolated components
• Virtual DOM that optimizes UI updates, making them faster and more efficient
• One-way data binding, simplifying debugging and application state management

React quickly gained popularity and became the foundation for many modern web applications due to its performance and flexibility. It also became the basis for other libraries and frameworks such as React Native for mobile applications.

These three technologies — jQuery, Angular, and React — played key roles in the evolution of web development, each bringing unique approaches and tools that greatly simplified the creation of modern web applications.

4.3 Node.js, Electron, React Native

HTML5, CSS3, JavaScript 2016 became so powerful that the Web spilled beyond the browser and became a full-fledged Frontend Fullstack technology. And backend felt it first.

Node.js: Capturing the Backend

Node.js was created by Ryan Dahl and first released in May 2009. The main goal of Node.js is to provide an environment for JavaScript outside the browser, allowing JavaScript to be used for server-side development. Node.js is built on Google’s V8 engine, ensuring high performance and execution speed.

Node.js uses non-blocking I/O (input/output), allowing it to handle many connections simultaneously without blocking the main execution thread. It also boasts a vast ecosystem of modules available through npm (Node Package Manager), simplifying development and integration of various libraries and tools. Thanks to the V8 engine, Node.js ensures fast and efficient request processing.

Electron: Capturing Desktops

Crafting a cool UI for desktops is quite a task, and here you've got HTML5+CSS3 at your disposal. If only it could be used… So, developers came up with a hack: your application opens a main window, this window embeds a browser (the WebView component), and in this browser, code written in HTML5, CSS3 + JavaScript is loaded.

The Electron library, initially known as Atom Shell, was created by GitHub for the Atom text editor. The first version of Electron was released in July 2013. Electron’s goal is to enable developers to create desktop applications using web technologies such as HTML, CSS, and JavaScript.

Electron allows for the creation of applications that run on Windows, macOS, and Linux with a single code base. Electron combines the capabilities of web technologies and the power of Node.js, enabling access to the file system and other system resources. Developers can use existing web frameworks and libraries to create interfaces and functionality.

React Native: Mobile Apps

React Native was developed by Facebook and first presented in March 2015. React Native’s goal is to provide the ability to create native mobile applications for iOS and Android using JavaScript and React.

React Native uses native components, ensuring performance comparable to native applications. Meanwhile, developers can write code that works on both iOS and Android, significantly simplifying development and reducing maintenance time.

It's the same deal as with Electron: the mobile application's entire window opens a WebView, where the "site" written in HTML5, CSS3, and JS loads. Everyone expected mobile apps to oust websites on phones, but the opposite happened: sites began to push out native apps.

Today, a Frontend Fullstack Software Engineer is the most sought-after IT profession in the world. So choosing to become a Frontend developer is a smart and forward-thinking decision!