Openapi generator – REST client dla Angular

Tworząc aplikacje www bardzo często piszemy tzw. backend i frontend. Może wówczas (ale nie musi!) powstać problem związany z API do komunikacji pomiędzy tymi dwiema warstwami. Bardzo często odbywa się to na zasadzie dogadujemy się jak wygląda endpoint, ustalamy jego ścieżkę (adres), parametry wejściowe, wyjściowe i metodę komunikacji. Możemy to spisać ale ostatecznie i tak narażamy się na „nieprzewidziane” zmiany. Dodatkowo wybierając tą metodę zmuszeni jesteśmy do pisania elementów API po obu stronach (zwiększając możliwość popełnienia błędu). Są jednak narzędzia które umożliwiają automatyczne generowanie kodu dla jednej ze stron komunikacji. Dzięki temu raz że oszczędzamy czas, a dwa zmniejszamy ryzyko Więcej…

Z lewy, przed

Angular interceptor

Interceptory jak sama nazwa wskazuje służą do przechwytywania wywołań http i ich modyfikacji, a Angular udostępnia nam wbudowane narzędzia do ich łatwej obsługi. Dzięki interceptorom możemy przechwycić globalnie każde nasze wywołanie http, dowolnie zmodyfikować jego zawartość i przekazać dalej. Możemy również za pomocą interceptora przechwytywać odpowiedź od serwera i wykonać na niej jakieś operacje. Interceptorów możemy napisać wiele w naszej aplikacji i tworzyć łańcuchy wywołań interceptorów, ostatnie wywołanie w łańcuchu jest wykonaniem zapytania do serwera. Aby zaimplementować interceptor piszemy serwis, który implementuje interfejs HttpInterceptor czyli zawiera metodę intercept Jest to najprostszy interceptor, który jest i tyle. Interceptor ten nic nie Więcej…

Z lewy, przed

Dekorujemy TypeScript

TypeScript to taki fajny JavaScript i daje nam trochę więcej niż sam „król” przeglądarek. Jedną z tych fajnych rzeczy (choć nie każdy potwierdzi moje zdanie) które mamy w TypeScript a nie mamy w JavaScript są dekoratory. Dekoratory to typy deklaracji, które mogą być używane z klasami, metodami klas, akcesorami (?, setter/getter) w klasach, własnościami klas lub parametrami metod w klasach. A tak po polskiemu to po prostu funkcje które wywoływane są w runtime’ie wraz z wymienionymi wyżej elementami. Dekoratorów używamy za pomocą zapisu @NazwaDekoratora gdzie NazwaDekoratora to nasza funkcja która zostanie wywołana wraz z dekorowanym elementem i do której zostaną Więcej…

Z lewy, przed

Nadal żyję i nic złego się nie stało

Tytuł może i trochę dziwny ale dziś inny wpis. Nie było mnie tu ponad rok, to był ciężki rok i wiele się wydarzyło. Duże zmiany w życiu prywatnym, do tego zawirowania zawodowe – dwie zmiany pracy w 6 (w rzeczywistości to 8 bo trochę się oszukiwałem) miesięcy! <szok> Jakieś 15 miesięcy temu po kilku(nastu) latach pracy z kodem postanowiłem że trzeba coś zmienić, zrobić jakiś krok w przód bo stagnacja dobija. Wiadomo że zmiany to wyjście po za własną strefę komfortu i nigdy nie jest łatwo, ale stwierdziłem że trzeba się odważyć, kiedy jak nie teraz, wszystko wskazywało że jest to Więcej…

Z lewy, przed

Angular komponent – ViewEncapsulation

Tworząc komponenty za pomocą Angulara dostajemy możliwość zarządzania kapsułkowaniem styli dla komponentów. W rzeczywistości oznacza to, że dostajemy możliwość zarządzania tym jak style z danego komponentu mają wpływać na resztę aplikacji (inne komponenty). Sposób kapsułkowania w komponencie ustawiamy za pomocą właściwości encapsulation obiektu metadanych komponentu Jak widzimy Angular dostarcza 4 sposoby kapsułkowania styli dla komponentu. Domyślnym sposobem (czyli jeżeli nie podamy parametru encapsulation) jest Emulated, dodatkowo dostępne mamy ShadowDom, None i Native. Poniżej opiszę pierwsze 3, Native pominę ponieważ jest już deprecated. ViewEncapsulation.Emulated Jest to domyślna wartość kapsułkowania styli w Angular i charakteryzuje się tym, że style są domknięte w Więcej…

Z lewy, przed

Angular – cykl życia komponentu

Angular dla komponentów, czyli podstawowych elementów budowy aplikacji udostępnia dość pokaźny zestaw tzw. hooków (uchwytów?), dzięki którym możemy reagować w interesujących nas momentach cyklu życia komponentu (Angular component lifecycle) na zdarzenia zachodzące w danym komponencie. Hooków jest 8, wyglądają następująco i odpalane są w następującej kolejności Przed hookami uruchamiany jest jeszcze konstruktor klasy komponentu. ngOnChanges – Pierwszym uruchamianym hookiem (co nie musi być tak oczywiste) jest ngOnChanges. Funkcja ta uruchamiana jest gdy dla pól klasy oznaczone dekoratorem @Input() zmienią się wartości (jeżeli klasa nie posiada pól oznaczonych @Input() ngOnChanges nie jest uruchamiany) jest to jedyna metoda z cyklu życia komponentu, Więcej…

Z lewy, przed

Referencja

W JavaScript/TypeScript rozróżniamy typy proste i typy złożone. Typy proste to string, number, boolean. Zmienna przechowująca typ prosty przechowuje po prostu wartość. Jeżeli wartość jest typu złożonego (obiekt, tablica) to wówczas zmienna jest referencją do tej wartości a nie samą wartością. Jeżeli utworzymy zmienną typu prostego a następnie drugą zmienną której jako wartość inicjującą przypiszemy wcześniej utworzoną zmienną, to wówczas druga zmienna otrzyma kopię wartości znajdującej się w pierwszej zmiennej. Sprawa ma się trochę inaczej w przypadku typów złożonych. Jeżeli do zmiennej przypiszemy typ złożony (np. nowy obiekt) to zmienna będzie tak naprawdę referencją na ten obiekt a nie samym Więcej…

Z lewy, przed

Operatory logiczne w JavaScript

W poprzednim wpisie – Rekrutacja frontend developer – dałem zajawkę co przeczytać będzie można w kolejnym wpisie, słowo się rzekło więc dziś o operatorach logicznych w JavaScript/TypeScript – && (koniunkcja) i || (alternatywa). Niby temat banalny, bo co tu skomplikowanego w kodzie najbardziej intuicyjne ale czy najczęstsze zastosowanie operatorów logicznych? Kod powyżej pokazuje wprost – zmienna x jest true, zmienna y false, więc pierwsze wyrażenie nie jest prawdziwe a drugie już tak, co skutkować będzie wyświetleniem tylko drugiego komunikatu na konsoli. Cała zabawa zaczyna się w momencie gdy nie wiemy co będzie się kryło pod zmiennymi sprawdzanymi w wyrażeniach (dane Więcej…

Z lewy, przed

Rekrutacja frontend developer

Temat przewijający się w internetach strasznie często, ale myślę że każdy punkt widzenia wart jest poznania, może akurat trafi się coś nowego. Od mniej więcej półtora roku w firmie w której pracuję biorę udział w rekrutacjach. Jako jeden z liderów teamów frontendowych zostałem poproszony o przygotowanie kilku pytań które zweryfikują kandydata i pozwolą nam stwierdzić po pierwsze czy jesteśmy zainteresowani, a po drugie zbadać aktualną wiedzę i poziom. Sam w przeszłości odbyłem jakieś rozmowy (akurat na programistę Java) i pamiętając co mi najbardziej przeszkadzało starałem się nie popełnić pytań w stylu „sztuka dla sztuki i pokażę Ci jaki jesteś słaby”. Więcej…

Z lewy, przed

console.info(‚Hello world 2.0’);

A dokładniej to Po długim czasie przemyśleń i prób zebrania się w sobie w końcu postanowiłem reaktywować blog. Plan powrotu do pisania nie urodził się przed chwilą tylko dojrzewał już dłuższy czas, jednak brakowało motywacji i ta przyszła pod koniec minionego rok. Jako że powrót jest planem przemyślanym to nie rzucam się z pisaniem od razu i na każdy temat oraz wypaleniem po miesiącu, a raczej stawiać będę na regularność. Jako, że regularność ma być podstawą to na początek postanowiłem określić kiedy wpisy będą się pojawiać i padło na pierwszy i trzeci czwartek miesiąca (czyli 2 wpisy na miesiąc). Dlaczego Więcej…

Z lewy, przed