Sebastian Superczyński i Przemysław Pietrzak z Espeo postanowili zebrać 30 tricków, z których korzystali przez lata pracy w software housie i przedstawić je w poniższym artykule. Znajdziecie w nim porady dotyczące tego, by używać get i set w Input() zamiast ngOnChanges oraz by deklarować typy w tuple.


Sebastian Superczynski. Pracuje z Angularem od samego początku jego utworzenia. Pomagał w tworzeniu 20 komercyjnych projektów, w tym dla największego banku w Kanadzie. Poza frontendem pracuje również przy projektach związanych z Machine Learningiem.

 

Przemysław Pietrzak. Senior software developer w Espeo. Na co dzień programuje w JavaScripcie i Node.js’ie, a po nocach w Elmie i Reasonie. Fan programowania funkcyjnego i starych filmów. Twórca bibliotek: rembrandt i pyMonet. Bywa złośliwy.

 


Angular

1. Zdefiniuj parametry formularza przed definicją Komponentu

2. Używaj addClass i removeClass, gdzie to tylko możliwe. Pozwoli to uniknąć wielu zbędnych ticków w change detection.

3. Używaj get i set w Input() zamiast ngOnChanges. Kiedy masz wiele ifów w ngOnChanges, każdy “if” musi być osobno sprawdzany. Przy użyciu get akcja wykonywana jest od razu na właściwej zmiennej.

4. Używaj “pipe” kiedy korzystasz z renderowania kodu html w ngFor.

5. Dodaj baseUrl i path do compilerOptions, aby uniknąć zbędnych, niejasnych i nieczytelnych importów plików ts.

6. Dodaj stylePreprocessorOptions do angular.json, aby uniknąć niejasnych i nieczytelnych importów plików css.

7. Uruchamiaj komendę npm outdated i npm-check raz w miesiącu. Ułatwi Ci to aktualizację bibliotek. O wiele łatwiej jest zaktualizować Angulara 5 do 6 niż 4 do 6.

8. Uruchamiaj npm audit raz w miesiącu. Pozwoli Ci to szybko wprowadzić poprawki bezpieczeństwa w bibliotekach które tego wymagają.

9. Podczas walidowania pól formularza używaj parent zamiast this.form, który może być jeszcze nie zainicjalizowany, kiedy wykonywana jest walidacja.

10. Staraj się wydzielić nazwy routingu do osobnych zmiennych. Pozwoli to uniknąć przypadkowych literówek.

11. Zainstaluj webpack-bundle-analyzer. Pozwoli Ci to łatwo odnaleźć, szybko rosnące moduły. W naszym przypadku w jednym pliku zamiast zaimportować variable.scss dołączyliśmy plik main.scss. Rozmiar naszego bundla zwiększył się dwukrotnie!

12. Używaj zakładki Performance w przeglądarce. Renderowanie z prędkością 17ms oznacza, że używasz 60fps. Akcje poniżej 60fps i większe niż 30fps są prawidłowe. Każdy wskaźnik poniżej 30fps sprawia, że użytkownik dostrzega zacinającą się aplikację.

13. Używaj dodatku do przeglądarki Augury.

14. Używaj Prettier jako narzędzia do formatowania kodu.

Przykładowa konfiguracja:

Użyj tego dodatku, aby zapobiec konfliktom pomiędzy tslintem i prettierem:

https://www.npmjs.com/package/tslint-config-prettier.

Typescript

15. Za pomocą słowa kluczowego declare — pozwala ono utworzyć typ który nie jest zdefiniowany domyślnie.

http://blogs.microsoft.co.il/gilf/2013/07/22/quick-tip-typescript-declare-keyword

16. Żeby zadeklarować słownik użyj takiej składni arg: { [key: string]: number }.
Każda wartość tego obiektu będzie zadeklarowana jako number.

17. Za pomocą operatora ampersand możesz uzyskać:

18. Deklaruj typy w krotkach (tuples).

19. Używaj podkreślenia, które ułatwi Ci czytać duże liczby:

let bigNumber = 123_456_678;

let bigNumber = 123456678;

20. Aby zapobiec stworzenia instancji danej klasy używaj słowa kluczowego ‘abstract’.

TSlint

21. Unikaj typów any. Dodaj no-unsafe-any: {“severity”: “warning”} do tslinta — otrzymasz ostrzeżenie, kiedy użyjesz tego typu w kodzie. Aby zapobiec zwiększaniu się ilości unsafe-any dodaj ten skrypt bashowy do Twojej konfiguracji CI.

22. Dodaj no-string-literal do tsconfig — blokuje on dostęp do klucza obiektu poprzez obj[‘key’]. Tylko deklaracja obj.key jest możliwa.

23. Dodaj typ przy deklaracji obiektu:
„no-inferrable-types”: [
true,
„ignore-params”
],

24. Unikaj złożoności kodu:

Dodaj „parameters-max-number: [true, 10] do tsconfig — ustawi to limit 10, jako maxymalną ilość parametrów które może przyjąć funkcja.

cognitive-complexity: [true, 10] — zablokowane jest dodanie więcej niż 10 “if/else/switch” w jednej funkcji.

no-big-function: [true, 100] — ustawi maxymalną ilość linii w kodzie na 100. Staraj się z czasem zmniejszać tę liczbę, idealnie gdyby miała wartość około 20.

25. Staraj się utrzymać czysty kod:

Dodaj no-commented-out-code do tsconfig — reguła ta nie pozwala na trzymanie w kodzie zakomentowanych linii.

„no-duplicate-string”: [true, 5] linter  pokaże błąd kompilacji kiedy znajdzie w jednym pliku to ten sam string 5 razy.

26. Dodaj “noImpicitAny”: true to tsconfig — otrzymasz błąd kompilacji kiedy nie można odczytać typu argumentu funkcji.

27. Dodaj “noImplicitReturns”: true do tsconfig — otrzymasz błąd kompilacji kiedy będziesz próbował zwrócić różne typy w jednej funkcji w poszczególnych “ifach”.

28. Dodaj “strictFunctionTypes”: true do tsconfig — otrzymasz błąd kompilacji kiedy dodany jest zły typ parametru do funkcji.

29. Dodaj “noUnusedParameters”: true do tsconfig — otrzymasz błąd kompilacji kiedy we funkcji masz nieużywane jej parametry. Argumenty z podkreśleniem są dozwolone.

30. Dodaj “noUnusedLocals”: true do tsconfig — otrzymasz błąd kompilacji kiedy masz w kodzie nieużywane importy lub zmienne.


Zdjęcie główne artykułu pochodzi z pexels.com. Artykuł został przetłumaczony z bloga espeo.eu.

Zapraszamy do dyskusji
Nie ma więcej wpisów

Send this to a friend