Silv
2019-05-17 16:03

[ Moja nauka Angulara 7, wpis nr 1 ]

Dłuższy czas temu zaplanowałem nauczyć się podstaw Angulara, ale do tej pory nie mogłem się za to na poważnie zabrać.

Pomyślałem więc, że zmienię sposób nauki. Zamiast wszystko przetwarzać w samotności, w dwukierunkowej kolejce ja-klawiatura-ekran, zdecydowałem się opisać to gdzieś. Może być tu, na mikroblogu.

First things first.

Plan pracy

Jak w każdym przedsięwzięciu, potrzebny jest plan. Więc planuję: opiszę wszystko w kilku wpisach. Skoro jest to nauka podstaw, to najlepiej byłoby nie planować liczby ani treści wpisów (bo nie znam tematu). Jednak brak dokładnych wytycznych mógłby spowodować chaos, przez to spadek wydajności, a przez to porzucenie przeze mnie całego zamysłu. Takie ryzyko nie opłaca mi się.

Spróbujmy więc zaplanować. Planuję następujące wpisy:

  • Wpis pierwszy (ten): plan + wyszukanie głównych źródeł materiałów. Kolejne będę dodawać w razie potrzeby.
  • Wpis kolejny: podstawy podstaw.
  • Wpis kolejny: ważniejsze zagadnienia, na jakie trafię. Ponieważ jestem mniej-więcej obeznany z JS, powinienem móc oszacować, które to są.
  • Wpis kolejny: ciekawsze zagadnienia, na jakie trafię (chyba że nie trafię na żadne ciekawe).
  • Wpis kolejny (i ew. dalsze): wszystko, co nie zmieściło się w poprzednich wpisach.

(Jeśli ktoś miałby uwagi do tej listy, proszę pisać. Wymyśliłem ją w 5 minut).

Wpisy postaram się pisać w postaci kilku krótkich sekcji, w każdej kilka krótkich akapitów (tak jak ten wpis). Ku przypomnieniu, wpisy na naszym mikroblogu mogą mieć maksymalnie 10 000 znaków (dzięki, @furious programming, za temat). Nie będę specjalnie starać się wykorzystać tego limitu do końca, niemniej może być tak, że długość niektórych wpisów będzie wokół niego oscylować. ;)

Jeżeli w którymś wpisie uznam, że jakieś zagadnienie jest dla mnie zbyt obszerne/skomplikowane, by dać sobie z nim radę (vide ten nieszczęsny chaos poniżej) – wkleję tylko link/linki i opiszę go/je w kilku zdaniach. Być może powrócę do tego zagadnienia w kolejnym wpisie, być może nie.

Wpisów nie będę umieszczać regularnie. Gdyby ktoś chciał mnie śledzić, to może albo 1) ręcznie sprawdzać, czy jest jakaś nowa treść na mikroblogu z tej serii, albo 2) zrobić to półautomatycznie za pomocą tego skryptu na Linuksie:

$ curl https://4programmers.net/Profile/64311/Microblog | grep "Moja nauka Angulara"

i w zwróconym tekście sprawdzić, czy numer stojący za ciągiem Moja nauka Angulara jest większy od ostatniego. Ciąg [ Moja nauka Angulara, wpis nr {numer} ] będę umieszczać w każdym wpisie na początku.

Kwestie, które mogą sprawić mi problemy podczas nauki z jednoczesnym pisaniem wpisów

Czas

Z czasem nie powinno być tak źle. Potrafię przeciągać obowiązki, robiąc sto innych rzeczy. A więc, skoro już mam czas na takie przeciąganie, to mogę spróbować wykorzystać go na coś innego – na przykład na klepanie w klawiaturę.

Skupienie

Ze skupieniem powinno być przynajmniej tak samo, jak do tej pory podczas innej formy nauki. Bo – do tej pory nic się prawie nie nauczyłem (no, z Angulara), jedynie bumelowałem. Jeżeli teraz we wpisach też będę bumelować zamiast uczyć się, przynajmniej nic nie stracę.

Chaos

Najgorzej będzie z chaosem. Przez "chaos" rozumiem brak rozumienia opisywanych zagadnień (zgodnie z założeniem – przy kompletnym braku chaosu co opisuję, to rozumiem). Często się zdarza. Jak temu zapobiec – nie wiem jeszcze... <drapie się w głowę>

Styl pisania

Może przynajmniej nauczę się pisać krótsze zdania (mało pisywałem w życiu dłuższych form; mam większe doświadczenie w pisaniu wierszy, ale one nie muszą mieć zdań jako takich).

Szybki FAQ

  1. Czy będą to wpisy edukacyjne? — Nie, nie mam na celu nikogo uczyć – ale jeśli ktoś zechce sam uczyć się z moich wpisów, proszę bardzo.

  2. Czy masz jakieś doświadczenie w programowaniu/webie/JavaScripcie? — Trochę o nich wiem; w sprawie szczegółów proszę zobaczyć kod na moim profilu na GitHubie lub mój blog.

  3. Czy można mieć sugestie do Ciebie (feature request), jeśli chodzi o treść tych wpisów? — Nie – o tym, o czym będę pisać w tych wpisach, decyduję sam. Można oczywiście sugerować różne rzeczy w komentarzach, ale będą to jedynie sugestie.

  4. Zauważyłem/am literówkę/inny błąd w Twoim wpisie... — Świetnie! Pisz od razu w komentarzu. Bardzo lubię poprawiać błędy w tekście i literówki, także swoje. :) (To nie żart).

  5. Nie wiem, czy dane zdanie jest żartem, czy nie... — Najprawdopodobniej nie. Moje poczucie humoru zazwyczaj oscyluje wokół zera (zdarzają mi się pewne odstępstwa).

Jeśli masz pytania/uwagi odnośnie wpisów: te dotyczące treści wpisów kieruj na forum, a pozostałe pisz w komentarzach do konkretnych wpisów lub w prywatnej wiadomości do mnie.

Let's get things started.

Wyszukanie i wybór źródeł materiałów

Info: wyszukiwanie źródeł materiałów jest w ogóle możliwe dlatego, że dotychczas poznałem Angulara na tyle, że wiem, co to jest.

Jak pisałem już tu na forum, ciężko mi wybierać materiały, ponieważ większość z nich jest interaktywna (tzn. wymaga ode mnie innej aktywności poza czytaniem), a ja tego nie lubię. Z uwagi na to, najbardziej oczywisty wybór – tzn. strona domowa Angulara – spadł na dalsze miejsce na liście materiałów.

Drugim najbardziej oczywistym wyborem jest dla mnie od dłuższego czasu Wikipedia – najpierw angielska, potem polska.

Trzecim najbardziej oczywistym wyborem – jeśli chodzi o zagadnienia programistyczne – jest dla mnie od dłuższego czasu rodzina stron StackExchange. W przypadku Angulara najbardziej odpowiednim miejscem będzie najpewniej strona Stack Overflow, ale nie zaszkodzi poszukać wszędzie.

Czwartym najbardziej oczywistym wyborem przy zagadnieniach programistycznych jest dla mnie od dłuższego czasu GitHub. Mam oczywiście świadomość, że istniejące tam materiały do nauki są w dużej mierze "interaktywne", niemniej liczę na to, że w tym przypadku nie będzie tak źle.

Dalsze miejsca mogą być mniej lub bardziej w przypadkowej kolejności, wpisałem bowiem słowo kluczowe "angular" w Google i to, co mi wyskoczyło, przepisuję w tej samej kolejności.

No i na koniec:

Myślę, że tyle powinno wystarczyć. Jak wspomniałem, kolejne źródła materiałów będę dodawać w razie potrzeby. Mogę też w przypadku poszczególnych zagadnień czy wpisów nie wykorzystać niektórych głównych źródeł, jeśli dane źródło: 1) nie będzie miało nic ciekawego do powiedzenia o danym zagadnieniu / o zagadnieniach danego wpisu, lub 2) wszystko o danym zagadnieniu już będę wiedzieć / w danym wpisie będę mieć napisane.

Rekapitulacja

W tym wpisie przygotowałem plan nauki oraz napisałem listę materiałów. W kolejnym, zgodnie z planem, postaram się opisać swoją naukę podstaw podstaw.

Mam nadzieję, że coś z tego będzie. W każdym razie ten wpis mnie trochę pobudził do działania. Do zobaczenia!


UPDATE – lista źródeł i materiałów:

(Wszystkie nowo znalezione źródła i materiały przeniosłem do nowego, oddzielnego wpisu, ponieważ tutaj zabrakło już na nie miejsca: [ Moja nauka Angulara 7, wpi...).


UPDATE2 – metodyka pisania wpisów i pracy ogólnie:

Zapomniałem opisać metodykę mojej pracy. Gros treści we wpisach będzie tekstem w składni Markdown, wersja Markdown: obsługiwana przez nasze forum. Okazjonalnie będę zamieszczać w nich polecenia wykonywane w terminalu, kod oraz zrzuty ekranu:

  • Polecenia będą do wykonania na Linuksie, dystrybucja: Fedora, wersja Fedory: 29 64-bit, powłoka systemowa: Bash. Nazwy plików, katalogów, zmiennych itp. będą po angielsku.
  • Kod może być pisany w różnych językach, ale przewiduję najczęściej JavaScript i TypeScript. Nazwy klas, funkcji, zmiennych itp. będą po angielsku.
  • Zrzuty ekranu będą z tego samego systemu, gdzie wykonuję polecenia (Linux, Fedora 29 64-bit), środowisko graficzne: XFCE. Jeżeli będą zrzuty ekranu z przeglądarki, najczęściej (jeśli nie jedynie) powinien to być Chrome, wersja 73 64-bit. Wersja może zmieniać się kilkukrotnie na wyższe w czasie pracy, jeżeli wyjdą w tym czasie nowe wersje Chrome.
nohtyp

jesteś ***ilem, prawda? edit: nie szkoda Ci czasu? mogłeś zrobić coś ciekawego zamiast pisać sam do siebie

vpiotr

TL;DR - za dużo planowania, za mało nauki.

Silv

@vpiotr: dzięki za radę. Próbuję różnych sposobów – brak planu (do tej pory go nie miałem) nie spowodował, że zacząłem się uczyć. Być może plan mi pomoże.

no_solution_found

@Silv: to skorzystaj z todoist albo nozbe :) mnie jara odhaczanie zrobienie rzeczy i pomaga ładnie zaplanować wszystko

no_solution_found

druga rzecz - dlaczego angular1? Angular czy react wydają się być lepszym wyjściem :)

Silv

@no_solution_found: dzięki. :) Próbowałem, taka lista mi całkiem nie pomaga. To znaczy – fajnie się ją robi, ale po dwóch dniach zapominam, że ją mam. Nie, nie Angular1, tylko Angular. Teraz dopiero widzę, że to nieścisłość. :) Dzięki!

Silv

PS. Zmieniłem [ Moja nauka Angulara 1 ] na [ Moja nauka Angulara, wpis 1 ].

no_solution_found

bo tego trzeba się nauczyć :)

Silv

@no_solution_found: to pewnie zbyt dużo nauki dla mnie było. :/ Spróbujemy z tą formą, może się uda.

mr_jaro

Weź sobie starter https://github.com/tomastrajan/angular-ngrx-material-starter postaw i zacznij budować jakiś projekt na jego bazie, ja tak nauczyłem angulara.io

Silv

@mr_jaro: dzięki, jednak właśnie do tej pory (jak opisałem w wątku na forum) podejście "project-first" mnie odrzucało. Muszę rozumieć wszystko, co piszę (z czytaniem jest inaczej).

mr_jaro

@Silv: to masz kompletnie inne podejście niż ja, ja jak się czegoś takiego ucze to czytam max godzine a potem siadam do roboty bo inaczej nie potrafię, w sensie efektywność spada do zera

no_solution_found

@Silv na początku zrozum ogólnie jak to działa, a szczegóły przyjdą później

thock

Widzę, że strasznie się męczysz. A może po prostu ta branża nie jest odpowiednia dla Ciebie.

siloam

Ten wpis powinien się pojawić z 5 lat temu. Obecnie szkoda czasu na Angulara. Istnieją znacznie lepsze frameworki. Do większych projektów Vue z vue-cli i Vuex'em. Do mniejszych Hyperapp.

LukeJL

jeszcze Svelte jest z alternatyw. No i oczywiście mainstreamowy React, od czasów hooków jakiś bardziej przyjazny

mr_jaro

@siloam: czy którykolwiek z tych co wymieniłeś umożliwia mi trzymanie komponentu rozdzielonego co najmniej na 3 pliki (js lub ts, scss, html) i posiada tak rozbudowaną bazę wiedzy na necie i ilość komponentów przygotowanych do szybkiego wdrożenia, co angular? Jeśli tak, sprawdzę. Ale przynajmniej vue jak robiłem projekt na nim rok temu powodował u mnie białą gorączkę, więc jeśli się nic nie zmieniło to od razu odpada.

Silv

@thock: może tak, ale póki co jestem w niej. @siloam: dzięki! Może w przyszłości, jak skończę to, spróbuję innej formuły na coś bardziej aktualnego. :)

siloam

@mr_jaro a słyszałeś kiedyś o single file components? Po co dzielić kod nielogicznie zamiast trzymać wszystko co się tyczy jednego komponentu pod ręką? https://vuejs.org/v2/guide/single-file-components.html Vue ma już wiele bibliotek widgetów jeżeli o to Ci chodzi. Najczęściej korzystam z Vuetify.

mr_jaro

@siloam: dla wygody, nie lubie scrollowania a pisząc coś na vue muszę robić sobie podział okienka na 3 żeby spokojnie edytować jeden komponent :D Tylko, że trochę ciasno się robi na fullhd :p w angularze mogę mieć wszystko ładnie rozdzielone i przełączać się między kartami, na wydajność kodu to nie wpływa a na wygodę pisania bardzo na korzyść angulara.

mr_jaro

@siloam: vue ma tak wiele komponentów że po 3h wertowania sieci i testowania nie znalazłem odpowiedniego datagrid, z ciekawości sprawdziłem na angularze i znalazłem w 5 minut :), efekt był taki, że kodowaliśmy swój własny datagrid dla vue.

czysteskarpety

widgety do frameworka, brrr, następny wordpress :|

mr_jaro

@czysteskarpety: albo piszesz samemu componenty by używać na każdej stronie albo korzystasz z gotowych, po co np na każdej podstronie z tabelka rozbić mechanizmy od progressbara, paginacji itp

LukeJL

@mr_jaro datagrid, który nie byłby uzależniony od frameworka? Nie ma żadnych poza agGrid?

mr_jaro

@LukeJL: ale tu właśnie chodzi o to, zeby był zależny od frameworka, dlatego, że wtedy łatwiej obsłużyć wszystkie emity itp, Gdy nie jest trzeba i tak pisać wrapper.

LukeJL

@mr_jaro co do Vue, to to pisanie tak jak każą nie jest wymagane, możesz sobie tworzyć szablon w normalnym pliku JS, https://vuejs.org/v2/guide/render-function.html Tylko co z CSS? Przypuszczam, ze i style mozesz sobie dołączyć w pliku CSS (nie próbowałem, ale tak na logikę, jeśli możesz definiowac recznie szablon, to w szablonie moglbys ustawic odpowiednie klasy, ktore byłyby zdefiniowane w pliku CSS). Pytanie tylko co z samym szablonem?

mr_jaro

@LukeJL: mogę, ale przecież to nie o to chodzi, skoro chce ograniczyć css do koponentu a jest do tego wbudowany mechanizm to niech to robi, w innym przypadku to na mojej głowie jest pilnowanie klas. Co do rozdzielenia htmla, jest sposób na to z tego co wiem, ktoś opracował jakiś plugin który to ogarnia ale jest to technika strasznie hejtowana i przez to nikt tego nie robi.

LukeJL

@mr_jaro ja tam nie lubię jak tego typu większy widżet jest zależny od frameworka, bo potem nie można tego użyć gdzie indziej, w projekcie który nie korzysta z danego frameworka choćby (albo w sytuacjach rzadkich, ale istniejących - przepisywania całej aplikacji na inny framework). Natomiast jak osadzam taki widżet, który jest niezależny od frameworka, to i tak nie korzystam z gotowych wrapperów (choćby dlatego, że zwykle jest ileś wrapperów na npm i nie wiem, który najlepszy, wiec nie chce mi sie testowac wszystkich, po drugie wrappery są często skomplikowane/niewygodne w użyciu, pełne dziwnych konfiguracji, po trzecie i tak zwykle mają ograniczoną funkcjonalnośc i nie wymyślili czegoś, co potrzebujesz to i tak robisz to samemu. Więc wolę osadzić sobie ręcznie jakis widżet i zrobic samemu wrappera, podpasowanego konkretnie pod moje potrzeby

mr_jaro

@LukeJL: spoko, tylko, że jak się napisze taką apke to się do niej wróci (o ile w ogole) to za 4?5? lat by przepisać całość? i wtedy wszystko co tam było jest już przestrzałe na tyle, że i tak pisane jest od zera.

LukeJL

@mr_jaro zresztą kurcze, na czyms ta praca developera musi polegać, jesli trudne rzeczy (zrobienie skomplikowanych widzetów) mamy już z pudełka zrobione przez jakichs wymiataczy frontendu, to przynajmniej napisać sobie samemu wrapper możemy (zresztą przy korzystaniu z gotowego wrappera i tak bedzie trzeba pisać wrapper do wrappera, tj. komponent który zintegruje wrapper z naszą aplikacją. Więc i tak pracy pewnie tyle samo będzie)

LukeJL

@mr_jaro skoro chce ograniczyć css do koponentu a jest do tego wbudowany mechanizm to niech to robi, w innym przypadku to na mojej głowie jest pilnowanie klas. - mozna by jakiegos CSS modules użyć albo innej technologii, która robi klasy lokalne i zwraca ci nazwę zahashowanej klasy.

mr_jaro

@LukeJL: zależy ile masz na to czasu i jaką ci przejemność to sprawia, bo mnie pisanie na vue tak jak pisałem doprowadza to totalnego wykończenia psychicznego, wracając do angulara czuję się jak w domu.

LukeJL

@mr_jaro a to dziwne, ja w Vue pisałem krótko, i wydawało mi się nawet fajne. Aczkolwiek ogólnie ludzie lubią pisać w React i w Vue, a to Angulara zwykle nie lubią (źródło: https://2018.stateofjs.com/front-end-frameworks/overview/ - zobacz co ludzie o Angularze myślą), więc nie zgadzasz się z milionem much w tym momencie. Jakbyś wygłosił takie opinie na jakimś reddicie, to byś miał pełno downvote'ów (ale na Reddicie downvotują wszystko, z czym ktoś się nie zgadza - pamiętam jak na reddicie o Ruby skrytykowałem strukturę katalogów w RoR (może dla backendowca to jest ok, ale jako frontendowiec musiałem latać po katalogu assets, scripts, i jeszcze innych, zeby robić jedną rzecz) i od razu mnie zdownvotowali (bo wyrazajac krytykę obraziłem ich świety framework RoR). Ale na r/javascript np. Redux jest taką świętą biblioteką, i jak cokolwiek źle napiszesz, to downvote.(przynajmniej tak kiedys bylo)

mr_jaro

@LukeJL: bo większość ludzi wraca do tego co było kiedyś a kiedyś mieszało się wszystko co się da w jednym pliku :D Powiem ci, że kumpel znajomego przeszedł na angulara z bodajże reacta po tym jak zobaczył, że może sobie wszystko dzielić na pliki :D Serio to był jedyny powód zmiany frameworka, a i tak zwyciężył.

LukeJL

@mr_jaro tak sie to zaczęło - programiści Facebooka mieszali logikę w PHP z kodem HTML, więc stworzyli sobie XHP, czyli taki JSX dla PHP. Potem dopiero przenieśli tę ideę na frontend. Czyli w zasadzie od tego sie zaczęło, że programiści lubili sobie pomieszać logike z widokiem. Aczkolwiek w React i tak mozesz dzielić sobie rzeczy na pliki - możesz pisać CSS w pliku CSS, w samym komponencie w JSX pisać tylko prostą logikę związaną z renderowaniem i podpięciem zdarzeń - a w osobnym pliku JS możesz pisać większą logikę (ludzie z Reduxa zwykle korzystają do logiki + podpinają z pierdylion różnych dodatków pod niego, chociaż jak dla mnie to trochę masochizm - ale mimo wszystko - zaaansowaną logikę można wywalić z komponentów)

LukeJL

@mr_jaro poza tym teraz są haki w React, które pozwalają wydzielać kawałki logiki i reużywać ich w innych komponentach. wiec mozna sobie jeszcze mocniej dzielić na pliki.

mr_jaro

@mr_jaro: być może, nigdy nie ruszałem reacta, ale skoro piszesz, ze są hacki pozwalające dzielić logikę no to ciekawie, że aż haki musiały na to powstać :p

LukeJL

ze są hacki pozwalające dzielić logikę nie napisałem, że powstały hacki tylko haki (hooks). wygląda to mniej więcej tak, że hook w React to taki jakby podprogram dla Reacta. Chociaż też nie wiem czy dobra metafora.

mr_jaro

@LukeJL: ok, czaje, za to w angularze możesz sobie pisać dowolne klasy jakie chcesz, możesz nawet je wstrzykiwać przez DI.

mr_jaro

@LukeJL: czyli te hooki to takie traity z php? bo już się zgubiłem

LukeJL

@mr_jaro to raczej takie funkcje, które odpalasz z poziomu komponentu, które coś robią i które mogą odpalać inne funkcje. Przy czym React zapewnia kilka wbudowanych funkcji (np. useState, useEffect itp.) które robią magię pod spodem i pozwalają np. na definiowanie efektów ubocznych albo pamiętają stan.

LukeJL

@mr_jaro wydaje mi się, że te hooki to bardziej jak hooki z wordpressa albo jak definicja funkcji w językach programowania (a sam React działa trochę jak maszyna wirtualna: https://overreacted.io/react-as-a-ui-runtime/ )

mr_jaro

@LukeJL: ok, dzięki, już czaje