Main Content RSS FeedLatest Entry

jQuery 1.4 vs. jQuery 1.3.2

Poprzednio informowałem o wydaniu nowej wersji biblioteki jQuery – 1.4.

Teraz pora aby przyjrzeć się jej dokładniej: na początek postanowiłem sprawdzić wydajność dwóch często wykorzystywanych przeze mnie metod: html() oraz remove().

Test metody html() polegał na wykonaniu jej w pętli – 100 powtórzeń. Kod dla wersji 1.4 oraz 1.3.2 był identyczny:

$("#htmlTest").click(function() {
   perfChecker.setStartTime();
   for (i = 0; i < 100; i++) {
      $("#results").html(testMessage);
   }
   alert(perfChecker.getDiff());
});

dodatkowo wykonałem ten test wykorzystując metodę standardowo dostępną w JavaScripcie – bez dodatkowych bibliotek:

$("#htmlTest").click(function() {
   perfChecker.setStartTime();
   for (i = 0; i < 100; i++) {
      document.getElementById('results').innerHTML = testMessage;
   }
   alert(perfChecker.getDiff());
});

Każdy z testów wykonałem 5 razy. Przedstawiony poniżej wykres przedstawia średni czas pojedynczego wykonania metody html(). Zmienna testMessage zawierała kod html składający się ze 100 paragrafów (<p>); każdy z nich zawierał 200 literowy tekst.

Test metody remove() polegał na usunięciu 1000 paragrafów (<p>) zagnieżdżonych w divie:

$("#removeTest").click(function() {
   perfChecker.setStartTime();
   $("#results2 p").remove();
   alert(perfChecker.getDiff());
});

Tutaj również postanowiłem porównać czas wykonania standardowych metod javascript:


$("#removeTest").click(function() {
   perfChecker.setStartTime();
   var a = document.getElementById('results2');
   var b = a.getElementsByTagName('p');
   var len = b.length;
   for (var i = len; i > 0; i--) {
      a.removeChild(b[i-1]);
   }
   alert(perfChecker.getDiff());
});

Rzadko piszę kod w czystym JavaScripcie, dlatego jeżeli znacie bardziej wydajny sposób na usunięcie paragrafów z diva to podajcie kod w komentarzu.

A teraz pora na wyniki:

jquery_perf_test

Jak widać jQuery w wersji 1.4 całkowicie deklasuje wersję 1.3.2.

Jeżeli chodzi o konfrontacje z klasycznym JavaScriptem to w przypadku “zwykłej” zmiany zawartości elementów jQuery jest trochę wolniejszy. Jednak jeżeli weźmiemy pod uwagę łatwość pobierania elementów w jQuerym, to różnica ta nie odgrywa większej roli.

W przypadku bardziej złożonych operacji jQuery w wersji 1.4 poradził sobie najlepiej – ale tutaj mógł zaistnieć problem nie do końca optymalnej metody JavaScript użytej w teście.

Mam nadzieję, że ten post zachęci Was do dokładniejszego przyjrzenia się nowej bibliotece.

Zapraszam na kolejne posty związane z jQuerym 1.4.

Recent Entries

jQuery 1.4 już jest!

Na początku chciałbym serdecznie powitać wszystkich Czytelników mojego bloga w nowym, dotnetowym 2010 roku!

Niezmiernie trudno podnieść się po długiej, świątecznej przerwie, ale kiedyś do świata żywych powrócić trzeba. Na początek fantastyczny news:

dzisiaj została wydana nowa wersja mojej ulubionej biblioteki javascript – jQuery 1.4! Choć dotychczasowa wersja – 1.3.2 – sprawowała się bardzo dobrze, twórcy stwierdzili, że można tam jeszcze coś poprawić :)

Największą nowością w wersji 1.4 jest poprawa wydajności wielu najczęściej używanych funkcji – szczególnie metody html(). Niedawno miałem okazję wykorzystywać tą metodę do wyświetlania dużej ilości danych i faktycznie efekty nie zawsze były zadowalające.

W nowej wersji znalazło się również kilka nowych metod, oraz ‘rozszerzono’ kilka już istniejących np. teraz do metody html() możemy przekazać funkcję, która zwróci oczekiwany tekst:

$('a').html(function(i,html){
 return html.replace(/&amp;/gi,'<span>&amp;</span>');
});

Pełna lista zmian i nowości dostępna jest na stronie: http://jquery14.com/day-01/jquery-14.

Osobom, które zechcą uaktualnić wersję 1.3.2 do nowej 1.4 szczególnie polecam część poświęconą niekompatybilnym zmianom: http://jquery14.com/day-01/jquery-14#backwards.

Na dzisiaj tyle – zabieram się do testowania nowego jQuerego – jeszcze o nim na pewno napiszę…

Kontrola wersji bazy danych – SQL Source Control

Dzisiaj zostały udostępnione pierwsze screeny z nowego produktu firmy RedGateSQL Source Control.

SQL Source Control jest dodatkiem do dobrze znanego MS SQL Management Studio umożliwiającym podpięcie bazy danych pod system kontroli wersji, podobnie jak to robimy ze standardowym projektem.

Po pierwszym “zlinkowaniu” bazy z repozytorium tworzony jest skrypt do każdego obiektu z bazy. Następnie możemy “podglądać” wszystkie zmiany wprowadzone w bazie od czasu zlinkowania bazy oraz te zmiany wkomitować.

SSC_1

SSC_3

SSC_4

SSC_5

Docelowo SQL Source Control ma współpracować z Subversion oraz Team Foundation Server.

Pierwsza wersja tego narzędzia będzie dostępna w przeciągu dwóch miesięcy i będzie obsługiwała jedynie Subversion.

Nie wiem, jak dla Was, ale dla mnie kwestia zarządzania wersjami bazy danych jest dość dużym problemem. Mam nadzieję, że ten program to zmieni.

Więcej informacji na stronie: http://www.red-gate.com/products/SQL_Source_Control/. Tam również można się zapisać do programu Early Access Program.

chcę oglądać Twoje logi! – fLogViewer

Zgodnie z obietnicą dzisiaj chciałbym przedstawić program, który znacznie ułatwia czytanie logów – fLogViewer 6.8

flogviewer1

A oto co nam oferuje fLogViewer:

  • obsługuje wszystkie formaty plików tekstowych
  • dynamicznie aktualizuje zawartość analizowanych plików, co umożliwia czytanie logowanych zdarzeń na bieżąco – bardzo dobrze radzi sobie z dużymi plikami
  • umożliwia definiowanie zasad kolorowania linii – można np. ustawić, by każda linijka zawierająca [ERROR] miała kolor czerwony
  • możemy definiować własne filtry – domyślnie mamy ‘today’ oraz ‘dangerous ip’ – czyli możemy np. ograniczyć wyświetlanie logów tylko do tych, które są związane z daną klasą

flogviewer2

Niestety aplikacja chyba już nie jest rozwijana i ciężko znaleźć stronę, z której można ją pobrać.

Dlatego umieszczam instalkę tutaj – pobierz fLogViewer 6.8

Quick Tip: 07. Firefox – Smart keywords

Dzisiaj krótko na temat, jak ułatwić sobie pracę z Firefoxem.

Firefox posiada bardzo przydatny mechanizm – “Smart keywords“. Umożliwia on definiowanie słów kluczowych dla pól wyszukiwania na stronach.

Aby dodać nowe słowo kluczowe klikamy prawym przyciskiem myszki na danym polu i wybieramy: “Utwórz słowo kluczowe dla tej wyszukiwarki…“,

ff1

w nowym okienku “Nowa zakładka” podajemy nazwę zakładki oraz słowo kluczowe.

Dla google można zrobić tak:

ff2

po takiej konfiguracji w przeglądarce (jako adres) wpisujemy np. “g asp.net“  i uzyskujemy wyniki wyszukiwania dla asp.net :)

Takie skróty możemy definiować dla dowolnego pola na stronie www.

Ja np. często korzystam  ze skrótu “b + numer issue” jako odwołanie do BugTrackera.

Proste i bardzo przydatne :)

log4net – logujemy zdarzenia w aplikacji

Dzisiaj chciałbym poruszyć ważny element tworzenia aplikacji – logowanie zdarzeń. Odpowiednio przygotowane logi są często jedynym sposobem na zdiagnozowanie problemu w aplikacji, dlatego warto o tym pamiętać i z logowania korzystać.

Logowanie można przeprowadzić na wiele sposobów – ja chciałbym opisać przykład oparty na darmowej bibliotece log4net.

Temat ten podzieliłem na trzy części:

  • dzisiaj pokażę jak korzystać z log4net
  • w następnym poście pokażę, jak czytać/analizować logi
  • na koniec opiszę podstawową konfigurację log4net

To zaczynamy:
bibliotekę pobieramy ze strony: http://logging.apache.org/log4net/download.html. Z pobranego archiwum wypakowujemy plik: log4net.dll (incubating-log4net-1.2.10.zip\log4net-1.2.10\bin\net\2.0\release\log4net.dll) i wgrywamy go np. do katalogu “lib“. Następnie dodajemy referencję do tego pliku.

log4net1

W swoich aplikacjach korzystam z takiej klasy:

public class LogHelper
{
 static LogHelper()
 {
 var confFile = ConfigurationSettings.AppSettings.Get("log4net.config");
 var fi = new FileInfo(confFile);
 XmlConfigurator.Configure(fi);
 }

 public static ILog GetLog()
 {
 return LogManager.GetLogger("WebAppLog");
 }
}

Jak widać w pliku Web.config podajemy ścieżkę do pliku konfiguracyjnego, czyli:

<appSettings>
 <add key="log4net.config" value="conf\log4net.config"/>
</appSettings>

Brakuje jeszcze zawartości pliku log4net.config:

<log4net>
 <appender name="RollingLogFileAppender" type="log4net.Appender.RollingFileAppender,log4net">
 <file value="logs\test_log.log" />
 <lockingModel type="log4net.Appender.FileAppender+MinimalLock"/>
 <param name="StaticLogFileName" value="true"/>
 <appendToFile value="true" />
 <param name="RollingStyle" value="Date"/>
 <param name="DatePattern" value="yyyy-MM-dd"/>
 <layout type="log4net.Layout.PatternLayout">
 <conversionPattern value="%date [%thread] %-5level %type.%method - %message%newline"/>
 </layout>
 </appender>

 <logger name="WebAppLog">
 <level value="ALL" />
 <appender-ref ref="RollingLogFileAppender" />
 </logger>
</log4net>

Podana konfiguracja zapisuje logi do pliku (może to być również baza danych, e-mail, konsola lub inne źródło) – file określa, do jakiego pliku będą zapisywane logi, a layout określa format zapisu logów.

Samo logowanie jest operacją niezwykle prostą:

LogHelper.GetLog().Info("My sample comments");

lub

catch (Exception ex)
{
 LogHelper.GetLog().Error("Error occurred!", ex);
}

log4net dostarcza kilka poziomów logowania:

  • Debug
  • Info
  • Warn
  • Error
  • Fatal

Nazwy poziomów logowania są bardzo czytelne i nie wymagają większego opisu.

Powyższy kod w logu zapisać może coś takiego:

2009-12-07 22:22:33,202 [8] INFO  LogForNetWebSample._Default.Page_Load - My sample comments
2009-12-07 22:22:33,292 [8] ERROR LogForNetWebSample._Default.Page_Load - Error occurred!
System.DivideByZeroException: Attempted to divide by zero.
at LogForNetWebSample._Default.Page_Load(Object sender, EventArgs e) in Default.aspx.cs:line 14

Jak widać log zawiera wiele cennych dla nas informacji – wiemy, kiedy i co się zdarzyło oraz w jakiej metodzie. Wiemy również, co działo się w aplikacji zanim wystąpił wyjątek.

Osobiście jestem zwolennikiem logowania jak największej ilości zdarzeń w naszej aplikacji – użytkownik wchodzi na stronę, klika button A, pobrano dane użytkownika, itp – jako poziom Debug. Przy przenoszeniu aplikacji na serwer produkcyjny możemy ograniczyć poziom logowania i logować jedynie logi z poziomu Error, Fatal czy Warn – bez zmiany kodu aplikacji!
log4net jest biblioteką bardzo elastyczną i posiada wiele parametrów konfiguracyjnych.

Oczywiście podczas logowania trzeba uważać, żeby nie zalogować danych poufnych – np. haseł.

Dzisiaj to tyle – zachęcam do zabawy z log4net i czytaniem logów – tylko uwaga – TO UZALEŻNIA!! :)

Quick Tip: 06. zamieniamy URL na link

Dzisiaj prosty przykład jak w tekście zamienić url na link, czyli np. użytkownik wpisuje:

“Zapraszam na moją stronę http://gasior.net.pl”

a my wyświetlając ten tekst chcemy otrzymać coś takiego

“Zapraszam na moją stronę <a href=”http://gasior.net.pl”>http://gasior.net.pl</a>

Z pomocą przychodzą wyrażenia regularne:

protected string ConvertUrlsToLinks(string msg)
{
   Regex r = new Regex("(http://[^ ]+)");
   return r.Replace(msg, "<a href=\"$1\">$1</a>");
}

Jeżeli zachodzi taka potrzeba możemy ten sam efekt uzyskać w JavaScripcie:

var objRegExp = /(http:[^ ]+)/g;
var convertedValue = msg.replace(objRegExp, "<a href='$1'>$1</a>");

EDIT:
w nawiązaniu do słusznej uwagi z komentarza (użytkownik apl) podaję poprawioną, dokładniejszą metodę:

var reg = @"((www\.|(http|https)+\:\/\/)[&#95;.a-z0-9-]+\.[a-z0-9\/&#95;:@=.+?,##%&~-]*[^.|\'|\# |!|\(|?|,| |>|<|;|\)])";
Regex r = new Regex(reg, RegexOptions.IgnoreCase);
return r.Replace(msg, "<a href=\"$1\">$1</a>").Replace("href=\"www", "href=\"http://www");

Piosenki programistyczne :)

1. Every Build You Break

2. Roy Osherove śpiewa :)

3. I coś po naszemu

znacie jakieś inne?

Kurczymy skrypty javascript – Microsoft Ajax Minifier

Jakiś czas temu Microsoft wydał bardzo przydatne narzędzie umożliwiające kompresję tworzonych skryptów JavaScript – MS Ajax Minifier.

Oczywiście nie jest to pierwsze/jedyne tego typu narzędzie – ale dużym plusem Ajax Minifiera jest możliwość “podpięcia” go do projektu jako task MSBuilda.

Narzędzie pobieramy ze strony http://aspnet.codeplex.com/Release/ProjectReleases.aspx?ReleaseId=35893

Po zainstalowaniu nowy task MSBuilda wyląduje w katalogu:
C:\Program Files\MSBuild\Microsoft\MicrosoftAjax lub C:\Program Files (x86)\MSBuild\Microsoft\MicrosoftAjax, jeżeli korzystamy z systemu 64-bitowego.

Aby dodać nowego taska do projektu edytujemy plik naszego projektu (csproj) – możemy to oczywiście zrobić w dowolnym edytorze, np. Notepad2.

I dodajemy kilka nowych linijek:

minifier1

1. Dodajemy referencje do taska MSBuild (MSBuildExtensionsPath wskazuje na C:\Program Files\MSBuild\Microsoft\MicrosoftAjax)

2. W sekcji Include podajemy, które pliki chcemy zminimalizować (w pokazanym przypadku wszystkie pliki js); w sekcji Exclude, które chcemy opuścić  – czyli pliki min.js (te, które już są zminimalizowane) oraz wszystkie pliki js z katalogu extLib – tutaj przykładowo przechowujemy różne biblioteki.

3. Podajemy, w jaki sposób zostanie wygenerowana nazwa nowego (zminimalizowanego) pliku – tutaj pliki z rozszerzeniem .js zostaną zamienione na .min.js.

Teraz wystarczy już tylko odpalić projekt i go przebildować, a w naszym projekcie pojawią nowe pliki:

minifier2

W wyniku minimalizacji z oryginalnego pliku zostaną usunięte wszystkie zbędne “białe znaki” oraz komentarze. Oczywiście plik oryginalny nie zostanie w żaden sposób zmieniony.

Przykładowy plik przed minimalizacją

minifier3

i po:

minifier4

Przydatności MS Ajax Minifiera (w połączeniu z łatwością jego użycia) nikomu chyba tłumaczyć nie trzeba. Minimalizując pliki aplikacji webowej zwiększamy szybkość  ich “ładowania”, dzięki czemu nasza aplikacja działa szybciej – i to wszystko automatycznie.

MS Ajax Minifiera można również uruchamiać z linii poleceń – jednak jako osoba ceniąca wygodę preferuję opisane rozwiązanie.

Miłej zabawy :)

ReSharper 5.0 Nightly Build – In Action

Od jakiegoś czasu – a dokładnie od 19 listopada – udostępniono do testów nową wersję ReSharpera -  5.0. Jest to co prawda dopiero wersja beta, ale nie mogłem odmówić sobie przyjemności przetestowania :)

Pierwsze wersje trochę mi namieszały, ale reinstall Visual Studio pomógł. Ostatnio zainstalowana przeze mnie wersja 5.0.1537 póki co działa stabilnie.

Nowy Resharper oferuje wsparcie dla VS 2008 oraz VS 2010.

resharper_1

Poza wsparciem dla nowego VS, Resharper 5.0 oferuje sporo nowych przydatnych funkcji:

Wsparcie dla ASP.NET

  • nowe okienko “File structure” pokazujące budowę pliku aspx, ascx
  • generowanie placeholedrów i automatyczne powiązanie ich z MasterPagem
  • funkcja Go to file member pozwala szybko “powędrować” do innego powiązanego pliku, np.: MasterPage, kontrolki użytkownika
  • automatyczne generowanie referencji do kontrolek :)
  • nowe templaty do generowania contentu strony oraz szablony plików

resharper_6

Wsparcie dla ASP.NET MVC

  • lepsze (niż VS) wsparcie w intellisense
  • nawigacja pomiędzy powiązanymi obiektami
  • tworzenie nowych typów i metod

Możliwość debugowania źródeł .NET oraz bibliotek, dla których posiadamy pliki pdb.

Bardzo przydatne -np. na ToString() klikamy “Go to definition” i podglądamy, co się kryje w środku.

resharper_2

resharper_3

Bookmarki

Kolejna ciekawa nowość. Dodajemy bookmarka i później możemy bardzo szybko w dane miejsce wrócić. Domyślnie za pomocą skrótów możemy zarządzać 10 bookmarkami – ctrl+shift+numer (np. ctrl+shift+1) dodajemy bookmarka, ctrl+numer “wędrujemy” do bookmarka.

resharper_5

resharper_7

Oczywiście możemy dodawać więcej bookmarków (tzw. anonymous bookmark) i tylko w tej sytuacji, chcąc do niego “powędrować”, musimy go wybrać z listy (najpierw: ctrl+shift+’)

resharper_8

“Historia wartości”

Nowe okienko pokazujące, jak “wędrowała” wartość jakiejś zmiennej pomiędzy metodami.

resharper_4

Na powyższym screenie widać, że nasza zmienna testValue została przekazana jako parametr metody SampleMethod. Wartość zmiennej przekazanej do tej metody została przekazana z GetSampleValue, a w tej metodzie przypisaliśmy jej wartość 10 – czysto i przejrzyście.

To na razie tyle z nowych funkcjonalności, które przetestowałem – kolejna wersja i kolejny raz WIELKIE WOW :). O nowych ciekawych doświadczeniach postaram się informować na bieżąco.

Więcej o nowej wersji ReSharpera na stronie: http://blogs.jetbrains.com/dotnet/2009/10/resharper-50-overview/.

Nowe wydania R# 5.0 można pobrać ze strony: http://www.jetbrains.net/confluence/display/ReSharper/ReSharper+5.0+Nightly+Builds