The Client Strikes Back

422 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
422
On SlideShare
0
From Embeds
0
Number of Embeds
50
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • GmailEvernoteFacebookTwitter
  • The Client Strikes Back

    1. 1. Bit.ly/nnugspaInstagram #nnug
    2. 2. MAGNUS GREEN (@magnusg) Reise Film Rock n’ Roll Kaffe www Konsulent Gaming TDD .netJavaScript Clean Code Øl Smidig Sneakers New York Master of Information Technology
    3. 3. BOUVET54 2643" S 3 2146" Emeetup.com/Bouvet-Oslo-Tech
    4. 4. Hva skal vi gjennom?• Hva er en Single Page Application?• Hvorfor Single Page Application?• Hvordan lage en Single Page Application?• Bootstrap – HTML5 UI rammeverk• RequireJS – Modularisert JavaScript• Knockout – MVVM rammeverk• SignalR – Real-time async signaling• Deploy som en Azure web-site• Oppsummering
    5. 5. Single Page Web Application • Applikasjon != Webside • Data oppdateres når det er nødvendig • Data oppdateres der hvor det er nødvendig • Tilstand og navigasjon6
    6. 6. Client Server Data store Tradisjonell web Display HTML Authentication Decorative JS Authorization Ajax for HTML Validation Store data Business logic Retrieve data Generate HTML Business logic Client Server Data store Ajax for JSON Authentication Business Logic Authorization SPA Generate HTML Validation Store data Generate JSON Retrieve data Kilde: Single page web applications, Michael S. Mikowski og Josh C. Powell7
    7. 7. Forvirret og sint bruker (Dårlig steming) Blid og fornøyd bruker (God stemning)
    8. 8. KISS • SPA i sin enkleste form med jQuery – http://jsfiddle.net/magnusg/xCDR5/ • Litt mer avansert med flere rammeverk – http://bit.ly/nnugspa11
    9. 9. Twitter Bootstrap • Hva? – Front-end rammeverk fra skaperne av twitter • Hvorfor? – Rask vei til å få opp et godt rammeverk / prototyp for en SPA eller webside. – Lett å style om i etterkant12
    10. 10. <ul class="nav nav-tabs"> <li class="active"> Aktiverer funksjonalitet via <a href="#home" data-toggle="tab"> data attributter, ingen <i class="icon-home"></i>Home JavaScript her!bootstrap icon </a> </li> <li><a href="#map" data-toggle="tab">Map</a></li> <li><a href="#statistics" data-toggle="tab">Statistics</a></li> </ul><div class="tab-content"> <div class="tab-pane active" id="home"> @RenderPage("Views/home.cshtml") </div> <div class="tab-pane" id="map">Map</div> <div class="tab-pane" id="statistics">Statistics</div> </div> bootstrap css tab pane13
    11. 11. RequireJS • Hva? – Dependency injection for JavaScript • Hvorfor? – JavaScript-koden deles opp i moduler – Lettere å få til SRP og renere kode – Tar hånd om rekkefølgen på lastingen av JavaScript moduler14
    12. 12. Modulnavn Avhengighetdefine(dataservice.images, [ajaxhelper], function (ajaxhelper) { var getImages = function (callbacks, searchTerm) { var search = { searchTerm: searchTerm }; var data = search.searchTerm ? search : searchTerm; return ajaxhelper.ajaxRequest(api/images, data) .done(callbacks.success) .fail(callbacks.error); }; return { getImages: getImages Revealing module };});
    13. 13. define(someservice, [jquery, dataservice.images],function($, dataService) { $.when( dataService.getImages( { success: function(data) { }, error: function(err) { } })) .then(function() { //Do something clever });});
    14. 14. KnockoutJS • Hva? – MVVM (Model-View-ViewModel) rammeverk – Data-binding for JavaScript • Hvorfor? – Oppdatering av UI når og hvor det er behov – Applikasjonstilstand – Renere markup og JavaScript – Klart skille mellom markup og JavaScript17
    15. 15. <div class="modal-body"> <p></p> <img data-bind="attr: { src: image_standard_res }"/> <div class="heart-image"> <strong data-bind="text:likes"></strong> </div> <div data-bind="foreach:tags"> <span class="label label-inverse" data-bind="text:$data"></span> </div> </div> var Image = function () { var self = this; self.caption = ko.observable(); foreach-binding self.user = ko.observable(); self.userProfilePicture = ko.observable(); self.userRealName = ko.observable(); self.link = ko.observable(); self.image_standard_res = ko.observable(); text binding self.likes = ko.observable(); self.tags = ko.observableArray(); };18
    16. 16. click binding – bundet mot view model<div data-bind="foreach:images"> binding handler, egendefinert binding <div class="imageTile span4" data-bind="simplePopup:caption"> <a href="#imagesModal" data-toggle="modal" data-bind="click:$root.setCurrentImage"> <img data-bind="attr: { src: image_standard_res }"/> </a> </div></div> var Image = function () { var self = this; self.caption = ko.observable(); self.user = ko.observable(); self.userProfilePicture = ko.observable(); self.userRealName = ko.observable(); self.link = ko.observable(); self.image_standard_res = ko.observable(); self.likes = ko.observable(); self.tags = ko.observableArray();};
    17. 17. SignalR • Hva? – Sanntidskommunikasjon mellom server og klient • Hvorfor? – Sanntidsoppdatering av klienter – Meldinger om endringer i data eller endringer i andre klienter20
    18. 18. + = AWESOME21
    19. 19. Pass på! • JavaScript minnehåndtering • Ikke rør DOM hvis du ikke må! • Lær deg JavaScript! • Bruk Chrome debugging og performance tools (Firebug / Dragonfly)22
    20. 20. Oppsummering • SPA = RIA = RWA? • SPA er applikasjoner, ikke web-sider • Bedre brukeropplevelse på flere plattformer • JavaScript kan være rent og vedlikeholdbart • Web browseren som plattform har kommet for å bli!23 22. august 2012 Bunntekst – endres/slettes med "Sett inn, Topptekst og bunntekst"
    21. 21. 24
    22. 22. Do you haz teh codez? • Websiden: – http://bit.ly/nnugspa • SPA Starter – https://github.com/magnushg/SinglePageAppStarter • Awsome SPA – https://github.com/magnushg/AwesomeSPAReboot25
    23. 23. Ressurser • http://twitter.github.com/bootstrap/index.html • http://requirejs.org/ • http://www.knockmeout.net/ • http://knockoutjs.com/ • https://github.com/SignalR/SignalR • http://addyosmani.com/blog/ • http://www.johnpapa.net/building-single-page-apps-with- knockout-jquery-and-web-api-ndash-the-story-begins/ • http://chutzpah.codeplex.com/ • http://javascriptjabber.com/ • http://responsinator.com/26
    24. 24. Takk for meg! Ta gjerne kontakt hvis du lurer på noe. @magnusg magnus.green@bouvet.no27

    ×