JavaScript Frameworkit, jotka kannattaa tuntea
•
0 gostou•1,346 visualizações
Sovelto Aamiaisseminaari 7.2.2014 Toni Ylärinne
Recomendados
Mais conteúdo relacionado
Semelhante a JavaScript Frameworkit, jotka kannattaa tuntea
Semelhante a JavaScript Frameworkit, jotka kannattaa tuntea (20)
Mais de Sovelto
Mais de Sovelto (20)
JavaScript Frameworkit, jotka kannattaa tuntea
- 1. JavaScript Frameworkit, jotka kannattaa tuntea Toni Ylärinne toni.ylarinne@sovelto.fi
- 2. Miksi käyttää JavaScript Frameworkejä? • Helpottaa selainpään JavaScript-sovelluskehitystä huomattavasti • • • • • Tuottavuus paranee Laajat mahdollisuudet Itse kirjoitettavan koodin määrä pienenee reilusti Koodista tulee luettavampaa Selainyhteensopivuus paranee 2
- 3. jQuery
- 4. jQuery • John Resigin kehittämä pienikokoinen JavaScript-kirjasto, joka on julkaistu 2006 • Nykyisiin tiimi kehittää • Open Source –kirjasto • MIT ja GPL –lisenssit • Saavuttanut lyhyessä ajassa voimakkaan suosion • http://jquery.com • Selaintuki: IE 6.0+, FF 2+, Safari 3.1+, Opera 9.0+, Google Chrome 4
- 5. Versiot ja selaintuki • jQueryn yksi tärkeimmistä ominaisuuksista on sen tarjoama tuki vanhoille selaimille 1.x-haarassa • Erityisesti IE 6/7/8 • Tuki muuttui versiosta 2.0.0: Tuki poistui IE8:lta ja vanhemmilta selaimilta kyseisen versiohaaran osalta • http://blog.jquery.com/2012/06/28/jquery-core-version-1-9-and-beyond/ • Tulevaisuudessa ylläpidetään sekä 1.x- että 2.x-haaroja 5
- 6. jQuery: Hyötyjä • Cross-browser-tuki • Sama visuaalinen ilme ja toiminnallisuus kaikkiin selaimiin yhdellä koodilla • Koodauksen helpottaminen • Ilmaisuvoimaiset valitsimet sisällön käsittelyyn myös vanhoihin selaimiin; mm. CSS3-valitsinten tuki • Efektit • jQuery UI -käyttöliittymäkomponentit • Hyödylliset lisäosat (plug-in) • Laaja tuki ja toimiva yhteisö tarjoamassa sisältöä • Kehittäjät osaavat • Suhteellisen pieni koko (minified-versio) ei hidasta sivulatausta 6
- 7. Ominaisuuksia • • • • • • • DOM-elementtien valitsimet DOM-muokkaukset Tapahtumat CSS:n muokkaus Efektit ja animaatiot Ajax Laajennettavuus 7
- 8. AngularJS
- 9. AngularJS • Älykäs MVC (Model-View-Controller) - JavaScript Framework • AngularJS:n idea on olla se, mitä HTML:n pitäisi olla, jos HTML olisi suunniteltu sovelluksia varten • Tuottava tapa tehdä SPA:ta (Single Page Application) • Soveltuu niin yksinkertaisista ratkaisuista aina Line-of-business web clientien toteuttamiseen. • Alunperin Misko Heveryn kehittämä, nyt Googlen ylläpitämä ja edelleen kehittyvä • Vapaasti käytettävissä, avoin MIT-lisenssi • http://angularjs.org/ • Vaatii Web-kehittäjältä isoa ajattelutavan muutosta. Toteutusfilosofia on aivan uudenlainen ja vastaa hieman palvelinpään websovelluskehitystä, vaikka nyt tehdään kaikki, palveluja lukuunottamatta, selainpäässä ajettavaksi. 9 • Tuki IE8:sta ylöspäin
- 12. MVC • Yleinen sovelluskehityksen ratkaisumalli, jossa erotetaan eri toiminnalliset osa-alueet toisistaan • Data (Model) • Sovelluslogiikka (Controller) • Datan esitys käyttäjälle (View) • View esittää datan käyttäjälle. Käyttäjän mahdolliset toimet saavat controllerin muokkaamaan dataa modelliin. • Parantaa koodin ylläpidettävyyttä, testattavuutta 12
- 13. Hello World <!DOCTYPE html> <html ng-app> <head> <title></title> <script src="js/angular.js"></script> <script type="text/javascript"> function HelloController($scope) { $scope.tervehdys = { text: 'Hello' }; } </script> </head> <body> <div ng-controller='HelloController'> <p>{{tervehdys.text}}, World</p> <input ng-model='tervehdys.text'> <p><span ng-bind="tervehdys.text"></span>, Maailma!</p> </div> </body> </html> 13
- 14. Templatet • HTML:ää ja Angularin määrityksiä sisältävä deklaratiivinen kuvaus käyttöliittymästä (View) <div ng-controller='HelloController'> <p>{{tervehdys.text}}, World</p> <input ng-model='tervehdys.text'> <p><span ng-bind="tervehdys.text"></span>, Maailma!</p> </div> • {{tervehdys.text}} Datan sidonta html:n joukkoon • Templaten sisällä voi myös käyttää erilaisia expressioneita • • • • {{1 + 1}} Matemaattista laskentaa: +, -, *, /, % Vertailuja: ==, !=, <, >, >=, <=, Boolean loogiikkaa: &&, ||, ! 14
- 15. Controller • JavaScript konstruktori • Controller liitetään DOM-oliomalliin ng-controller –direktiivin avulla • Toteuttaa logiikan, tilanhallinnan function HelloController($scope) { $scope.tervehdys = { text: 'Hello' }; } • $scope-objektin kautta tapahtuu kommunikointi controllerin ja view välillä. Kaikki $scope:n propertyt ja metodit käytettävissä siinä templatessa johon controller on liitetty 15
- 16. Directives • Hyvin olennainen osa Angularia. • ng- alkuisia attribuutteja html:ssä, jotka laajentavat html:n toiminnallisuutta. Voi käyttää myös html5:n mukaisesti data-ng-... • Angular pitää sisällään näitä varsin monta, mutta näitä voidaan myös tehdä lisää tai hankkia 3. osapuolien toteutuksia • <html ng-app> kertoo, mitää osaa sivusta Angular hallinnoi. Voidaa liittää myös esim. johonkin sivulla olevaan div-elementtiin • <div ng-controller='HelloController'> määrittää, että HelloController hallinnoi tämän div:n sisältöä. Voidaan asettaa vaikka body tai html-elementille • <input ng-model='tervehdys.text'> määrittää kahdensuuntaisen data bindingin input-elementin tervehdys.text:in arvon välille 16
- 17. Directives • <span ng-bind="tervehdys.text"></span> on toinen tapa sitoa dataa html:n joukossa esitettäväksi. Hyvänä puolena, ettei {{...}} ehdi välähtää selaimen kanvaasille sivun latautuessa. • Direktiiveejä latauksen ja suorittamisen viiveistä varautumiseen: • <img ng-src="/images/{{henkilokuva}}"/> • <a ng-href="/henkilot/id={{henkiloid}}">...</a> • HTML-elementtien näkyvyyteen vaikuttaminen • <div ng-show="naytetaankoMenu">...</div> • Muuttujien initialisointi onnistuu halutessa ng-init-attribuutilla: • <body ng-init="henkilot=['Anna', 'Teemu', 'Annukka']"> 17
- 18. Silmukka – ng-repeat <!DOCTYPE html> <html ng-app> <head> <title>Henkilöt</title> <script src="js/angular.js"></script> <script type="text/javascript"> function HenkilotController($scope) { $scope.henkilot = [{ nimi: 'Anna Malli', email: 'anna@malli.fi' },{ nimi: 'Teemu Tehokas', email: 'teemu@tehokas.fi' }]; } </script> </head> <body> <ul ng-controller="HenkilotController"> <li ng-repeat="henkilo in henkilot">{{henkilo.nimi}}, {{henkilo.email}}</li> <li>Lkm: {{henkilot.length}}</li> </ul> </body> </html> 18
- 19. Controllerin metodit <script type="text/javascript"> function HelloController($scope) { $scope.tervehdys = { text: 'Hello' }; $scope.vaihdaTervehdys = function () { $scope.tervehdys.text = "Terve"; } } </script> <div ng-controller='HelloController'> <p>{{tervehdys.text}}, World</p> <button ng-click="vaihdaTervehdys()">Testaa</button> </div> • Controller voi pitää sisällää myös metodeja, joihin pääsee käsiksi templaten event handling direktiivien kautta esim. ng-click, ng-dblclick, ng-change 19
- 20. Module • Controller on osa modulea. Edeltävissä esimerkeissä Controller JavaScript-funktio oli kirjoitettu globaaliksi. Parempi käytäntö on hyödyntää omaa nimiavaruutta, jolloin sovelluksen eri osat voidaan pitää omissa nimiavaruuksissaan, eikä tule ongelmia saman nimisistä funktioista: <html ng-app="myDemoApp"> <head><title></title> <script src="js/angular.js"></script> <script type="text/javascript"> var myAppModule = angular.module("myDemoApp", []); myAppModule.controller("HelloController", function ($scope) { $scope.tervehdys = { text: 'Hello' }; }); </script> </head><body> <div ng-controller='HelloController'> <p>{{tervehdys.text}}, World</p> </div> </body></html> 20
- 21. Filterit • Angularissa dataa voidaa formatoida filter-teknologia kautta. Esim. yksinkertainen hakutoteutus: <html ng-app> <head> <title>Henkilöt</title> <script src="js/angular.js"></script> <script type="text/javascript"> function HenkilotController($scope) { $scope.henkilot = [ { nimi: 'Anna Malli', email: 'anna@malli.fi' }, { nimi: 'Teemu Tehokas', email: 'teemu@tehokas.fi' }, { nimi: 'Annukka Malli', email: 'annukka@malli.fi' }]; } </script> </head> <body> <div ng-controller="HenkilotController"> <input ng-model="search"/> <ul> <li ng-repeat="henkilo in henkilot | filter:search"> {{henkilo.nimi}}, {{henkilo.email}}</li> </ul></div> </body> </html> 21
- 22. SPA ja useampi näkymä • Single Page Applicationissa halutaan varsin usein toteuttaa useampia näkymiä, joista yhtä esitetään vain kerrallaan • Halutaan myös luoda hakukoneystävälliset ja bookmarkattavat urlosoitteet • Tämä voidaa toteuttaa Angularissa $routeProviderin, ng-view:n avulla • Vaatii sivulle angular-route.js:n referoinnin • <script src="lib/angular/angular-route.js"></script> • ja ngRoute-moduulin käyttöön oton: • var RouteDemoServices = angular.module('RouteDemo', ['ngRoute']); 22
- 23. Testaus • AngularJS tarjoaa mahdollisuudet TDD:hen (Test-DrivenDevelopment) • Web-sovelluksien testauksessa on ollut haasteista • Angular mahdollistaa sekä automatisoidun unit-testauksen, että end-to-end –testauksen • Apuna esim. Karma 23
- 24. Työkaluja • Mikä tahansa html/css/JavaScript-kehitin • WebStorm (http://www.jetbrains.com/webstorm/) pitää sisällään intellisenseä AngularJS:ää varten. Maksullinen, mutta varsin edullinen kehitin. • Angular Seed, valmis pohjarakenne Angular Web Application – ratkaisuun. https://github.com/angular/angular-seed • Pitää sisällään web-server.js:n node.js:ää varten • Ja testausratkaisun, joka hyödyntää Karmaa (Node.js:n jälkeen asennettavissa npm install -g karma) • AngularJS Batarang, ilmainen Chrome-plugin, joka lisää Chromen Developer Toolseihin (F12) AngularJS-välilehden. Angularratkaisujen debuggausta varten. 24
- 25. Backbone.js
- 26. Backbone.js • Jeremy Ashkenasin (CoffeeScriptin takana) kehittämä JavaScript Framework • Toteuttaa MVC-mallista johdetun MVP (Model-View-Presenter) – ratkaisumallin • Tuki RESTful-palveluille • Pitää sisällään ratkaisut: • • • • • Model View Events Collection Router • Data-binding pitää toteuttaa itse tai hyödyntää jotakin valmista pluginia 26
- 27. Knockout
- 28. Knockout • Steve Sanderson kehittämä MIT:n avoimella lisenssillä julkaistu Model-View-ViewModel ratkaisumallia toteuttava JavaScript Framework • Ominaisuuksia • Deklaratiivinen Data Binding • Modelin datan muuttuessa automaattisesti datan päivitys käyttöliittymään • Erilaisia vaihtoehtoja toteuttaa View Template • Hyvä dokumentaatio 28
- 29. Yhteenveto • Ei yhtä "oikeata" ratkaisua • Web-frontin kehitystä varten kannattaa evaluoida vaihtoehtoja ja valita itselleen ja vaatimuksiin sopiva vaihtoehto • jQuery on on hyvin käytetty ja turvallinen • MVC-malliin perustuvat ratkaisut tarjoavat parempaa tuottavuutta, ylläpidettävyyttä ja testattavuutta • AngularJS:llä on kova noste tällä hetkellä. Angularin etuna on se, että se ottaa kantaa, miten asiat pitää toteuttaa 29
- 31. Kursseja Soveltolla • JavaScript 1-2 • Moderni web-sivusto jQuerylla - vähemmän koodia, enemmän toiminnallisuutta • 20480 Programming in HTML5 with JavaScript and CSS3 • HTML5 ja CSS3 sovelluskehittäjille (open source) • AngularJS-kurssi tulossa vielä tänä keväänä! 31