Js tacktalk team dev js testing performance
description
Transcript of Js tacktalk team dev js testing performance
1
JavaScript. High Performance Applications
21/03/12Dev-Pro. net
2
Javascript. What is it?
• Everything is a object• Class free• Typeless syntax• No compilation• C-like syntax
3
Patterns
General solution to a commonly occurring problem. Optimal
solution to common problem
4
Live design patterns demonstration:
• Singleton• Module• Prototype• Factory• Decorator
5
for loop research
6
Local Storage performance
<script>localStorage.clear();
for(var i = 0; i < 100; i++) localStorage.setItem(i, 'Value ' + i);</script>
7
Jquery VS yourself code
8
Jquery VS yourself code
9
Node Storage
10
Node Storage
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>
12
Regular expressions
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>
14
prototype chain lookup, cached or not
15
Operations which require an implicit primitive-to-object cast/conversion will be slower.
16
Operations which require an implicit primitive-to-
object cast/conversion will be slower.
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>
18
undefined void 0 perf
19
Switch vs If
20
JavaScript Unit testing
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.
21
Jasmine
describe("isLeapYear", function() { it("2004 should be leap year", function() { expect(isLeapYear(2004)).toBeTruthy(); expect(isLeapYear(2004)).toEqual(true);
});
22
Jasmine Matchers
23
JS-test Driver
24
JS-test Driver
25
JS test driver
26
YUI test framework
27
YUI test framework. Examples
28
BUILDINGNATIVE APPS WITH
Titanium Mobile
29
What if you could createapps using JavaScript?
30
Titanium Mobile
31
Titanium MobileBuild Fully Native iPhone Apps
32
33
JavaScript on the the sofa
34
35
36
37
JS & Gradleassembly, minimizing, deploy
38
Why do I need automatic assemblyand deploy?
Sooner or later any JS project grows, the amount and frequency of commitsincrease, and the solution is already outdozen JS files that need to becollect, and to minimize for the load on the server.
39
What is a Gradle?
System assemblywhich triesto combineall the advantages of Ant,Maven, Ivy, andpresent whatcome out with Groovy.
40
I have a plan!
1. Briefly about install Gradle2. 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;
41
How to install?1. Downloading a fresh package
http://gradle.org/downloads2. Unpack the disk and addsubdirectory bin in path
3. Check the installation by entering gradle tothe console
42
JS plug-in for Gradle
There exists an Gradle two plug-in, both based for GCC, but differ in the rules of the assembly:
https://launchpad.net/gradle-jslihttps://github.com/eriwen/gradle-js-plugin
43
Writing gradle script
In the root folder, create a new projectfile and call it core.gradle
It is assumed that the working directory script($ {projectDir}) is a subfolder SRP
44
Check the availability of plug-in set out in the Maven repository If there is nobuildscript {
repositories {mavenCentral()
}dependencies {//Install plugin from Maven Repo
classpath 'com.eriwen:gradle-js-plugin:0.3'}
}
apply plugin: 'js'
And use it
45
Task plug-in bonding,inputs and outputs asking
combineJs {file1 = fileTree(dir: "${projectDir}/src/Core",includes: ['Framework/core.js'])file2 = fileTree(dir: "${projectDir}/src/Core",includes: ['Framework/strings.js'])inputs.files file1 + file2outputs.file file("${projectDir}/min/corecombined.js")
}
46
Plug-in task minification
minifyJs { inputs.files fileTree(dir: "${projectDir}/min", include: "corecombined.js") outputs.file file("${projectDir}/min/core.min.js")}
47
To use the Ant deploy TASK, whichdescribe in a separate file - deploycore.xml.
Content you might deploycore.xmlview / copy of the articlespixelscommander.com
In gradle script call Ant TASK:
Upload to FTP
ant.importBuild 'deploycore.xml'
48
Finally, call the script gradlefrom the console
gradle -b= core.gradle combineJs minifyJs
Questions?
49
Thank you for your attention!
Presenter: Zakharchenko Artem