Tag Archives: performance

FastImage, performant React Native image component

React Native’s Image component handles image caching like browsers for the most part. If the server is returning proper cache control headers for images you’ll generally get the sort of built in caching behavior you’d have in a browser. Even … Continue reading

Elsewhere , , , Leave a comment

A Tinder Progressive Web App Performance Case Study

Addy Osmani: Tinder recently swiped right on the web. Their new responsive Progressive Web App — Tinder Online — is available to 100% of users on desktop and mobile, employing techniques for JavaScript performance optimization, Service Workers for network resilience and Push Notifications for … Continue reading

Elsewhere , , , Leave a comment

Implement FLIP transitions easily with flipping

Back in 2015 Paul Lewis published a brilliant article named FLIP your animations, a technique to getting smooth animations on the web. FLIP stands for First, Last, Invert, Play First: before anything happens, record the current (i.e., first) position and … Continue reading

Elsewhere , , , , Leave a comment

The Cost Of JavaScript

Great insightful post by Addy Osmani on how the inclusion of a tad of JavaScript affects a website. When compared an equally sized JPG, a tad of JS has a higher impact on it due to the fact that JS … Continue reading

Elsewhere , , Leave a comment

XCode 9.0: Fixing a Slow/Unresponsive iOS Simulator

Whilst initially implementing react-native-maps into a project I noticed that the iOS Simulator didn’t quite like it. Whenever the Mapview was visible on the screen, the Simulator was maxing out on something. Turns out the OpenGLES.framework that comes with XCode … Continue reading

Original Content , , Leave a comment

Optimize React Performance

Good advice every React dev should be aware of: React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary … Continue reading

Elsewhere , , Leave a comment

Essential Image Optimization

Essential Image Optimization is an free and online eBook by Addy Osmani: Images take up massive amounts of internet bandwidth because they often have large file sizes. According to the HTTP Archive, 60% of the data transferred to fetch a … Continue reading

Elsewhere , , , Leave a comment

gpu.js – GPU Accelerated JavaScript

Amazing: gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL … Continue reading

Elsewhere , , , Leave a comment

Detect unnecessary renders in React with why-did-you-update

why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same. Installation per npm, of course: npm install –save-dev why-did-you-update … Continue reading

Elsewhere , , Leave a comment

45% Faster React Stateless (Functional) Components

When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement: What if we could skip React internals for … Continue reading

Elsewhere , , , 1 Comment