Realizacja Aplikacji Internetowych Program. Program Wprowadzenie SPA vs tradycyjne witryny - JavaScript i aplikacje klienckie Strona serwerowa Asp.Net.

Prezentacja na temat: "Realizacja Aplikacji Internetowych Program. Program Wprowadzenie SPA vs tradycyjne witryny - JavaScript i aplikacje klienckie Strona serwerowa Asp.Net."— Zapis prezentacji:

1 Realizacja Aplikacji Internetowych Program

2 Program Wprowadzenie SPA vs tradycyjne witryny - JavaScript i aplikacje klienckie Strona serwerowa Asp.Net MVC, Node JS. Narzędzia, protokoły

3 W trakcie ogladania tego slajdu (2-4min) Oczekiwanie na zwrot różnych treści (głównie w tradycyjnych witrynach) zajmuje na świecie ~ 35 000 000 osobo-minut to oznacza 66 osobo-lat albo np. 86 lotów na Marsa (wg. czasów np. lądownika Curiosity)

4 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

5 SPA Markup (mockup) HTML może być ładowany z bez/z małą ilościa danych Dane 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ą

6 SPA vs strona serwerowa Przy 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

7 REST vs SOAP SOAP –  używany np. przez WebSerwisy  żądanie/zwrot są zawijane w kopertę SOAP (XML) REST (2000 Tomas Fielding)  Klient Serwer  Bezstanowość  Adresowalność  Powtarzalność (CACHE) Praktycznie zawsze wiązany z HTTP

8 Rozwiązania klienckie Silverlight Flash/Flex HTML 5 + CSS 3 Javascript  CofeeScript, Dart, TypeScript  GWT

9 Javascript i biblioteki klienckie Biblioteki operujące na DOOM  Jquery, Prototype, MooTools Frameworki:  Yui, ExtJS, Dojo,  Knockout, EmberJS, Angular, Aurelia, Meteor BackBone ReactJS Bootstrap CSS, Less, Sass

10 Rozwiązania serwerowe … ASP.NET Asp.NET MVC NodeJS Nancy RIA services REST, WEB API?

11 Narzędzia Debugowanie, profiling:  FireBug, 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

12 Mechanizmy Caching, CDN Autoryzacja WebSockets, SignalR Asynchroniczny model, Promises

13 Design i optymalizacja Reactive design Mobile first Minifier Minimalizacja wołań

14 Mobilne Narzędzia Podejścia cross - platformowe