axemclion

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue.js';

const WHITELIST = ['UIManager'];
const NOOP = () => { };

let queue = [];
let now = 0;
export default {
  start() {
    MessageQueue.spy(msg => {

axemclion

/* PreReqs - Run these before starting Recording
For recording, run with --record parameter
npm install sync-request@4.1.0 websocket@1.0.23 flatten-source-map@0.0.2 && mkdir -p logs 
*/

var PACKAGER = 'localhost:8081'; //CHANGE this to where the package is running

var vm = require('vm');
var url = require('url');
var path = require('path');

axemclion

(function(global) {
global.__DEV__=true;

global.__BUNDLE_START_TIME__=Date.now();
})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
(function(global) {

axemclion

const EventPluginRegistry = require('react/lib/EventPluginRegistry');
import ReactNativeEventEmitter from 'react/lib/ReactNativeEventEmitter';

export default class Plugin {
    extractEvents(topLevelType, targetInst, nativeEvent, nativeEventTarget) {
        if (!nativeEvent.isMirrored) {
            // TODO send this to a socket server so that it is propogated to other servers
            console.log('MirrorEventPlugin:', topLevelType, targetInst, nativeEvent, nativeEventTarget);
            nativeEvent.isMirrored = true;
            

axemclion

Modern web applications are awesome. And complicated. The Javascript libraries that power them today do a lot of work to abstract out the hard parts. Whether using constructs like Virtual DOM, or fancy change detection algorithms, the amount of work that the Javascript library does is only increasing.

Unfortunately, all this work now competes for the same resources that the browser needs, to do things like render a page, or apply styles. In many cases, this makes the browser slow, preventing the web application from attaining its full, smooth experience.

Web workers have been in the browser for a while, but they have mostly been used for engaging demos like adding mustaches in a cat video :)

In this talk, we will explore how mainstream Javascript libraries like React or Angular use Web Workers to get great performance. We will look at quantitative numbers from hundreds of test runs that conclusively show how Web Workers can make apps faster. Finally, we will also look at practical examples to convert exi

axemclion

var start, results = [];
var ITERATIONS = 100;
var addButton = document.querySelectorAll('.btn.btn-primary')[0];
var addItem = function() {
    if (results.length < ITERATIONS) {
        start = performance.now();
        addButton.click();
    } else {
        console.log('Testing done, average is %s milliseconds, all data is', results.reduce(function(a, b) {
            return a + b;

axemclion

Using Chrome Traces to Automate Rendering Performance

Ten years ago, increasing the performance of a website usually meant tweaking the server side code to spit out responses faster. Web Performance engineering has come a long way since then. We have discovered patterns and practices that make the (perceived) performance of websites faster for users just by changing the way the front end code is structured, or tweaking the order of elements on a HTML page. Majority of the experiments and knowledge has been around delivering content to the user as fast as possible.

Today, web sites have grown to become complex applications that offer the same fidelity as applications installed on computers. Thus, consumers have also started to compare the user experience of native apps to the web applications. Providing a rich and fluid experience as users navigate web applications has started to play a major role in the success of the web.

Most modern browsers have excellent tools that help measure the runtime performa

axemclion

axemclion

'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NativeModules,
    TouchableHighlight,

axemclion

'use strict';

var React = require('react-native');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    NativeModules,
    TouchableHighlight,