Ż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.

Czym jest RxJS?

RxJS to biblioteka napisana, w JavaScript służąca do programowania reaktywnego. Jeśli programowałeś już wcześniej w Angularze prawdopodobnie korzystałeś też z RxJS.

Służy ona do budowania aplikacji opartych o asynchroniczność lub na zdarzeniach.

Podstawowe pojęcia

Observable

Jest to podstawowe pojęcie, w RxJS. Observable należy postrzegać jako zbiór danych lub zdarzeń, które mogą zostać wywołane.

Na przykład Observable zdarzenie kliknięcia myszki, przycisku na klawiaturze.

Taki obiekt może zostać na wiele różnych sposób:

  import { Observable } from 'rxjs';
	
  const observable1 = new Observable();
  
  const buttonEl = document.getElementById('button');
  const observable2 = fromEvent(buttonEl, 'click');

Dodatkowo podczas tworzenia obiektu Observable można przekazać do niego funkcję zwrotną o nazwie subscriber:

  const observable = new Observable(subscriber => {
    subscriber.next('Hello RxJS!');
  });

Dzięki temu określamy jakie dane i kiedy zostaną wysłane przez obiekt Observable.

Observer

Obiekt Observable wysyła powiadomienia do obiektu nazwanego Observer. Taki obiekt po prostu nasłuchuje na ewentualne dane wysłane przez Observable.

Obiekt Observer to zestaw funkcji zwrotnych o takiej strukturze:

const observer = {
    next: value => console.log('next', value),
    error: error => console.log('error', error),
    complete: () => console.log('complete!')
};

Żeby nasłuchiwać, co zostało wysłane podpinamy się pod obiekt Observable za pomocą metody subscribe:

const observer = {
    next: value => console.log('next', value),
    error: error => console.log('error', error),
    complete: () => console.log('complete!')
};

const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('RxJS');
  subscriber.next('!');
});

observable.subscribe(observer);

Subscription

Jest to obiekt, który powstaje w wyniku podpięcia obiektu Observable z obiektem Observer za pomocą metody subscribe:

const observer = {
    next: value => console.log('next', value)
};

const observable = new Observable(subscriber => {
  subscriber.next('1');
  subscriber.next('2');
});

const subscription = observable.subscribe(observer);
subscription.unsubscribe();

Obiekt Subscription posiada metodę unsubscribe, której wywołanie powoduje odpięcie obiektu Observer od Observable, czyli nie będą przez danego obserwatora więcej dane nasłuchiwane.

Subject

Subject to także obiekt typu Observable, ale specjalnego rodzaju. Podczas gdy Observable pozwala na wysłanie danych do jednego obserwatora (Observer). Obiekt Subject daje możliwość wysłania danych do wielu obserwatorów podczas pojedynczego wywołania.

Przykład:

import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe((value) => console.log('Observer 1: ', value));
subject.subscribe((value) => console.log('Observer 2: ',value));

subject.next('Some data');

subject.subscribe((value) => console.log('Observer 3: ', value));

subject.next('Extra data');

Wynik:

Observer 1:  Some data
Observer 2:  Some data
Observer 1:  Extra data
Observer 2:  Extra data
Observer 3:  Extra data

Styczeń podsumowanie.

W styczniu opublikowałem: 5 wpisów:

Inne:

1. Zasada dwóch minut
2. Zasada grupowania zadań

JavaScript:

1. Jak iterować po obiekcie?

Webstorm:

1. Git jak zrobić cherry-pick?

Wrzuciłem jeden komiks:

1. Cookie policy

Przeczytałem cztery książki:

1. Błoto słodsze niż miód. Głosy komunistycznej Albanii - Małgorzata Rejmer
2. Tortilla Flat - John Steinbeck
3. Święto ognia - Jakub Małecki
4. Zabić drozda - Harper Lee

Przesłuchałem dwa audiobooki:

1. Billy Summers - Stephen King
2. Range: How Generalists Triumph in a Specialized World - David Epstein

Czy łapałeś się na tym, że w ciągu tygodnia robiłeś podobne zadania? Na przykład robienie przelewów? Odpisywanie na e-maile?

A co jeśli jesteś w stanie tak zaplanować swoje zadania, że będziesz dzielić je na grupy? W ten sposób masz grupę zadań i zajmujesz nią w określonym czasie.

Grupowanie zadań

Podczas planowania warto zastanowić się, czy jakieś zadania można połączyć w grupy. Dzięki temu jednego dnia możesz załatwić za jednym zamachem X zadań. Zamiast rozbijać je na kilka dni. Ja zasadę grupowania stosuję podczas robienia miesięcznych przelewów. Zbieram listę przelewów, jakie mam do zrobienia i po prostu wykonuję ja konkretnego dnia.

Taki sposób działania pozwala na zaoszczędzenie czasu. Może nie dużo, ale zawsze coś. Dodatkowo stajemy się lepiej zorganizowani.