Skip to content

Instantly share code, notes, and snippets.

Avatar

Parashuram N axemclion

View GitHub Profile
@axemclion
axemclion / MessageQueueSpy.js
Last active Jun 28, 2021
Message Queue - Replay React Native Message Queue
View MessageQueueSpy.js
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
axemclion / debugger.js
Last active Feb 1, 2019
React Native Time Travel Debugging with VSCode
View debugger.js
/* 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
axemclion / client.bundle.js
Last active Feb 6, 2017
ReactVR-DBMonster
View client.bundle.js
This file has been truncated, but you can view the full file.
(function(global) {
global.__DEV__=true;
global.__BUNDLE_START_TIME__=Date.now();
})(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : this);
(function(global) {
@axemclion
axemclion / react-event-mirror.js
Created Aug 29, 2016
ReactNative EventMirroring
View react-event-mirror.js
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
axemclion / ABSTRACT.md
Created Mar 12, 2016
Rise of the Web Workers
View ABSTRACT.md

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
axemclion / React-Worker-Latency.js
Last active Feb 11, 2016
Latency Performance calculations for React-Worker-DOM
View React-Worker-Latency.js
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
axemclion / README.md
Last active Mar 16, 2021
Using Chrome Traces to Automate Rendering Performance
View README.md

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

View RN-debug.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@axemclion
axemclion / index.android.js
Created Oct 28, 2015
Using HockeyApp SDK with ReactNative Android
View index.android.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules,
TouchableHighlight,
@axemclion
axemclion / index.android.js
Last active Jan 20, 2016
Cordova Plugins in React native
View index.android.js
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
NativeModules,
TouchableHighlight,