Redux – zarządzanie stanem w React

Redux ułatwia nam pracę ze stanem, a jego implementacja w ReactJS stała się najbardziej popularnym sposobem tworzenia warstw danych opisanych przez Facebook-a jako Flux. Nie będę jednak opisywał podstaw pracy ze stanem w ReactJS ani samego sensu jego stosowania . W tym artykule chcę się skupić na wytłumaczeniu jakie elementy musi zawierać aplikacja używająca Reduxa […]

Promise w JavaScript zaawansowane użycie – Promise chaining, Await/Async

Umiejętna praca z Promisami w JavaScript jest niezbędna do stworzenia niemal każdej rozwiniętej aplikacji. Wyjątkiem jest tutaj używanie zupełnie innych technologii do obsługi zapytań HTTP (np. biblioteka RxJs, o której pisałem w artykule: RxJs – programowanie reaktywne w Angular2). Nie będę tutaj pisał o zupełnych podstawach Promisów. W celu poznania tego zagadnie od początku polecam […]

Funkcja wyższego rzędu (Higher-Order Functions) w JavaScript

Funkcja wyższego rzędu – definicja Funkcja wyższego rzędu to funkcja przyjmująca inną funkcję jako argument bądź zwracająca funkcję. Jeżeli na pierwszy rzut oka może brzmieć to nie jasno to warto zauważyć, że z tego typu funkcjami pracujemy na co dzień (bądź przynajmniej powinniśmy mieć już jakąś styczność) pracując z JavaScriptem. Najpopularniejsze z nich zostały zaimplementowane […]

Angular2 – walidacja formularzy w html-u i komponencie

Angular2 daje programiście sporo gotowych możliwości ułatwiających walidację formularzy po stronie front-endu. Może to być bardzo pomocne dla użytkownika kiedy w trakcie wypełniania formularza na bieżąco będzie informowany o błędach. Warto przy tym wspomnieć, że nie zawsze dobrym pomysłem będzie przygotowanie restrykcyjnej walidacji dla formularza. Przykładowo projektując formularz koszyka z zamówieniem w sklepie internetowym, obsłudze […]

TypeScript – typy danych oraz modyfikatory dostępu

Deklarowanie zmiennych w JavaScript bez przypisywania im określonego typu w momencie deklaracji jest zaskakujące dla wszystkich osób, które mają doświadczenie z innymi językami programowania i rozpoczynają swoją przygodę z JS. Ten stan rzeczy zmienił się dzięki TypeScript-owi, dzięki któremu każda zmienna może mieć określony typ. Wprawdzie po kompilacji typowanie i tak znika z kodu co […]

JavaScript najważniejsze elementy ECMAScript 6 [ES6]

ECMAScript 6 [ES6] ECMAScript 6 zwany jest również jako ECMAScript 2015 albo najkrócej ES6. Jest to 6 edycja standardu ECMAScript, która ostatecznie opublikowana została jako standard 17 czerwca 2015 roku. Nowy standard niesie ze sobą kilka nowości ułatwiających codzienną pracę na polu front-endu. Przejście od etapu ciekawej nowości do etapy must-know dał ES6 AngularJS w […]

AngularJS – dyrektywy w Angularze 1.X

Dyrektywy w AngularJS Dyrektywa (directive) jest to template np. połączenie html i angular, który wielokrotnie może być użyty na stronie. Template ten zazwyczaj wczytywany jest z osobnego pliku HTML i niezwykle pomaga w utrzymaniu czytelności kodu, ułatwia testowanie fragmentów kodu i pozwala dzielić aplikację na moduły. Istnieje wiele wbudowanych dyrektyw, których nie będę tutaj omawiał. […]

AngularJS – problem z routeProvider w Angular 1.6

Czym jest routeProvider? Użycie routeProvider w Angular 1 umożliwia przeniesienie routingu z warstwy backendowej do frontendu. Prościej: zmiany w adresie strony internetowej przechwytywane, są przez Angulara i pobierana jest określona część strony zamiast ładowanie całej strony na nowo z serwera. Do użycia routeProvider, potrzebne jest kilka rzeczy: 1) Dołączenie do projektu pliku: angular-route.min.js np. z […]

AngularJS 1 – przegląd serwisów: provider, decorator, constant [2/2]

Kontynuujemy temat serwisów (usług) w AngularzeJS 1. W tym artykule przyjrzymy się provider, decorator i constant. Dla przypomnienia w poprzednim artykule omówione zostały: factory, service, value, które z pewnością będą najczęściej wykorzystywane. Ważne, żeby najpierw zapoznać się z wcześniejszym tekstem ponieważ w przypadku dekoratora pracował będę na opisanej poprzednio usłudze service. Provider Provider jest najbardziej […]

AngularJS 1 – przegląd serwisów: factory, service, value [1/2]

Tym artykułem zaczynam przegląd frameworka AngularJS w wersji 1.6. W kolejnych częściach opisane zostaną filtry, dyrektywy, providery i dekoratory. Czym w ogóle jest AngularJS? Jest to jeden z frameworków używanych we Front-endzie, którego twórcą jest firma Google. Obecnie największym konkurentem Angulara jest ReactJS, który z kolei stworzony został przez firmę Facebook. Frameworki narzucają programiście ścisłe […]

JavaScript – domknięcia (closures)

Domknięcia (closures) w JavaScript Domknięcia (closures) tworzą w JS izolowany zasięg dla zmiennych. Umożliwia to wielokrotne używanie danego modułu/funkcji ponieważ jest ona niezależna od otoczenia. Domknięcia pozwalają między innymi na ograniczenie liczby zmiennych globalnych. Takie zmienne mogą przysporzyć wiele problemu w sytuacji, gdy nad aplikacją pracuje większa liczba programistów, którzy tworzą różne elementy aplikacji. Ostatecznie […]

JavaScript – użycie metod bind, call, apply

Metody: bind, call, apply w JavaScript Obiekty w JavaScript posiadają swoje właściwości oraz metody. Można bezpośrednio w obiekcie zapisać metodę, która następnie będzie wywoływana. To by jednak oznaczało, że jeżeli na obiekcie potrzebujemy wywołać kilka metod wszystkie muszą się w nim pojawić. Jeszcze gorszym przypadkiem jest posiadanie wielu obiektów i w każdym z nich wywoływanie […]

JavaScript – funkcja natychmiastowa IIFE

Funkcja natychmiastowa IIFE Immediately-Invoked Function Expression czyli funkcja natychmiastowa IIFE jest niezwykle przydatną na co dzień formą zapisu i uruchamiania funkcji. Jej konstrukcja polega na zamknięciu całej funkcji w nawiasy (może być to funkcja anonimowa) i natychmiastowym jej wywołaniu. (function() { //some code })(); Zapis taki tworzy domknięcie. Dzięki temu unikniemy deklaracji zmiennych globalnych, jak […]

JavaScript – wyrażenia regularne RegExp

Wyrażenia regularne RegExp w JavaScript wielokrotnie ułatwią nam codzienną pracę. Od sprawdzania zapisu kodów pocztowych po wyszukiwanie adresów mailowych do znajdowania numerów telefonów lub sprawdzania poprawności wprowadzonego przez użytkownika hasła. Flagi w wyrażeniu RegExp: i – ignore case [wyszukiwane są zarówno duże jak i małe litery pasujące do wzorca] g – global [przy braku tej […]

JavaScript – iteracja po tablicach i obiektach w pętli for (in, of)

Iterując po tablicach, czy stringach zazwyczaj odruchowo sięgamy po właściwość length. Używając instrukcji for (i=0; i < array.length; i++) {} uzyskamy dostęp do każdego z elementów. Istnieją jednak również inne metody iteracji dla tej pętli, a ich zalety i wady przedstawię w tym artykule. Użycie for in na tablicach i stringach. Użycie for in na […]

JavaScript – pętla for i jej różne wywołania for (;;)

Klasyczne użycie pętli for w JavaScript jest zbliżone do innych języków programowania. Deklaracja for zawiera zmienną, która w tym samym miejscu może zostać zadeklarowana. Następnie po średniku wpisywany jest warunek, a ostatnim trzecim parametrem jest np. inkrementacja. Klasyczne użycie pętli for – wersja najbardziej popularna. for (var i = 0; i < 5; i++) { […]

JavaScript – skrócony zapis wybranych instrukcji JS

JavaScript obudowany jest obecnie wieloma frameworkami, które znacznie upraszczają kod, istnieje jednak trochę instrukcji, które umożliwiają skrócenie i uproszczenie kodu również w samym natywnym języku JavaScript. W tym artykule przytoczę 9 takich skrótów, które wydają mi się najbardziej interesujące, a część z nich może zaskoczyć również doświadczonych programistów JS. Na samym dole strony efekt poniższego […]

JavaScript – obiekt window i położenie kursora

JavaScript umożliwia programiście w niezwykle prosty sposób uzyskać wiele informacji dotyczących monitora, przeglądarki oraz położenia kursora użytkownika. Poniżej przedstawiłem w pierwszej kolejności właściwości MouseEvent, a dalej właściwości window dotyczące monitora, przeglądarki. Na samym dole znajduje się kod użyty do wyświetlenia na stronie poniższych informacji. Zwróć uwagę, że wszystkie informacje wypisane po pogrubionych nazwach dotyczą Twojej […]

JavaScript – konwersje typów danych w JS

Do porównania dwóch wartości w JavaScript używa się zapisu === lub == . Wynikiem porównania === będzie „true” tylko w sytuacji, gdy zarówno typ danych jak i wartość będą sobie równe. Oznacza to, że wynikiem porównania 99 === „99” będzie false ponieważ pierwsza wartość jest liczbą, a druga to String. Żeby w powyższym przykładzie uzyskać […]

JavaScript – różne sposoby na tworzenie obiektów

JavaScript umożliwia tworzenie obiektów na kilka różnych sposobów. Sposób 1 w pierwszej linijce tworzony jest obiekt, a następnie, są dodawane do niego właściwości. Ostatnią z dodanych właściwości jest funkcja zwracająca dwie z wcześniej podanych właściwości: var card = {} card.firstName = "Jan"; card.lastName = "Kowalski"; card.age = "35"; card.name = function() { return this.firstName+" "+this.lastName; }; […]

JavaScript – obiekt globalny: STRING

String jest dowolnym łańcuchem tekstowy, bez którego nie sposób wyobrazić sobie żadnej strony ani aplikacji. Ten obiekt globalny w JavaScripcie ma wiele przydatnych metod i właściwości, z których możemy korzystać. Część z nich może być zastąpiona przez wyrażenia regularne, które opisałem w innym wpisie: „JavaScript – wyrażenia regularne RegExp„. Na bazie poniższego zdania przedstawiłem część […]

JavaScript – obiekty globalne MATH NUMBER

Obiekty globalne MATH i NUMBER dostępne w czystym JavaScrypt oferują programiście sporo możliwości. Często zamiast rzucać się na kolejne javascript-owe framework-i lepiej spędzić trochę czasu poznając wszystkie możliwości jakie drzemią w VanillaJS. VanillaJS jest to rodzaj żartu. Określa się tak natywny język JS, mrugając okiem w stronę fanów frameworków JS. obiekt globalny MATH Math.PI – […]

JavaScript – Use Strict wyłapie pomyłki w kodzie

Use Strict w JS Strict mode został wprowadzony w EcmaScript 5. Zatem nie jest już niczym nowym, ale w dalszym ciągu jego deklaracja wywołuje zdziwienie u programistów Front Endu. Tryb ten umożliwia programiście łatwe wykrycie błędów programistycznych, które w normalnym trybie nie zostaną wskazane jako błąd. Takie przegapione błędu mogą stanowić prawdziwą zmorę wraz z […]