A long time ago…

dovchar 2014

✦ 8 years in IT

✦ 4 years in SoftServe

✦ 1.5 years Application Architect

✦Main language: Javascript

✦ Hobby language: Go

✦ Pacemaker conference

✦ Script’n’Code meet-up

✦Open source (typescript grails, clio

go, sonar qunit, kojak, jspro)

do

vch

ar lv

ivjs

20

14

About

me

do

vch

ar lv

ivks 2

01

4

Agenda

✦ About Project

✦Memory leaks, how are you

✦Why some actions so slow?!

✦ Start analyzing

✦ JS tools

✦ Chrome, iOS monitoring, Kojak, jsPro,

PSI, Chrome remote debug

✦ Examples

✦Questions?..

Pro

ject

Sta

tistics

✦ 3 years development

✦ 10 scrum teams

✦ 59 modules

✦ 3200 javascript files

✦ 200.000 lines of code

✦ 1.226 total violations

✦ 70.3% code coverage

✦ 83.0% code health

do

vch

ar lv

ivjs

20

14

About

Pro

ject

do

vch

ar lv

ivjs

20

14

iPad2 is falling down

do

vch

ar lv

ivjs

20

14

Dima WTF…, Why some actions are so SLOW?!

do

vch

ar lv

ivjs

20

14

do

vch

ar lv

ivjs

20

14

Sta

rt A

naly

sin

g

✦ Include analytic tools: google analytics, New Relic,

AppDynamics, etc

✦ BAs should prepare top 10-15 pages most used

✦ BAs + QC should prepare test workflows for those pages

✦ Prepare data for tests, infrastructure (load balancer, cdn,

servers, db) very close to production

✦ Prepare test tools for testing and come to an agreement

with the stakeholders (because they might be commercial,

not free)

✦ Preliminary data gathering from one or two scenarios

✦ Need to teach your team how to work with tool set and

manage its data

✦ Automate as much as you can

do

vch

ar lv

ivjs

20

14

Tools

✦ Chrome dev tools

✦ Chrome remote debugger

✦ Xcode iOS monitoring

✦ AppDynamics UX plugin

✦Google analytics

✦ Kojak

✦ KojakSync + jsPro

✦ PageSpead Insights (PSI API)

do

vch

ar lv

ivjs

20

14

Google

Analy

tics

do

vch

ar lv

ivjs

20

14

Google

Analy

tics

✦ Google Analytics is built on a powerful, easy-to-use reporting

platform, so that you can decide what data you want to view

and customize your reports, with just a few clicks

✦ Content reports help you understand which parts of your

website are performing well and which pages are most

popular so that you can create a better experience for your

customers

✦ You can analyse how visitors interact with sharing features on

your site (like the Google +1 button) and engage with your

content across social platforms

✦ Google Analytics helps you measure the impact of mobile on

your business

✦ Find out how many customers you're attracting, how much

you're selling and how users are engaging with your site with

Google Analytics' range of analysis features.

✦ Make the most of your advertising by learning how well your

social, mobile, search and display ads are working

do

vch

ar lv

ivjs

20

14

Xcode

do

vch

ar lv

ivjs

20

14

Xcode

do

vch

ar lv

ivjs

20

14

Xcode

do

vch

ar lv

ivjs

20

14

Xcode

do

vch

ar lv

ivjs

20

14

Chro

me T

ools

do

vch

ar lv

ivjs

20

14

html5rocks.com

Mem

ory

mode

do

vch

ar lv

ivjs

20

14

Chrome Dev Tools -> Timeline

Mem

ory

snapshot

do

vch

ar lv

ivjs

20

14

CD Tools -> Profiles -> Take Heap Snapshot

Task M

anager

Menu -> Tools -> Task Manager

do

vch

ar lv

ivjs

20

14

Chro

me R

D

do

vch

ar lv

ivjs

20

14

ios-w

ebkit-d

ebug-p

roxy

AppD

ynam

ics U

X

do

vch

ar lv

ivjs

20

14

✦ Where your heaviest loads originate

✦ Where your slowest end-user response times occur

✦ how performance varies by location

✦ how performance varies by client type, device, browser and

browser version,network connection

✦ how performance varies by application and application version,

operating system version, device, carrier for mobile apps

✦ what your slowest Web requests/Ajax requests are and what is

causing the slowdown

✦ what your slowest mobile network requests are and what is

causing the slowdown

✦ how application server performance impacts the performance of

your web and mobile traffic

AppD

ynam

ics U

X

do

vch

ar lv

ivjs

20

14

Koja

k

do

vch

ar lv

ivjs

20

14

Wh

o is K

oja

k

«Kojak is an American television series starring Telly Savalas as the title

character, New York City Police Department Detective Lieutenant Theo Kojak.

Taking the time slot of the popular Cannon series, moved one hour earlier, it aired

on CBS from October 24, 1973, to March 18, 1978. In 1999 TV Guide ranked Theo

Kojak number 18 on its 50 Greatest TV Characters of All Time list»

Wikipedia

do

vch

ar lv

ivjs

20

14

Koja

k J

S

Kojak is a simple utility that can help you figure out which of your

JavaScript functions are running too slow. It tracks when your

functions are called, how often they are called, how much time

they are taking, how the functions were called. It can also track

your ajax calls and help figure out how fast they are.

What is Kojak JS?

do

vch

ar lv

ivjs

20

14

Featu

res

✦ Kojak helps you focus on the performance of your own code

and eliminate the clutter

✦ Kojak is a tool that would remove all of the noise and clutter

✦ Kojak is a tool that was easy to configure and didn't force you to

inject hooks all over my code

✦ The core of Kojak has no external dependencies

✦ We can easily integrate Kojak with Backbone, Angular or

Ember

✦ Measure isolated time of your functions. IsolatedTime is how

much cumulative time was spent inside the function itself

✦ Measure functions call count. Call count how often some

functions has called.

✦ Tracking performance in between actions

✦ Tracking Network Requests

do

vch

ar lv

ivjs

20

14

Expla

nation

Aspect-Oriented Programming

(AOP) is a programming paradigm

that aims to increase modularity by

allowing the separation of cross-

cutting concerns. AOP forms a basis

for aspect-oriented software

development.

do

vch

ar lv

ivjs

20

14

Ho

w T

o

✦ To use Kojak copy/download the Kojak.min.js file from

github.com/theironcook/Kojak. Include it in the browser code you

want to profile.

✦ Kojak needs to be told what code it is supposed to profile. You tell

Kojak via the command: kConfig.setIncludedPakages(['packageA',

‘packageB’]);

✦ After you've told Kojak what it should are about and what to exclude

you need to run this command: kInst.instrument();

✦ Start tracking performance in between actions: run

kInst.takeCheckpoint(); for creating checkpoint before actions begin.

✦ After doing some use cases run kRep.funcPerfAfterCheckpoint(); and

collect isolated time and call count all functions has ran from last

kInst.takeCheckpoint();

✦ Kojak can also track all of your network ajax requests. To use the

NetWatcher you must use jQuery. To enable run this command:

kConfig.setEnableNetWatcher(true); and kRep.netCalls(); after

do

vch

ar lv

ivjs

20

14

Console

exam

ple

do

vch

ar lv

ivjs

20

14

Isola

ted T

ime

Program

funcA()

funcB()

funcC()

funcA()

5ms

funcB()

10ms

funcC()

15ms

do

vch

ar lv

ivjs

20

14

Isola

ted T

ime

Program

funcA()funcA()

5ms

funcB()

10ms

funcC()

15ms

1 5

do

vch

ar lv

ivjs

20

14

Isola

ted T

ime

Program

funcA()

funcA()

5ms

funcB()

10ms

funcC()

15ms

325

1 5jFunc()

50ms

1

do

vch

ar lv

ivjs

20

14

Isola

ted T

ime

Program

funcA()

funcA()

5ms

funcB()

10ms

funcC()

15ms

15

1 5async()

50ms

1

do

vch

ar lv

ivjs

20

14

jsP

ro

do

vch

ar lv

ivjs

20

14

jsPro

Koja

k &

jsP

ro

KojakSync#1 KojakSync#2 KojakSync#N

jsPro Visualization

Storage

do

vch

ar lv

ivjs

20

14

Koja

k &

jsP

ro

do

vch

ar lv

ivjs

20

14

Koja

k &

jsP

ro

✦ To use KojakSync copy/download the Kojak.js file from

github.com/dovchar/KojakSync. Include it in the browser code

you want to profile

✦ Go to jspro.herokuapp.com

✦ Login with your github account -> your name -> my apps ->

click «create new» button -> copy API Key and Secret Key

✦ Run Google Chrome with flags:

—enable-memory-info --js-flags="--expose-gc"

✦ Enable kojak sync functionality: kConfig.sync('secretKey',

‘apiKey');

✦ Todo all steps like with native Kojak for collect data

do

vch

ar lv

ivjs

20

14

Koja

k &

jsP

ro

Demo…

do

vch

ar lv

ivjs

20

14

Next S

teps

✦ Prepare good documentation

✦ Stabilize jsPro application (fix bugs)

✦ Extend functionality

✦ Integrate Google PSI API

✦ Integrate Chrome Remote Debugger

✦ Collect errors from UI

✦ Snapshots by User session for

production usage

✦Granular collecting data for prod

mode

do

vch

ar lv

ivjs

20

14

Conclu

sio

n

do

vch

ar lv

ivjs

20

14

Lin

ks

✦ AppDynamics

✦Google Analytics

✦ Chrome Dev Tools

✦ Kojak, KojakSync, jsPro

✦ pacemaker, script’n’code

✦ Sails.js

Facebook Twitter Linkedin Gmaildo

vch

ar lv

ivjs

20

14

Questions?

do

vch

ar lv

ivjs

20

14