Operator of zamienia podane, w parametrach wartości w obiekt Observable.

Wywołanie tego obiektu spowoduje wysłanie wartości, w jakiej kolejności zostały przekazane do of.

Operator of przykłady

Przykład 1

import { of } from 'rxjs';

const observable = of(3, 2, 1);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: 3
// value: 2
// value: 1

Przykład 2

Jako parametry można przekazywać wartości różnego typu:

import { of } from 'rxjs';

const observable = of([1, 2, 3], 'Some text', true);
observable.subscribe(value => console.log('value: ', value));

// Wynik:
// value: [1, 2, 3]
// value: Some text
// value: true

fromEvent tworzy obiekt typu Observable. Służy do obsługi zdarzeń. Jak na przykład zdarzenie kliknięcia przycisku myszy lub przycisku na klawiaturze.

Przyjmuje następujące parametry:

1. target — To obiekt, z którego będą generowane zdarzenia.
2. eventName — To nazwa zdarzenia, które będzie wysyłane przez obiekt określony, w parametrze target.
3. options — Dodatkowo dane, które zostaną przekazane do addEventListener.

Przykład

import { fromEvent } from 'rxjs';

const btnEl = document.querySelector('#button');
const observable = fromEvent(btnEl, 'click');

observable.subscribe(value => console.log('Event: ', value));

Stworzenie stałej w JavaScript jest bardzo proste:

const value = 7;

Skoro jest to stała, nie można zmienić jej wartości:

const value = 7;

value = 'test';
// Uncaught TypeError: invalid assignment to const 'value' w FireFox

A co z obiektami?

Stałe obiekty

const obj = {
  name: 'Product X',
  value: 1200
}

W takim przypadku możemy zmienić właściwości obiektu, ale nie możemy ustawić nowej wartości obj:

const obj = {
  name: 'Product X',
  value: 1200
};

obj.name = 'Product Y'; // Ok
obj.value = 700; // Ok

obj = { age: 20 }; // Błąd!

Jak można stworzyć stały obiekt, którego nie da się zmienić?

Object.freeze

W klasie Object istnieje metoda freeze, która sprawia, że obiekt stanie się stały:

const obj = {
  name: 'Product X',
  value: 1200
};

Object.freeze(obj);

obj.name = 'Product Y';
delete obj.value;
obj.age = 20;

console.log(obj); // { name: 'Product X', value: 20 }

Do obiektu nie można nic dodać, usunąć lub zmienić wartości jednego z istniejących właściwości.

Żeby stworzyć podstawową konfigurację w Webpack, do obsługi TypeScript wystarczy:

Instalowanie zależności

Tworzymy plik package.json:

npm init

Następnie instalujemy Webpack:

npm i --save-dev webpack webpack-cli

Kolejny krok instalacja TypeScripta:

npm install --save-dev typescript ts-loader

Dodajemy HTML Webpack plugin:

npm i --save-dev html-webpack-plugin

Ten plugin sprawi, że stworzy dla nas z automatu plik index.html. Więcej o tym trochę później.

Na koniec zainstalujmy jeszcze Webpack dev server. To pomocne narzędzie do automatycznego przeładowania aplikacji, w momencie zmiany kodu:

npm install --save-dev webpack-dev-server

Konfiguracja

Zabieramy się za konfigurację.

Stwórz plik o nazwie: tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "noImplicitAny": true,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "moduleResolution": "node"
    }
}

To jest plik konfiguracyjny dla compilera TypeScript.

Stwórz plik o nazwie: webpack.config.js i dodaj:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },
    devServer: {
        static: './src',
        hot: true,
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
        }),
    ],
};

Pole entry określa plik napisany, w TypeScript. W taki sposób informujemy Webpack skąd, ma pobrać kod źródłowy naszej aplikacji. W output podajemy nazwę pliku filename, jaką ma mieć przekompilowany kod. devServer tutaj powiadamiamy Webpack dev server miejsce (static), jakie ma nasłuchiwać podczas ewentualnych zmian kodu. hot ustawione na true sprawi, że po zapisie zmiany w kodzie aplikacja zostanie przeładowana automatycznie.

Dodaliśmy jeszcze plugin: HtmlWebpackPlugin stworzy dla nas automatycznie plik: index.html.

Skrypty

Na koniec konfiguracji dodajmy do pliku package.json do sekcji scripts dodajemy takie polecenia:

"scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production",
    "serve": "webpack-dev-server --open --mode=development --config webpack.config.js"
}

Skrypt build przekompiluje nam kod do zminimalizowanej wersji.

Skrypt dev stworzy wersję deweloperską.

Z kolei serve uruchomi Webpacka działającego w tle i nasłuchującego na ewentualne zmiany w kodzie.

Przykład

Teraz czas to wypróbować. Stwórz katalog: src a w nim takie pliki:

foo.ts:

export const foo = () => {
    console.log('Foo call!');
};

index.ts:

import { foo } from './foo';

foo();

Następnie uruchom skrypt:

npm run dev 

Zostanie stworzony katalog dist i plik index.js. Sprawdź zawartość tego pliku.

Uruchom skrypt:

npm run build 

Ponownie zajrzyj do pliku w dist/index.js.

Ostatni skrypt:

npm run serve 

Zostanie uruchomiona aplikacja, w przeglądarce.

Zmień kod w katalogu: src dowolny plik. Po zapisie kod zostanie przekompilowany. Jeśli coś zmienisz i zapiszesz te zmiany, aplikacja zostanie przeładowana także w przeglądarce.

Dlaczego ludzie interesują się produktywnością? Może dlatego, żeby polepszyć jakość swojej pracy albo zrobić więcej, w tym samym czasie?

Albo mieć poczucie, że pracujemy dobrze? Wystarczająco dobrze. Istnieje jednak pewne ryzyko z tym związane.

Mianowicie: kult bycia ciągle zajętym.

Nie mam czasu

Dzięki różnym technikom takim jak: blokowanie czasu lub pracy nad skupieniem możemy zaoszczędzić wiele czasu.

Kiedy widzimy, że to działa przychodzi myśl do głowy: "a może wrzucić do swojej listy zadań coś jeszcze?". Dodajemy kolejne zadania. Nasza TODO lista zaczyna pęcznieć.

Czyli mówiąc krócej: jesteśmy zajęci. Problem pojawia się kiedy jesteśmy zajęci cały czas. Wpadamy wtedy w pułapkę produktywności o nazwie: nie mam czasu. Jak to? Stosuję techniki produktywności, żeby zaoszczędzić czas, a ciągle czuję, że mi go brak?

Bycie zajętym to nie znaczy bycie produktywnym. W krótkiej perspektywie jest to jeszcze, w miarę do zniesienia. Ale długoterminowo to przepis na porażkę. Tak działając, będziemy czuli tylko przytłoczenie.

Lekarstwo

Jeśli wpadłeś w taką pułapkę, to czas na jedno: eliminuj! Zostaw tylko te zadania, które są ważne. A co jeśli wszystkie są ważne? Zostaw tylko te najważniejsze :)

Nie ma innej opcji: brutalna eliminacja zadań sprawi, że wyjdziesz z tej pułapki.