Umbraco CMS - z czym to się je?

Praca front-end developera, to znacznie więcej, niż stylowanie prostych stron opartych na HTML lub tworzenie templatek do (znienawidzonego przez wielu) Wordpressa. Istnieje wiele mniej popularnych technologii, które mogą być wykorzystywane na przykład, do tworzenia blogów (jak Ghost CMS, oparty na JS), czy zaawansowanych stron WWW, jak Umbraco CMS.

Właśnie o tej technologii chciałbym opowiedzieć z perspektywy początkującego dewelopera.
Umbraco CMS to dość niszowy CMS, oparty na frameworku ASP.NET, który to z kolei, powstał na podstawie C#.
Dla front-end developera nie ma to zbyt dużego znaczenia, dlatego usłyszawszy nazwę nowego języka, nie powinieneś uciekać :)

Instalacja Umbraco

Aby zainstalować Umbraco, powinieneś ściągnąć kilkanaście GB niezbędnych programów. Pomocne będzie Visual Studio 2017 od Microsoftu - ogromne IDE, które w obsłudze przypomina PHPStorma, jednak jest od niego znacznie gorsze. (Opinia może być tendencyjna).

Umbraco można się bawić też za pomocą IDE Rider, jednak ma on słabe wsparcie CSS i HTML (na przykład brak Emmeta).

Mój workflow wygląda tak, że otwieram projekt w Visual Studio 2017 i kompiluję go, a następnie, otwieram jeszcze raz w PHPStorm i to w nim, edytuję pliki.

Po ściągnięciu tego potwora (Visual Studio), możemy skorzystać z konsoli NuGet (czyli takiego NPM dla pakietów ASP.NET) i za jego pomocą, wyszukać i zainstalować Umbraco.

Dokładną instrukcję znajdziesz w filmie powyżej. Następnie odpalasz projekt skrótem ctrl + shift + b i po wciśnięciu F5, trafiasz na znajomy obszar. W przeglądarce włącza nasz CMS, który zachęca do podania loginu i hasła, podobnie, jak Wordpress.

Umbraco ma tę przewagę nad Wordpressem, że po uruchomieniu go we wskazany sposób, samoczynnie się odświeża po wprowadzeniu zmian.  Jeśli zainstalujesz Umbraco we wskazany sposób, raczej nie powinny pojawić się kolizje między serwerem Apache w Xampie, a serwerem IIS w Windows. Na problemy natrafiłem natomiast, gdy pobrałem Umbraco ze strony głównej i następnie włączyłem je za pomocą Webmatrixa - skutecznie uniemożliwił on działanie Skype.

Stylowanie Umbraco

Krótki wstęp - w projekcie tworzysz własne pliki CSS i JS (możesz także użyć Sass lub ulubionego frameworku JS), dlatego praca przypomina tę z Wordpress.


Umbraco oferuje takie ciekawostki, jak poszczególnych elementów na stronie. Użytkownikowi udostępniamy odpowiednie pola, które może następnie wykorzystać w dowolny sposób.

 Zadaniem dewelopera, jest między innymi ułożenie ich w odpowiedniej kolejności w głównym pliku strony. Dzięki temu, łatwo zdefiniujesz, że na stronie głównej ma się pojawić na przykład pole wyboru fotografii, edytor tekstu (znacznie lepszy niż ten wbudowany w Wordpress) czy też kilka checkboxów.

Możesz też odpowiednio zatytułować różne sekcje i następnie używać tych nazw podczas umieszczania elementów w szablonie w edytorze.

Podczas stylowania z użyciem Bootstrapa, możesz ustalić na przykład, że cała strona mieści się w elemencie .container-fluid, a węższe sekcje, schować w standardowym .container.

Praca z Umbraco, zainstalowanym na serwerze

Umbraco nie oferuje wygodnego importu wszystkich danych z wersji działającej lokalnie na prawdziwy serwer. Aby przemigrować dane, musisz za pomocą Gita wgrać na serwer pliki CSS i JS. Następnie, konieczne jest przemigrowanie data types, - aby to zrobić, tworzysz nowy Package w menu Packages i zaznaczasz w nim odpowiednie dane, a następnie, ściągasz go na dysk. Możesz go następnie wgrać w projekcie Umbraco na serwerze.

Nie znalazłem sposobu na migrację treści i zrobiłem to w najprostszy sposób - metodą kopiuj - wklej. Zdjęcia można wgrać za pomocą menu media. 

Plusy i minusy
Umbraco jest bardzo proste do nauki - gdy już poznasz sposób tworzenia nowych podstron, okaże się on bardziej intuicyjny, niż w innych systemach CMS. Jest też bezpieczniejsze, chociażby z uwagi na mniejszą popularność niż w przypadku CMS opartych na Wordpress. Z tego powodu, może okazać się ono dobrym wyborem, na stronę firmową. Jego plusem jest też możliwość łatwego dodania własnych opcji w .net i C#.

Umbraco jest też dobrym rozwiązaniem, jeśli chodzi o tworzenie stron typu one page, z uwagi, na możliwość umieszczania wielu sekcji z różnymi edytorami.

Minusem jest dla mnie sama technologia, na której powstał Umbraco - stworzenie pierwszej strony, wymaga zainstalowania bardzo dużego IDE, jakim jest Visual Studio, a to nie jest ostatni krok. Oprócz tego, musiałem zainstalować również kilka wtyczek do tego IDE, z których niektóre, zajmowały kilkaset megabajtów. Gdy już poznasz sposób na "odpalenie projektu", praca staje się bardzo wydajna i niczym nie różni się, od tworzenia stron w HTML.

Minusem będzie też droższy hosting, gdy zechcemy pochwalić się naszym projektem w sieci. Kolejny minus, to niewielka (w porównaniu do Wordpressa) ilość tutoriali do Umbraco. W języku polskim, praktycznie nie ma materiałów, natomiast te po angielsku, są tworzone głównie przez twórców i publikowane na Umbraco TV.
Minusem Umbraco dla osób, które chcą stawiać na nim stronę, będzie na pewno bardzo wysoka cena szablonów.

Polecam wszystkim osobom, które utożsamiają pojęcie systemu zarządzania treścią, z Wordpressem. Okazuje się, że stronami WWW można zarządzać prościej i bezpieczniej.