Błądzić jest rzeczą ludzką.
Dotyczy to również (a raczej: zwłaszcza...) programistów.
Dlatego jedną z najważniejszych rzeczy w karierze każdego dewelopera jest umiejętność radzenia sobie z tymi błędami. Jako programista React Nativezawsze chcę pisać kod bez bugów i błędów, ale gdy coś pójdzie nie tak, muszę mieć pewność, że potrafię namierzyć i rozwiązać problem.
W tym artykule chcę omówić narzędzia i techniki, z których korzystam na co dzień przy tworzeniu aplikacji mobilnych. Mam nadzieję, że znajdziesz tu coś przydatnego dla swoich projektów
(Uwaga na marginesie: jako edytora kodu używam VScode)
Linting, sprawdzanie typów i formatowanie
Jako programista zawsze chcę skupiać uwagę na wdrażaniu logiki biznesowej, wzorcach kodu i dobrych praktykach. Niekoniecznie na pisaniu, formatowaniu kodu i przeglądaniu całego drzewa plików w poszukiwaniu tego, jakie argumenty mogę przekazać właśnie zaimportowanym funkcjom. Aby to uprościć, możemy oddać całą automatyzację naszemu edytorowi kodu i językowi programowania. Sam używam VScode, ale na rynku jest mnóstwo świetnych opcji, jak Sublime Text, Atom czy Eclipse.
Sprawdzanie typów
Do tego używam TypeScriptu (TS) albo Flow. Główna różnica jest taka, że pierwszy to język programowania, a Flow to type checker. Moim zdaniem TS wygrywa dzięki wielu fajnym rzeczom: automatycznym importom, samodokumentacji i możliwości korzystania z nowszych funkcji JavaScriptu.
Linting
Linting to proces uruchamiania programu w celu analizy potencjalnych błędów składniowych. Najbardziej znane wtyczki lintujące dla JavaScriptu to:
- ESLint - narzędzie do sprawdzania składni i formatowania JavaScriptu.
- Google's Closure Compiler - optymalizator JavaScriptu, który przepisuje kod, by był szybszy i zwięźlejszy, oraz sprawdza użycie natywnych funkcji JavaScriptu.
- JSHint - fork JSLint rozwijany przez społeczność.
- JSLint - narzędzie do sprawdzania i walidacji składni JavaScriptu.
Osobiście używam ESLint, który jest teraz oficjalną wtyczką do lintowania TypeScriptu.
Formatowanie kodu
Programiści spędzają większość czasu na czytaniu kodu, więc chodzi nie o to, by czytać go SZYBKO, ale by szybko go ROZUMIEĆ.
Do tego potrzebna jest jak najbardziej efektywna reprezentacja wizualna. Dlatego trzeba go dobrze sformatować.
Porównaj poniższe fragmenty kodu:
Bum! Teraz widzimy dokładnie to, co powinniśmy widzieć.
Do formatowania kodu polecam Prettier - łatwo go zintegrować i skonfigurować. Możesz też ustawić swój linter tak, by używał go do formatowania.
Jak debugować w React Native?
A teraz najciekawsze - debugowanie.
Zacznijmy od narzędzi. React Native ma przyjazne programiście środowisko i powie nam ostrzeżeniami lub błędami, że robimy coś źle:
Wbudowany tryb debugowania
Po pierwsze, aplikację możesz debugować wbudowanym trybem debugowania przeglądarki, na przykład Chrome czy Safari.
Aby użyć go w Chrome, musisz zainstalować `react-devtools` ze wsparciem dla ReactNative:
# Yarn
yarn global add react-devtools
# NPM
npm install -g react-devtools
W trybie deweloperskim możesz otworzyć menu dewelopera i stamtąd zacząć debugowanie aplikacji. Wystarczy włączyć opcję „debug”:
Otworzy się karta przeglądarki Chrome ze ścieżką http://localhost:8081/debugger-ui.
W przeglądarce Chrome powinieneś zobaczyć taki ekran:
Wersję iOS swojej aplikacji możesz też debugować w Safari, bez włączania „Debug JS Remotely”.
Jak to zrobić? W przeglądarce Safari otwórz:
Preferences → Advanced → Select "Show Develop menu in menu bar"
i wybierz JSContext swojej aplikacji:
Develop → Simulator → JSContext
Powinien otworzyć się Web Inspector w Safari i pokazać konsolę oraz debugger. Za każdym przeładowaniem aplikacji (przez live reload / fast refresh albo ręcznie) tworzony jest nowy JSContext. Wybierz „Automatically Show Web Inspectors for JSContexts”, żeby nie wybierać najnowszego JSContextu ręcznie.
Reactotron
Jeśli używasz Reduxa do zarządzania stanem w React Native albo ReactJS, świetnym narzędziem do debugowania stanu jest Reactotron. To narzędzie pozwala mieć pewność co do wszystkich swoich akcji i daje dużo więcej. Pozwala:
- podglądać stan aplikacji
- pokazywać żądania i odpowiedzi API
- robić szybkie benchmarki wydajności
- subskrybować fragmenty stanu aplikacji
- wyświetlać komunikaty podobne do console.log
- śledzić błędy globalne ze stosami wywołań z mapowaniem źródeł, w tym stosami sag!
- wysyłać akcje jak w rządowym eksperymencie kontroli umysłu
- podmieniać stan aplikacji na gorąco z użyciem Redux albo mobx-state-tree
- śledzić swoje sagi
- pokazywać nakładkę obrazu w React Native
- śledzić Async Storage w React Native
Źródło: dokumentacja Reactotron
React Native Debugger
React Native Debugger to `react-devtools` na sterydach. To aplikacja desktopowa z mnóstwem funkcji do debugowania aplikacji. Najważniejsze plusy, które trzeba wymienić:
*Uwaga: Jeśli używasz Reacta >= 0.62, powinieneś korzystać z React Native Debugger v.0.11
Natywne logi
Zgodnie z oficjalną dokumentacją React Nativemożesz łatwo logować raporty dla obu platform:
$ npx react-native log-ios
$ npx react-native log-android
Jeśli chcesz wejść głębiej, możesz użyć IDE dla konkretnej platformy, jak XCode albo Android Studio aby przeanalizować natywny kod aplikacji i naprawić problem.
Flipper
Flipper to platforma nowej generacji do debugowania aplikacji iOS, Android i React Native.
To aplikacja desktopowa, która daje elastyczność w podglądaniu, wizualizowaniu i kontrolowaniu debugowania aplikacji. Fajne jest to, że funkcjonalność Flippera możesz rozszerzać wtyczkami, na przykład:
https://github.com/jk-gan/redux-flipper
https://github.com/blankapp/flipper-plugin-reduxinspector
jeśli chcesz zintegrować wsparcie dla logowania Reduxa.
Flipper obsługuje wszystkie wcześniejsze funkcje React Native Debuggera, ale dodaje o wiele, wiele więcej. Zajrzyj do oficjalnej dokumentacji aby się przekonać, a może i stworzyć własną wtyczkę i wesprzeć społeczność.
Podsumowanie
To wszystkie narzędzia, których używam na co dzień albo używałem w przeszłości. Testowałem ich sporo i jestem przekonany, że każdy wybór z powyższych pomoże Ci debugować aplikacje React Native szybciej i z lepszym skutkiem.
Na rynku są oczywiście zawsze inne opcje.
A z jakich narzędzi TY korzystasz na co dzień przy tworzeniu aplikacji?
Napisz do mnie na LinkedInie i daj znać!
