At DataGrail, we believe in a world where people can be in control of their privacy and identity. We're developing the privacy platform modern brands rely on to build customer trust and transparency. We untangle the complexity of data privacy and help brands build privacy programs that work, giving them an easy-to-use platform to automate and scale privacy, and stay compliant with regulations like GDPR, CCPA, and CPRA. With 2000+ pre-built connections with popular apps and infrastructure, the DataGrail Integrations Network is the first of its kind to detect shadow IT that may contain personal data, ensuring the most accurate data discovery. DataGrail services millions of consumers, through companies like Salesforce, Overstock, Restoration Hardware, NETGEAR, and Outreach, and has 4.8/5 stars on G2. DataGrail is backed by leading VCs and strategic investors, including Operator Collective and Okta Ventures. Visit www.datagrail.io to learn more.

DataGrail

Datagrids have been one of the most common visual software elements since the advent of UIs themselves. They appeal to the instinct that drives all of us to take in and understand as much data as possible, as quickly as possible. Datagrids are more useful than ever, not only for displaying data but also for editing it. With automatic conveniences like sorting and autocomplete and advanced features like custom formulas, Microsoft Excel would be the natural choice for most users. Users choose excel because it is familiar. Although Excel has become the most common example of software using a datagrid, the paradigm has increased throughout the software field. As web apps continue to replace the traditional native applications we're used to, it only makes sense that datagrids would make their way to web app UIs. Plenty of JavaScript datagrids exist in the market: open-source, third-party, and homegrown. Which to choose? In another one of our blogs, we discussed what makes datagrids so useful as UI elements and why FlexGrid is the best Angular datagrid. You can see Wijmo's in action and learn more about it through our sample. Angular DataGrid Angular datagrid overview You can get your copy of Wijmo from , from our , or by . NPM CDN downloading it from our site All this sounds amazing, right? Let's put FlexGrid to work by building a customizable Angular datagrid in minutes. We'll use the following to demonstrate how to use FlexGrid with Angular, Google's web framework: application Angular Sample App. We use to create the sample, so it is easy to maintain and share. Stackblitz Let's get started! Download Now! How to Create the Angular App To create your copy of the app, follow these steps: Open Stackblitz Click the "Angular/TypeScript" button at the top of the screen Add Wijmo to the project by typing "@grapecity/wijmo.all" into the dependencies list How to Import the Required Modules In the Angular version of the app, the logic is contained within the app.component.ts file, and the markup is contained within the app.component.html file. We'll start by importing the required classes and styles from Angular and Wijmo: app.module.ts import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { WjGridModule } from '@grapecity/wijmo.angular2.grid';
import { WjGridFilterModule } from '@grapecity/wijmo.angular2.grid.filter';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    WjGridModule,
    WjGridFilterModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [
    AppComponent
  ]
})
export class AppModule { } app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo'; styles.css @import "wijmo/styles/themes/wijmo.theme.material.css"; Notice how, in addition to the modules, the code imports some CSS. In this case, we chose Wijmo's material theme, one of several included with Wijmo. Styling the App To style the app, edit the styles.css file as follows: body {
  font-family: Lato, Arial, Helvetica;
}
.wj-flexgrid { /* limit the grid's width and height */
  max-height: 300px;
  max-width: 32em;
} Our data source will be stored within our file, whichis defined as follows: app.component.ts import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as WjCore from '@grapecity/wijmo';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  // create our CollectionView
  data = new WjCore.CollectionView([], {
    groupDescriptions: ['make'] // group my make
  });

  // and populate it from the JSON data source
  // the data is stored in a https://jsonbin.io/ public repo
  constructor(private http: HttpClient) {
    this.http.get('https://api.jsonbin.io/b/5f0765bc5d4af74b01295f26')
      .subscribe(data => {
        this.data.sourceCollection = data;
      });
  }
} The file exposes the data through its "data" property, a CollectionView grouped by make. The data is loaded asynchronously after the component is constructed. app.component.ts When the data is received, it is assigned to the CollectionView's sourceCollection property and becomes available to the application. How to Visualize the Data in Angular The final step is implementing the markup inside of the file to render the Angular DataGrid: app.component.html <h1>
  2021 Sedans (Angular)
</h1>
<p>
  Sort by model and price by clicking the column headers.
  Filter by value or condition by clicking the filter icons
  in the column headers.
  Collapse and expand makes to see all the models.
  Select one or more models with the mouse or keyboard and
  copy your selection to the clipboard.</p>
<p>
  Showing
  <b>{{data.items.length}}</b> models from
  <b>{{data.groups.length}}</b> makes.
</p>
<wj-flex-grid [allowResizing]="'None'" [showAlternatingRows]="false" [isReadOnly]="true" [selectionMode]="'ListBox'"
  [headersVisibility]="'Column'" [itemsSource]="data">
  <wj-flex-grid-column [binding]="'make'" [header]="'Make'" [width]="'*'" [visible]="false"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'model'" [header]="'Model'" [width]="'*'"></wj-flex-grid-column>
  <wj-flex-grid-column [binding]="'price'" [header]="'Price'" [format]="'c0'" [aggregate]="'Avg'" [width]="'.5*'"></wj-flex-grid-column>
  <wj-flex-grid-filter></wj-flex-grid-filter>
</wj-flex-grid> The app header contains a short app description and a summary of how many models and makes are displayed. The summary counts are updated automatically when the user filters the data. The header is followed by the "FlexGrid" element, which initializes the grid's properties, including the , the columns to display, and their properties. itemsSource The column properties include the binding, header, format, and width for each column. Note that the property on the price column causes the grid to show the average price for each make in the group headers. aggregate The "FlexGrid" element contains a "FlexGridFilter" element, which adds the column filter so that users may filter the grid data by model and price. We've also included some data bindings connected to the CollectionView, which we use to show how many makes and models are being displayed in the FlexGrid, based on the filters the user has applied. How to Run the Application That's it! . The Angular version of the "2021 Sedans" app is ready Happy coding! If you have questions or comments, be sure to enter them below. Download Now!

Quickly Create an Angular Datagrid in Your Web Application

( ) is a protocol used to secure datagram-based communications. It's based on the stream-focused Transport Layer Security ( ), providing a similar level of security. As a datagram protocol, DTLS doesn't guarantee the order of message delivery, or even that messages will be delivered at all. However, DTLS gains the benefits of datagram protocols, too; in particular, the lower overhead and reduced latency. Datagram Transport Layer Security DTLS TLS These features are especially useful for one of the most common areas in which DTLS comes into play: . All of the WebRTC related protocols are required to encrypt their communications using DTLS; this includes , , and . WebRTC SCTP SRTP STUN Learn more General knowledge on Wikipedia Datagram Transport Layer Security Specifications RFC 6347: Datagram Transport Layer Security Version 1.2 Datagram Transport Layer Security Protocol Version 1.3 draft specification Related specifications RFC 5763: Framework for Establishing a Secure Real-time Transport Protocol (SRTP) Security Context Using DTLS RFC 5764: DTLS Extension to Establish Keys for the Secure Real-time Transport Protocol (SRTP) RFC 6083: DTLS for Stream Control Transmission Protocol (SCTP) RFC 8261: Datagram Transport Layer Security (DTLS) Encapsulation of SCTP Packets RFC 7350: Datagram Transport Layer Security (DTLS) as Transport for Session Traversal Utilities for NAT (STUN) RFC 7925: TLS / DTLS Profiles for the Internet of Things View Previous Terms: Block cipher mode of operation Certificate authority Challenge-response authentication Cipher Cipher suite Ciphertext CORS CORS-safelisted request header CORS-safelisted response header Cross-site scripting Cryptanalysis Cryptographic hash function Cryptography CSP CSRF Decryption Digital certificate Encryption Forbidden header name Forbidden response header name Hash HMAC HPKP HSTS HTTPS Key MitM OWASP Preflight request Public-key cryptography Reporting directive Robots.txt Same-origin policy Session Hijacking SQL Injection Symmetric-key cryptography TOFU Transport Layer Security (TLS) Credits Source: https://developer.mozilla.org/en-US/docs/Glossary/DTLS Published under license Open CC Attribution ShareAlike 3.0

Glossary of Security Terms: Datagram Transport Layer Security

The OSI Model, which stands for Open Systems Interconnection Model, is a conceptual framework used to understand and standardize the functions of a telecommunication or computing system without regard to its underlying internal structure and technology. Developed by the International Organization for Standardization (ISO) in 1978, the model is divided into seven layers, each specifying particular network functions. The purpose of the OSI model is to guide product developers and promote interoperability of networking products and software through a common set of guidelines. Here are the seven layers of the OSI Model, from the lowest layer to the highest: This layer deals with the physical connection between devices and the transmission and reception of raw bit streams over a physical medium. It includes specifications for cables, connectors, and electrical signals. Physical Layer (Layer 1): This layer is responsible for node-to-node data transfer—a link between two directly connected nodes. It also handles error correction from the physical layer, frame synchronization, and flow control. Ethernet and PPP are examples of data link layer protocols. Data Link Layer (Layer 2): The network layer is responsible for packet forwarding including routing through intermediate routers, as it provides the means of transferring variable-length network packets from a source to a destination through one or more networks. IP (Internet Protocol) is an example of a network layer protocol. Network Layer (Layer 3): This layer provides transparent transfer of data between end systems, or hosts, and is responsible for end-to-end error recovery and flow control. It ensures complete data transfer. TCP (Transmission Control Protocol) and UDP (User Datagram Protocol) are examples of transport layer protocols. Transport Layer (Layer 4): The session layer establishes, manages, and terminates connections between applications. It sets up, coordinates, and terminates conversations, exchanges, and dialogues between the applications at each end. It deals with session and connection coordination. Session Layer (Layer 5): This layer translates data between the application layer and the network. It is responsible for translation, compression, and encryption/decryption. It ensures that data is in a usable format and is where data encryption occurs. Presentation Layer (Layer 6): The application layer is the closest layer to the end user, and it interacts with the software application that implements a communicating component. Thus, both the application layer and the user interact directly only with software applications. This layer provides network services to end-users and provides protocols that applications use to exchange data, such as HTTP for web browsing, SMTP for email, and FTP for file transfer. Application Layer (Layer 7):

What Is the OSI Model?

OSI মডেল কি?

Was ist das OSI-Modell?

¿Qué es el modelo OSI?

Qu'est-ce que le modèle OSI ?

OSI मॉडल क्या है?

OSIモデルとは何ですか?

OSI 모델이란 무엇입니까?

Qual é o modelo OSI?

Что такое модель OSI?

OSI Modeli Nedir?

Mô hình OSI là gì?

什么是OSI模型？

90 Stories To Learn About Mozilla

121 Stories To Learn About Data Protection

This is a continuation of a series of articles in which I briefly cover the main points of a specific topic in system architecture design. The first article can be read and the full guide you can find on my . here github Any complex system is a mosaic of numerous components, each with its specific function. These components don't operate in isolation; they constantly interact over a network, exchanging data and commands. Understanding the basics of these interactions is crucial. One must understand how components communicate over the network to comprehend the system's overall performance and resilience truly. Types Networks can be divided into four types based on size, architecture, range, and function: : Designed for personal use, usually within a person's range. It might connect devices like a computer, smartphone, and smartwatch, often Bluetooth. Personal Area Network (PAN) ): Connects devices within a limited area, such as a home, office, or school. It's typically used for connecting computers and sharing resources like printers or internet connections within a confined geographical area. Local Area Network (LAN Covers a larger area than a LAN but is smaller than a WAN, typically spanning a city or a large campus. Local service providers often use it to offer connections to businesses and homes in a town. Metropolitan Area Network (MAN): : Spans a larger geographical area, often connecting multiple LANs. The internet is the most prominent example of a WAN, linking computers and networks worldwide. Wide Area Network (WAN) Components Building and maintaining networks would be impossible without specialized hardware devices: : Physical cables (like Ethernet) provide a wired connection between devices, while wireless access points allow devices to connect to the network without physical cables, using Wi-Fi or other wireless technologies. Cable & Wireless Access Point : These are hardware components, often cards inserted into computers or other devices, that allow them to connect to a network. Network Interface Card (NIC) : A network device that amplifies or regenerates a signal, allowing it to travel longer distances without degradation. It's primarily used in wired and wireless networks to extend the range of communication and ensure data integrity over extended distances. Repeater A bridge operates at the data link layer. A bridge is a repeater, adding the functionality of filtering content by reading the MAC addresses of the source and destination. It is also used for interconnecting two LANs working on the same protocol. Bridge: : These basic networking devices connect multiple devices in a LAN, acting as a single network segment. Hub cannot filter data, so data packets are sent to all connected devices. Hub : Devices in a network that connect other devices. Unlike hubs, which broadcast the same data to all devices, switches are more intelligent, directing data only to the device that needs it. Switches : Devices that forward data packets between computer networks. They determine the best path for data transfer. Routers typically connect LANs and WANs and have a dynamically updating routing table based on which they make decisions on routing the data packets. Routers Topologies Network topology is a structural layout that dictates how different network devices and components are connected and how data is transmitted. The choice of topology significantly impacts the network's performance, scalability, and fault tolerance. It is categorized into two main types: : Describes the physical layout of devices, cables, and other network components. It represents how network devices are physically connected. Physical : Describes the data flow within the network, regardless of its physical design. It represents how data is transmitted between network devices. Logical The following types of topologies are distinguished: Point-to-Point A direct connection between two nodes or endpoints. This is the simplest form of network topology. : Advantages The direct and dedicated link ensures high-speed data transfer. Simple configuration and setup. Reliable communication since there are only two nodes involved. : Disadvantages It is not scalable for larger networks as it would require a dedicated line for every pair of devices. It can be more expensive in scenarios where multiple connections are needed due to the need for individual links. Bus All devices share a single communication line. Data sent by a device is available to all other devices, but only the intended recipient accepts and processes that data. : Advantages Easy to implement for small networks. Cost-effective due to minimal cabling. : Disadvantages Performance degrades as more devices are added or network traffic increases. A single cable failure can bring down the entire network. Ring Each device is connected to two other devices, forming a ring. Data travels in one or sometimes two directions. : Advantages It can handle larger data loads than bus topology. : Disadvantages A failure in one cable or device can take down the entire network. More difficult to install and reconfigure. Star All devices are connected to a central device (e.g., a switch or hub). : Advantages Easy to install and manage. Failure in one cable doesn't affect other devices. : Disadvantages If the central device fails, the whole network is inoperable. Requires more cable than bus topology. Tree Hybrid topology that combines characteristics of star and bus topologies. Groups of star-configured networks are connected to a linear bus backbone. : Advantages Hierarchical and scalable. Grouping of devices makes it easy to manage. : Disadvantages Failure in the backbone will cause division in the network. More cabling is required than other topologies. Mesh Devices are interconnected. Every device is connected to every other device. : Advantages Provides high redundancy and reliability. Data can be transmitted from multiple devices simultaneously. : Disadvantages It requires more cabling, making it expensive. Complex to install and configure. Hybrid Combination of two or more topologies. : Advantages Flexible and reliable as it inherits the advantages of its component topologies. Scalable. : Disadvantages Complex design. It can be more expensive due to multiple configurations. Protocols Network protocols are rules or standards that define how data is transmitted and received over a network. These protocols ensure that devices on a network (or across multiple networks) can communicate with each other in a standardized way. Common Protocols : The fundamental suite of protocols that powers the Internet. TCP ensures data is sent correctly, and IP provides data is sent to the correct place. TCP/IP : A connectionless protocol that, unlike TCP, doesn't establish a connection before sending data and doesn't guarantee the order of data packets. UDP Protocols used for transferring web pages on the Internet. HTTPS includes security measures to encrypt data. HTTP, HTTPS: : A protocol designed to transfer files over a network. FTP : Used for email transmission. SMTP : Used for retrieving and storing emails from a mail server. IMAP : Used for retrieving emails from a mail server. POP3 : Used for error reporting and diagnostics related to IP processing. ICMP : Translates domain names to IP addresses, allowing users to access websites using human-readable names. DNS : Assigns IP addresses dynamically to devices on a network. DHCP : Cryptographic protocols are designed to provide secure communication over a computer network. SSL/TLS : Point-to-Point Protocol (PPP) is basically an asymmetric protocol suite for various connections or links without framing. PPP : Defines how devices on a local area network (LAN) communicate. It operates at both the physical layer and the data link layer of the OSI model. Ethernet OSI and TCP/IP Models The OSI and TCP/IP are two primary models that serve as guiding frameworks that describe the processes involved in data communication over a network. OSI Model Protocol Data Format TCP/IP Model 7 Application HTTP, DNS, SMTP, FTP Data Application 6 Presentation TLS, SSL Data Application 5 Session Sockets Data Application 4 Transport TCP, UDP Segment, Packet Transport 3 Network IP, ICMP, IPsec IP Datagram Internet 2 Data Link PPP, Ethernet Frame Network Interface 1 Physical Fiber, Wireless Bit Network Interface The (Open Systems Interconnection) model is a conceptual framework for understanding network interactions in seven layers. Each layer serves a specific function: OSI : Deals with the physical connection between devices. It defines the hardware elements, such as cables, switches, and NICs. Physical : Responsible for creating a reliable link between two directly connected nodes, handling errors, and regulating data flow. Data Link : Determines the best path to transfer data from the source to the destination across the network. Network : Ensures end-to-end communication, data flow control, and error correction. Transport : Establishes, maintains, and terminates application connections at both ends. Session : Translates data between the application and transport layers, ensuring data is readable. Presentation : Directly interacts with end-user applications, ensuring effective communication between software and lower layers of the OSI model. Application The is a more concise model used predominantly in the modern internet, which simplifies the OSI layers into four categories: TCP/IP : Combines the functions of OSI's Physical and Data Link layers, focusing on how data is sent/received on a network medium. Network Interface : Corresponds to the Network layer in OSI, handling data routing, IP addressing, and packet forwarding. Internet : Similar to OSI's Transport layer, ensuring data reaches the correct application and is transmitted reliably (TCP) or quickly (UDP). Transport : Merges the functions of OSI's Session, Presentation, and Application layers, dealing with end-user application processes. Application Security In system design, ensuring robust network security is paramount to protect sensitive data and maintain the trust of users and stakeholders, ensure business continuity, and meet regulatory requirements. Common Threats and Vulnerabilities : Malicious attempts to disrupt the normal traffic of a targeted server, service, or network by overwhelming it with a flood of internet traffic. DDoS Attacks : Software designed to disrupt, damage, or gain unauthorized access to a computer system. This includes viruses, worms, spyware, and ransomware. Malware : Attackers secretly intercept and relay communication between two parties. They can eavesdrop or impersonate one of the parties, deceiving the other. Man-in-the-Middle Attacks : Threats originating from within the organization, such as employees, former employees, or partners with inside information concerning security practices. Insider Threats : Bugs or weaknesses in software can be exploited to gain unauthorized access or disrupt services. Examples include buffer overflows and unhandled exceptions. Software Flaws : Physical components can have vulnerabilities, like firmware that can be tampered with or backdoors installed by manufacturers. Hardware Weaknesses : Devices like routers, switches, or firewalls that are not correctly configured can expose the network to various threats. Misconfigured Network Devices : Insufficient password policies, lack of multi-factor authentication, or lax access controls can allow unauthorized access. Weak Authentication and Authorization : Data that isn't encrypted can be easily intercepted and read as it travels across a network. Unencrypted Data : Systems that are no longer supported or haven't been updated can have known vulnerabilities that are easy to exploit. Outdated Systems : This refers to physical access points where an attacker could plug into the network or access servers directly. Physical Vulnerabilities Best Practices for Ensuring Network Security : Deploy hardware and software firewalls to monitor and control incoming and outgoing network traffic based on security policies. Firewalls : Use encryption protocols, especially for sensitive data, both in transit (like SSL/TLS for web traffic) and at rest (like database encryption). Encryption : Keep all systems, software, and applications updated to patch vulnerabilities. Regular Updates : Implement MFA to add a layer of security, ensuring that users provide two or more verification factors to gain access. Multi-Factor Authentication (MFA) : Use network monitoring tools to monitor the network for unusual activities or unauthorized access continuously. Network Monitoring : Educate employees and users about the importance of security and how to recognize potential threats. Security Awareness Training : Limits the spread of threats within the network and provides better control over data access. Network Segmentation : Ensures data availability and business continuity in case of breaches or failures. Backup and Disaster Recovery : Physical access to network devices can lead to breaches. Physical Security Conclusion Grasping the fundamentals of networking, from the intricacies of topologies to the nuances of basic protocols, is not merely an academic exercise—it's crucial for creating robust and efficient systems. A solid grounding in network principles ensures systems communicate seamlessly, adapt resiliently, and scale efficiently.

The System Design Cheat Sheet: Networks

সিস্টেম ডিজাইন চিট শীট: নেটওয়ার্ক

Der Spickzettel zum Systemdesign: Netzwerke

La hoja de referencia para el diseño de sistemas: redes

L'aide-mémoire pour la conception de systèmes : réseaux

सिस्टम डिज़ाइन चीट शीट: नेटवर्क

システム設計のチートシート: ネットワーク

시스템 설계 치트 시트: 네트워크

A folha de referências do design do sistema: redes

Памятка по проектированию системы: Сети

Sistem Tasarımı Hile Sayfası: Ağlar

Bảng tóm tắt về thiết kế hệ thống: Mạng

系统设计备忘单：网络

I'd like to share my approach to architecting a quite large front-end application consisting of dozens of pages and hundreds of components, implemented in parallel by a dozen front-end developers, highlighting the folder structure I'm using to streamline the development in the team. The main technologies used are TS, React, React Router, Tanstack Query, styled components, but the structure is technology agnostic. I prefer to keep the folder structure as flat as possible to reduce the learning curve for newly added developers App folders structure: /elements
/components
/features
/layouts
/pages
...
App.tsx
router.tsx /elements Basic building blocks, typically having minimal internal state, usually enhanced basic components from the UI library. Examples: /elements
    /Textbox
    /Tooltip
    /MultiSelectCheckmarks /components Blocks composed with multiple . Typically, it does not have API access but can have complex internal states or access to global contexts. /elements Examples: /components
    /DataGrid
    /List
    /Modal
    /ErrorState /features Set of components grouped by domain, typically constructed on top of and , with data access, with shared API hooks /components /elements Examples: /features
    /Users
        /UsersList
        /UserEditModal
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
        /ProjectEditModal
        /ProjectHeader
        /ProjectSidebar
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts /layouts Templates shared between multiple pages, say pages in some area of the app shares footer and sidebar. Examples: /layouts
    /ProjectLayout
    /AdminLayout
    /StandalonePreviewLayout /pages Actual pages connected to routes. Composed with layout and components imported from and folders features components Examples: /pages
    /AdminDashboard
    /AdminUsers
    /Project
    /ProjectAddTask Certain folder like , , can be added to top or individual components or feature level on demand /hooks /contexts /utils Individual elements/components/pages folder structure: Individual components follow the agreed file structure to simplify search and maintainability: /ComponentName
    index.ts
    ComponentName.tsx
    ComponentName.styles.tsx
    ComponentName.types.ts
    ComponentName.tests.tsx
    ComponentName.stories.tsx Where: - re-export to shorten imports index.ts - component code ComponentName.tsx - styled components ComponentName.styles.tsx - TS types used more than once, or placed in separate file to avoid circular dependencies ComponentName.types.ts - unit tests ComponentName.test.tsx - storybook stories for component ComponentName.stories.tsx Plus files typically found in : /features - API hooks used amount the components included into the feature FeatureName.api.ts - mocks for API call to use in tests and storybook stories FeatureName.api.mocks.ts - TS types used amount the components included into the feature FeatureName.types.ts I'm using prefix everywhere to ease search in IDE and logs, and have the full context of the file when looking at opened files tabs in IDE. ComponentName Certain files can be omitted as I'm putting things inline when if makes sense and extracting out certain styles components and styles when they're used more than once and it makes sense to achieve better code structure Conclusion I've found the above folders and file structure quite usable in large enough frontend applications from my almost 15 years of development experience. Glad to hear your feedback in the comments! Putting the expanded structure example below: /elements
    /Textbox
        index.ts
        Textbox.tsx
        Textbox.styles.tsx
        Textbox.types.ts
        Textbox.tests.tsx
        Textbox.stories.tsx
/features
    /Users
        /UsersList
            index.ts
            UsersList.tsx
            UsersList.styles.tsx
            UsersList.types.ts
            UsersList.tests.tsx
            UsersList.stories.tsx
        Users.api.ts
        Users.api.mocks.ts
        Users.types.ts
    /Projects
        /ProjectsDataGrid
            index.ts
            ProjectsDataGrid.tsx
            ProjectsDataGrid.styles.tsx
            ProjectsDataGrid.types.ts
            ProjectsDataGrid.tests.tsx
            ProjectsDataGrid.stories.tsx
        Projects.api.ts
        Projects.api.mocks.ts
        Projects.types.ts
/layouts
    /ProjectLayout
        index.ts
        ProjectLayout.tsx
        ProjectLayout.styles.tsx
        ProjectLayout.types.ts
        ProjectLayout.tests.tsx
        ProjectLayout.stories.tsx
/pages
    /Project
        index.ts
        Project.tsx
        Project.styles.tsx
        Project.types.ts
        Project.tests.tsx
        Project.stories.tsx
App.tsx
router.tsx

Developing An Easy-to-Use File Structure for an Extensive React Frontend Application

Speed. Performance. Responsiveness. These ideals reign supreme in the world of web development, especially JavaScript and . A slow or janky website is the hallmark of an amateur, while a slick, optimized experience delights users and sets professionals apart. Nodejs But creating truly high-performance web apps is littered with pitfalls. Mistakes abound that can drag down the pace of your without you even realizing it. Tiny oversights that bloat your code and surreptitiously sap speed away bit by bit. JavaScript You vigilantly minify your code and leverage caching...yet your site still feels oddly sluggish at times. The UI stutters during scrolling or when buttons are clicked. Pages take eons to load. What's going on? Turns out, there are many common ways we inadvertently slow down our JavaScript. Anti-patterns that, over time, can hobble site performance. The good news? These mistakes can be avoided. Today we're spotlighting the top 19 performance pitfalls that can secretly slow down JavaScript and Node.js apps. We'll explore what causes them through illustrative examples and actionable solutions to optimize your code. Identifying and eliminating these hazards is key to crafting buttery smooth web experiences that delight users. So, let's dive in! 1. Improper Variable Declarations and Scope When first learning JavaScript, it's tempting to declare all variables globally. However, this causes problems down the road. Let's look at an example: // globals.js

var color = 'blue';

function printColor() {
  console.log(color); 
}

printColor(); // Prints 'blue' This works fine, but imagine if we loaded another script: // script2.js

var color = 'red';

printColor(); // Prints 'red'! Because is global, script2.js overwritten it! To fix this, declare variables locally inside functions whenever possible: color function printColor() {
  var color = 'blue'; // local variable
  
  console.log(color);
}

printColor(); // Prints 'blue' Now, changes in other scripts won't affect . printColor Declaring variables in the global scope when unnecessary is an anti-pattern. Try to limit globals to configuration constants. For other variables, declare them locally in the smallest possible scope. 2. Inefficient DOM Manipulation When updating DOM elements, batch changes instead of manipulating one node at a time. Consider this example: const ul = document.getElementById('list');

for (let i = 0; i < 10; i++) {
  const li = document.createElement('li');
  li.textContent = i;
  
  ul.appendChild(li);
} This appends list items one by one. It is better to build a string first then set : .innerHTML const ul = document.getElementById('list');
let html = '';

for (let i = 0; i < 10; i++) {
  html += `<li>${i}</li>`; 
}

ul.innerHTML = html; Building a string minimizes reflows. We update the DOM once instead of 10 times. For multiple updates, build up changes, then apply at the end. Or better yet, use DocumentFragment to batch appends. 3. Excessive DOM Manipulation Frequent updates can crush performance. Consider a chat app that inserts messages into the page. DOM Bad: // New message received
const msg = `<div>${messageText}</div>`;
chatLog.insertAdjacentHTML('beforeend', msg); This naively inserts on each message. Better to throttle updates: Good: let chatLogHTML = '';
const throttleTime = 100; // ms

// New message received  
chatLogHTML += `<div>${messageText}</div>`;

// Throttle DOM updates
setTimeout(() => {
  chatLog.innerHTML = chatLogHTML;
  chatLogHTML = ''; 
}, throttleTime); Now, we update at most every 100ms, keeping DOM operations low. For highly dynamic UIs, consider virtual DOM libraries like React. These minimize DOM manipulation using a virtual representation. 4. Lack of Event Delegation Attaching event listeners to many elements creates needless overhead. Consider a table with delete buttons on each row: Bad: const rows = document.querySelectorAll('table tr');

rows.forEach(row => {
  const deleteBtn = row.querySelector('.delete');  

  deleteBtn.addEventListener('click', handleDelete);
}); This adds a listener to each delete button. Better to use event delegation: Good: const table = document.querySelector('table');

table.addEventListener('click', e => {
  if (e.target.classList.contains('delete')) {
    handleDelete(e);
  }
}); Now, there's a single listener on the . Less memory overhead. <table> Event delegation utilizes event bubbling. One listener can handle events from multiple descendants. Use delegation whenever applicable. 5. Inefficient String Concatenation When concatenating strings in a loop, performance suffers. Consider this code: let html = '';

for (let i = 0; i < 10; i++) {
  html += '<div>' + i + '</div>';
} Creating new strings requires memory allocation. Better to use an array: const parts = [];

for (let i = 0; i < 10; i++) {
  parts.push('<div>', i, '</div>');
}

const html = parts.join(''); Building an array minimizes intermediate strings. concatenates once at the end. .join() For multiple string additions, use array joining. Also, consider template literals for embedded values. 6. Unoptimized Loops Loops often cause performance problems in JavaScript. A common mistake is repeatedly accessing array length: Bad: const items = [/*...*/];

for (let i = 0; i < items.length; i++) {
  // ...
} Redundantly checking inhibits optimizations. Better: .length Good: const items = [/*...*/];  
const len = items.length;

for (let i = 0; i < len; i++) {
  // ...
} Caching length improves speed. Other optimizations include hoisting invariants out of loops, simplifying termination conditions, and avoiding expensive operations inside iterations. 7. Unnecessary Synchronous Operations JavaScript's async capabilities are a key advantage. But beware of blocking I/O! For example: Bad: const data = fs.readFileSync('file.json'); // blocks! This stalls execution while reading from the disk. Instead, use callbacks or promises: Good: fs.readFile('file.json', (err, data) => {
  // ...
}); Now, the event loop continues while the file is read. For complex flows, simplifies asynchronous logic. Avoid synchronous operations to prevent blocking. async/await 8. Blocking the Event Loop JavaScript uses a single-threaded event loop. Blocking it stalls execution. Some common blockers: Heavy computational tasks Synchronous I/O Unoptimized algorithms For example: function countPrimes(max) {
  // Unoptimized loop
  for (let i = 0; i <= max; i++) {
    // ...check if prime...
  }
}

countPrimes(1000000); // Long running! This executes synchronously, blocking other events. To avoid: Defer unnecessary work Batch data processing Use Worker threads Look for optimization opportunities Keep the event loop running smoothly. Profile periodically to catch blocking code. 9. Inefficient Error Handling It's vital to handle errors properly in JavaScript. But beware of performance pitfalls! Bad: try {
  // ...
} catch (err) {
  console.error(err); // just logging
} This captures errors but takes no corrective action. Unhandled errors often lead to memory leaks or data corruption. Better: try {
  // ...
} catch (err) {
  console.error(err);
  
  // Emit error event 
  emitError(err); 
  
  // Nullify variables
  obj = null;
  
  // Inform user
  showErrorNotice();
} Logging isn't enough! Clean up artifacts, notify users, and consider recovery options. Use tools like Sentry to monitor errors in production. Handle all errors explicitly. 11. Memory Leaks Memory leaks happen when memory is allocated but never released. Over time, leaks accumulate and degrade performance. Common sources in JavaScript include: Uncleaned-up event listeners Outdated references to deleted DOM nodes Cached data that's no longer needed Accumulating state in closures For example: function processData() {
  const data = [];

  // Use closure to accumulate data
  return function() {
    data.push(getData()); 
  }
}

const processor = processData();

// Long running...keeps holding reference to growing data array! The array keeps getting larger but is never cleared. To fix: Use weak references Clean up event listeners Delete no-longer-needed references Limit closured state size Monitor memory usage and watch for growing trends. Proactively eliminate leaks before they pile up. 11. Overuse of Dependencies While npm offers endless options, resist the urge to over-import! Each dependency increases bundle size and attack surface. Bad: import _ from 'lodash';
import moment from 'moment'; 
import validator from 'validator';
// etc... Importing entire libraries for minor utilities. Better to cherries pick helpers as needed: Good: import cloneDeep from 'lodash/cloneDeep';
import { format } from 'date-fns';
import { isEmail } from 'validator'; Only import what you need. Review dependencies regularly to prune unused ones. Keep bundles lean and minimize dependencies. 12. Inadequate Caching Caching allows skipping expensive computations by reusing prior results. But it's often overlooked. Bad: function generateReport() {
  // Perform expensive processing
  // to generate report data... 
}

generateReport(); // Computes
generateReport(); // Computes again! Since inputs haven't changed, the report could be cached: Good: let cachedReport;

function generateReport() {
  if (cachedReport) {
    return cachedReport;
  }

  cachedReport = // expensive processing...
  return cachedReport; 
} Now, repeated calls are fast. Other caching strategies: Memory caches like Redis HTTP caching headers LocalStorage for client caching CDNs for asset caching Identify cache opportunities - they often provide big speedups! 13. Unoptimized Database Queries When interfacing with databases, inefficient queries can bog down performance. Some issues to avoid: Bad: // No indexing
db.find({name: 'John', age: 35}); 

// Unecessary fields
db.find({first: 'John', last:'Doe', email:'john@doe.com'}, {first: 1, last: 1});

// Too many separate queries
for (let id of ids) {
  const user = db.find({id});
} This fails to utilize indexes, retrieves unused fields, and executes excessive queries. Good: // Use index on 'name' 
db.find({name: 'John'}).hint({name: 1});

// Only get 'email' field
db.find({first: 'John'}, {email: 1}); 

// Get users in one query
const users = db.find({
  id: {$in: ids} 
}); Analyze and explain plans. Create indexes strategically. Avoid multiple piecemeal queries. Optimize datastore interactions. 14. Improper Error Handling in Promises Promises simplify asynchronous code. But unhandled rejections are silent failures! Bad: function getUser() {
  return fetch('/user')
    .then(r => r.json()); 
}

getUser(); If rejects, exception goes unnoticed. Instead: fetch Good: function getUser() {
  return fetch('/user')
    .then(r => r.json())
    .catch(err => console.error(err));
} 

getUser(); Chaining handles errors properly. Other tips: .catch() Avoid promise nesting hell Handle rejections at the top level Configure unhandled rejection tracking Don't ignore promise errors! 15. Synchronous Network Operations Network requests should be asynchronous. But sometimes sync variants get used: Bad: const data = http.getSync('http://example.com/data'); // blocks! This stalls the event loop during the request. Instead, use callbacks: Good: http.get('http://example.com/data', res => {
  // ...
}); Or promises: fetch('http://example.com/data')
  .then(res => res.json())
  .then(data => {
    // ...
  }); Async network requests allow other processing while waiting for responses. Avoid synchronous network calls. 16. Inefficient File I/O Operations Reading/writing files synchronously blocks. For example: Bad: const contents = fs.readFileSync('file.txt'); // blocks! This stalls execution during disk I/O. Instead: Good: fs.readFile('file.txt', (err, contents) => {
  // ...
});

// or promises

fs.promises.readFile('file.txt')
   .then(contents => {
     // ...  
   }); This allows the event loop to continue during the file read. For multiple files, use streams: function processFiles(files) {
  for (let file of files) {
    fs.createReadStream(file)
      .pipe(/*...*/);
  }
} Avoid synchronous file operations. Use callbacks, promises, and streams. 17. Ignoring Performance Profiling and Optimization It's easy to overlook performance until there are obvious issues. But optimization should be ongoing! Measure first with profiling tools: Browser devtools timeline Node.js profiler third-party profilers This reveals optimization opportunities even if performance seems fine: // profile.js
function processOrders(orders) {
  orders.forEach(o => {
    // ...
  });
}

processOrders(allOrders); The profiler shows taking 200ms. We investigate and find: processOrders Unoptimized loop Expensive inner operation Unnecessary work We optimize iteratively. The final version takes 5ms! Profiling guides optimization. Establish performance budgets and fail if exceeded. Measure often and optimize judiciously. 18. Not Utilizing Caching Mechanisms Caching improves speed by avoiding duplicate work. But it's often forgotten. Bad: // Compute expensive report
function generateReport() {
  // ...heavy processing...
}

generateReport(); // Computes
generateReport(); // Computes again! The same inputs always produce the same output. We should cache: Good: // Cache report contents
const cache = {};

function generateReport() {
  if (cache.report) {
    return cache.report;
  }

  const report = // ...compute...

  cache.report = report;
  return report;
} Now, repeated calls are fast. Other caching strategies: Memory caches like Redis HTTP caching headers LocalStorage for client caching CDNs for asset caching Identify cache opportunities - they often give big wins! 19. Unnecessary Code Duplication Duplicated code harms maintainability and optimizability. Consider: function userStats(user) {
  const name = user.name;
  const email = user.email;
  
  // ...logic...
}

function orderStats(order) {
  const name = order.customerName;
  const email = order.customerEmail;

  // ...logic... 
} The extraction is duplicated. We refactor: function getCustomerInfo(data) {
  return {
    name: data.name, 
    email: data.email
  };
}

function userStats(user) {
  const { name, email } = getCustomerInfo(user);
  
  // ...logic...
}

function orderStats(order) {
  const { name, email } = getCustomerInfo(order);

  // ...logic...
} Now, it's just defined once. Other fixes: Extract utility functions Build helper classes Leverage modules for reusability Deduplicate whenever you can. It improves code health and optimization. Conclusion Optimizing JavaScript application performance is an iterative process. By learning efficient practices and being diligent about profiling, dramatic speed improvements can be achieved. Key areas to focus on include minimizing DOM changes, leveraging asynchronous techniques, eliminating blocking operations, reducing dependencies, utilizing caching, and removing unneeded duplication. With attention and experience, you can discover bottlenecks and hone in on optimizations for your specific workload. The result is faster, leaner, and more responsive web apps your users will love. So be relentless about optimizations - employ these tips and see your JavaScript fly! If you like my article, feel free to follow me on . HackerNoon Also published . here

Is Your Code Slow?: Avoid These 19 Common JavaScript and Node.js Mistakes

DATAGRAIL

datagrail.io

51-200 employees

Since 2018

COMPANY RANKING

DATAGRAIL

EVERGREEN INDEX #2795

Representing this company? Click here to claim and customize this page!

DataGrail WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!

DATAGRAIL

datagrail.io

51-200 employees

Since 2018

COMPANY RANKING

DATAGRAIL

EVERGREEN INDEX #2795

RELATED COMPANIESRANK

STORIES ABOUT DATAGRAIL

Representing this company? Click here to claim and customize this page!

DataGrail WIKI

Apply to get your Tech Company News Page live on HackerNoon.com today!