czwartek, 20 września 2012

HTML5 jak Silverlight (odc.0 feat John Papa)

John Papa, niegdyś pierwsza osoba od Silverlight, wykłada dziś z dużą pasją HTML5. Mentalnie mamy wiele wspólnego, obaj wywodzimy się ze środowiska stawiającego mocno w przeszłości na Silverlight, będącego po części w pewnej opozycji do bardziej tradycyjnych aplikacji webowych z tamtego okresu. Aplikacjami ASP.NET zajmowałem się przed boomem z Silverlight. Nie będąc więc pernamentnym tradycyjnym web deweloperem, mając takie, a nie inne korzenie, siłą rzeczy nawet na otwarty HTML5 patrzę przez pryzmat Silverlight’a (czy nowszego WinRT z Windows 8). Podejście stricte klienckie z redukcją przetwarzania po stronie serwerowej praktycznie jedynie do web serwisów z danymi, wydaje mi się szczególnie bliskie. Podobieństw jest bardzo wiele - stosowanie view modeli i wzorca MVVM, bindingi, lokalna nawigacja (wzorzec SPA), wywołania asynchroniczne, walidacja, animacje, szablony dla elementów list, kontrolki, notyfikacje publish/subscribe pomiędzy modułami itp. Nie musimy pisać wszystkiego sami od zera, jest wiele przydatnych i coraz bardziej popularnych darmowych bibliotek i frameworków… Pełnym uosobieniem takiej właśnie, a nie innej wizji jest najnowsze szkolenie Johna Papy. W tym poście pragnę podzielić się swoimi subiektywnie zrobionymi notatkami, które powstały po obejrzeniu całości materiału.

John Papa wywodząc się ze środowiska związanego z technologiami i produktami Microsoft w swoich nagraniach wykorzystuje najnowsze Visual Studio 2012 (w ciemnej skórce wizualnie kojarzącej się z edytorem Sublime) oraz Knockout jako framework do bindingów i MVVM (autorem jego jest Steve Sanderson, manager ASP.NET, dołączany jest też do projektów ASP.NET). Wybory Johna są znów mi tutaj mentalnie najbliższe, aczkolwiek by cieszyć się potegą HTML5 możemy korzystać z innych edytorów (np. Sublime) i frameworków (np. Angular zamiast KnockoutJS). W każdym razie uważam, że nawet przy dokonaniu innych wyborów, z tego szkolenia można wynieść i tak sporo całkiem wartościowych rzeczy.

Przechodzę do większych konkretów. A więc John Papa do swojej przykładowej aplikacji wybrał następujące biblioteki:

  • dom / ajax - jquery, jquery.mockjson
  • data binding / mvvm - knockout.js, jquery.activity
  • amplify.js - data push/pull, client storage, messanging
  • nav / history - sammy.js
  • dependency resolution - require.js
  • helpers - underscore.js / moment.js
  • ui alerts - toastr.js
  • testing - qunit

http://www.electricplum.com/ - testowanie aplikacji HTML5 na ekranach różnych urządzeń

QUnit for ASP.NET MVC - pakiet nuget

Bundling dla LESS - autor nie używa oferującej większej możliwości biblioteki Compass w stosunku do samego Less, ale za to włącza przetworzenie plików .less do bundlingu dostępnego w nowym ASP.NET (dynamiczne scalanie wielu plików w jeden zminimalizowany plik, dzięki czemu mamy przyspieszone ładowanie strony)

bundles.Add(new Bundle("~/Content/Less",
        new LessTransform(), new CssMinify())
            .Include("~/Content/styles.less"));

LessTransform - własna implementacja autora na podstawie klasy z pakietu nuget (dotless.Core.Less.Parse())

RequireJS - zarządzanie zależnościami, nie musimy się martwić o kolejność ładowania modułów JS

require(['alerter'],
    function (alerter) {
         alerter.showMessage();
        });

Data context - trzymanie danych po stronie klienta (skojarzenie np. z Ria Services)

amplifyjs

  • amplify.request - cachowanie requestów (subiektywne skojarzenie z jednym z ficzerów Ria Services -;)
  • amplify.store - client storage (co ma szersze pokrycie niż standardowy local storage z HTML5)
  • amplify.publish, amplify.subscribe - pub/sub (subiektywne skojarzenie z eventaggregatorem z Caliburn Micro w Silverlight, dla oddania sprawiedliwości słyszałem, że w angularze też jest coś takiego)

Autor wskazuje także alternatywy dla organizacji zdalnego dostępu do danych:

  • Upshot.js - biblioteka ze stajni Microsoft, na bazie wcześniej prezentowanej Ria/JS (filtrowanie, stronicowanie, trackowanie, OData, …)
  • http://www.breezejs.com/ - framework o podobnych możliwościach

Nawigacja SPA - dla przypomnienia jej zaletą oprócz uniknięcia przeładowania całej strony, jest także możliwość dodania fajnych efektów podczas przełączania - animacji i tranzycji. Lokalna nawigacja w Silverlight także opiera się na adresach z #.

Sammy.js

sammy.get(
    '#/sessions/:id',
    function (context) {
         vm.callback(context.params);
             presenter.transitionTo($(viewName), path);   
    }
);

presenter - odpowiednia implementacja

http://realworldvalidator.com/css/module - kolejne źródło na temat standardów CSS i ich wspierania przez różne przeglądarki

https://github.com/CodeSeven/KoLite:

  • asyncCommand, activity - obsługa komend oraz ich dostępności (komendy w tym znaczeniu znamy z Silverlight, WPF i innych od dawna)
  • dirtyFlag - czy coś uległo zmianie (skojarzenie np. z Ria Services)

<button data-bind="command: saveCmd, activity: saveCmd.isExecuting">Save</button>

saveCmd = ko.asyncCommand({
  execute: function (complete) { ... },
  canExecute: function (isExecuting) { ... }
})

Historia nawigacji:

http://github.com/balupton/History.js
http://davisjs.com
https://github.com/jzaefferer/simple-history

Walidacja - korzystamy tutaj w prostszych typowych przypadkach oczywiście z dobrodziejstw samego HTML5 (w ścisłym znaczeniu), nie zawsze musimy używać do tego Java Script, jak było kiedyś. Możemy do tematu podejść też korzystając z rozszerzenia knockout.validation.

self.firstName = ko.observable().extend({ required: true });
self.blog = ko.observable().extend({
    pattern: {
            message: 'Not a valid url',
            params: /[@]([A-Za-z0-9_]{1,15})/i
        }
   });

Widzimy, że zapis nie jest bardzo złożony. John Papa prezentuje czerwone chmurki obok pól tekstowych, które … kojarzyć się mogą - przynajmniej mi - z Silverlightem.

Web Essentials 2012 - plug-in tylko dla Visual Studio 2012 RTM. Co nam daje? Spośród bardzo wielu ficzerów, także:

  • Obsługa LESS w edytorze Visual Studio (składnia, intellisense ze zmiennymi, …)
  • Podgląd w edytorze Visual Studio jakie przeglądarki wspierają daną właściwość CSS!

CSS3-2

Tak więc przy pisaniu w HTML5 przy stosowaniu najbardziej nowoczesnego radykalnego podejścia Silverlight można zobaczyć niemalże wszędzie mimo innych języków i bibliotek. Nie żałuję niczego ze swojej przeszłości, cieszę, że mam takie, a nie inne korzenie. Dzięki temu w przeciwieństwie do wielu typowych web developerów nie mam skrzywienia na to, co już było na stronach Web.

Brak komentarzy: