Js tacktalk team dev js testing performance

419 views

Published on

JavaScript, js, jasmin, YUI testing

5 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
419
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
5
Likes
0
Embeds 0
No embeds

No notes for slide

Js tacktalk team dev js testing performance

  1. 1. JavaScript. High Performance Applications 21/03/12 Dev-Pro. net 1
  2. 2. Javascript. What is it?• Everything is a object• Class free• Typeless syntax• No compilation• C-like syntax 2
  3. 3. PatternsGeneral solution to a commonly occurring problem. Optimal solution to common problem 3
  4. 4. Live design patterns demonstration:• Singleton• Module• Prototype• Factory• Decorator 4
  5. 5. for loop research 5
  6. 6. Local Storage performance<script>localStorage.clear();for(var i = 0; i < 100; i++) localStorage.setItem(i, Value + i);</script> 6
  7. 7. Jquery VS yourself code 7
  8. 8. Jquery VS yourself code 8
  9. 9. Node Storage 9
  10. 10. Node Storage 10
  11. 11. Regular expressions<div id="foo" class="a foo bar"></div><script> Benchmark.prototype.setup = function() { var r; var element = document.getElementById(foo); var reContains = /(?:^| )foo(?: |$)/; function dynamicRegExp(node) { return RegExp((?:^| )foo(?: |$)).test(node.className); } function inlineRegExp(node) { return /(?:^| )foo(?: |$)/.test(node.className); } function storedRegExp(node) { return reContains.test(node.className); } function stringIndexOf(node) { return ( + node.className + ).indexOf( foo ) > -1; } };</script> 11
  12. 12. Regular expressions 12
  13. 13. prototype chain lookup, cached or not<script> if (!Object.create) { Object.create = function(o) { function F() {} F.prototype = o; return new F(); };} var foo = { fun: "weee!" }, bar = Object.create(foo), baz = Object.create(bar), _fun = baz.fun, res;</script> 13
  14. 14. prototype chain lookup, cached or not 14
  15. 15. Operations which require an implicit primitive-to- object cast/conversion will be slower. 15
  16. 16. Operations which require an implicit primitive-to- object cast/conversion will be slower. 16
  17. 17. undefined void 0 perf<script>var undefined;</script><script> Benchmark.prototype.setup = function() { var r; var u; var u2; var useVoid = function(a) { return (a === void 0); }; var useGlobalUndefined = function(a) { return (a === undefined); }; var useLocalUndefined = function(a) { return (a === u2); }; var useTypeOfUndefined = function(a) { return typeof a === undefined; }; };</script> 17
  18. 18. undefined void 0 perf 18
  19. 19. Switch vs If 19
  20. 20. JavaScript Unit testingJasmine is a behavior-driven development framework fortesting your JavaScript code. It does not depend on any otherJavaScript frameworks. It does not require a DOM. And it hasa clean, obvious syntax so that you can easily write tests. 20
  21. 21. Jasminedescribe("isLeapYear", function() {it("2004 should be leap year", function() { expect(isLeapYear(2004)).toBeTruthy(); expect(isLeapYear(2004)).toEqual(true); }); 21
  22. 22. Jasmine Matchers 22
  23. 23. JS-test Driver 23
  24. 24. JS-test Driver 24
  25. 25. JS test driver 25
  26. 26. YUI test framework 26
  27. 27. YUI test framework. Examples 27
  28. 28. BUILDING NATIVE APPS WITHTitanium Mobile 28
  29. 29. What if you could createapps using JavaScript? 29
  30. 30. Titanium Mobile 30
  31. 31. Titanium MobileBuild Fully Native iPhone Apps 31
  32. 32. 32
  33. 33. JavaScript on the the sofa 33
  34. 34. 34
  35. 35. 35
  36. 36. 36
  37. 37. JS & Gradleassembly, minimizing, deploy 37
  38. 38. Why do I need automatic assemblyand deploy? Sooner or later any JS project grows, the amount and frequency of commits increase, and the solution is already out dozen JS files that need to be collect, and to minimize for the load on the server. 38
  39. 39. What is a Gradle?System assemblywhich triesto combineall the advantages of Ant,Maven, Ivy, andpresent whatcome out with Groovy. 39
  40. 40. I have a plan! 1. Briefly about install Gradle 2. Creating a build - a script that: ● connect the selected files and JS minimize them with Closure Compiler; ● flood min version of the FTP; ● Check the script on the practice; 40
  41. 41. How to install?1. Downloading a fresh package http://gradle.org/downloads2. Unpack the disk and addsubdirectory bin in path3. Check the installation by entering gradle tothe console 41
  42. 42. JS plug-in for GradleThere exists an Gradle two plug-in, both basedfor GCC, but differ in the rules of the assembly:https://launchpad.net/gradle-jslihttps://github.com/eriwen/gradle-js-plugin 42
  43. 43. Writing gradle scriptIn the root folder, create a new projectfile and call it core.gradleIt is assumed that the working directory script($ {projectDir}) is a subfolder SRP 43
  44. 44. Check the availability of plug-in set out inthe Maven repositoryIf there is nobuildscript { repositories { mavenCentral() } dependencies { //Install plugin from Maven Repo classpath com.eriwen:gradle-js-plugin:0.3 }} And use itapply plugin: js 44
  45. 45. Task plug-in bonding,inputs and outputs askingcombineJs { file1 = fileTree(dir: "${projectDir}/src/Core", includes: [Framework/core.js]) file2 = fileTree(dir: "${projectDir}/src/Core", includes: [Framework/strings.js]) inputs.files file1 + file2 outputs.file file("$ {projectDir}/min/corecombined.js")} 45
  46. 46. Plug-in task minificationminifyJs { inputs.files fileTree(dir: "${projectDir}/min", include: "corecombined.js") outputs.file file("${projectDir}/min/core.min.js")} 46
  47. 47. Upload to FTPTo use the Ant deploy TASK, whichdescribe in a separate file - deploycore.xml.Content you might deploycore.xmlview / copy of the articlespixelscommander.comIn gradle script call Ant TASK:ant.importBuild deploycore.xml 47
  48. 48. Finally, call the script gradle from the consolegradle -b= core.gradle combineJs minifyJs Questions? 48
  49. 49. Thank you for your attention! Presenter: Zakharchenko Artem 49

×