Thank you for joining me for the second article in this series. Let’s dive right into the purpose of this blog. In this world, there are those who know how to learn new things and those who don’t. While there are several factors that contribute to this division, there is often one habit that sets the former apart from the latter. They plan out how they will approach a new topic or area of knowledge. Planning ahead helps us to be consistent in our pursuit of our goals, and it allows us to know what actions we need to take when faced with obstacles in our journey.

With that in mind, I will provide a brief overview of how a new individual should approach the topic of system design.

OKAY! OKAY! so how shall we approach it?

I’ve lined up some steps that can make system design somewhat manageable : -

1. Understand the problem: The first step in system design is to understand the problem you’re trying to solve. It’s essential to have a clear understanding of the problem’s requirements, constraints, and objectives. Without this understanding, it’s challenging to design an effective system.
2. Break down the problem: Once you have a clear understanding of the problem, the next step is to break it down into smaller, more manageable components. This process helps you to identify the key components and modules of the system.
3. Identify potential solutions: Once you have broken down the problem into smaller components, the next step is to identify potential solutions to each component. This process involves evaluating different design options, weighing the pros and cons of each approach, and selecting the best solution.
4. Evaluate the trade-offs: Every design decision involves trade-offs, such as performance, cost, scalability, and maintainability. It’s crucial to evaluate these trade-offs carefully to ensure that you select the best solution for the problem at hand.
5. Iterate and refine: System design is an iterative process. It’s rare that you will arrive at the optimal design on the first try. You will need to refine your design iteratively, based on feedback and testing.

After all this you can always try to make flowcharts that can help with visualize the process better. Lastly once you know the concepts do TONS AND TONS of practice. It’s the best way to keep your mind flexible to new problems.

Thanks a lot for reading up to this point! Feel free to point out if I missed anything in the comments. I’ll see you in the next part in this series :)

— Nikunj

As each day passes, the field of software engineering is becoming increasingly complex. The industry is seeing an influx of new research and innovations being introduced at an almost constant rate. As a result, having a solid understanding of system design is an invaluable skill for any software developer to possess.

This series is specifically aimed at developers who are new to the world of system design, and I will strive to provide clear and concise explanations of various essential topics to help you master the art of system design. Throughout this series, you can expect to encounter numerous real-world examples that illustrate the “why” and “how” of each concept. My goal is to present these explanations in a way that is easy for you to understand.

So, without any further ado, let’s dive into the exciting world of system design!

What is System design?

System design refers to the process of planning and defining the architecture, components, modules, interfaces, and data for a system to satisfy specific requirements. The aim of system design is to create a well-structured, efficient, and scalable system that can perform its intended functions reliably and efficiently.

Here’s an example to illustrate the concept of system design. Let’s say you’re working on developing a ride-sharing app. As a system designer, your task would be to define the architecture of the app, the components and modules it would consist of, the interface for the users, the database structure, and the algorithms used to match riders with drivers.

You would start by analyzing the requirements of the app, such as the expected number of users, the geographic area it would cover, the types of rides offered, and the payment methods. Then, you would design the architecture of the app, dividing it into modules such as user management, ride requests, driver matching, and payment processing.

You would then define the interfaces for the users, such as the app’s user interface and the API for communicating with external services. Next, you would determine the database schema and storage requirements for the app, selecting the appropriate database technology based on the expected data volume and access patterns.

Finally, you would design the algorithms and logic required for the app to function, such as the matching algorithm to pair riders with drivers and the payment processing logic. By following this process, you would have created a well-designed system that can efficiently and reliably handle ride-sharing services for millions of users.

Why is System Design important?

Now sure you know what system design is. But why is it so important? Yes we know that many organizations heavily focus on system design expertise when hiring new devs but even so what makes it such an important skill that all good devs must possess it?

Well system design is crucially important for several reasons:

1. Helps in achieving project objectives: Effective system design helps ensure that a system meets its intended objectives, whether it’s automating business processes, serving customers, or managing data. By carefully planning and designing a system, we can ensure that it meets the needs of its intended users.
2. Enables scalability: System design enables systems to be scalable, meaning they can accommodate growth in terms of users, data, and functionality without compromising performance or reliability. Scalability is critical for businesses that are growing rapidly or have fluctuating demand.
3. Enhances system reliability: A well-designed system has fewer bugs and errors, leading to improved system reliability. This is particularly important for systems that must be operational 24/7, such as healthcare systems, financial systems, and other mission-critical applications.
4. Increases efficiency and productivity: A well-designed system can improve efficiency by automating tasks, reducing manual labor, and streamlining workflows. This can result in increased productivity, reduced costs, and improved customer satisfaction.
5. Saves time and resources: System design helps ensure that the right technology and architecture are selected for a system, reducing the risk of costly mistakes or rework. This can save time and resources over the project’s lifecycle.

Overall, system design is essential for delivering successful technology projects that meet the needs of their users and stakeholders while being reliable, scalable, and efficient.

Thanks a lot for reading up to this point! Feel free to point out if I missed anything in the comments. I’ll see you in the next part in this series :)

— Nikunj

React is a popular JavaScript library for building user interfaces. It was created by Facebook and released in 2013 as an open-source project. React allows developers to build reusable UI components and manage their state in a declarative way, which means that developers can focus on building the UI without worrying about the underlying complexity of the application.

By the end of the blog I hope I’ll be able to introduce you to some interesting things about its evolution :)

How does react work?

React works by creating a virtual representation of the UI called the virtual DOM (Document Object Model). This virtual DOM is a lightweight copy of the actual DOM and is kept in memory. When a change is made to the UI, React updates the virtual DOM instead of the actual DOM, which is faster and more efficient.

React uses a component-based architecture, where each component represents a piece of the UI. These components can be composed together to create complex UIs. Each component has a specific set of properties (props) and can have an internal state. The props are used to pass data from the parent component to the child component, while the state is used to manage the component’s internal data.

When a component’s props or state change, React re-renders the component and updates the virtual DOM. React then performs a diffing algorithm to compare the current virtual DOM with the previous virtual DOM, and determines which parts of the actual DOM need to be updated. This process is called reconciliation.

React also provides a way to manage the application’s state using a library such as Redux. This allows developers to keep the application’s state in a central location and makes it easier to manage and update the state.

Overall, React’s virtual DOM, component-based architecture, and efficient reconciliation process make it a powerful and efficient tool for building complex user interfaces.

Well that was a good summary I guess, wasn’t it? Did you get any of it? If yes that’s awesome!! If no then don’t worry. Let’s try to understand this process slowly.

Let’s start from scratch

I believe to understand how a framework works the best way to go on about it is to try and understand how it came to exist. This means that we’ll try to dive a bit into how things worked out before modern frameworks like React, Vue etc. came to exist and why were they needed in the first place?

Let’s go through that evolution in a brief list where we mark important events. Remember to further reference your searches for anything that interests you.

• Tim Berners-Lee wrote the first proposal for the World Wide Web in March 1989 and his second proposal in May 1990. Together with Belgian systems engineer Robert Cailliau, this was formalised as a management proposal in November 1990. This outlined the principal concepts and it defined important terms behind the Web. The document described a “hypertext project” called “WorldWideWeb” in which a “web” of “hypertext documents” could be viewed by “browsers”.
• The WWW design allowed easy access to existing information and an early web page linked to information useful to CERN scientists (e.g. the CERN phone book and guides for using CERN’s central computers). A search facility relied on keywords — there were no search engines in the early years.
• Gopher system was created at the University of Minnesota as a text-based system that used the hierarchical menu structure for navigation
• A team made up of Tim Berners-Lee, Henrik Frystyk Nielsen and Nicola Pellow designed a simple browser called Line Mode Browser (The Libwww Line Mode Browser). This was the second browser ever made for the World Wide Web.
• The World Wide Web (WWW) creator, Tim Berners-Lee launched the world’s first website at http://info.cern.ch/hypertext/WWW/TheProject.html. Unfortunately, the original website has not been preserved until today and the link shows only its 1992 copy.
• The internet pioneer, Tim Berners-Lee, published a document entitled HTML Tags. The document contained a description of the first 18 HTML tags: <title>, <nextid>, <a>, <isindex>, <plaintext>, <listing>, <p>, <h1>…<h6>, <address>, <hp1>, <hp2>…, <dl>, <dt>, <dd>, <ul>, <li>,<menu> and <dir>. The design of the first version of HTML language was influenced by the SGML universal markup language.
• The Hypertext Transfer Protocol (HTTP) is an Internet protocol designed to exchange hypertext documents (images, websites, etc.) between the server and the web browser. The first protocol design, later called HTTP v0.9, was created by Tim Berners-Lee as part of the WWW service specification. The HTTP v0.9 version was extremely simple, using only the GET method with one parameter, i.e. the name of the requested document.
• Jerry Yang and David Filo, two Ph.D. students from Stanford University, created a list of websites entitled “Jerry and David’s Guide to the World Wide Web.” In March 1994, the portal was renamed Yahoo! and the yahoo.com domain was registered on January 18, 1995. Yahoo is an acronym for “Yet Another Hierarchical Officious Oracle”. In March 1995, the Yahoo! search engine was launched as part of the portal.
• Software engineers Dan Connolly and Mark Gaither created the first version of an online HTML validator. The tool served to check the validity of documents, i.e. compare the document code with valid standards and look for potential errors.
• Tim Berners-Lee founded an international organization called World Wide Web Consortium (W3C). The main objective of the consortium is the development of Web standards for the World Wide Web (WWW). For example, W3C developed standards for HTML, XHML, XML, or CSS markup languages. Another aim of the organization is education and development of Web Accessibility Rules (WCAG).
• The Norwegian company Opera Software first introduced to the public a new MultiTorg Opera 1.0 web browser that used MDI (Multiple Document Interface) technology. The use of MDI enabled users to simultaneously open several windows of webpages within the browser. As of version 2.0, the browser’s name was shortened to Opera.
• The Danish-Canadian programmer Rasmus Lerdorf designed the first version of the popular PHP 1.0 scripting language. The term PHP originally stood for Personal Home Page. In 1997, Israeli developers Andi Gutmans and Zeev Suraski rewrote the parser to create the basis for PHP 3. They also changed the name of the language to a recursive acronym for PHP: Hypertext Preprocessor.
• Amazon, founded by Jeff Bezos, launched one of the first online stores on Amazon.com on July 5, 1994. Amazon first began as an online bookstore and later expanded its range of products to CDs, DVDs, software, clothes, toys, etc. In 1998, Amazon purchased the Internet Movie Database (IMDb), and, a year later, the Alexa.com web service. In 2002, Amazon started running a cloud platform called Amazon Web Services (AWS), and as of November 2007, the Amazon Kindle e-reader belongs to one of its major products.
• Microsoft released, as a part of its bonus package, the Microsoft Plus! Internet Jumpstart Kit (later also known as the Internet Connection Wizard) for Windows 95, which included Internet Explorer 1.0. In the original version of Windows 95, a web browser was not available, as Microsoft underestimated the potential of the rapidly developing Internet. The source code for Internet Explorer 1.0 was based on the older Spyglass Mosaic browser for which Microsoft purchased license rights. Internet Explorer 1.0 occupied only 1 MB of disk space and its features were considerably limited compared to other browsers at the time.
• The IETF organization published the RFC 1866 specification for HTML 2.0. HTML 2.0 supported forms, tables, graphics, and a number of new tags, such as <!DOCTYPE>, <head>, <body>, <form>, <img>, <input>, <select>, <strong> and others.
• Brendan Eich of Netscape designed the first version of an object-oriented JavaScript that became widely used to create interactive websites. JavaScript later become the basis for other programming languages, such as ActionScript used in Macromedia Flash. In 1998, JavaScript was standardized by ISO.
• W3C issued official recommendations for language specification, Cascading Style Sheets, level 1 (CSS1). Cascading styles describe how to display elements in documents written in HTML, XHTML, and XML markup languages. The first proposal of “Cascading HTML Style Sheets” was published in October 1994 by a Norwegian programmer Håkon Wium Lie, who was working at CERN under Tim Berners-Lee at the time. In the following months, Bert Bos, a Dutch developer, significantly contributed to CSS1 specification development. In 1997, Håkon Wium Lie and Bert Bos published one of the first cascading style books entitled Cascading style sheets: designing for the Web.
• W3C issued a final recommendation specifying the HTML 3.2 markup language. The original HTML 3.0 version had never become a standard, as it was too complicated, and the leading Microsoft and Netscape developers had a problem implementing it. In the HTML 3.2 specification, among others, new tags appeared, such as <center>, <div>, <font>, <script>, <style>.
• Search Engine Optimization (SEO) is a term indicating a set of techniques and rules that are applied to provide a better position of websites in search results for selected keywords. The first use of the term is not fully documented. According to Danny Sullivan, founder of Search Engine Watch, the term Search Engine Optimization first appeared in May 1997.
• W3C published official recommendations for the HTML 4.0 specification. The HTML 4.0 specification was divided into three variants: Strict, Transitional, and Frameset, and its aim was to separate the HTML semantics and the document layout (formatted using only CSS) into two separate parts. In December 1999, recommendations were published for a revised version, HTML 4.01.
• Netscape Communications Corporation released the source code of the Netscape Communicator 5.0 web browser, which became the beginning of a community-based open source project called Mozilla. In 2003, the Mozilla Foundation, a non-profit organization, was founded on the basis of the original project.
• A pair of Ph.D. students from Stanford University, Larry Page and Sergey Brin, created the Google search engine. Google originally started as a research project whose aim was to find relevant search results using a mathematical algorithm. The algorithm, later called PageRank, analyzed relationships between individual webpages based on their cross-references, thus assessing their importance.
• The W3C consortium released the first draft of the Media Queries specification. The original idea for the Media Queries module appeared in the first draft of the CSS specification by Norwegian programmer Håkon Wium Lie in October 1994. However, this proposal did not become part of CSS1. The CSS3 Media Queries module allows web developers to adjust the rendering of web page content according to various factors such as screen resolution. Currently, Media Queries are one of the basic techniques used in responsive web design.
• Less than two months before the official release of the Windows XP operating system, Microsoft released Internet Explorer 6.0. IE 6 was integrated into Windows XP and was also compatible with previous versions of the system down to Windows 98. Despite a significant amount of security flaws and lack of support for web standards, Internet Explorer 6.0 gained more than 80% market share in 2004. Together with earlier versions of IE 5.0 and IE 5.5, the proportion of Internet Explorer browsers in 2004 was more than 90%.
• The Canadian web designer Dave Shea launched a community gallery of websites called CSS Zen Garden. The project offered a simple HTML template to be downloaded, the graphic design of which could be customized by any web designer, but only with the help of cascading styles and one’s own pictures. The goal of the project was to demonstrate the various possibilities of CSS in creating visual web design. The CSS Zen Garden gallery exhibited hundreds of examples of diverse web design, all based on a single template containing the same HTML code.
• Google Maps for desktop was designed to provide a simplified solution to “get from point A to point B.” Clicking and dragging a map or following step-by-step navigation directions allowed users to explore locations near and far. Months after its launch, Google shared Google Maps API so that maps could be embedded on websites. In December 2005, Portland, Oregon became the first city to use Google Transit Trip Planner, incorporating public transit options and schedules in Google Maps. By the end of 2007, Google Maps incorporated real-time traffic news, interactive panoramas via Street View, and mobile device compatibility.
• Steve Huffman and Alexis Ohanian established the Reddit social network. Users on Reddit submit or share content that is then rated by the community. Content is divided into thematic categories called subreddits. The name Reddit is a play on the phrase “I read it”.
• The software engineer John Resig announced the creation of the jQuery JavaScript library at BarCamp NYC. The jQuery library emphasizes interaction between JavaScript and HTML. jQuery makes it easy for web developers to create recurring events, animations, or manipulate cascading style sheets.
• Hampton Catlin and Natalie Weizenbaum designed a CSS preprocessor called Sass 0.1.0 (Syntactically awesome style sheets). Sass preprocessor is a scripting language interpreted or compiled into cascading styles. To the CSS syntax, Sass adds variables, mixins, selector inheritance, nesting rules, arithmetic operators, and other features.
• Web designer Ethan Marcotte published an article entitled “Responsive Web Design” in the online magazine A List Apart. The author describes a new way of styling HTML documents which allows for an optimization of website content display with regard to resolution or display size. Basic responsive web design techniques include fluid grid, flexible images, and CSS3 module media queries.
• Software engineer Jordan Walke from Facebook announced the creation of the React javascript library (sometimes referred to as React.js or ReactJS) at the JSConf US conference. The open-source React library is designed to make it easier to create user interfaces and UI components for web applications. React can also be used to create single-page or mobile applications. The development and maintenance of the React web framework is currently handled by Facebook along with a large community of independent developers.

Cool! so now we have an idea on what were some of the many important events that took place from the birth of web to creation of React.

Why was React needed though?

React was created to solve the problem of efficiently building large, complex user interfaces for web applications. It was developed by Facebook and released as an open-source project in 2013.

Before React, the predominant approach to building user interfaces involved manually updating the DOM (Document Object Model) to reflect changes in the application’s state. This approach, known as imperative programming, can quickly become complex and difficult to manage in large applications.

React, on the other hand, uses a declarative programming model, which means that developers only need to specify what the UI should look like for a given state, and React takes care of updating the DOM efficiently. React accomplishes this by maintaining a virtual DOM, which allows it to efficiently update only the parts of the UI that have changed.

In addition to its efficient rendering and update capabilities, React also provides a number of other benefits, such as its component-based architecture, which makes it easy to reuse and compose UI elements, and its focus on a unidirectional data flow, which helps to make applications easier to reason about and maintain.

Before React, there were a number of different technologies and frameworks that were used for web development, depending on the needs of the application and the preferences of the developers. Some examples are jQuery, Angular, Backbone.js etc. While each of these technologies had its own strengths and weaknesses, they all shared a focus on providing tools and abstractions to simplify the process of building complex web applications. React emerged as a response to some of the limitations of these existing technologies, with a focus on efficient rendering and a declarative programming model.

As to why Facebook took the initiative to create React, Facebook had a need for a more efficient way to build and maintain large, complex user interfaces for its own web applications, such as Facebook and Instagram. At the time, Facebook was using a combination of Backbone.js and its own custom framework, but these tools were becoming increasingly difficult to manage as the applications grew in complexity. Also Facebook was interested in improving the performance of its web applications, particularly on mobile devices, where slower network speeds and less powerful hardware made UI rendering and updates particularly challenging. React’s focus on efficient rendering and update performance, particularly with its virtual DOM approach, made it a good fit for Facebook’s needs.

In summary, Facebook created React to address its own needs for more efficient UI development and performance, while also hoping to contribute to the broader developer community and standardize UI development practices.

I hope I was able to help other people gain some knowledge from this article :)

— Nikunj