Front-endowe frameworki dla ASP.NET z RWD

asp_dot_net_32

Poszukiwałem frameworka, dzięki któremu mógłbym szybko tworzyć bogate interfejsy użytkownika. Kluczowym wyznacznikiem było dla mnie budowanie stron dopasowujących się do różnych rozmiarów wyświetlaczy na różnych urządzeniach, dlatego zależało mi na technice RWD (Responsive Web Design). Niestety nie udało mi się znaleźć frameworka, który jednocześnie wspierałby RWD i udostępniał szereg rozbudowanych kontrolek. Wiele frameworków RWD posiada podstawowe kontrolki interfejsu użytkownika, ale niestety nie spełniały one moich wymagań, nie miały np. autopodpowiedzi. W związku z tym postanowiłem wyszukać dostępne frameworki UI oraz RWD i spróbować wykorzystać ich kombinacje.

Istnieje ogromna liczba frameworków RWD wspierających tworzenie skalowalnych stron internetowych. Jednak są one głównie niewielkimi frameworkami css-owymi, których główną funkcjonalnością jest płynne dopasowywanie strony do różnych rozmiarów urządzeń, na których są prezentowane. Wybór kandydatów z tak szerokiej gamy dostępnych narzędzi nie był łatwy. W ramach rozpoznania wybrałem te najczęściej pojawiające się w wynikach wyszukiwania i różnych zestawieniach frameworków css. Wprawdzie Gumby nie pojawiał się zbyt często, ale zainteresowały mnie jego możliwości tworzenia 12- i 16-kolumnowych oraz hybrydowych gridów, dlatego ostatecznie również dołączył do grupy testowej.

 

Frameworki RWD

Bootstrap

Opis frameworka

Bootstrap jest jednym z największych, bardzo potężnym i intuicyjnym front-endowym frameworkiem do szybkiego i łatwego tworzenia skalowalnych stron internetowych. Wykreowali go Mark Otto i Jacob Thornton w Twitterze. Jego bazą jest 12-kolumnowy grid.

Posiada dosyć sporą kolekcję komponentów, w której oprócz standardowych buttonów, alertów, labelek, zakładek czy pasków postępów są jeszcze np. grupy buttonów czy zakładki i buttony z dropdownowym menu.

Ciekawostką jest, że podczas ściągania Bootstrapa ze strony można skonfigurować własną wersję produktu poprzez wybór komponentów, dodatkowych pluginów jquery i ustawienie niektórych parametrów wybranych elementów, takich jak szerokość kolumn grida dla poszczególnych rozdzielczości, czcionki, jej rozmiary, kolory i wiele innych.

Instalacja

Framework Bootstrap może być zainstalowany do projektu poprzez NuGet Package Manager.

Licencja

Apache License v2.0

 

Foundation

Opis frameworka

Foundation to najbardziej znaczący konkurent Bootstra-a. Jak piszą jego twórcy na swojej stronie, jest on jednym z najbardziej zaawansowanych frontendowych frameworków na świecie. Generalnie rzecz biorąc, mowa o 12-kolumnowym, gridowym frameworku, który pozwala bardzo szybko tworzyć strony dopasowujące się do każdej przeglądarki i każdego urządzenia.

Oprócz podstawowego grida będącego bazą całego frameworka, Foundation posiada również dosyć sporą liczbę komponentów pozwalających budować bardzo ciekawe wizualnie strony internetowe. Należą do nich przyciski, zakładki, tabele, paski postępu, panele, video, label, radio button, checkbox.

Ciekawymi funkcjonalnościami framework-a są klasy pozwalające pokazywać coś lub ukrywać w zależności od typu urządzenia (rozdzielczości): „show-on-desktop”, „show-on-tablets”, „show-on-phones”. Dostępne są też „ukrywacze”:  „hide-on-desktop”, „hide-on-tablets”, „hide-on-phones”. Za pomocą tych klas możemy dopasować wygląd strony do różnych urządzeń, np. usunąć duże logo czy elementy flashowe na smartphonach i tabletach.

Przykład użycia Foundation wraz z ASP.NET MVC

Instalacja

Framework Foundation może być zainstalowany do projektu poprzez NuGet Package Manager. W wyszukiwaniu najlepiej wpisać „zurb” (nazwa producenta).

Licencja

Foundation oferowany jest na licencji MIT.

 

Skeleton

Opis framework-a

Skeleton nie jest właściwie frameworkiem, a raczej kolekcją plików css, które pomagają tworzyć strony dopasowujące się do każdego rozmiaru wyświetlacza. Dzięki temu, że Skeleton jest tak lekki, można bardzo szybko i łatwo rozpocząć z nim pracę. Mimo niewielkiego rozmiaru, jego możliwości są bardzo duże i nie ustępuje on swoim większym kolegom. Jego podstawą jest system 960 grid. Posiada również kilka komponentów, takich jak button, input, textarea, select list, checkbox, radio button. Istnieje kilka wyraźnych podobieństw do Foundation, ale Skeleton jest zdecydowanie lżejszy i zawiera mniejszą liczbę komponentów.

Instalacja

Skeleton może być zainstalowany do projektu poprzez NuGet Package Manager.

Licencja

Wszystkie elementy Skeletona są dostępne są na licencji MIT.

 

Gumby

Opis frameworka

Gumby to css-owy framework oparty na systemie 960 grid, w zasadnie nie różniący się mocno od opisanych wcześniej frameworków. Podobnie jak one pozwala na szybkie tworzenie stron internetowych dobrze wyglądających w każdej rozdzielczości i na każdym urządzeniu, posiada również w swoim arsenale bogatą kolekcję komponentów. Tym, co go wyróżnia, jest możliwość wyboru, czy chcemy projektować strony oparte na 12-kolumnowym gridzie, 16-kolumnowym gridzie czy może na hybrydzie, która pozwala na stosowanie obu typów gridu w ramach jednego layoutu. Hybryda umożliwia również zagnieżdżanie w sobie gridów różnego typu, co daje duże możliwości projektowania bardzo elastycznych stron.

Przykład zastosowania hybrydowego grida ze strony http://gumbyframework.com/docs/grid:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div class="row">
  <div class="ten columns">
    What if pizza and hamburgers had a lovechild?
  </div>                           
  <div class="two columns">
    That is RIDICULOUS! It would never happen. Pizza is too good looking for
    hamburgers.
  </div>
</div>
                       
<div class="sixteen colgrid row">
  <div class="row">
    <div class="sixteen columns">
      No, I mean hypothetically... What if?
    </div>
  </div>
  <div class="row">
    <div class="four columns">
      Hypothetically, your question is absurd. Even IF pizza WERE attracted to
      hamburgers, its already in a loving relationship with buffalo chicken.
      It just wouldnt happen.
    </div>
    <div class="four columns">
      You are crushing my dreams here. Buffalo chicken is a whore, if loving
      means buffalo chicken gets in bed with every food item it brushes up
      against, then sure, i guess you have a valid argument.
    </div>
    <div class="four columns">
      I guess we'll have to agree to disagree...
    </div>
    <div class="four columns">
      I agree that pizza and hamburgers would have an exploding bonanza of flavor
      for a lovechild.
    </div>
  </div>
</div>
<div class="row">
  <div class="eight columns">
    I love how you ignore the existence of buffalo chicken. And it holding the
    world record for Most Delicious Breed of Chicken on the Planet, ever.
  </div>
  <div class="four columns">
    Buffalo chicken is a slut. Hamburgers are delicious.
    Pizza + Hamburgers = Perfection.
    End of story.
  </div>
</div>

Instalacja

Ręczne ściągnięcie i dodanie do projektu.

Licencja

Gumby jest oprogramowaniem na licencji MIT.

 

Framework’i UI

jQuery UI

Opis framework-a

JQuery UI jest chyba najbardziej znaną i najpopularniejszą opensourcową biblioteką komponentów interfejsu użytkownika zbudowaną na bazie jQuery. Pozwala budować wysoce interaktywne aplikacje webowe. To, co wyróżnia jQuery UI pośród pozostałych frameworków, to bardzo duża liczba efektów i animacji. Wśród nich znaleźć można między innymi Blind, Bounce, Clip, Drop, Explode, Fade, Fold, Highlight, Pulsate, Scale, Shake, Slide, Transfer. Kontrolki Autocomplete i Combo Box umożliwiają wyszukiwanie wyrazów zawierających podany ciąg znaków, a nie tylko zaczynające się od tych znaków, a także grupowanie wyrazów podpowiedzi według kategorii oraz wybieranie kilku wyników. Początkowo pewną przeszkodą w budowaniu formularzy za pomocą jQuery UI jest brak metod walidacji pól, ale istnieje dodatkowy plugin jQuery Validation, który dostarcza takie funkcjonalności. Innym problemem podczas korzystania z tego frameworka może być brak grida, chociaż trwają już prace nad uzupełnieniem go.

Na stronie http://jqueryui.com/themeroller można zaprojektować swój własny motyw i zobaczyć, jak będą się w nim prezentowały wszystkie kontrolki oferowane przez jQuery UI.

Wspierane wersje przeglądarek:

  • IE 6+,
  • Firefox 3+,
  • Safari 3.1+,
  • Opera 9.6+,
  • Google Chrome

Instalacja

Najprostszą metodą instalacji jQuery UI jest NuGet Package Manager.

Licencja

JQuery UI jest oprogramowaniem na licencjach MIT i GNU General Public License.

 

Juice UI

Opis frameworka

Juice UI to kolekcja komponentów dla Web Forms zbudowana na bazie jQuery. Zawiera 17 kontrolek i ich zachowań. Pełną listę wszystkich komponentów można znaleźć na stronie http://juiceui.com/controls. Kontrolka Autocomplete Juice UI umożliwia szukanie zarówno wewnątrz wyrazów, jak i od początku. Jednak brak kontrolki typu Combo Box jest ogromnym minusem, który może dyskwalifikować ten framework w zakresie tworzenia rozbudowanych formularzy. W moim odczuciu Juice UI może być jedynie dodatkiem, bo jest zbyt skromny, by traktować go jako samodzielny framework do tworzenia bogatych interfejsów użytkownika.

Juice UI stanowi nowoczesną alternatywę dla Ajax Control Toolkit. Aplikacje zbudowane na ASP.NET Web Forms często polegają na przetwarzaniach po stronie serwera, w takich przypadkach konfigurowanie jQuery UI może być uciążliwe. Tu przychodzi z pomocą właśnie Juice UI, który jest pewnego rodzaju opakowaniem (wrapper) dla kontrolek jQuery UI, pozwalającym na dostęp do nich ze strony serwera.

Instalacja

Framework Juice UI można zainstalować do projektu za pomocą NuGet Package Manager lub poprzez wpisanie polecenia „Install-Package JuiceUI” w NuGet Package Console.

Licencja

Juice UI jest oprogramowaniem na licencjach MIT i GNU General Public License.

 

Kendo UI

Opis frameworka

Kendo UI to kompletny framework do tworzenia aplikacji w standardzie HTML5. Zawiera wszystkie niezbędne składniki potrzebne do budowania nowoczesnych, intuicyjnych, interaktywnych aplikacji HTML5. Dostarcza mechanizmy JQuery dla takich obiektów, jak bindowanie danych po stronie klienta, animacje i technikę przeciagnij-i-upuść.

Kendo UI składa się z trzech produktów:

  • Kendo UI Web – główne funkcjonalności framework-a, podstawowe komponenty oraz efekty;
  • Kendo UI DataViz – kolekcja komponentów wizualizacji danych;
  • Kendo UI Mobile – zestaw widgetów do tworzenia stron i aplikacji na urządzenia mobilne.

Każdy z produktów można kupić oddzielnie lub jako kompletne narzędzie, które da się uzupełnić o mechanizmy wspierające ASP.NET MVC.

Główną wadą tego frameworka w moim przypadku jest brak kontrolek Radio i Check Box (istnieją w Kendo UI Mobile). Na szczęście można sobie z tym poradzić, wykorzystując Buttona z jQuery UI, ponieważ oba frameworki można zastosować jednocześnie w tym samym projekcie i nie powodują żadnych konfliktów.

W przykładach prezentowanych na stronie producenta kontrolka Combo Box wyszukuje tylko wyrazy zaczynające się od podanego ciągu znaku. Jednak po zagłębieniu się w dokumentację frameworka można wyczytać, że taka jest wartość domyślna właściwości „filter”. Po ustawieniu jej na „contains” otrzymujemy wyszukiwanie również wewnątrz wyrazów.

Dużym atutem przemawiającym za Kendo UI jest implementacja wzorca MVVM, czyli Model-View-ViewModel, o którym można przeczytać więcej np. na wiki.

Stosowanie kontrolek jest według mnie dość proste i intuicyjne. Aby np. dotrzymać zwykłego datepickera, wystarczy w kodzie strony umieścić wpis:

1
@(Html.Kendo().DatePicker().Name("datepick1"))

Kendo UI posiada dodatkowe narzędzia ThemeBuilder, które pozwalają budować dowolne motywy dla aplikacji webowych i mobilnych:

Wspierane wersje przeglądarek:

  • IE 7+,
  • Firefox 3+,
  • Safari 4+,
  • Opera 10+,
  • Google Chrome

Licencja

Płatne, oferta

W tabeli znajduje się krótkie porównanie jQuery UI z Kendo UI. Zestawienie pochodzi ze strony http://jqueryuivskendoui.com, gdzie można przeczytać równieć obszerny artykuł opisujący oba produkty.

 

Ignite UI

Opis frameworka

Ignite UI to kolejny płatny framework, który oparty jest na jQuery, jQuery UI oraz jQuery Mobile. Jako jedyny znaleziony przeze mnie framework umożliwia bezpośrednie korzystanie z RWD, jednak nie jest on tak rozbudowany i nie daje takich możliwości, jak przedstawione wcześniej dedykowane tej technologii frameworki.

Posiada bardzo dużo kontrolek o dużych, według mnie, możliwościach konfiguracyjnych. Mimo braku wydzielonej oddzielnie kontrolki autocomplete, ich combo-box umożliwia autopodpowiedzi. Co więcej udostępnia ciekawe opcje filtrowania, takie jak wyszukiwanie wyrazów zaczynających się od podanego ciągu znaków lub go zawierających, autouzupełnianie, wrażliwość na wielkość liter, podświetlanie pasujących wyników według różnych opcji. Przykładowe możliwości tej kontrolki można sprawdzić na stronie

http://www.infragistics.com/products/jquery/sample/combo-box/auto-suggest-and-filtering.

Niestety tutaj, podobnie jak w Kendo UI, nie znalazłem radio i check box-a. W tym przypadku również możemy skorzystać z jQuery UI.

Wszystkie kontrolki posiadają wrappery MVC, dzięki czemu można je w pełni wykorzystać w aplikacjach ASP.NET MVC.

Korzystanie z tego frameworka jest analogiczne jak w Kendo UI. Aby otrzymać podobny, podstawowy datepicker, wystarczy w kodzie strony wpisać:

1
@Html.Infragistics().DatePicker().ID("datePicker").Render()

JQuery stanowiące podstawę tego frameworka umożliwia wykorzystanie motywów utworzonych w ThemeRoller (narzędzie do tworzenia motywów dla kontrolek jQuery UI) dla kontrolek Ignite UI bez jakichkolwiek modyfikacji.

Wspierane wersje przeglądarek:

  • IE 6+,
  • Firefox 3+,
  • Safari 3.2+,
  • Opera,
  • Google Chrome 2.0+

Licencja

Płatne, oferta

 

Podsumowanie

W ramach przeprowadzonego rozpoznania obok testów pojedynczych frameworków wykonałem kilka bardzo prostych testów, łącząc framework-i RWD z framework-ami UI. Przykładowym zestawieniem jest Foundation Framework + jQuery UI, Kendo UI + Skeleton.

Jeśli miałbym wybrać darmowe rozwiązanie, to zdecydowałbym się na jQuery UI + Foundation. Natomiast w przypadku możliwości wyboru płatnego rozwiązania,  prawdopodobnie postawiłbym na Kendo UI + Foundation.

Juice UI odrzuciłem ze względu na brak wsparcia dla ASP.NET MVC oraz brak combo boxa, a Ignite UI właściwie tylko ze względu na brak wsparcia dla MVVM i na mniejszą liczbę kontrolek typowo webowych (np. brak menu).

Bardzo fajne i wnikliwe porównanie jQuery UI z Kendo UI można znaleźć na stronie: http://jqueryuivskendoui.com

jQuery UI Juice UI Kendo UI Ignite UI
RWD Nie Nie Nie Tak
ASP. NET MVC Tak Nie Tak Tak
MVVM Nie Nie Tak Nie
Liczba widgetów 11 10 19 webowych + 11 mobilnych + 12 wizualizacyjnych 14 + 19 mobilnych
DataSource Nie Nie Tak Tak
Walidacja Nie Nie Tak Tak
Wizualizacja Nie Nie Tak Tak

 

Liczba widgetów nie jest tożsama z liczbą możliwych kontrolek, jaką można osiągnąć, ponieważ np. jQuery UI posiada widget button, który można wykorzystać jako np. zwykły przycisk, jako checkbox lub jako radio button.

 

Źródła:

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *