React JS – kurs w 60 minut

Pora omówić najpopularniejszy framework bibliotekę JavaScript. Jakie są wady i zalety Reacta, jak wygląda praca w nim? O tym właśnie dzisiaj

PS. Jeżeli jesteś zainteresowany pełnym kursem React, zapraszam tu -> https://tworcastron.pl/kurs-react/

React – kurs w 60 minut [wideo]

Pętla for ( ..in ..) vs for (.. of ..) w JavaScript

Pętla for ( ..in ..) vs for (.. of ..) [wideo]

Pętla for() – wstawiać let, const, var a może nic? JavaScript

Każdy widział pętle for() w JavaScripcie. Wygląda ona, np. tak:

for (let i = 0; i < 10; i++) { .... }

Ale dlaczego właściwie tam jest let? Czy może być const, var albo nic? O tym właśnie dzisiaj!

Pętla for() – wstawiać let, const, var a może nic? [wideo]

Różnice pomiędzy funkcjami (function declaration, function expression, arrow function) w JavaScript

W JavaScriptcie funkcję możemy zapisać na 3 różne sposoby:

1. Function declaration:
function greet () { … }

2. Function expression:
const greet = function () { … }

3. Arrow function (właściwie to też jest function expression): 
const greet = () => { … }

Po co aż tyle i czym się różnią? Dzisiaj właśnie o tym..

Różnice pomiędzy funkcjami (function declaration, function expression, arrow function) [ wideo]

Vue.js – kurs w 60 minut

Vue.js czyli jeden z 3 najpopularniejszych frameworków JavaScript, zaraz za Reactem i Angularem.

Osobiście bardzo lubię Vue, jest przejrzysty i jak to nazywam programmer-friendly. Pisanie w nim jest łatwe i przyjemne już od samego początku.

Vue.js – kurs w 60 minut 

Geneza powstania

Pewien koleś o imieniu Evan You, pracujący w Google przy Angualrze (tzn. używał Angulara) pomyślał:

I figured, what if I could just extract the part that I really liked aboute Angular and build something really fightweight without all the extra concepts involved?

Mówiąc prościej, postanowił stworzyć prostą i lekką wersję Angulara. I tak w 2014 roku ukazała się pierwsza wersja Vue.js

Przyjęty bardzo dobrze przez środowisko, dostał dodatkowego kopa, gdy Laravel (najpopularniejszy framework PHP) dodał Vue jako domyślny framework na froncie. 

Zalety:

• niski prób wejścia
• bardzo lekki (Vue + Vuex + Vue Router = 30KB gzipped – tyle samo co jQuery!)
• szybkość
• relatywność
• wirtualny DOM
• budowanie aplikacji z komponentów
• CLI – umożliwe szybkie tworzenie aplikacji, servera, deploymentu itd.
• skalowalność – dobry do używa w dużych jak i malutkich projektach
• dokumentacja – po prostu bardzo dobra
• scoped CSS – łatwe ograniczenie CSSa do jednego komponentu

Wady:

• „mała” popularność – jest to w cudzysłowie ponieważ popularność jest bardzo duża, jednak wciąż mniejsza niż React/Angular

Starałem się znaleźć więcej wad, ale naprawdę było ciężko. Vue.js ma za to 2 cechy, które mogą być uznane jednocześnie za wady i zalety…

Inne cechy:

• template – Vue używa kodu HTML ze specjalnymi własnymi dyrektywami (do tworzenia pętli, instrukcji warunkowych itd.). Na identycznej zasadzie działa Angular.
• elastyczność – w małych projektach zazwyczaj dobra, w dużych jednak często chcemy mieć większy porządek i reguły.

Jak działa Vue.js?

W tym miejscu odsyłam na filmiku na początku, od minuty 8:42 zaczynamy zabawę z kodem 😉 

„this” oraz bind() call() apply() w JavaScript

„this” oraz bind() call() apply()

Ostanio omówiłem jak działa słowo kluczowe „this” i kiedy, na co wskazuje – co jest kontekstem wywołania funkcji.

Dziś kontynuacja, czyli jak możemy sami możemy ten kontekst (czyli na co wskazuje słowo kluczowe „this”) zmienić.

„this” w JS – kiedy i na co wskazuje

„this” w JavaScripci – kiedy i na co wskazuje

Słowo kluczowe „this” byłe jedną z rzeczy, która dosyć mocna wprawiała mnie w osłupienie, mimo że znałem te słowo kluczowe z języka PHP.

Cały problem powstał ponieważ JavaScript był opraty o kilka języków, m.in. Sheme – język strukturalny w którym „this” jest niepotrzebne i język Java – język obiektowy, który „this” potrzebuje.

JS jest jednocześnie skrukturalny i obiektowy. Dlatego należało jakoś to pogodzić…

Jak postawić aplikacje Node.js na serwerze

Jak postawić aplikacje Node.js na serwerze

W odcinku o „Node.js – kurs w 60 minut” pokazywałem jak postawić aplikację Node na hekoru, czyli platformie, która pozwala uruchomiś swoją aplikację bez konfiguracji servera. 

Czasami jednak chcemy postawić Noda na swoim własnym serwerze, np. na VPSie czy dedyku. Dzisiaj właśnie o tym.

Operatory JEDNOargumentowe + – !! w JavaScript

Operatory JEDNOargumentowe + – !!

Uwaga: To co widzisz to nie są popularne w działaniach matematycznych dowanie i odejmowanie.

Są to operatory, które przyjmują jeden argument, czyli ich zastosowanie wygląda następująco:

const numberA = +'34'
const numberB = -document.querySelector('input').value
const isTrue = !!someObject

W filmie poniżej wyjaśniam jak dokładnie działają:

Immediately-invoked Function Expression IIFE – jak dokładnie działa

Chyba każdy, kto pracował z JavaScriptem widział taki zapis:

(function() {
 ...
})()

// lub

(() => {
 ...
})()

Immediately-invoked Function Expression (IIFE)

Co więcej, pewnie większość wie do czego taki zapis służy i pewnie większość takiego zapisu używało. Jest to tak zwane Immediately-invoked Function Expression (IIFE), czyli funkcja, która od razu się wywołuje.

Pytanie, ile osób wie dlaczego ten zapis wygląda właśnie tak? Dlaczego potrzebnych jest tyle nawiasów? Po co go stosować? Dzisiaj postaram się odpowiedzieć na wszystkie te pytania.

Czym jest IIFE?

Jak sama nazwa mówi jest to natychmiastowo samowywołująca się funkcja. Czyli funkcja, która wykonuje się od razu. I tyle, nie ma co komplikować.

Dlaczego stosować IIFE a nie zwykłą funkcję?

Skoro jest to funkcja, to dlaczego utrudniamy sobie ten zapis? Przecież coś takiego dałoby się zapisać, np. w taki sposób:

function start() { ... }
start()

Zadziałałoby w ten sam sposób i jest czytelniej, prawda? Teoretycznie tak. Zastanówmy się w takim razie, po co w ogóle używać funkcji zamiast napisać kod od razu, omijając funkcję.

Po co w ogóle pisać kod w funkcji?

Powodów jest kilka:

• jeśli mamy kod w funkcji, wiadome jest, że jest on jakoś ze sobą powiązany, że jest to część tego samego skryptu
• kod jest czytelniejszy
• NAJWAŻNIEJSZE: nie zaśmiecamy globalnej przestrzeni nazw. Nazwy zmiennych/funkcji naszego kodu nie będą kolidowały z innymi skryptami, które mogą używać takich samych nazw. Nasz kod jest hermetycznie zamknięty. Tak jakby miał swoje własne środowisko!

Skoro wrzucanie kodu do funkcji ma sens, to dlaczego nie użyć zwykłej funkcji zamiast IIFE?

Dlaczego akurat IIFE?

W przypadku zwykłej funkcji tworzymy jej nazwę a to już prowadzi do potencjalnej kolizji z innymi skryptami. Bo przecież ta nazwa znajdzie się w globalnej przestrzeni, więc jakiś inny skrypt będzie miał taką samą funkcję cała nasza aplikacja przestanie działać.

W przypadku IIFE jest to funkcja anonimowa – nie ma żadnej nazwy. Skoro nie ma nazwy – nie ma mowy o ewentualnej kolizji.

Kolejny plus to zapis, który na początku wydaje się dziwny. Jeśli się lepiej przyjrzeć to takie zapis

(() => { ...kod... })()

jest czytelniejszy, bezpieczniejszy i szyby do napisania niż

function someFunction() { ...kod... }
someFunction()

Należy tylko zrozumieć dlaczego ten zapis wygląda tak jak wygląda

Co oznacza (() => { … })(). Dlaczego tyle nawiasów?

Powyższy zapis można rozbić na 2 części

• () => {} – zwykła funkcja strzałkowa, równie dobrze to może być tradycyjna funkcja czyli function() {}
• () – nawias na końcu, czyli uruchomienie funkcji

Okej, wg tego kod wyglądałby tak: () => {}() czyli utworzenie funkcji i od razu jej wywołanie. To sam sens bo przecież IIFE to (anonimowa) funkcja, która od razu się wywołuje.

Jednak wciąż brakuje nawiasu do okoła funkcji.

Błąd parsera

Po próbie wywołania takiego kodu () => {}() zobaczymy błąd:
Uncaught SyntaxError: Unexpected token '(’

Początek jest dobry, można zdefiniować funckję i do niczego jej nie przypisać, ale JS nie spodziewa się ostatniego nawiasu. Gramatycznie to jest niepoprawne i tyle.

Trzeba więc to jakoś obejść…

Wyrażenie to nie funkcja

Dodając do siebie liczby używamy często nawiasów, aby zmienić kolejność działań, np. (2 + 4) * 2

JS traktuje wartość w nawiasach jako wyrażenie. Wykonuje operacje, które są w środku i zwraca wartość (w tym przypadku doda liczby i zwróci 6). Takie wyrażenie może znajdować się w dowolnym miejscu aplikacji. Parser chyba nigdy nie zwróci nam błędu, że nie spodziewa się wyrażenia.

Co jeśli w nawiasie będzie funkcja?

(function() { … }) // lub (() => { … })

Okazuje się, że JS potraktuje tę funkcję jako wyrażenie. Taki zapis jest całkowicie poprawny. Dodajmy teraz do tego kolejny nawias – czyli uruchomienie funkcji.

(function() { ... })()
// lub 
(() => { ... })()

Okazuje się, że JS trzyma w pamięci naszą funkcję, ale traktuje ją jak wyrażenie (z racji, że było w nawiasie) a następie dostawia ostatni nawias do wyrażenia – dzięki czemu nasza funkcja się uruchamia!

Podsumowując jest to tak jakby obejście parsera. Dzięki któremu możemy uruchomić antychmiastowo anonimową funkcję, której normalnie byśmy uruchomić nie mogli.