Pomocne w testowaniu witryn na wielu przeglądarkach

Jedną z trudniejszą z rzeczy z jaką spotyka się każdy web developer jest dostosowanie działania witryny i jej optymalizacja wynikająca ze zróżnicowania dostępnych przeglądarek. Każdy spotka się prędzej czy później z piekłem przeglądarek wynikającym z ich wojny o rynek :-) Aktualny ranking firmy Gemius na temat popularności przeglądarek internetowych w naszym kraju przedstawia się następująco:

1. Firefox 3.x 48,97%
2. Internet Explorer 7.x 17,23%
3. Internet Explorer 6.x 9,34%
4. Internet Explorer 8.x 7,74%
5. Opera 9.x 5,49%

Do tego dochodzą różne konfiguracje wymienionych wyżej przeglądarek takie jak ustawienia javascript, flash, różne rozdzielczości ekranu itd.

Oto kilka przydatnych narzędzi w testowaniu witryn na wielu przeglądarkach i ich konfiguracjach, które zarazem nie zamienią naszego komputera w śmietnik.

Browsershots.org Robi zrzuty ekranowe podanego przez nas adresu www. Zalety: prostota, długa lista obsługiwanych przeglądarek Wady: czasami trzeba czekać na wyniki kilkanaście minut, witryna musi być dostępna publicznie, niektóre maszyny testujące potrafią się zawieszać. Dodatkowo w sieci istnieje wiele innych witryn o podobnym działaniu: np. komercyjny i rozbudowany CrossBrowserTesting.com.

Internet Explorer Application Compatibility VPC Image Zestaw obrazów VPC systemu operacyjnego WindowsXp wraz z zainstalowanymi przeglądarkami Internet Explorer w wersji 6, 7, 8 (do wyboru). Zalety: otrzymujemy podręczne środowisko testowe, Wady: trzeba mieć odpowiednie zasoby sprzętowe na uruchomienie kilku maszyn wirtualnych. VPC działają jeszcze do stycznia 2010 r.

Expression Web Super Preview Umożliwia podgląd wyrenderowanej witryny z poziomu programu Microsoft Expression Web. Zalety: zintegrowanie podglądu witryny z procesem tworzenia. Wady: wymagany Expression Web

Firefox IE View Wtyczka do przeglądarki Firefox umożliwiająca przełączanie silnika renderującego z/na Internet Explorer-a. Zalety: szybkość działania.

PG.NET XXII Spotkanie grupy

Chciałbym Was zaprosić na XXII spotkanie Poznańskiej Grupy .NET, które odbędzie się w czwartek 29 października 2009 w siedzibie firmy Cognifide (Aleja Wielkopolska 4, Poznań). Będę na nim prezentował bardzo przydatne narzędzie jakim jest NDepend. Oprócz mojej prezentacji nie zabraknie nowinek ze świata .NET, które przedstawi Marek Błotny. Na koniec będzie o Silverlight 3, Blend 3, .NET RIA Services o czym opowie nam Marcin Kruszyński.

Szczegółowa agenda:
18:00 - 18:10 Wstęp
18:10 - 18:30 Nowinki ze Świata .NET (Marek Błotny)
18:30 - 19:00 NDepend (Dariusz Tarczyński)
19:00 - 19:15 Przerwa
19:15 - 21:00 Silverlight 3, Blend 3, .NET RIA Services - najciekawsze cechy (Marcin Kruszyński)

Udział w spotkaniu jest bezpłatny, a rejestracja uczestników znajduje się tutaj: Rejestracja.

EDIT @ 2009.10.30
Prezentację oraz materiały do niej można pobrać stąd

PG.NET XXI Spotkanie grupy

Gościem XXI spotkania (2009-10-08 19:00, Aleja Wielkopolska 4, siedziba firmy Cognifide) Poznańskiej Grupy .NET będzie Bartosz Nyczkowski, który pracuje w Microsoft, w grupie, która jest odpowiedzialna na wydajność serwerowych wersji Microsoft Windows.

Oto zagadnienia, które omówi:
- Jak wygląda cykl życia projektu w przypadku Microsoft Windows?
- W jaki sposób jest testowana wydajność systemu?
- Jak od strony praktycznej wygląda praca nad usprawnieniami?
- Jak wygląda współpraca z klientami?

Rejestracja na spotkanie

Agile Poznań: III Spotkanie

Spotkanie Poznańskiej Grupy Praktyków Agile odbędzie sie w siedzibie Cognifide
(Al.Wielkopolskie 4, Poznań) 6 października o godzinie 18:00.

Wojciech Buras poprowadzi prezentacje "TDD w prawdziwym swiecie",
podczas której omówione zostaną miedzy innymi następujące kwestie:
1. Najczęstsze problemy z przełożeniem designu na kod i testy.
2. Czym jest i czym nie jest TDD?
3. Przykład ewolucji designu z pomocą TDD.
4. Promowanie testowalności.
5. Zastosowanie na linii frontu.

Warto się wybrać!

PG.NET: XX Spotkanie grupy

Zapraszamy na pierwsze po wakacjach spotkanie Poznańskiej Grupy .NET.
20. spotkanie PG.NET odbędzie się w czwartek 24 września (Aleja Wielkopolska 4, siedziba firmy Cognifide) od godz. 18:00. Zapowiada się bardzo, bardzo interesująco!

Agenda:
18:00 - 18:15 - Wstęp i kilka spraw organizacyjnych
18:20 - 18:35 - Nowinki w świecie .NET - Skrót informacji ze swiata technologii .NET przygotowany przez Marka Błotnego (Cognifide)
18:40 - 19:00 - Hudson Continuous Integration Engine - Kilka informacji na temat alternatywnego narzędzia CI przedstawi Michał Korsak (ITSoftware.pl)
19:15 - 20:00 - Instalator WiX - Bartek Szafko (Advisor)

W czasie spotkania wśród uczestników rozlosujemy kilka licencji na oprogramowanie firm JetBrains, Developer Express, Telerik oraz Nevron.

Po spotkaniu, już tradycyjnie zapraszamy na część dyskusyjno-nieformalną :)
[Rejestracja, strona grupy]

NDepend. Wiesz z kim tańczysz?

Po konkretnej nieobecności w trybie online powracam do życia - z kolejnymi wpisami znanej treści, tym razem słów kilka o niezwykle użytecznym narzędziu: NDepend.

Czym jest owy NDepend? To narzędzie dla .NET, którego autorem jest Patrick Smacchia. Służy ono do badania i raportowania złożoności oraz jakości tworzonego kodu. Na chwilę obecną posiada 82 metryki wyświetlające bardzo szczegółowe dane. Dodatkowo generator raportów sprawiają, że nawet “nieprogramista” może ocenić w jakiej kondycji jest dostarczony mu kod – narzędzie wszechstronne oraz wręcz nieograniczone. Możliwość integracji z NAnt-em lub MSBuild-em dostarczają automatów do wykonywania tego wszystkiego o czym troszkę napisze za chwilę.

Zacznijmy od początku. Po uruchomieniu NDependa wskazujemy zestaw bibliotek, które chcemy poddać analizie. Nie mam nic mądrego pod ręką, dlatego posłużę się bibliotekami MbUnit.

 

Program od razu przystępuję do akcji, a oczom naszym ukazuje się dłuuugi raport.

I tak, na pierwszy rzut widzimy:

ilość instrukcji IL, ilość linii, kodu, (uwaga) pokrycie kodu przez komentarze, ilość klas, ilość typów itd. O ile niektóre z tych danych, z praktycznego punktu widzenia, możemy potraktować statystycznie, o tyle już np. zależności między samymi klasami, martwy kod, konwencje nazewnicze mogą być tym, czego właśnie szukamy.

Kto, kogo, gdzie…

Wspomniane zależności między modułami mogą być bardzo skomplikowane, przedzieranie się pomiędzy nimi za pomocą Reflectora często po kilkudziesięciu minutach powoduje odruch wymiotny na widok kolejnego “dziedzica”. Na szczęście NDepend jest w stanie to wszystko ogarnąć i mimo że kod nadal pozostaje zakręcony, to my w tym gąszczu powiązań dość szybko możemy dojść do celu.

Refaktoryzacja kodu z tym okienkiem staje się wiele prostsza. Często graf może wydawać się zbyt obszerny:

Na szczęście do dyspozycji mamy dodatkowe dokowalne okienko: Dependency Matrix:

Skóra węża?

Kolejnym bardzo interesującym widokiem jest okno Metrics. Przypomina ono nieco skórę węża (tak, widzę tam skórę węża :-) ), a ma za zadanie wykonanie rentgena naszego kodu: każda bryła w ogólności symbolizuje klasę, która to składa się z mniejszych kwadracików – naszych metod. Im metoda ma więcej linii kodu, tym kwadracik jest większy. Sczegółowość możemy zawężać przełącznikiem widniejącym u góry okienka, natomiast zbiorcze informacje widzimy w okienku Info.

CQL

To nie wszystko! NDepend posiada wbudowany interpreter języka zwanego CQL (Code Query Language). Dzięki niemu piszemy kwerendy zbliżone do języka SQL, które to pozwalają odpytywać się NDependa o interesujące nas dane o naszym kodzie.

Operator projekcji: SELECT

• METHODS – odpytania do metod
• FIELDS – odpytania do pól
• TYPES – odpytania do typów
• NAMESPACES – odpytania do  przestrzeni nazw
• ASSEMBLIES – odpytania operujące na bibliotekach

Operator informujący: WARN

• WARN IF – jeśli spełniony jest warunek

Aby utworzyć kwerendę należy skorzystać z okna CQL Query Edition, które posiada wbudowane podpowiadanie składni z możliwością wizualnego modyfikowania jej parametrów:

Przykłady:

1. Wyświetl metody publiczne, które mają więcej niż 30 linii kodu:

SELECT METHODS WHERE NbLinesOfCode > 30 AND IsPublic

2. Wyświetl 10 najbardziej złożonych metod i uszereguj metody ze względu na ich złożoność:

SELECT TOP 10 METHODS ORDER BY CyclomaticComplexity

3. Moja konwencja nazewnicza zabrania nazywania pól statycznych zaczynających się od przedrostka m_ Ostrzeż mnie jeśli znajdziesz takie wystąpienia:

WARN IF Count > 0 IN SELECT FIELDS WHERE NameLike "^m_" AND IsStatic

Słowo końcowe

NDepend to naprawdę niezły kombajn, kilka godzin może okazać się niewystarczające, aby zgłębić możliwości jakie drzemią w tym narzędziu. Warto go poznać, gdyż może uratować nam skórę podczas następnej refaktoryzacji kodu.

ASP.NET MVC oraz IIS 6

Hostowanie aplikacji utworzonej za pomocą frameworka ASP.NET MVC na serwerze IIS 6 jest niestety bardzo problematyczne. Utworzone w ten sposób aplikacje wyświetlają niemiły (i w tym przypadku niezrozumiały) komunikat: 404 Not Found. Dlaczego tak się dzieje?

Żądania przychodzące do serwera są przetwarzane poprzez odpowiednie filtry ISAPI (pomijam dla uproszczenia inne zachodzace tam procesy), zgodnie z mapowaniem odpowiednich rozszerzeń. I tak na przykład .ASPX trafia do filtra aspnet_isapi.dll. Routing ASP.NET MVC wymaga użycia modułu IHTTPModule i wywołania UrlRoutingModule. Niestety to wymaga przejścia przez wymieniony wcześniej filtr aspnet_isapi.dll - a ten domyślnie nie jest w tym przypadku żądany, a serwer wyświetla nam błąd 404.

Ok, jak wyjść z opresji?

Metoda 1: Prosta

Odrazu ostrzegam: ta metoda nie nadaje się do zastosowania w dużych, obciążonych witrynach. Zaraz okaże się dlaczego.

Rozwiązanie to opiera się o wildcard. Polega to na tym, że wszystkie żądania przychodzące do serwera będą puszczane przez aspnet_isapi.dll. Zaletą jest prostota, wadą: każde żądanie: nawet o obrazek, plik .css, plik multimedialny i każdy inny plik będzie wiązał się przejściem przez handler DefaultHttpHandler/StaticFileHandler. Takie rozwiązanie oznacza brak cachowania żądań oraz kompresji. Marnotrawstwo zasobów serwera, a to dla mocno obciążonych maszyn oznacza problemy.

Ok, ale dla developerskich zastosowań takie rozwiązanie będzie wystarczające, więc zaczynamy konfigurację:

1. Otwieramy przystawkę Internetowe Uslugi Informacyjne i klikamy właściwości naszej aplikacji MVC.

2. Przechodzimy na kartę: Katalog macierzysty oraz klikamy przycisk Konfiguracja

3. Klikamy przycisk Insert, wpisujemy rozszerzenie: .mvc potem lokalizację: C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll oraz odznaczamy opcję Sprawdz, czy plik istnieje.

Metoda 2: Zmiana ścieżki routingu

Metoda ta polega na dodaniu rozszerzenia .aspx po nazwie kontrolera, czyli stworzenia ścieżki routingu w ten deseń: {controller}.aspx/{action}/{id}

Niestety tracimy nasze czyste ścieżki, które zapewniało nam MVC.

 

Metoda 3: URL Rewriting

Ta metoda to nic innego jak zautomatyzowanie metody drugiej (odpada nam zmiana ścieżek). Musimy skonfigurować przepisywanie ścieżek tak, aby moduł dopisał znane ASP.NET rozszerzenie i przepuscił je przez odpowiedni filtr.