1 Realizacja Aplikacji InternetowychJavaScript
2 W trakcie ogladania tego slajdu (2-4min)Oczekiwanie na zwrot różnych treści (głównie w tradycyjnych witrynach) zajmuje na świecie ~ osobo-minut to oznacza 66 osobo-lat albo np. 86 lotów na Marsa (wg. czasów np. lądownika Curiosity)
3 Tradycyjne strony Strona jest kompletowana (markup+dane) po stronie serwerowej Struktura DOM-a jest w zasadzie okreslona w momencie wysyłki z serwera Strona może zawierać javascript dla dodania efektów, dynamiki, formatowania, zmiany layout-u dla różnych rodzajów urzadzeń Historia, uprawnienia itd. mają naturalne odbicie w URL-ach
4 SPA Markup (mockup) HTML może być ładowany z bez/z małą ilościa danychDane są doładowywane asynchronicznie Brak wielokrotnego przesyłania redundantnych elementów (tagi/DOM/skrypty) Przeniesienie cześci ciężaru renderowania na stronę kliencką Mniejsze obciążenie łączy/serwerów Brak migania/zamrażania strony Wrażenie pracy z resoponsywną aplikacją
5 SPA vs strona serwerowaPrzy SPA serwer odpowiada za przesłanie inicjalnego mockup-u strony (definicji) ew. wypełnionej wstępnie danymi Dane: formaty natywne HTML, obrazki lub JSon XML Podejście hybrydowe Backend vs API
6 Rozwiązania klienckieSilverlight Flash/Flex HTML 5 + CSS 3 Javascript CofeeScript, Dart, TypeScript GWT (java 2 javascript) Traceur (google: kompilator javascript next 2 javascript) Ecma Harmony / Narcisius (jw) Script# (c# 2 javascript) Pyjamas (python 2 javascript)
7 Javascript i biblioteki klienckieBiblioteki operujące na DOOM JQuery, Prototype, MooTools Frameworki: Yui, Sencha ExtJS, Dojo, Knockout, EmberJS, Angular, Aurelia, Meteor BackBone ReactJS Bootstrap CSS, Less, Sass
8 Narzędzia Debugowanie, profiling: Pakiety, komendyFireBug, Chrome Developer Tools, IE Inspector / WebDeveloper Fiddler Pakiety, komendy npm, jspm.io, Bower, Grunt Testy jednostkowe i akceptacyjne Junit Jasmine Automatyczne uruchamianie testów: Selenium Headless browsers PantomJS Zombi+NodeJs, ENVJS. + Rhino engine
9 Realizacja Aplikacji InternetowychTESTOWANIE
10 Testowanie Jakieś testy są potrzebne … Testy jednostkoweTesty integracyjne Testy akceptacyjne lub end-to-end
11 Środowisko Framework Narzędzia dodatkowe FireUnitŚrodowisko uruchomieniowe Przeglądarka uruchamiana ręcznie Selenium + przeglądarka Na serwerze: PhantomJS (SlimerJS,CasperJS…) Node.js + Chimera | Karma rhino + env.js,
12 Framework QUnit (używany np. przez wiele plug-inów JQuery)module('calculator'); test('add numbers', function() { var calc = new Calculator(); equals(4, calc.add(2, 2)); })
13 Framework Jasmine (BDD, hierarchiczna definicja setup-ów)describe('panda',function(){ it('is happy',function(){ expect(panda).toBe('happy'); });
14 Framework Mocha (BDD, hierarchiczna definicja setup-ów, pozwala używać różnych assert libraries, raportuje wolne testy przy t. asynchr., coverrage) describe('panda',function(){ it('is happy',function(){ assert.equal('happy',panda.state); expect(panda).toBe('happy'); });
15 Framework Screw.Unit JSSpecdescribe("Calculator", function() { it("should add numbers", function() { var calc = new Calculator(); expect(calc.add(2, 2)).to(equal, 4); }); }); JSSpec describe("Calculator", function() { with(this) { it("should add numbers", function() { var calc = new Calculator(); calc.add(2, 2).should(equal(4)); }); }});
16 Framework jsUnitTest jsUnitTest + jShouldanew Test.Unit.Runner({ testCalculatorAdd: function() { with (this) { var calc = new Calculator(); assertEqual(4, calc.add(2, 2)); }} }); jsUnitTest + jShoulda context('Calculator', { should('add numbers', function() { with (this) { var calc = new Calculator(); assertEqual(4, calc.add(2, 2)); }})
17 Framework I wiele innych m.inUnittest, jsAssertUnit, YUItest, Qooxdoo, JSUnit, JSUnit , Crosscheck, Ecmaunit, Dojo Objective Harness, FireUnit, Qunit, RhinoUnit, JSpec
18 Tools Smoke Amok MockMenew Smoke.Stub(Calculator, 'add').and_return(5); Smoke.Mock(Calculator).should_receive('add').at_least('once') .with_arguments(2, 2).and_return(5); Amok var mock = amok.mock(Calculator); mock.should_receive('add').with_args(2, Number) .times(1).and_return(5); MockMe mock(Calculator).andDo(function() { SomethingThatUsesCalculator.calculate("2 + 2"); verify(Calculator.add)(2, 2); });
19 Tools qMock Jack Interesujace: JSMockito, Sinon.js, Mock.jsvar mock = new Mock(); mock.expects(1).method('add').withArguments(2, 2).andReturn(5); Jack jack.expect("Calculator.add").exactly("1 time") .withArguments(2, 2).mock(function() { … return sth; }) jack.create("mock", ['add', 'substract']); .whereArgument(0).isOneOf(2, 3, 4); Interesujace: JSMockito, Sinon.js, Mock.js
20 Istotne uwagi Izolacja od drzewa DOM i globalnych odwołań do obiektówLokalne referencje do używanych obiektów Rozluznienie połączeń miedzy obiektami Mozliwość stosowanania wzorca obserwator (event) Stosowanie broker event (serviceBus) do komunikacji
21 Pokrycie kodu testami JSCoverage Istambul …
22 Realizacja Aplikacji InternetowychJQuery
23 JQuery Silny model selekcjiWsparcie dla typowych akcji np. ustawienie obsługi zdarzenia, dodanie, usunięcie klasy stylu itd. Gotowe rozwiazania typowych problemów Rozszerzalny model - wtyczki Dużo gotowych wtyczek Testowalny
24 JQuery Problem: wyszukiwanie elementów na stronie np:for ( var (i in document.getElementsByTagName("p") ) { i.onclick = function(event) { alert("Hello!"); } } JQuery: $("p").click(function(event){ alert("Hello!!"); }
25 Jquery – Referencjonowanie