About Clean Code
About Clean Code
  • 116
  • 188 381
Vite: How to Set Up and Resolve Module Federation
Even though "Module Federation" is a feature of WebPack 5, can we do the same with Vite? I turns out some tweaks are required ...
Source code used in this tutorial:
Vite: github.com/plainionist/AboutCleanCode/tree/main/MicroFrontends.Reloaded.Vite
vite plugin: github.com/originjs/vite-plugin-federation
มุมมอง: 100

วีดีโอ

Is Module Federation the Better Approach for Micro Frontends?
มุมมอง 31712 ชั่วโมงที่ผ่านมา
Is Module Federation the best choice for building Micro Frontends? Let's find out hands-on with WebPack and Vite in a simple project based on Vue.js. Source code used in this tutorial: WebPack: github.com/plainionist/AboutCleanCode/tree/main/MicroFrontends.Reloaded Vite: github.com/plainionist/AboutCleanCode/tree/main/MicroFrontends.Reloaded.Vite Check the git history to follow the steps explai...
The Simplest Way to Measure Code Coverage?
มุมมอง 37714 วันที่ผ่านมา
Never write tests just for coverage! But a coverage report can still be a useful tool nevertheless. Coverage script: github.com/plainionist/AboutCleanCode/blob/main/CodeCoverage/coverage.fsx
2 Golden Rules EVERY Good Test Follows | A Practical Guide
มุมมอง 77521 วันที่ผ่านมา
"Any fool can write tests that a test runner can understand. Good programmers write tests that humans can understand." freely interpreted from Martin Fowler
A Step-by-Step Guide to Micro Frontends
มุมมอง 8Kหลายเดือนก่อน
The microservices architecture enables the development and deployment of features independently. But what if your microservices also have a UI? Source code used in this tutorial: github.com/plainionist/AboutCleanCode/tree/main/MicroFrontends
Service Locator: Convenience or Complexity Trap?
มุมมอง 519หลายเดือนก่อน
The Service Locator Pattern is very convenient when writing new code, but is it a pattern you should actually use? Source code used in this tutorial: github.com/plainionist/AboutCleanCode/tree/main/ServiceLocator
Principles of Component Design - Part 2
มุมมอง 5152 หลายเดือนก่อน
Just a few "wrong" component dependencies can make the difference! In this episode of Principles of Component Design, we discuss the principles that guide you in avoiding such wrong dependencies. 0:00 Intro 0:15 Recap Part 1 0:41 Acyclic Dependencies Principle (ADP) 2:47 Stable-Dependencies Principle (SDP) 5:17 Stable-Dependencies Principle (SDP) 6:24 The Main Sequence 7:49 A Refactoring Indicator
Why Learn SOLID Principles? - Complete Practical Guide
มุมมอง 7362 หลายเดือนก่อน
Discover how to build robust and sustainable software by mastering the SOLID principles. This video breaks down each principle with practical examples, demonstrating their importance in creating a strong foundation for high-quality software. 00:00 Single Responsibility Principle 12:48 Open/Closed Principle 18:51 Liskov Substitution Principle 27:10 Interface Segregation Principle 34:10 Dependenc...
Principles of Component Design - Part 1
มุมมอง 7682 หลายเดือนก่อน
Principles of Component Design - Part 1
Can the Repository Pattern Deliver on Its Promises?
มุมมอง 7023 หลายเดือนก่อน
Can the Repository Pattern Deliver on Its Promises?
In Clean Architecture such Code Should Go to ...
มุมมอง 2K3 หลายเดือนก่อน
In Clean Architecture such Code Should Go to ...
THIS Is How You Should Handle Recoverable Errors!
มุมมอง 1.1K4 หลายเดือนก่อน
THIS Is How You Should Handle Recoverable Errors!
7 Code Smells You Should Fix IMMEDIATELY!
มุมมอง 2.2K4 หลายเดือนก่อน
7 Code Smells You Should Fix IMMEDIATELY!
DON'T Focus on Simplicity of Creation, BUT ...
มุมมอง 5085 หลายเดือนก่อน
DON'T Focus on Simplicity of Creation, BUT ...
Small Increments: From Zero to Hero in 10 Minutes!
มุมมอง 2055 หลายเดือนก่อน
Small Increments: From Zero to Hero in 10 Minutes!
Repository Pattern Explained: Can You Afford to Skip It?
มุมมอง 2.5K6 หลายเดือนก่อน
Repository Pattern Explained: Can You Afford to Skip It?
Ready for the Next Feature?
มุมมอง 3966 หลายเดือนก่อน
Ready for the Next Feature?
First Make it Work, Then Make it Beautiful | HTML5, JavaScript
มุมมอง 2346 หลายเดือนก่อน
First Make it Work, Then Make it Beautiful | HTML5, JavaScript
SOLID Principles in Action: From CLI Prototype to Usable Web App | ASP.NET Core, Vue.JS
มุมมอง 3666 หลายเดือนก่อน
SOLID Principles in Action: From CLI Prototype to Usable Web App | ASP.NET Core, Vue.JS
From Mystery to Mastery: A Step-by-Step Tutorial
มุมมอง 6317 หลายเดือนก่อน
From Mystery to Mastery: A Step-by-Step Tutorial
4 Simple Steps to Apply the OCP to Existing Classes
มุมมอง 5537 หลายเดือนก่อน
4 Simple Steps to Apply the OCP to Existing Classes
Discover the Magic behind Async/Await!
มุมมอง 1.8K8 หลายเดือนก่อน
Discover the Magic behind Async/Await!
How to Anticipate Change in Your Design?
มุมมอง 8048 หลายเดือนก่อน
How to Anticipate Change in Your Design?
AVOID Building Fragile Software by ...
มุมมอง 1.5K9 หลายเดือนก่อน
AVOID Building Fragile Software by ...
If You Want To Face LESSER Exceptions ...
มุมมอง 81010 หลายเดือนก่อน
If You Want To Face LESSER Exceptions ...
What others DON'T TELL YOU about Interface Segregation!
มุมมอง 2.2K11 หลายเดือนก่อน
What others DON'T TELL YOU about Interface Segregation!
Dependency Inversion: What, Why & How? | By Example
มุมมอง 4.7K11 หลายเดือนก่อน
Dependency Inversion: What, Why & How? | By Example
Clean Architecture by Example in 5 Minutes
มุมมอง 12Kปีที่แล้ว
Clean Architecture by Example in 5 Minutes
Let's Analyze and Solve that QUICKLY! | .NET
มุมมอง 721ปีที่แล้ว
Let's Analyze and Solve that QUICKLY! | .NET
Clean Architecture IS about Vertical Slicing, actually!
มุมมอง 36Kปีที่แล้ว
Clean Architecture IS about Vertical Slicing, actually!

ความคิดเห็น

  • @PaulSebastianM
    @PaulSebastianM 2 วันที่ผ่านมา

    Superb. To the point.

  • @ifatreefalse
    @ifatreefalse 6 วันที่ผ่านมา

    if you're only ever building features for one app on one domain, you don't need to worry about this stuff. a domain of entities is something reusable across multiple applications. and a application solving use cases can be presented with multiple UIs.. in theory, it can even access multiple domains. the point of making the separations is to allow them to not be 1:1 to each other at those boundaries. the problem with "features" is that often they involve integrating several apps, and potentially several domains, so "vertical slicing" is already going to happen to get that feature into multiple places, and that's where it gets lost.

    • @AboutCleanCode
      @AboutCleanCode 5 วันที่ผ่านมา

      @ifatreefalse I see your point of the first part of your statement but i would add that even if you only develop a single app, vertical slicing may make sense if the app consists of multiple rather independent features. However, i am not fully getting the point of the second part " the problem with "features" is that often they involve integrating several apps, and potentially several domains, so "vertical slicing" is already going to happen to get that feature into multiple places, and that's where it gets lost." - can u give an example?

  • @pl4gueis
    @pl4gueis 18 วันที่ผ่านมา

    F# mentioned nice. That code looks like an affair baby of C# and F# though :D Could be cleaner with more F# idiomatic code for example pattern matching like this: let main args = match args with | [|_; "install"|] -> install() | [|_; workspace|] -> workspace |> collect |> openBrowser | _ -> Console.Error.WriteLine("Specify 'install' to install required tools") Console.Error.WriteLine("OR a workspace to create a coverage report") exit 1 main fsi.CommandLineArgs

  • @Stefan-bp6ge
    @Stefan-bp6ge 18 วันที่ผ่านมา

    Nice work!

  • @JoeEnos
    @JoeEnos 20 วันที่ผ่านมา

    I agree that the validator idea is clever, but it’s something many developers would skip over and not even notice. I’d personally go with the custom constructor.

  • @alvarezd
    @alvarezd 22 วันที่ผ่านมา

    Great video! I'll give it a try, it seems very useful.

  • @joelee5682
    @joelee5682 23 วันที่ผ่านมา

    is not micro frontend dude, go learn before you bullshiting online

    • @AboutCleanCode
      @AboutCleanCode 23 วันที่ผ่านมา

      @joelee5682 see martinfowler.com/articles/micro-frontends.html

  • @AntonioDoesMetal
    @AntonioDoesMetal 24 วันที่ผ่านมา

    This is gold, I really love that first example with the factory method

  • @afzalhussain605
    @afzalhussain605 25 วันที่ผ่านมา

    As per common practice, these decisions are made at start, or somewhere in the middle. For both cases an approach and design is created and implemented by the developers

  • @daiscog
    @daiscog หลายเดือนก่อน

    Using s like this has dreadful implications for your users if the individual features are more than just a single page. No deeplinking, or bookmarkability for example. Not to mention the weird behaviours of the top window's history stack when frames are on the page (see th-cam.com/video/W6lvQvdeF8U/w-d-xo.html ).

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @daiscog Thx for sharing your thoughts and the link. In fact, all the features I have integrated this way so far are single pages, so I didn't face such issues yet

  • @wbiller
    @wbiller หลายเดือนก่อน

    I‘ve been doing microfrontends with the Single SPA library. This library follows a router based approach and utilizes SystemJS for loading the individual components. You‘re also able to render apps or parts of apps inside another app.

  • @Zeero3846
    @Zeero3846 หลายเดือนก่อน

    Result types are just preparing you to eventually distinguish between HTTP status codes for whenever your application gains a web API. You might as well start with them and avoid exceptions altogether. Also, every time you think you could use null as a value, just stop. You're probably wrong. If it's a stand-in for an empty string or zero, just use those values to begin with. You can avoid a lot of null checks that way. Unexpected nulls are always exceptional. The only exception is when you have to interface with someone else's code that doesn't follow this rule, forcing you to handle null like a definite value.

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      Looking at languages like F# and Rust I think result types have much more potential

  • @dragoran149
    @dragoran149 หลายเดือนก่อน

    How does the Repository class/module looks like? This have a dependency to the database or the api but they're in the outer layer what violates the rule, but it feels strange to use an interface for this because the repository has to be written in a specific way that the database can understand. Or does it mean it is in the adapter layer it can have direct dependencies to the outer layer?

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      Check out this video th-cam.com/video/pfhDO_hZixw/w-d-xo.html did it help?

  • @Alex-bc3xe
    @Alex-bc3xe หลายเดือนก่อน

    Actually always you see module federation in real case scenarios

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @Alex-bc3xe as said in the video, the based approach works perfectly fine in my project but i ll definitively have a closer look at module federation

  • @avbdev
    @avbdev หลายเดือนก่อน

    and microfrontends are two different things. Micro-frontends are an architectural pattern and is focused on using modular concepts/techniques. Embedding a website in the application is not how micro-frontends work.

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @avbdev micro services are "An architectural style where independently deliverable frontend applications are composed into a greater whole" (martinfowler.com/articles/micro-frontends.html) and this is exactly what i tried to sketch in a very simple example: independently deployable frontend apps (which in real scenario of course would have their own backend) which are "composed" in the "shell" app. IFrames are one "technology" which supports such "composition". See also: martinfowler.com/articles/micro-frontends.html#Run-timeIntegrationViaIframes

  • @sourav-pakhira
    @sourav-pakhira หลายเดือนก่อน

    There’s another way as well using module federation

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @sourav-pakhira interesting - I think I ll have a deeper look into this 👍

  • @Wouldntyouliketoknow2
    @Wouldntyouliketoknow2 หลายเดือนก่อน

    Another approach would be a plugin approach; creating abstractions in the shell front end application - that micro frontends would need to implement. The application shell provides a means for loading the plugin packages (e.g from a config file) and the plugins then load up and participate in the application. For example they could register a menu item, or register a custom component to be rendered somewhere or extend the application shell in agreed ways etc. This requires a great deal more design and thought and you have to deal with compatibility I.e not introducing breaking changes for existing plugins etc. Where it becomes interesting for me is, if you could for example use wasm components, then technically this plugins could still be written in many different languages and compiled to wasm, meaning that similar to microservices you maintain language independence - though that might not be a priority. Down this path basically leads to the idea of distributing an SDK for your application, where developers can develop plugins for it against the agreed abstractions.

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @Wouldntyouliketoknow2 certainly this could be done and the benefit would be that the shell and the plugins could communicate via API and share state more easily. In my case all communication needed can easily be done via HTTP (URL query string).

  • @pl4gueis
    @pl4gueis หลายเดือนก่อน

    I liked the video. Clear structure and on point so I know what people mean when they talk about micro frontends but still don't get the point. Sounds like more pain that it is worth, now you have multiple frontend projects that you have to consolidate together. Worst case scenario you have multiple teams choosing whatever is frontend flavor of the month and you have to maintain that nightmare. Also coordinating styles sounds like a massive overhead. I'd rather have a modular monolith that I deploy as a single unit with one source of truth for styles and other global things like authentication. I have no idea how auth is supposed to work there. Does every frontend project implement it again or do I need to share state with all the frontends now?

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @pl4gueis Very valid points! Indeed, micro frontends - similar to micro services - have additional challenges which simply do not exist with e.g. modular monolith. That's why, from my perspective, neither micro services nor micro frontends should be a "default choice" for any project. Nevertheless, if independent deployability is worth the additional effort, then I would try to combine micro services with micro frontends. In my case, I still share certain libraries and also frontend styles across the individual features/apps. Authentication across those apps is not relevant in my case but I do manage sessions across the apps.

  • @knkootbaoat6759
    @knkootbaoat6759 หลายเดือนก่อน

    nice video!

    • @knkootbaoat6759
      @knkootbaoat6759 หลายเดือนก่อน

      to answer the questions made at the end of the video. No i dont use micro front ends (i barely use micro be, I mainly use monolith for simplicity). My general approach is to define the requirements & problems I'm trying to solve as clearly as possible and try to pick the right approach based of my knowledge and specific context. The tricky parts are the context/domain itself (it can be very complex, and not easy to understand) and my knowledge skill level related to domain and technology (x10 the complexity if working with others)

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      @knkootbaoat6759 picking the simplest approach which is possibly solving the problem is certainly a good advice 👍😉

  • @programmerly
    @programmerly หลายเดือนก่อน

    Nice video and great explanation of one of the most important concept in programming. I have also created a video explaining the SOLID principle with code. Please leave your feedback after watching: th-cam.com/video/7tDysPSC96o/w-d-xo.html

  • @minseokjeong1881
    @minseokjeong1881 หลายเดือนก่อน

    In flutter use getit for service locator

    • @AboutCleanCode
      @AboutCleanCode หลายเดือนก่อน

      Which DI framework would u use instead?

  • @Nothing_Else_Matters
    @Nothing_Else_Matters หลายเดือนก่อน

    Thanks for the very good explaining

  • @FantasyTeddy
    @FantasyTeddy 2 หลายเดือนก่อน

    Are there any tools available that calculate these metrics and help you visualizing them?

    • @AboutCleanCode
      @AboutCleanCode 2 หลายเดือนก่อน

      @FantasyTeddy you could probably calculate these metrics with ndepend and similar tools. I ll definitively do some research and may develop my own small tool for the third part of this series 😉

  • @andrewallbright
    @andrewallbright 2 หลายเดือนก่อน

    I clean my code with dawn dish soap.

    • @AboutCleanCode
      @AboutCleanCode 2 หลายเดือนก่อน

      @andrewallbright658 interesting approach 😉

  • @pl4gueis
    @pl4gueis 2 หลายเดือนก่อน

    What did I just watch? Could you explain these things with some concrete examples and not just on an abstract university course level?

    • @AboutCleanCode
      @AboutCleanCode 2 หลายเดือนก่อน

      @pl4gueis The intent of part 1 & 2 has been to explain the conceptual ideas. I am already planning a part 3 showing how to apply these principles in a concrete project 👍😉

    • @marikselazemaj3428
      @marikselazemaj3428 2 หลายเดือนก่อน

      From what I understand, this centers around dependency management. A more concrete example would be that the Application layer should depend on the Domain layer, as opposed to the other way around, given that the Domain layer is generally more stable than the application layer.

  • @qurysskrystyan3094
    @qurysskrystyan3094 2 หลายเดือนก่อน

    Really great video!!

  • @neotechfriend
    @neotechfriend 2 หลายเดือนก่อน

    Does it support AOT?

    • @AboutCleanCode
      @AboutCleanCode 2 หลายเดือนก่อน

      I haven't tested explicitly but I don't see any reason why it should not

  • @tayyabshaikh3286
    @tayyabshaikh3286 2 หลายเดือนก่อน

    Good explanation, keep it up and don't stop posting videos and shorts ❤

  • @davidsandsten4789
    @davidsandsten4789 2 หลายเดือนก่อน

    Thank you so much for this wonderful video, so informative!

  • @deans4j
    @deans4j 3 หลายเดือนก่อน

    In this specific scenario I believe you should consider using visitor pattern instead of allowing the graph to draw itself

    • @AboutCleanCode
      @AboutCleanCode 2 หลายเดือนก่อน

      Good design alternative 👍

  • @realth000
    @realth000 3 หลายเดือนก่อน

    welcome back