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