admin 0Comment

Jak dotąd w mojej konkursowotreningowej aplikacji yourFinance zajmowałem się niemal wyłącznie back-endem, czyli tym, co dzieje się „pod maską” danego programu. To właśnie ta dziedzina programowania, którą chciałbym zajmować się w przyszłości zawodowo, jednak rozwijając samodzielnie nawet ćwiczeniową aplikację, nie ucieknę od stworzenia jej strony wizualnej, widocznej dla użytkownika, oraz od tego, w jaki sposób powinienem uzyskiwać i prezentować przetworzone już dane. Dziś więc kilka słów o front-endowej stronie mojego projektu. Wcześniej jednak wyjaśnienia dla początkujących programistów – na czym polega opisywany przeze mnie podział na front- oraz back-end?

Kilka miesięcy temu, na początku mojej nauki programowania, back-end interpretowałem bardzo wąsko – jako stronę wizualną danego programu. W realiach aplikacji webowych rozumiałem te pojęcie, jako graficzną nakładkę na „logikę” programu, i w związku z tym stwierdziłem, że zdecydowanie nie jest to zagadnienie, w którym chciałbym się specjalizować. Zawsze o wiele bardziej interesowały mnie kwestie wydajnościowe i to, co jest „pod maską” niż design i kwestie estetyczne.  Z dzisiejszej perspektywy decyzja o pójściu w stronę back-endu okazała się być trafna, jednak moje spojrzenie na to, czym zajmuje się front-end, uległo zmianie. Już wiem, że front-end to nie tylko grafika, to także (a może nawet głównie) interface – sposób komunikacji z użytkownikiem, to, w jaki sposób pobierzemy od niego dane oraz jak mu je zwrócimy. Zdaję też sobie sprawę z tego, że dzisiejszy front-end to także sporo „logiki” programowej, którą jakiś czas temu jednoznacznie identyfikowałbym z back-endową dziedziną programowania.

Kolejna istotna kwestia to taka, że decyzja o pójściu w kierunku programowania back-endowego nie oznacza wcale, że, jako programista, nie będziesz musiał mieć nic wspólnego z jego front-endową stroną (i działa to również w drugą stronę). Powinieneś, przynajmniej na podstawowym poziomie, zrozumieć działanie języków HTML oraz CSS, a także wiedzieć w jaki sposób wykorzystywany jest język JavaScript. Jest to dobrze widoczne na przykładzie pracy z użyciem frameworka Django, podczas której w szablonach musimy posługiwać się przynajmniej podstawowymi elementami HTMLa, by móc wyświetlić interesujące nas informacje w przeglądarce.

Osoby będące na początku swojej nauki programowania mogą zastanawiać się na czym polega podział obowiązków między wspomnianymi przeze mnie HTMLem i CSSem. Najprościej rzecz ujmując – HTML odpowiada za opisywanie struktury danych zawartych na danej stronie internetowej, natomiast CSS – za prezentację ustrukturyzowanych już (poprzez HTML) danych.

Przez ostatnie dwa tygodnie mojej nauki część czasu poświęcałem by na podstawowym poziomie opanować opisywane tutaj przeze mnie zagadnienia, i by móc je zastosować w moich ćwiczeniowych projektach. Efekt tego możecie zobaczyć na kilku przykładowych zrzutach ekranu:

 

Strona startowa aplikacji.

 

Wyświetlanie danych dostarczonych przez użytkownika.

Podstawowe operacje przeprowadzone na danych użytkownika.

 

Jak widzicie, postawiłem na minimalizm. Dysponując zdecydowanym niedostatkiem poczucia estetyki stwierdziłem, że to najbezpieczniejsze rozwiązanie :). Skorzystałem z kilku prostych grafik, wyświetlania obramowań oraz ustalania pozycji elementów.

Na poziomie HTMLa oznaczało to głównie korzystanie z tabel oraz odnośników, na poziomie CSSa natomiast – działania na tzw. selektorach dla atrybutów takich jak class czy id.

W prawym-dolnym rogu widoczne są dwa pliki graficzne, będące jednocześnie linkami do bloga, który właśnie odwiedzacie oraz do kodu aplikacji na koncie GitHub. Są to jednocześnie jedyne dwa elementy na stronie, których pozycja ustawiona jest jako fixed. Oznacza to, że pozostają one w tym samym miejscu strony, nawet, jeżeli ta zostaje scrollowana.  Kod całej appki możecie podejrzeć na moim koncie GitHub, a plik CSS – w tym konkretnym miejscu.

A co dalej, jeśli chodzi o tematykę front-endową? Myślę, że kolejnym krokiem (oprócz zagłębienia się w pracę z użyciem HTML/CSS) będzie zapoznanie się z możliwościami, jakie daje użycie języka JavaScript, zarówno we front-jak i back-endowym programowaniu.

Dodaj komentarz