Świat JS – i inne abominacje

Jak kiedyś już pisałem. Zaczynam pracę nad aplikacją "blogiem" która będzie wymagała ode mnie umiejętności na każdym polu. Frontend webowy, frontend mobilny, backend oraz rzeczy potrzebne do wdrożenia. Temat nie umarł! Najbardziej boję się frontendu webowego… JavaScript… CSS… . Ogrom frameworków, rzeczy które należy poznać, konwencje kodu czy też ich brak, narzędzia. To wszystko sprawia że przy komputerze czuję się jakbym w ogóle nie potrafił programować i zastanawiam się co ja właściwie robię i czy kiedykolwiek to ogarnę. Tym bardziej, że ambitnie próbuję wykorzystać webcomponenty. Ilość wiedzy potrzebnej żeby zaprojektować dobry interfejs też jest niewyobrażalnie wielka. Design systems, architektura informacji… czy po prostu wszystko co można wrzucić do worka z napisem UX. Bo po co robić stronę której nikt nie będzie chciał używać?   Ten post jest o tym co udało mi się zrobić i jakie są moje odczucia. Zachęcam do komentowania!

Wybór frameworku WEB

Są trzy o których wszyscy mówią, oraz wiele wiele innych... Jednak jeśli spojrzeć na oferty pracy to faktycznie liczą się w zasadzie tylko te trzy. Tj. “Vue”, “React”, “Angular”. Jako że nie mogłem się zdecydować to postanowiłem to zrobić we wszystkich na raz, a co! Jednak szybko przekonałem się że to zbyt ambitne i chyba ograniczę się do Vue i Angulara oraz “Vanilla”. Ten ostatni jest szczególnie interesujący, niewtajemniczonym proponuję sprawdzić 😉 No okej ale jak to pożenić? Najpierw pokażę że się da:
Komponent angularowy wewnątrz aplikacji Vue.js
angular-inside-vue
A teraz odpowiem - web componenty 🙂 Jak widać komponent angularowy jest zagnieżdżony w aplikacji Vue.

Dlaczego webcomponenty?

Dlatego że dają one niesamowite możliwości! Można tworzyć aplikacje w dowolny sposób, mając coś w rodzaju “kontrolek” z zamkniętymi funkcjonalnościami. Łącząc to, oraz mikroserwisy możemy wraz z każdym serwisem dostarczać część frontendową odpowiedzialną za jego obsługę. Właściwy “szkielet” aplikacji odpowiada wtedy jedynie za odpowiednie ich wykorzystanie, ułożenie itd. Oczywiście tak jak architektura mikroserwisów, tak i webcopomponenty niosą ze sobą wiele wyzwań. Jednak jestem pozytywnie nastawiony i myślę że sobie poradzę. W końcu za oceanami już tak robią 😉

JavaScript 😐 - jak zacząć?

Ilość podejść do tego języka jaką miałem na swoim koncie jest niezwykła. I zawsze uciekałem niczym poparzony. JS wraz z kulturą pracy na frontendzie był dla mnie pewną barierą. Przeskoczyłem ją robiąc coś co znam lepiej - backend! Node.js to wspaniała sprawa. Wyrwano z Chromium silnik v8 i opakowano go w różne ficzery tak, aby mógł być uruchamiany poza przeglądarką. Ma pewne ograniczenia, ale świetnie się nadaje do aplikacji z dużą ilością operacji IO. Z kolei nie bardzo do operacji skomplikowanych obliczeniowo, bo korzysta z jednego wątku. Jest za to niesamowicie lekki i można go wykorzystać w cloudzie. Nawet nie mikroserwisy można na nim robić a nanoserwisy! Z resztą rozwiązania serverless między innymi wspierają go, co potwierdza tę tezę. Kiedy napisałem pierwszego CRUDa, stworzyłem websockety - nagle zrozumiałem jak pracować z tym językiem - jakaś taka durna bariera myślowa została pokonana. Tzn. wiem że jeszcze długa droga przede mną, ale jest lepiej 🙂 W każdym razie jeśli zawsze byłeś bliżej backendu to polecam swoją przygodę z JS zacząć właśnie od noda - to był mój sposób.

UX

User experience - zawsze jakieś jest. Grunt żeby nie było kiepskie, a pozytywne. Żeby użytkownik nie musiał myśleć, po prostu konsumował treści i robił co to co chce zrobić. Postanowiłem rozwinąć się nieco w dziedzinie UX. Co prawda nie od razu, ale po tym jak skończę część funkcjonalności swojej aplikacji zrobię makiety, zapoznam się z jakimś design systemem i spróbuję się zastosować. Uważam że jeszcze dość rzadko się zdarza że programista dostaje projekt, ma na miejscu specjalistę od UX - dlatego warto się tym zainteresować, chociażby ze względu na prywatne projekty. Przekonałem się że pomimo braku umiejętności graficznych, można zrobić coś na prawdę efektownego. Zarządzanie białą przestrzenią, gdzieś delikatny cień. Ogólnie prostota - sprawić może poczucie pewnej "ekskluzywności" i po prostu wygląda to bardzo dobrze. A ja zawsze kombinowałem z czerwonymi kropkami na zielonym tle ... Ponoć książka Steve'a Krug'a "Nie każ mi myśleć!" jest świetnym wstępem i zawiera wiele wskazówek - myślę że się z nią bliżej zapoznam 🙂    

Co z aplikacją?

A więc co zostało zrobione?
  • Baza danych - POSTGRES.
  • Główny backend do zarządzania artykułami - JAVA.
  • Backend odpowiedzialny za komentarze - .NET CORE.
  • Początki prac nad backendem “rekomendującym” - NODE.JS
  • CI/CD -> na Gitlab & Google Cloud.
Jeśli chodzi o frontend:
  • Poznałem podstawy Vue.
  • Poznałem podstawy Angular.
  • Potrafię zamienić komponent angularowy w webcomponent.
  • Rozpoczynam prace nad komponentem wyświetlającym listy artykułów.
Teraz głównie prace będą skoncentrowane na frontendzie. Nie wiem jeszcze jak pożenić to wszystko z aplikacjami mobilnymi - ale będzie dobrze 🙂 Do wyjaśnienia jest jeszcze praca ze stylami CSS - przydałoby się je współdzielić. Opracowanie sposobu pracy z tym wszystkim też chwilę zajmie. Nie wiem też co na to wszystko CORS.
Close Menu