W ostatnim tygodniu popracowałem trochę nad swoim projektem Atena, który realizuje w ramach konkursu Daj się poznać 2017. Udało mi się zrobić makiety dla listingu postów i pierwsze komponenty na froncie.  Do przygotowania makiet użyłem programu Balsamiq mockups 3. Programik jest lekki, łatwy w obsłudze i posiada darmowy trial.

Pierwsze makiety

 

Makiety - Listing - grid
Listing – grid
Makiety - Listing - lista
Listing – lista

 

Makiety - Listing - ukryty panel filtrów
Listing – ukryty panel filtrów

Najważniejsze funkcje widoczne na makietach (skupiam się na listingu, sam header omówię w innym wpisie):

  • breadcrumbs
  • wysuwany z lewej strony panel filtrów. Gdy panel jest schowany content rozciąga się na 100%.
  • filtrowanie po kategoriach i tagach
  • sortowanie wyników
  • przełącznik  między trybem wyświetlania postów (lista/grid)
  • posty w widoku grid mają dynamiczny layout i układaję się ładnie jeden pod drugim w kolumnach niezależnie od ich wysokości

Pierwsze komponenty

Na podstawie makiet zacząłem dodawać bazowe pliki komponentów, które będą musiały zostać zaimplementowane. Dla każdego komponentu utworzyłem:

  • plik JS definiujący komponent
  • plik JS do testów jednostkowych komponentów
  • plik SCSS w którym będą zawarte style dla komponentu.

jeśli chodzi o same komponenty to podzieliłem je następująco:

  • ListingComponent – komponent-rodzic dla całego listingu
  • FiltersComponent  – komponent-rodzic dla filtrów
    • CategoriesComponent – komponent listy kategorii
    • TagsComponent – komponent listy tagów
  • ToolbarComponent – komponent toolbara
    • SortingComponent – komponent zawierający selectbox do sortowania
    • ViewSwitcherComponent – komponent z przełącznikiem trybu wyświetlania listingu
  • PostsComponent – komponent wyświetlający posty
    • itemComponent – komponent wyświetlający pojedynczy post

Na tym etapie komponenty są w pełni statyczne tzn, że wyświetlają statyczny html (razem z kolegami z pracy określamy taki stan jako zadrutowane dane). Całą logikę i podział odpowiedzialności będę musiał jeszcze wymyślić i napisać.

To właśnie jest chyba najpiękniejsze w tym wszystkim – godzina pracy generuje kilka kolejnych godzin potrzebnych na zakończenie jakiejś funkcjonalności. W kolejnych etapach będę musiał popracować nad:

  • ostylowanie tego wszystkiego żeby ładnie wyglądało (wygląd jest najważniejszy)
  • zaimplementowanie wszystkich funkcjonalności typu otwieranie/zamykanie filtrów, sortowanie itp.
  • zmiana statycznych dane na dane z jakiegoś Store

To tylko frontend. Później trzeba będzie jeszcze zrobić backend. Zaczyna robić się ciekawie 🙂

jeśli chcesz zobaczyć trochę mięska czyli kodzik to zapraszam na githuba: https://github.com/Frodigo/Atena/tree/feature/frontend-listing

Podsumowanie

Pierwsze makiety i komponenty już za mną. Wygenerowałem sobie pracy na kolejne tygodnie. Kolejny post o Atenie za tydzień. Pod koniec tygodnia możesz się jeszcze spodziewać postu o tematyce związanej z Magento 2. Przygotowuje też niespodziankę związaną z Webpackiem.

Jeśli masz jakieś pytania lub sugestie pisz śmiało w komentarzach.

Share on FacebookTweet about this on TwitterShare on LinkedIn