Jak działa asynchroniczność w JavaScript

Asynchroniczność w JavaScripcie może być trochę myląca, ponieważ język JavaScript nie jest asynchroniczny …sam w sobie. Dopiero w połączeniu z przeglądarką lub node.js robi się asynchroniczny. Z racji, że inaczej nie możemy go użyć uznajemy w uproszczeniu JS za język asynchroniczny.

O tym jak to wszystko dokładnie działa opowiadam w dzisiejszym odcinku.

Jak działa asynchroniczność w JavaScript [wideo]

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

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ą: