0. Before we start This article aims to provide you with useful insights into the Feature-Sliced Design approach. You will learn about this architecture and its potential benefits, including real code examples from a Todo Application built on Angular. By immersing yourself in this methodology, you will gain a new perspective on architectural design. Moreover, we will explore how Feature-Sliced Design can effectively and cost-efficiently design . This analysis will showcase the practical applications of this approach and demonstrate its potential value for software development. business logic Please note that this article will not provide an theoretical understanding of Feature-Sliced Design. Nevertheless, this architectural methodology has a relatively high level of complexity, and I strongly suggest referring to the for more comprehensive information. in-depth official documentation Table of Contents What is Feature Sliced Design? Paradigm 2.1 Small puzzles 2.2 Assemble correctly from childhood 2.3 Delete and conquer Develop FSD on Angular 3.1 Main goal 3.2 Create a project and structure Recap and Example 1. What is Feature Sliced Design (FSD)? Before we get started with the code, let’s determine what FSD is. “ ” — architectural design methodology for Front-End applications, a design approach where a product’s features are divided into separate, standalone components, or “slices”. Each slice is then designed and developed , allowing for greater flexibility, modularity, and scalability in the design process. This approach is often used in software development and can be applied to the design of web or mobile applications, as well as other types of software products. Feature Sliced Design independently Sounds easy, but of course, by dividing everything into small pieces, we will not automatically get this implementation of the pattern. 2. Paradigm I would like to highlight a couple of points that are particularly interesting and important. 2. 1. Small Puzzles We figured out that the idea behind FSD is to break down a complex product into smaller, more manageable pieces into layers. Each “Layer” might contain other manageable pieces — “Slices”. “Slices” in turn may have “Segments”. This can lead to faster development times, better collaboration between teams, and a more flexible and scalable final product. Thus we have a set of puzzles that still need to be able to “assemble”. More details are below. 2.2. Assemble correctly from Childhood! Every child knows that puzzles can be put together in any way. The picture does not converge, but the puzzles sit tight. Great? Great! The mother is happy, the father is proud, baby understood that everything was correct. And it’s very similar to many projects: messy imports, and code duplication, the project structure is defined by the location of the folders, and so on. These “Childhood diseases” become garbage dumps. It costs hundreds of man-hours and thousands (billions) of dollars to clean up the dirt. Time is money. FSD strives to be perfect. It was born with a Mission — to create . a Сontrollable Unidirectional Encapsulated Flow (explicit one-way links) I imagine a stream that turns into an ocean. A small stream knows nothing about the ocean, but the ocean knows about all the streams, rivers, lakes, and seas that feed it. Let’s say more — one river does not know about the existence of the other. This is the prerogative of the seas and oceans. Technically, It means that the (for example, ) knows nothing about all the layers above or next to it. Upper layers (ex. entities) can use all the layers below, like a river that flows into the sea, and not vice versa. Bottom Layer shared Let’s remember these Scope Rules. This is a small price for the flexibility and adaptivity that it gives. 2.3. Delete and conquer My favorite paradigm point. I even made up this screaming headline. It is your responsibility to design and develop the application so that any block can be easily removed. If you don't need some you just delete it. page/ You remove it as easily as cutting a piece of cake. A cut-off cake is on the guest’s plate, but your application, like the cake, did not fall into pieces. Just beautiful as before. Just missing one piece, but still such a masterpiece. This is achieved by . By writing the code, you will understand how it works. It’s time to hit the keyboard. Low Coupling & High Cohesion 3. Develop FSD on Angular. 3.1. Main goal or what do we want? I will demonstrate how to build a simple and scalable ToDoList application using the popular framework by including all the crucial . Angular layers I will also point to the example of well-known . The To Do app is publicly available on GitHub. So you will have 2 examples. Twitter 3.2. Create a project and structure. First, we should create a standard Angular project + generate a structure as below: └── src/
    ├── app/          # Initializing application logic
    ├── processes/    # (Optional) Application processes running over pages
    ├── pages/        # Application pages
    ├── widgets/      # (Optional) Independent and self-contained blocks for pages
    ├── features/     # (Optional) Processing of user scenarios
    ├── entities/     # (Optional) Business entities that domain logic operates 
    └── shared/       # Reused modules, non-business specific My experience is that for a better explanation, we will consider the flow from bottom to top, from shared to app. 3.2.1 shared Reusable functionality, detached from the specifics of the project/business.(e.g. UIKit, libs, API) In Feature Sliced Design, “shared” refers to components or features that are used by multiple parts of the application. Shared components are designed and developed to be reusable, meaning that they can be easily used in multiple places throughout the application without duplication of code or effort. Examples of shared components in Feature Sliced Design might include UI elements such as buttons, headers, footers, or form fields. Also, I added here all the Material Modules that I need for the project. @NgModule({
  exports: [
    MatCheckboxModule,
    MatButtonToggleModule,
    MatProgressSpinnerModule,
    MatCardModule,
    MatButtonModule,
  ],
})
export class UiKitModule {} And If I need to import some of the mat modules I use them like UiKitModule as below: @NgModule({
  declarations: [NotFoundPage],
  imports: [SharedModule, UiKitModule],
  exports: [NotFoundPage],
})
export class NotFoundPageModule {} 3.2.2 entities Сontains the skeleton of the card with slots for content and interactive elements. “Entity” refers to a data object or record that represents a real-world object or concept. Difficult to understand? Yes, by the way, we have to. If we say at the ToDoList application — our entity is a ) with its attributes such as the task’s name, description, due date, and status. Task (business unit But we are Front-End developers. How to determine an “Entity”? Of course, as we can — as components with the representation of entities. In our Tutorial, it's a row in *ngFor of [tasks] and Task Details Card (task-card). For Tweeter Example - it’s a Tweet with Text, Picture, and Tween owner information. 3.2.3 features Always contains the of the card and the logic of processing those interactions. interactivity “Feature” refers to a specific aspect or component of a UI. It can be considered a slice of the user interface, with its design specifications and . functional functionalities Oversimplify— UI with any kind of interaction — it’s a guaranteed Feature. In the ToDo app we have and “features”, cause its UI with interacting. task-filter toggle-task 3.2.4 widgets Contains the “assembled” postcard, with content and interactive buttons that are wired up to the relevant calls on the back end. “Widgets” — extensive and more complex UI layers for combining small, reusable components, , and (see below) or that can be combined to create a more extensive and more complex UI. UI-kit elements features, entities In our tutorial, we will skip it, because we won’t have a lot of reusable components here. But you have a great visual example — with a full combination of features, entities, and shared. Tweet Card Widget — is a full combination of all “features” and “entities” with shared components. 3.2.5. pages Contains the route components for each page in the app, mostly composition, hardly any logic. In the context of FSD, “pages” — are individual screens or views within a product or user interface. A page is made up of multiple design slices, which are combined to create the user experience for that particular view. complete Each “page” in FSD is designed and developed as a , with its design specifications and functionalities. This modular approach allows designers and developers to work on individual pages without affecting the rest of the application, making the design process more efficient and flexible. self-contained unit Additionally, by breaking down pages into smaller, reusable design slices, teams can create a consistent and user-friendly interface that can be easily adapted to different screen sizes, devices, and platforms. For example, our ToDoList application might have several pages, such as a home page that displays a list of tasks (tasks list), a task detail page that provides more information about a specific task (task details), and a page-not-found. 3.2.6. app Contains a setup of routing, store, and global styles. In our example, we see here AppStoreModule and AppRoutingModule. @NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    AppStoreModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {} 4. Recap and Example. Let's see what kind of structure we have at least with my comments. └── src/
    ├── app/ 
    |      ├ app.module 
    |      ├ app-routing.module.ts
    |      └── store
    |        └──store.module.ts
    |
    ├── pages/
    |       ├── not-found/
    |       ├── task-details/
    |       └── tasks-list/       
    ├── widgets/ # not represented in this example. See extended edition.
    ├── features/
    |      └── tasks-filter
    |      |    |  ├── component/ # html, scss, ts
    |      |    |  └── model/     # config.service.ts - some logic for filtering 
    |      |    └──tasks-filter.module.ts
    |      └── toggle-task
    |        |  ├── component/ # html, scss, ts
    |        |  └── model/     # config.service.ts - some logic for filtering 
    |        └──toggle-task.module.ts
    ├── entities/
    |      └── task
    |      |  ├── task-card/ # html, scss, ts
    |      |  └── task-row/ # html, scss, ts
    |      └──task.module.ts
    └── shared/
           ├── api #getTasksList api is here
           ├── lib/ # routerSelectors
           └── ui/ #ui-kit modules Compare the first slide with the slices and see what we got. Take a look at the full diagram of my example on the . link You are welcome to see the code on . GitHub Also published here.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story will praise and/or roast a product, company, service, game, or anything else people like to review on the Internet.

Understanding Feature-Sliced Design: Benefits and Real Code Examples

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Boosting Website Performance: Leveraging Webpack for File Compression and Optimization

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Boosting Website Performance: Leveraging Webpack for File Compression and Optimization

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps