Design patterns - Strategy, Observer and Factory

Learn how to use three very important design patterns that can easily enhance most of your projects - Strategy, Observer and Factory.

[@Przeprogramowani]

Zapisz się do drugiej edycji naszego kursu Opanuj JavaScript! 💪 przeprogramowani.pl/kurs-javascript/

[@erwin_adv]

w końcu patterny, tak często jest to pomijane w wielu materiałach. Więcej o patternach! :D

[@PeBesik]

Łał... Zatkało mnie. Właśnie uświadomiłem sobie, że wzorce są czymś, czego nie umiem, a powinienem (jako programista) Z pewnością obejrzę ten materiał nie raz, gdyż "ciut" za szybko się on odbył.

[@mikolaj_lewandowski]

Proszę o kolejne wzorce projektowe!

[@wafel_dev]

Super, prosimy więcej takich tematów:)

Ważny i potrzebny temat. Dzięki. Proszę o więcej filmów o zastosowaniu innych wzorców projektów w JS

[@skaldycom]

Super materiał, jasno ciekawie i z PRZYKŁADEM. Jak tak ma wyglądać kurs to biorę w ciemno :D

[@b3ncr0w]

Na yt brakuje dobrych materiałów o wzorcach projektowych. Z chęcią obejrzałbym wykorzystanie różnych ich zestawów w praktycznych przykładach ; )

[@basiorbb3]

Dla juniora na pierwszy rzut oka - kosmos. :D

[@PrzemekSmyrdek]

webgenius Kosmos to skomplikowana sprawa ;P Który fragment jest dla ciebie najciekawszy?

[@basiorbb3]

Przemek Smyrdek ogólnie to przy subscribe się pogubiłem :) musze to prześledzić jeszcze raz

[@danielheir6596]

Super odcinek, oby więcej! A jak wzorzec strategii ma się do zasady ponownego wykorzystywania kodu. Gdybyśmy mieli 300 pędzli i nagle zmienia nam się logika pędzli wszystkich. To edytujemy 300 plików?

[@Przeprogramowani]

Ja osobiście nie lubię snuć takich debat bo zanim w danym projekcie pojawi się 300 pędzli to programista trzy razy zmieni pracę :P Teoretycznie jest to problem wart rozważania ale w rzeczywistości tych przypadków będzie raczej zdecydowanie mniej.

[@lavok491]

Będę musiał w końcu nauczyć się tych wzorców i je stosować bo obecnie mój kod wygląda tak jak w before... :/

[@Przeprogramowani]

Spokojnie, powoli, jeden po drugim - jakoś pójdzie ;) //Przemek

[@ukaszk.6444]

Jako dodatkową parametryzację można było jeszcze do konstruktora fabryki przekazywać szerokość i kolor narzędzia :)

[@karolzielinski1992]

Super materiał, brakowało takiego 😊 Mam jeszcze pytanie o konwencję nazywania parametrów konstruktora. Raz jest to this.color a raz this._color poprosiłbym o wytłumaczenie różnicy 😊

[@PrzemekSmyrdek]

Karol Zielinski podkreślenie przed nazwą to konwencja która pomaga mi tylko odróżnić wewnętrzne pola klasy od parametrów przychodzących z zewnątrz. Ale to tylko konwencja, nie reguła języka.

[@karolzielinski1992]

Dziękuję!

[@DOMAN89]

Hej! Gdzie Wy byliście jak się JavaScriptu uczyłem ? :) Dobra robota! Na pewno jak będę miał kiedyś do czynienia z początkującym to playlista jak znalazł + IoC oraz DI. Sub musiał polecieć. Pozdrawiam

[@Przeprogramowani]

Dzięki!! Byliśmy... tak jak ty, przy książkach ;) Teraz dzielimy się tym, co w nich znaleźliśmy :D

[@TheBartusZak]

Można prosić o prezentacje wzorców przy wykorzystaniu Vue/React lub Angular?

[@Przeprogramowani]

Pomyślimy :)

[@artuturu]

Może odcinek o testach do tego projektu ?

[@TomaszOstroga]

Super material! Brakuje mi tylko dostepu do projektu zeby na spokojnie sobie przeanalizowac lub wrocic do tego w przyszlosci.

[@Przeprogramowani]

github.com/psmyrdek/js-patterns - podaj dalej! :)

[@vulcs]

Czy są stosowane w praktyce?

[@saragossaxyxy1577]

Brakuje linku do repo na gitcie. Wielka szkoda bo przykład idealny super wytłumaczony.

[@Przeprogramowani]

W opisie jest - Repozytorium z aplikacją - github.com/psmyrdek/js-patterns

[@ogladaczfilm]

Hej. Czytam teraz książkę JavaScript Wzorce - Stoyan Stefano z 2012 i wygląda już na nieaktualną. Z niektórymi wzorcami nigdy się nie spotkałem, ale te co wymieniłeś, są opisane. Czy możesz mi powiedzieć, czy wzorzec: Singleton, Dekorator, Fasada, Mediator, Pośrednik są jeszcze wykorzystywane w projektach?

[@Przeprogramowani]

Pewnie! Singleton, dekorator czy fasada to coś co widzę w wielu współczesnych projektach. Wzorce nie mają jako takiej daty ważności - to czy je spotkasz zależy od tego gdzie patrzysz i kto pisał dany kod (np. autor mógł nie być świadomy, że można dany wzorzec zastosować, a ty możesz wyciągnąć wniosek że ktoś świadomie tego nie zrobił). Z drugiej strony nie można też popadać w drugą skrajność, tzn. mieć ten młotek w postaci wzorców i szukać gwoździ, czyli miejsc do zastosowania, na siłę - to musi być naturalne i na pewno przyjdzie ci wraz z doświadczeniem. // Przemek

[@ogladaczfilm]

@@Przeprogramowani Mam jeszcze jedno pytanie. Jak wygląda u Was tworzenie dobrego jakościowo kodu? Czy planujecie za pomocą schematów i wtedy widzice, że tutaj można zastosować ten wzorzec a tam inny? Czy klepiecie kod jak leci, a później refaktoryzacja kodu?

[@PrzemekSmyrdek]

@@ogladaczfilm Odpowiem za siebie... to zależy :D Jak zaczynam duży projekt to staram się wymyślić wszystkie struktury tak, żeby na wysokim poziomie rozwiązanie mogło się spinać już od początku. To szczególnie ważne wtedy kiedy nad projektem pracuje kilka osób, bo szkielet aplikacji zdefiniuje pracę osób których nie możesz kontrolować co do minuty - chcesz, żeby pracowały w ramach, które zdefiniujesz na początku. Przy mniejszych zmianach czasami podchodzę do kodu po krótszej analizie, bo wtedy kodowanie traktuję po prostu jak szkicowanie. Podchodzę z kilku stron do problemu i sprawdzam co pasuje najlepiej.

[@przemysawtkaczyk8390]

Hej, fajny filmik ! Ale aż się prosi żeby pilnować DRY i zastosować AbstractClass dla narzędzi Brush i Pencil - więc aż sprawdziłem czy się da to w JSie zrobić ;) Zobacz fork'a: github.com/PrzemekTkaczyk/js-patterns

[@PrzemekSmyrdek]

Dzięki! No i tak, oczywiście można byłoby wyciągnąć cześć wspólną wszystkich narzędzi rysujących w taki sam sposób :) Miałem to z tyłu głowy ale miałem nadzieję na forka :P

[@przemysawtkaczyk8390]

​@@PrzemekSmyrdek Jeszcze mi brakuje Interfaceów w JSie, są jakieś takie sztuczne obejścia z tego co zauważyłem (np: stackoverflow.com/questions/3710275/does-javascript-have-the-interface-type-such-as-javas-interface)

[@TeEsDomin]

Czy założeniem klasy abstrakcyjnej nie miał być brak możliwości tworzenia instancji? W Twoim przykładzie istnieje taka możliwość. Wiem, że w JSie schemat abstrakcji oparty byłby na trikach, ale nazywajmy rzeczy po imieniu :)

[@Bajdster]

Okej z perspektywy osoby początkującej te podejścia nie są w ogóle łatwiejsze niż kod przedstawiony na początku i trochę wygląda to jak utrudnianie sobie życia bo nawet większość tutoriali jak stworzyć daną aplikację przeprowadzana jest proceduralnie. Jak nauczyć sie tego nowego podejścia?

[@dawidanonim3355]

Fajne :)

[@Igor-qd2cl]

Daje suba liczę na rewanż :D -tak mi sie jakos przypomniało :D

[@Famouzi]

Czy faktycznie zwraca się uwagę na wzorce podczas tworzenia aplikacji np w Reatcie czy po prostu korzystam z nich nieświadomie?

[@Przeprogramowani]

Powiedziałbym, że w większości nieświadomie. Wzorce są ukryte pod warstwą abstrakcji jaką jest framework lub dana biblioteka (rxjs, React, Angular, etc)

[@michalmalinowski2122]

Cześć, czy można prosić o krótkie wytyczne w jaki sposób uruchomić aplikację?

[@PrzemekSmyrdek]

Pobierz do siebie repozytorium, zainstaluj zależności poprzez "npm install" i uruchom aplikację poprzez "npm start"

[@konradpiotrowski9549]

9:30 Popełniliśmy błędy... tak, a z tych największych, to brak średników przez większość kodu. Czy tak to może być?

[@PrzemekSmyrdek]

To co nazywasz błędem poprawią za nas narzędzia takie jak Prettier albo eslint z flagą fix. Odpowiedniej struktury kodu jednak nie zapewnią i to o tym jest ten film.

[@devman5813]

Wydaje mi się, że dużo programistów używa ale nie dokońca wie kiedy owych wzorców bo frameworki same wymuszają niektóre zachowania

[@pjotreknoname1680]

świetna lekcja. Podasz linka do projektu?

[@Przeprogramowani]

github.com/psmyrdek/js-patterns 🚀

[@dominiks5318]

14:30 po co w konstruktorze ToolsFactory tworzysz wszystkie instancje, zamiast robić to bezpośrednio w getTool() ? Twój przykład nie jest ani wydajny "pamięciowo" ani optymalny pod względem kodu (zbędny konstruktor). 16:30 linia 31 - po co przekazujesz stringa z selectorem zamiast po prostu event z clicka, co dałoby zdecydowanie większe możliwości subscriberom (można pobrać zarówno target jak i w razie potrzeby zablokować propagację)

[@Przeprogramowani]

Ad. 1 - Co zabierze mniej pamięci, raz utworzona instancja i zwracanie tej samej referencji, czy tworzenie nowego obiektu za każdym razem kiedy ktoś klika w to samo narzędzie? Ad. 2 - po to, żeby narzędzia zajmowały się rysowaniem, a nie obsługą eventów, kontaktem z DOM i rysowaniem. (Jeśli pytasz bo szukasz odpowiedzi to odpowiedziałem, jeśli zaczniemy tutaj debatować nad takimi detalami to był to mój ostatni komentarz w tym wątku ;) )

[@dominiks5318]

@@Przeprogramowani "raz utworzona instancja i zwracanie tej samej referencji," to wcale nie wyklucza cache'owania referencji w factory np. return this.someTool ?? : (this.someTool = new SomeTool()). Chodziło mi wyłącznie o to że tworzysz 3 instancje podczas gdy korzystający z twojego factory user może używać zawsze tylko jednej. Z resztą popełniłeś tam więcej błędów, bo getTool powinno być statyczną metodą a Factory nie powinno być również instancjonowane więcej niż 1 raz, a u ciebie jest to konieczne gdy user chce go użyć w różnych modułach zamiast zrobić to jako Factory.getTool('tool').

[@dominiks5318]

@@Przeprogramowani co do Ad2 subscribers to nie są przecież narzędzia sam powiedziałeś "będą to jakieś funkcje czy też jakieś byty, które będą nasłuchiwać na zmianę narzędzi"

[@Przeprogramowani]

Ok rozumiem, wypowiem się w poniedziałkowym filmie na ten temat :)

[@dominiks5318]

@@Przeprogramowani który powinien mieć w tytule "Singleton" bo właśnie tego zabrakło. Pozdrawiam

[@gigashooty4482]

w js już nie trzeba pisać " ; " czy to jest jakiś plugin do VSC ?

[@Przeprogramowani]

Nigdy nie było takiej konieczności, średniki są opcjonalne w JS: flaviocopes.com/javascript-automatic-semicolon-insertion/

[@gigashooty4482]

@@Przeprogramowani ok dzięki

[@marcindomanski5654]

Mniej więcej na tej zasadzie stworzyłem swoją aplikację: kzbin.info/www/bejne/mGPCg6V_hr52gM0 Musiałem tylko przemodelować założenia, bo te z filmiku są za bardzo sztywne. Ale ogólny wzór jest taki jak u ciebie.

[@Przeprogramowani]

No i brawo :) Dobra muza!