Narzędzia JavaScript Full-Stack Web Developera: Wybór IDE

0:00Tą lekcją przejdziemy sobie do kolejnego tematu dotyczącego prawdopodobnie najważniejszego

0:04narzędzia, z jakim przyjdzie nam pracować, czyli edytorem kodu.

0:08Nie bez powodu znajduje się teraz na

0:09stronie Visual Studio Code i jeżeli sugeruje Ci to, że temat IDE masz

0:14całkowicie zaadresowany, to bardzo proszę Cię o uwagę

0:17ze względu na to, że dużo może się za

0:19chwilę u Ciebie zmienić. Zanim definitywnie zaczniemy, chciałbym

0:22tylko podkreślić, że w tej lekcji skupimy się na wyborze IDE, a na temat lekkich

0:27edytorów kodu będziemy rozmawiać w oddzielnej lekcji.

0:30Uważam, że jest to temat również bardzo

0:32istotny, ale jednocześnie chciałbym, aby nasza uwaga skupiła się na tym głównym

0:36narzędziu, z którym przyjdzie nam pracować.

0:38No i właśnie z tego powodu znajdujemy się teraz na stronie głównej Visual Studio

0:42Code, czyli najpopularniejszego IDE dla programistów,

0:45ale jednocześnie nie będziemy poświęcać mu w tym programie praktycznie żadnej uwagi ze

0:49względu na to, że jest znacznie lepsze narzędzie do pisania kodu

0:53pomimo tego, że Visual Studio Code również jest świetnym rozwiązaniem i sam spędziłem w

0:57nim wiele lat, tak teraz mogę dość śmiało powiedzieć, że jeżeli poważnie myślisz o

1:02rozwoju jako full stack, no to nadszedł czas, aby odejść od Visual Studio Code.

1:07I teraz wiem, że może to nie być dla

1:09Ciebie takie łatwe, ale jednocześnie podam Ci kilka przykładów i to naprawdę z

1:13brzegu, które zadecydują o tym, że wybierzesz narzędzia firmy Jet Brains

1:18i nie potraktuj tego absolutnie jako jakąkolwiek reklamę,

1:21ze względu na to, że moim priorytetem jest

1:22tutaj doprowadzenie do sytuacji, w której faktycznie będziesz wykorzystywać

1:26najlepsze na rynku narzędzia, a Twoja praca będzie jeszcze bardziej efektywna

1:30i niewykluczone też, że będzie sprawiać Ci więcej przyjemności.

1:34Oczywiście jeżeli chociaż trochę kojarzysz tą firmę, to prawdopodobnie zastanawiasz

1:38się dlaczego w ogóle rekomenduję IntelliJ zamiast np.

1:41WebStorma, który został stworzony z myślą o JavaScript.

1:44To, że tak jest oczywiście jest

1:46niezaprzeczalne, ale jednocześnie jako full stack będziemy pracować z różnymi

1:50technologiami i w tym przypadku WebStorm sprawdza się dość średnio.

1:54Wielokrotnie zdarzały mi się sytuacje, że musiałem sięgnąć po jakiś projekt bądź

1:58narzędzie napisane w zupełnie innej technologii niż JavaScript i w takiej

2:02sytuacji Webflow po prostu totalnie się nie sprawdzał.

2:05Jednocześnie w przypadku IntelliJ taki problem nie występuje, ponieważ

2:08pomimo tego, że jest zaprojektowany z myślą o Javie, wspiera praktycznie

2:11wszystkie technologie i języki programowania jakie znam.

2:15Czasem oczywiście zdarzy się, że dla jakiejś mniejszej biblioteki bądź np.

2:18silnika szablonów potrzebujemy doinstalować dodatkowe rozszerzenie, ale

2:22jednocześnie nie wymaga to od nas jakiegoś dużego wysiłku.

2:26Oczywiście tutaj chciałbym podkreślić jeden fakt.

2:28W przypadku Visual Studio Code ten edytor jest nieporównywalnie szybszy i sprawdza

2:33się świetnie, szczególnie na słabszych maszynach.

2:35W przypadku IntelliJ sytuacja wygląda zdecydowanie inaczej, ale jednocześnie

2:39moim zdaniem jeżeli programujesz, to naprawdę warto zadbać o to, aby oczywiście

2:44w miarę możliwości zadbać o to, aby pracować na sprzęcie, który umożliwi nam

2:48pracę z najlepszymi dostępnymi na rynku narzędziami.

2:51I teraz myślę, że warto przejść do samego IntelliJ.

2:54To co teraz widzisz, to absolutnie nie

2:56będzie to samo, co widzisz w momencie zainstalowania IntelliJ.

3:00Zresztą podobnie to wygląda w Visual Studio Code.

3:02Wynika to z faktu, że mój edytor kodu jest

3:05całkowicie dostosowany do moich potrzeb i jednocześnie chciałbym tutaj tylko

3:08zaznaczyć, że część z tych praktyk, które wykorzystuję mogą okazać się dla Ciebie

3:12mniej przydatne, ale jednocześnie być może znajdziesz tutaj wiele różnych inspiracji.

3:17Jeżeli znasz moje inne materiały, to

3:19prawdopodobnie wiesz doskonale, że cenię sobie minimalizm oraz skupienie

3:23maksymalnej uwagi na tym, co w danej chwili robię.

3:26Jednym z elementów, które mi w tym bardzo pomagają jest eliminowanie praktycznie

3:30wszystkich zbędnych elementów interfejsu, których nie potrzebuję w danej chwili.

3:35Przykładowo, jeżeli pracuję z kodem, to absolutnie nie jest mi potrzebny Sidebar.

3:39Tak samo też nie są mi potrzebne jakieś dodatkowe panele boczne, z których

3:42niejednokrotnie nigdy nie zdarza mi się korzystać.

3:45Pomimo tego z różnych powodów przykładowo

3:47sidebar aktywny jest za każdym razem, gdy włączamy jakikolwiek edytor kodu.

3:52Moim zdaniem znacznie lepiej jest wykorzystać funkcje takie jak Navigation

3:55Bar do tego, aby szybciej poruszać się po plikach projektu lub też po prostu

4:00wykorzystywać wbudowaną wyszukiwarkę, czy też bardziej jest to pewnego rodzaju

4:04paleta komend, w przypadku której tak jak teraz wcisnąłem po prostu command shift i o

4:08do tego, aby wyświetlić wyszukiwarkę plików, w przypadku której po prostu mogę

4:12wpisać nazwę, a następnie natychmiast przenieść się do pliku.

4:15Jest to akurat funkcja, którą prawdopodobnie doskonale kojarzysz z

4:18Visual Studio Code i bez wątpienia zarówno Visual Studio, jak i IntelliJ i inne

4:23edytory kodu posiadają wiele wspólnych elementów i to jest jednym z nich.

4:27Jednocześnie już sam element taki jak

4:29Navigation Bar w przypadku IntelliJ nie występuje.

4:32Oczywiście z tego co pamiętam jest tam

4:34dostępna wtyczka, która umożliwia nawigowanie po Breadcrumbsach, które swoją

4:38drogą w przypadku IntelliJ również można tutaj wyłączyć,

4:41natomiast ja osobiście z nich nie

4:43korzystam ze względu na to, że również nie są mi potrzebne, ale w zamian ten

4:47Navigation Bar okazuje się niesamowicie przydatny ze względu na to, że służy nie

4:51tylko do nawigowania po plikach projektu, ale jednocześnie możemy tutaj wykorzystać

4:55skróty do tego, aby utworzyć nowe pliki i katalogi, po prostu podając ich tutaj nazwę.

5:00Idźmy jednak dalej, ponieważ takich rzeczy jest zdecydowanie więcej.

5:04Przykładowo przeniesiemy się teraz do Visual Studio Code, który przed chwilą

5:08zainstalowałem, więc wybacz, że nie jest w żaden sposób skonfigurowany.

5:11Natomiast co nie zmienia faktu, ponieważ w przypadku IntelliJ również akurat pod

5:16tym względem nie dokonywałem żadnej zmiany w jego konfiguracji.

5:19Mianowicie załóżmy sobie, że w ramach tego

5:21kontrolera chcemy wygenerować unikatowy identyfikator.

5:24W tym momencie naturalnie ta paczka nie

5:26jest zainstalowana, więc chciałbym to teraz szybko zrobić.

5:29Prawdopodobnie to co robisz w takiej sytuacji to po prostu przechodzisz do

5:33terminala i wpisujesz polecenie npm install, a następnie nazwa tej paczki.

5:37Oczywiście jest to jakieś rozwiązanie i

5:39zresztą to samo podpowiada nam tutaj Visual Studio Code, więc jest w miarę

5:43przytomny i co więcej mamy tutaj jeszcze opcję Quick Fix, w przypadku której mamy

5:48dwie opcje albo usuwamy ten import, albo instalujemy typy do tej paczki.

5:53Jedna i druga opcja jest całkowicie bezużyteczna.

5:56Zobaczmy więc teraz jak to wygląda w IntelliJ.

5:59Jeżeli analogicznie zapiszemy sobie tutaj tą linię, to jesteśmy w stanie przejść na

6:03jej nazwę, a następnie wcisnąć Option oraz Enter

6:06do tego, aby wyświetlić menu podręczne.

6:08Pierwsza opcja jest tutaj analogiczna jak

6:10w przypadku Visual Studio Code, ale następnie mamy do dyspozycji zarówno

6:14instalację tej paczki, jak i jej instalację jako zależność deweloperska.

6:19Szczerze mówiąc, pozornie może wyglądać to

6:21jak bardzo małe usprawnienie, które niewiele wnosi.

6:24Jednocześnie, jeżeli pomyślisz sobie ile razy zdarza Ci się instalować jakieś

6:28paczki, a następnie przechodzić do terminala tylko po to, aby wpisać to jedno

6:32polecenie, to nagle okazuje się, że wykorzystanie tego skrótu jest niezwykle

6:35przydatne i oszczędza czas oraz dba o nasze skupienie.

6:39Tymczasem przejdźmy jeszcze do kolejnego

6:41przykładu, który również z pewnością niejednokrotnie spotykasz.

6:45Mianowicie mamy tutaj jakąś aplikację napisaną w Vue.js, w przypadku której

6:49naturalnie wykorzystujemy podział na komponenty i np.

6:52tutaj mamy nasze zakładki.

6:54Teraz chciałbym dostać się do tego komponentu, więc tylko wciskam przycisk

6:58Command i natychmiast zostaje przeniesiony do odpowiedniego pliku.

7:01Zobaczmy więc jak to wygląda w przypadku Visual Studio Code.

7:05Mamy tutaj również komponent,

7:06klikam na niego i zostaje tutaj

7:08przeniesiony nie do pliku, tylko nieco niżej, gdzie rejestrowane są komponenty.

7:13No to przechodzimy dalej.

7:14Zostaje przeniesiony do importu, gdzie

7:16mamy tutaj podaną ścieżkę do naszego pliku.

7:19Chciałbym na nią kliknąć, ale niestety

7:21Visual Studio Code nie jest w stanie tego ogarnąć.

7:24Oczywiście w tym momencie nie wykluczam,

7:26że znasz jakieś różnego rodzaju pluginy i wtyczki, które są w stanie Ci to ogarnąć,

7:30tylko różnica jest taka, że w przypadku

7:33IntelliJ nic nie musiałem robić, aby osiągnąć taki efekt, a w przypadku

7:37Visual Studio Code takie sytuacje zdarzały mi się nagminnie.

7:41Co więcej, nawet niejednokrotnie widzę

7:43podobne sytuacje w momencie, gdy oglądam jakieś tutoriale bądź kursy w internecie.

7:47Nie mam pojęcia z jakiego powodu

7:48programiści w ogóle nie biorą tego pod uwagę, albo nawet jeżeli biorą, to właśnie

7:53spędzają mnóstwo czasu na przeszukaniu StackOverflow w poszukiwaniu jakiejś

7:56konfiguracji pluginu bądź jakiegoś innego magicznego sposobu do tego, aby Visual

8:01Studio Code nieco lepiej rozumiał to, co próbujemy napisać.

8:05I tutaj raz jeszcze chciałbym podkreślić jedną rzecz.

8:07To, co pokazałem teraz, to tylko jeden z przykładów.

8:10Jeżeli pracujesz w React, Vue czy w Angular, to prawdopodobnie znajdziesz w

8:14końcu sposób na to, aby to ogarnąć lub też ewentualnie powiesz, że się przyzwyczaisz.

8:19Natomiast w momencie, gdy staniesz się

8:21full stackiem i będziesz pracować z wieloma różnymi technologiami językami, z

8:25takich małych niedogodności zaczyna rodzić frustracja i mnóstwo zmarnowanego czasu.

8:30No bo nie widzę tutaj absolutnie żadnego powodu, dlaczego miałbym poświęcać czas na

8:35konfigurację tak prostej rzeczy jak możliwość natychmiastowego przeniesienia

8:39się do komponentu, który chciałbym podejrzeć.

8:41Poza tym od razu mamy tutaj przykład, za który ktoś powinien dostać po łapkach.

8:46Mianowicie w tym przypadku, jeżeli wrócimy

8:48sobie do IntelliJ, to zwróć uwagę, że nie ma tutaj żadnego problemu.

8:52Wszystko jest w porządku,

8:54ale już w przypadku Visual Studio Code mamy jasną informację o tym, że

8:58wykorzystujemy tutaj podwójny znak równości, a nie potrójny.

9:02Oczywiście nie był to jakiś radykalny błąd i zresztą prawdopodobnie z tego powodu był

9:06podkreślony na pomarańczowo, na czerwono, ale jednocześnie był zaznaczony.

9:10I tutaj, w tym miejscu chciałbym na moment się zatrzymać.

9:13Mianowicie dokładnie takie błędy, a w

9:15zasadzie ta kategoria błędów sprawiła, że przekonałem się do IntelliJ, ponieważ w

9:20momencie, gdy wysłałem swoje zmiany do Code Review, to bardzo często okazywało się, że

9:24popełniałem proste błędy, w przypadku których IntelliJ natychmiast je

9:29wyłapywał, a w Visual Studio Code po prostu nie byłem świadomy.

9:33Oczywiście nie jestem w stanie teraz

9:34przywołać ich wszystkich, aby podać Ci milion powodów mówiących o tym, że

9:38IntelliJ jest po prostu lepszym oprogramowaniem.

9:41Ale myślę, że jeżeli masz odrobinę otwarty umysł i faktycznie zależy Ci na twojej

9:45efektywności oraz komforcie pracy, no to nawet te dwa podane przykłady będą

9:49wystarczające do tego, aby przełączyć się na IntelliJ.

9:52No i jeżeli już mówimy o przełączaniu się, to tak jak powiedziałem w przypadku

9:56IntelliJ, to po pierwsze jest on nieporównywalnie wolniejszy

9:59niż np. Visual Studio Code.

10:01Jednocześnie jeżeli wybierzemy sobie tutaj Code Helper i przykładowo w tym momencie mam

10:06w nim otwarte dwa projekty i zajęte 3,5 GB RAMu.

10:09Praktycznie to samo mam teraz uruchomione

10:11w przypadku Visual Studio Code i jeżeli nawet zsumujemy sobie te wartości to wychodzimy

10:16tutaj lekko ponad 500 MB i w zasadzie nie ma tutaj czego porównywać.

10:21I teraz kolejna rzecz, która być może będzie przemawiać za tym, że uznasz, że

10:25Visual Studio Code ma znaczną przewagę i jest cena samego oprogramowania.

10:29W przypadku Inteligo płacimy tutaj 150

10:32euro, a Visual Studio Code jest bezpłatnym oprogramowaniem.

10:35Zatem różnica na pierwszy rzut oka jest,

10:38ale tylko biorąc pod uwagę dwa przykłady, które przed chwilą pokazałem

10:42zastanów się ile wynosi Twoja stawka godzinowa i ile czasu oraz energii

10:46zaoszczędzi Ci IntelliJ, a następnie podejmij decyzję.

10:49Jak dla mnie nie ma się tutaj nad czym

10:51zastanawiać, ale oczywiście jest to kwestia indywidualna.

10:54No ale wróćmy teraz jeszcze na chwilę do samego IntelliJ.

10:58Tak jak powiedziałem na początku, w

10:59momencie gdy jakieś panele nie są mi potrzebne, to po prostu je wyłączam.

11:02Jednym z tych paneli jest chociażby Git,

11:04który jak widać włączam sobie jednym skrótem klawiszowym.

11:08Pomimo tego, że w przypadku Visual Studio Code

11:10również możesz powiedzieć o tym, że istnieje tam plugin Gita, ale jednocześnie

11:14polecam Ci zainstalować wersję próbną IntelliJ, a następnie samodzielnie

11:18odpowiedzieć na pytanie, które rozszerzenie jest po prostu lepsze.

11:22Co więcej, praktycznie gwarantuje Ci, że jeżeli spędzisz trochę więcej czasu w tym

11:25panelu, to okaże się, że nie mówimy tutaj o różnicach, tylko o całkowitej przepaści.

11:30Analogicznie to wygląda w przypadku bazy danych.

11:33Tutaj przykładowo akurat nie mam skrótu, natomiast wywołuję ją z pomocą palety

11:37poleceń i mam tutaj połączenia z dwiema bazami danych.

11:40Tutaj ponownie można dyskutować, czy warto korzystać z takiego rozwiązania, czy może

11:45z zewnętrznego oprogramowania, a może też Visual Studio Code

11:48klient baz danych też funkcjonuje w formie

11:50jakiegoś pluginu i da się z niego skorzystać.

11:53Natomiast jednocześnie zaznaczę sobie tutaj bazę danych, a następnie wcisnę

11:56Command Option Shift i U. Praktycznie natychmiast mam tutaj dostępną piękną wizualizację

12:02naszej bazy danych, która pozwala mi świetnie rzucić okiem na całą strukturę, a

12:06następnie podejmować jakieś decyzje projektowe.

12:09Tutaj tylko zaznaczę, że jeżeli na ten moment nie masz pojęcia baz danych, to

12:12prawdopodobnie nie doceniasz tutaj tej wartości, ale jednocześnie myślę, że pod

12:16koniec tego programu stanie się dla Ciebie jasne, że taka forma wizualizacji struktury,

12:20z którą pracujesz okazuje się niesamowicie przydatna.

12:24Jeżeli chodzi o samą pracę z danymi oraz tabelami, to można powiedzieć, że np.

12:28rozwiązania takie jak Table Plus są pod wieloma względami po prostu wygodniejsze.

12:33Nie zmienia to jednak faktu, że w wielu

12:35projektach zdarza mi się korzystać z tego wbudowanego w IntelliJ klienta baz danych.

12:40No i teraz jeszcze ostatnią rzeczą, na

12:42którą chciałbym zwrócić uwagę, która w przypadku Visual Studio Code wręcz wprost

12:46marnowała mi mnóstwo czasu, jest sam debugger.

12:50I co więcej, mam tutaj na myśli nie tylko samą konfigurację, która w przypadku

12:54niektórych projektów zajęła mi mnóstwo czasu i pomimo tego nie udało mi się

12:57doprowadzić do sytuacji, w której debugger w ogóle wystartował.

13:01W innych projektach,

13:02w momencie, gdy mi się to udawało, bardzo często okazywało się, że w trakcie pracy z

13:05aplikacją potrafił jawnie oraz niejawnie się zawieszać.

13:09W tym pierwszym przypadku przynajmniej

13:10wiedziałem, że coś jest nie tak, a w tym drugim potrafiłem wprowadzać zmiany w

13:14aplikacji, a następnie widząc, że dalej dana funkcja nie działa, spędzałem kilka

13:18kilkanaście minut w poszukiwaniu błędu, po czym nagle wszystko zaczynało działać,

13:22pomimo tego, że nie wprowadzałem żadnej dodatkowej zmiany. Okazywało się, że po

13:26prostu debugger sam decydował, kiedy chce odświeżyć kod mojej aplikacji.

13:31W przypadku Visual Studio Code tak jak widać, po prostu przechodzę do Package.json,

13:35uruchamiam tutaj tryb debuggera i wszystko działa.

13:38Temat jest zamknięty,

13:39mogę z powodzeniem korzystać z debuggera i tak jak teraz pracuję już z IntelliJ

13:43kolejny rok, tak nie zdarzyło mi się nawet raz, żeby debugger nawet się zawiesił.

13:48No i teraz na koniec jeżeli te podane tutaj z

13:50brzegu dość istotne przykłady nadal nie przekonują Cię do tego, że warto sięgnąć

13:55po IntelliJ, to w zasadzie chyba już nic nie mogę zrobić.

13:58Jednocześnie, tak jak też powiedziałem na początku tego filmu, nie będziemy w

14:01kolejnych lekcjach skupiać się na Visual Studio Code, ale oczywiście szanuję Twój

14:06wybór i jeżeli zdecydujesz się przy nim zostać, to naturalnie w przypadku

14:09większości technik, które będę tutaj omawiał, będzie je można przenieść również

14:13na Visual Studio Code, aczkolwiek ja już nie będę tego pokazywał.

14:17Tymczasem dzięki za uwagę i do usłyszenia w kolejnej lekcji.