script.txt

script
    
    intro
        - I started working with C# and there we had so many different patterns that was hard to get started
        - When I first saw JavaScript, everyone was using global variables, single file applications and a lot of problems
        - It turned out people are still struggling to manage projects in long term
        - So I brough all my knowledge from C# to JavaScript and adapted to use in JavaScript
    
        - to make things more interesting I wanted to bring real world examples for you to learn how to apply those patterns I'm gonna show you today.
        - My goal is to get a simple application and refactor it adding those patterns and business requirements so it'd be easier for you to come back and check out the examples.
    
    initial code
        - a simple code that uses commonjs
        - consumes a Web API
        - can perform search in memory
    
    identifying problems
        - single file application
        - global variables
    
    solving
        - The first step is Single Responsibility
        - Even if you don't know any design pattern the best thing is to split your program into different files
        - Use ESM for using native modules in the browser
    
        - #1 - N-Layers
            view
            service
            controller
        - #2 - Dependency Injection
            - While working with software everything should be written thinking on how to test it
    
        - #3 - Factory
            factory - instance manager
    
    breaking news: new requirement from the PM
        - now the application should work on desktop with similar features
        - JavaScript is the best because with the same code you can write both back and frontend apps - Use ESM - Isomorphic JS
    
        - #4 - Abstract Factory
            - benefit: shared layer
            - all platforms export a view with the same signature
                .configureOnClearClick
                .configureOnSearchClick
                .render
        - #5 - Builder
            create complex objects in different steps
                this.#components = layout
                    .setScreen({ title: 'Design Patterns with Erick Wendel' })
                    .setLayoutComponent()
                    .setSearchComponent(this.#onSearch)
                    .setTable(template)
                    .build()
        - #6 - FluentAPI
            fluent API is similar and you may have seen it on ORMs
                - print ORM
        - #7 - Test Data Builder
            Design patterns for testing
    
        Some of the tests you probably is using
        - #8 - Observer - EventEmitter
            browsers don't have the eventEmitter class
            eventEmitter is a observer
            don't call me I call you
            observers
                - whos gonna be notified when an event happens
            subject
                - what context (EventEmitter but as the browser doesnt have it I implemented)
        - #9 - Decorator
            - usually used by APMs
            - @Decorator
            - not available yet in JavaScript but is x years been working
            - decorator is a pattern, @ is just a syntax sugar
    
        - #10 - Async Iterator - on demand processing
            - sometimes you don't actually need to wait for the full response
            - can plot data on demand
            refactoring
                views
    End :)


https://javascript.plainenglish.io/javascript-performance-api-in-10-minutes-10b5883b7e79
https://www.digitalocean.com/community/tutorials/js-js-performance-api
https://developer.mozilla.org/en-US/docs/Web/API/Performance
https://mdx-talk.developermode.com/31
https://componentsasdata.lukeherrington.com/6
https://github.com/infiniteluke/components-as-data-presentation/tree/master
[Title](https://www.loginradius.com/blog/engineering/guest-post/http-streaming-with-nodejs-and-fetch-api/)