Js tacktalk team dev js testing performance

JavaScript. High Performance
Applications

21/03/12
Dev-Pro. net

1

Javascript. What is it?
• Everything is a object
• Class free
• Typeless syntax
• No compilation
• C-like syntax

2

Patterns

General solution to a commonly
occurring problem. Optimal
solution to common problem

3

Live design patterns demonstration:
• Singleton
• Module
• Prototype
• Factory
• Decorator

4

for loop research

5

Local Storage performance

<script>
localStorage.clear();

for(var i = 0; i < 100; i++)
localStorage.setItem(i, 'Value ' + i);
</script>

6

Jquery VS yourself code

7

Jquery VS yourself code

8

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

Regular expressions

12

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

prototype chain lookup, cached or not

14

Operations which require an implicit primitive-to-
object cast/conversion will be slower.

15

Operations which require an implicit primitive-to-
object cast/conversion will be slower.

16

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

undefined void 0 perf

18

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.

20

Jasmine

describe("isLeapYear", function() {
it("2004 should be leap year", function() {
expect(isLeapYear(2004)).toBeTruthy();
expect(isLeapYear(2004)).toEqual(true);
});

21

Jasmine Matchers

22

YUI test framework

26

YUI test framework. Examples

27

BUILDING
NATIVE APPS WITH
Titanium Mobile

28

What if you could create
apps using JavaScript?

29

Titanium Mobile
Build Fully Native iPhone Apps

31

JavaScript on the the sofa

33

JS & Gradle
assembly, minimizing, deploy

37

Why do I need automatic assembly
and 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

What is a Gradle?
System assembly
which tries
to combine
all the advantages of Ant,
Maven, Ivy, and
present what
come out with Groovy.

39

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

How to install?
1. Downloading a fresh package
http://gradle.org/downloads
2. Unpack the disk and add
subdirectory bin in path

3. Check the installation by entering gradle to
the console

41

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-jsli
https://github.com/eriwen/gradle-js-plugin

42

Writing gradle script
In the root folder, create a new project
file and call it core.gradle

It is assumed that the working directory script
($ {projectDir}) is a subfolder SRP

43

Check the availability of plug-in set out in
the Maven repository
If there is no
buildscript {
repositories {
mavenCentral()
}
dependencies {
//Install plugin from Maven Repo
classpath 'com.eriwen:gradle-js-plugin:0.3'
}
}

And use it
apply plugin: 'js'
44

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 + file2
outputs.file file("$
{projectDir}/min/corecombined.js")
}

45

Plug-in task minification

minifyJs {
inputs.files fileTree(dir: "${projectDir}/min",
include: "corecombined.js")
outputs.file file("${projectDir}/min/core.min.js")
}

46

Upload to FTP
To use the Ant deploy TASK, which
describe in a separate file - deploycore.xml.

Content you might deploycore.xml
view / copy of the articles
pixelscommander.com

In gradle script call Ant TASK:
ant.importBuild 'deploycore.xml'
47

Finally, call the script gradle
from the console

gradle -b= core.gradle combineJs minifyJs

Questions?
48

Thank you for your attention!

Presenter:
Zakharchenko Artem

49

Js tacktalk team dev js testing performance

More Related Content

Js tacktalk team dev js testing performance