W pierwszym artykule poświęconym aplikacji wspomniałam, że chcę skorzystać z Google’s Material Design. Osobiście bardzo lubię aplikacje zgodne z tym stylem, ale sama jeszcze z niego nie korzystałam. Więc czemu nie miałabym spróbować przy tym projekcie? W końcu i tak opiera się na samych nowościach (dla mnie :D).

Okazało się, że był to strzał w dziesiątkę! Dlaczego?

Po pierwsze dlatego, że ktoś już wpadł na genialny pomysł, by przygotować zestaw komponentów React’owych implementujących zasady Google’s Material Design. Na dodatek jest genialny! Jak nazwano to połączenie?

Material UI

Projekt jest świetnie opisany, dokumentacja przejrzysta, jasna. Wrażenia niesamowite! Tworzenie interfejsu aplikacji z wykorzystaniem Material UI jest tak szybkie i wygodne. Zdecydowanie polecam!

Jak wygląda interfejs mojej aplikacji?

Przykład fajnego demo zbudowanego w oparciu o Material UI?

Admin on Rest (jeden z przykładów zaprezentowanych w sekcji Showcase)

A mam nadzieję, że niedługo będę mogła pokazać demo mojej aplikacji 😉

 

Jedynym minusem (?) jest to, że projekt jest teraz bardzo aktywnie rozwijany. 636 otwartych na chwilę obecną issues’ów. Zaprzęgłam go u siebie z 1,5 tygodnia temu a już zdążyła się pojawić nowa wersja. A na pewno będę chciała mieć najnowszą możliwą wersję w projekcie więc czeka mnie upgrade.

Jeśli chodzi o licencję – MIT (również moja ulubiona).

 

Wymagania wstępne

Przed zapoznaniem się z Material UI warto rozumieć React JS. Dlaczego? Material UI to tak naprawdę zbiór komponentów React’owych. Ciężko by było na nich operować bez wiedzy w temacie React’a.

Tak samo warto ogarniać podstawy Node’a (material-ui dostępny jest jako npm packege).

Oczywiście o HTML5, CSS, JavaScript nie muszę wspominać?

 

Jak wygląda instalacja? 

Możesz ją zainstalować wykorzystując npm. Polecenie:

zaciąga najnowszą wersję stabilną.

Gotowe 😃

 

O czym warto pamiętać na starcie?

Od wersji 0.15.0 (aktualna 0.17.1), komponenty Material-UI  potrzebują mieć określony theme (szablon). Najszybszym sposobem, by go dostarczyć jest wykorzystanie MuiThemeProvider’a.

Ciężko będzie Ci się też również obejść bez react-tap-event-plugin. Pozwala on nasłuchiwać na zdarzenia dotknięcia, kliknięcia komponentu.

 

No i naprawdę warto zajrzeć do dokumentacji Material UI. Na początku zwłaszcza do sekcji:

 

Jak wygląda tworzenie aplikacji z Material UI?

Wyobraź sobie, że wyposażasz mieszkanie. Idziesz do sklepu, oglądasz i bierzesz to i to i to 😃

Analogicznie wygląda praca z Material UI.

 

Masz menu komponentów spośród których wybierasz potrzebne elementy.

Zdecydowałeś się na pozycję z menu? No to podejrzyj kod 😃

Ogólnie bardzo przyjemna i wygodna sprawa.

Jeśli zajrzysz do mojego projektu zobaczysz, że mało tam jak narazie CSS’a. UI został stworzony z wykorzystaniem domyślnie wyglądających komponentów Material UI.  (+ Flexbox)

 

Co może Ci się jeszcze przydać?

 

Alternatywne frameworki

Oczywiście, żeby zbudować widok w React JS nie musisz używać żadnego z wymienionych frameworków wystarczy JSX + CSS (komponenty React’owe piszesz w JSX – co to JSX?).

 

Co sądzisz? Na mnie Material UI zrobił naprawdę świetne wrażenie!

Jeśli masz pytania – śmiało dawaj znać w komentarzu 😉

  • Sam się zastanawiałem nad wykorzystaniem Googlowskiego (?) MD. Stwierdziłem, że jak nie używam ani jQuery ani Bootstrapa to to też sobie odpuszczę ale (mocno) się inspiruję (no może poza ikonami, wolę zostać przy Font Awesome)

    • Ja również rozważałam Bootstrapa 😛 Ale stwierdziłam, że jego już znam. A MD korcił mnie już od dawna. Ale w poście z początku projektu był pod znakiem zapytania. Nie wiedziałam, jak to ugryźć przy React’cie. A tu miła niespodzianka 😉 No, a skoro już Material to i ikonki podpinam MD 😉
      Za to wtorkowy raport… jak narazie robię milion rzeczy, ale nie to, co miałam robić xD Czeka mnie ciężki weekend 😀

  • Akataa

    Własnie robię w pracy projekt w oparciu o MaterializeCSS. Z Reactem jeszcze w ogóle nie miałam do czynienia, ale sama idea ujednolicania interfejsów w oparciu o Material Design bardzo do mnie przemawia. Super artykuł jak zawsze. 🙂

    • Oj, do mnie też 😀 Choć znam też osoby, które nie przepadają za Material Design. Ale mi bardzo odpowiada ta prostota, czystość, przejrzystość. Oraz to, że narzuca swoje reguły. Człowiek nie musi się zastanawiać nad wieloma szczegółami 😉
      Właśnie też dzisiaj trafiłam na to MaterializeCSS. Wygląda naprawdę ciekawie 🙂
      I dziękuję 😉