Hello, everyone. My name is Alexander Guzenko. And today I'm going to, I'm going to talk about architecture, in particular front end architecture. Probably everyone faced with such difficulties when, in large application, when it becomes larger and larger, it, It becomes harder to maintain it, and, that's the problem because, sometimes we need really large application and we also want to well maintainable and well scalable applications. today We're going to cover such topics as, key qualities of a good application. What the difference between good applications and bad ones. Then, we're going to talk about problems of modern front end and why just we can't write only good applications, maintainable and scalable applications. Next, we of course, Gonna cover some ways how to solve that problems and in final part I want to tell you about feature slice design and how it can help you solve this problem. That's not the only one solution but it's my favorite one. Just a few words about myself, I have more than eight years of experience in software development and Several years ago I realized that many developers don't know architecture well, and but architecture is one of the most important part of whole software development process. So I decided that my mission is to popularize front end architecture. And, so here we go today. let's talk about key qualities of a good application. first one, it's of course business efficiency because applications needs, for, receiving, money, to the business. And, for earning money for the business. of course, first, and, the most important one is business efficiency. Next one is scalability. Scalability in front end is about, how fast you can add new feature or maybe new module to your application. And, Last one, it's maintainability. it's about, how easy it is to make changes and, maintain your application in the long term. so first one, business efficiency. it's not under our responsibility. It's more about, good and bad business decisions. So it's not about software development. and, We're going to cover the second and third ones, scalability and maintainability. So let's focus on these two. Why is it important to be well scalable and well maintainable? Let's talk about scalability, when it's easy to add new functionality. So it becomes cheaper and, we all want to spend less time releasing new feature and we all want that it will, that It needs to be an easy process, not really hard. so what about maintainability? when an application is well maintainable, the increase in development costs remains small. So it, it allows for the implementation of a large application in the future. And vice versa, it's bad maintainable. So sometimes it may be some point when It is so hard to maintain and so hard to change the functionality that it becomes easier to Rewrite whole application and we all don't want this scenario. So what the problems with that two main qualities and the problems that it's one of the most difficult tasks is, to, release your application to develop it, that, determine the balance between scalability. maintainability, and development speed. and there are several reasons for that. First one, unclear future at the beginning. We all need to do some important architectural decisions at the beginning, not at the end. of development process, but the thing that, at the beginning, we have the least information about the feature or the application at all. And, during the development process, we receive more and more information and the most of information we have only at the end of the development process. the most important decisions we had to, we have to make at the beginning when we have the least information. next problem, requirements may change too often and unfortunately we can't do anything with that. probably everyone faced with, such problem when, your You are in the middle of development process and your manager comes to you and said, we decided to change the concept of this feature. just, just to follow the new concept and you release that, to follow the new concept, you need to rewrite. most of your written code and that's the problem and, next one, lack of time. Unfortunately, we don't have infinity of time. And if we could, to have to do it, probably we could, create the better decisions, but unfortunately we don't have infinity of time, such as we don't have infinity of money. and that's the problem too. But there is another problem, that every application is unique. And, the best solution for one application, doesn't guarantee you that, it will work for another. So every time, you need to reinvent. your architectural decisions for every new task, new feature, and so on. But, what we can do with that? first of all, I want to make a little mark that for every company, every person, and every team, there may be its own, good solutions. But, here are the most universal ones, for me. First one, you need to become a master in architecture. this is the longest and the hardest way. You need to know many architectural patterns. Architectural concepts, of course, you need to make a lot of mistakes and to solve them. but, in final, you will so much are in architecture that every architectural, task, it will be easier for you and you will do it really fast, but it doesn't guarantee you that, your development team will also have, such architectural knowledges and probably, you will need to control them harder, but this is good, solution. next one, use the best known practices, it's easier than first one. Because you don't need whole architectural patterns and a lot of architectural things. You just need, to know a few of them and, use them, everywhere. it's If your only tool is a hammer, every problems, every problem look, looks like a nail, that's the same, it's not, the bad solution. Also because, using some architectural patterns is better than not using them at all, but not perfect also. And, Last one for me. This is the most efficient solution use out of the box solutions. So What is it out of the box solutions? let's talk about on the example And my example is feature slice design. This is an architectural methodology and, let's talk about what is it, feature slice design. As another architectural methodologies, it's just a compilation of rules and conventions on organizing a code. But it has some, important parts. First one, feature slice design based on solid principles. And, you of course need to know the solid principles. solid principles are the basic in, architecturing. And if you don't know about SOLID, I really recommend it to, to learn about it, about that more, because this is the base. next one, public API. Public API, is, is pretty small architectural pattern, but Also pretty important, because it can help you to write, maintainable, scalable code. Next one, it's low coupling and high cohesion. in this diagram, you can see what does it mean. on the y axis you, you can see coupling and the x, you can see cohesion and, there are different, there are many combinations of them and the best one when low coupling and high cohesion and here you can see why. It's better. if you don't know about this pattern, I also recommend you to learn about that a little more. And, last one, it's feature slide design own rules. And let's talk what is, what is, own rules feature slide design. first one, In the feature slice design, your whole application needs to divide into several layers. There are six possible layers. Shared, Entities, Features, Widgets, Pages, and App. Notice that, in the screen there is, process layer, but, it was in the first, version of feature slice design, and, today we have second version, and, in the second version, process layer is deprecated, keep it in your mind. some layers can have, its own slices. for example, entities layer can have some such slices as user, post, comment, and so on. And, every slice you can divide into some segments. UI, model API and so on. And, let's dive deep into layers. let's start with shared layers. It's the most abstract layer. And here you need to put some, basic parts of your application, which don't know anything about business logic. for example, it is buttons, selects, inputs, maybe some layouts, and so on. Next layer is entities. And it is, it's a business entity, and, for example, comment, post, user, and so on. Here you can put your, UI, some methods, how to fetch data, from the backend and, so on. Next layer is features. Features. it's about actions, about user interactions, for example, like comment, repost comment, delete post, update user profile data, and so on. actions. next one, is widgets layer. widgets layer, it's about composition, compositioning. And here you can, compose, your entities and features together, to make, for example, in this exam, here you can see post. Post contains, from, from entity post and some features and, repost, comment, download, and so on. Next one is pages layer. Pages layer. It's easy because it's just a page What do you want to see inside your page? It's like also compositioning but high level compositioning whole page whole page layer layout, you can put here in this layer and last one application or app layer here. you may put your global objects, global stylus, global types, some providers like routing, faming also on, and, Export, your main, object, your application object, if we talk, for example, about React. Of course, at the beginning, it may be difficult to divide your every feature to these layers, segments, and so on. And their core team of Feature Slice Design, created, some, decomposition cheat which can help you to decompose your feature and you can use it, on their own website. Yes, they have a website, Feature Slice Design, has a good website with a lot of information. I'll give you a link at the end of, my speech and, Let's return to the main questions of my today's speech. How feature slice design can help me to achieve maintainability and scalability? Firstly, this is a good combination of time tasted architectural patterns and principles with its own rules to solve modern front end problems. What does it mean? It contains from a lot of architectural patterns, good patterns, and they work together in a synergy. So it's a really good combination for me. But moreover, it, it was released, this architectural methodology released in 2020. So it's pretty new and it was released in modern front end era and it, good, solve modern front end, problems. Next one, Feature Slice Design has a big community and a website that can help on board newcomers. faster. You don't need to, to write your own. Documentation, because it is, it already, written. And, if you have a newcomer in your team, you just can, send a link to feature slice design website, and that's it. newcomer will, will read. that information and we'll learn what is it next one. this is a embodiment of the experience of many experience at development. it just lies design have, has a good, good support. of core team. Yes, there is a core team in feature slice design that contribute to this methodology almost every week. And I know that guys, they really put a lot of effort to maintain this. And, this is really good, experience. They really experienced guys. Next one, feature slice design is suitable for projects of almost any size from little to do lists to big dashboard applications with hundreds or even millions lines of code. And, Finally, you don't need to reinvent new solutions every time. Once you learn about feature slice design and once you try to use it, you could use it everywhere in every project releasing every feature and this is really convenient, and you don't need to reinvent solutions every time. So, For me, that's it and I really hope, you are interested in feature slice design and more interested in architecture at all. And if you have some questions, just feel free to write me down in my LinkedIn or Gmail. And of course, I really recommend to visit Feature Slice Design website, even if you are not gonna use it, just, to know what is it. And, this is really important information. So thank you, and have a good day. Bye.