npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-packetzoom

v0.4.0

Published

PacketZoom sdk for React Native

Downloads

16

Readme

react-native-packetzoom npm version

Redefining Networking For React Native

React Native PacketZoom SDK for iOS + Android

Intro

At PacketZoom we designed from the ground up modern UDP-based network protocol with mobile apps in mind. This enables faster downloads, reduced latency, efficient and reliable data transfers between your app and the cloud. In addition to speed, one of the advantages of PacketZoom is that it handles seamless transition between networks without interrupting ongoing sessions. This is a unique advantage of the PacketZoom protocol over HTTP/TCP stack is already in production use with many mobile apps.

Today we're redefining how networking works for React Native apps, empowering them with PacketZoom sdk and our worldclass cluster of servers.

How

Following diagram shows overhead of establishing TLS/SSL connection over TCP socket on relatively fast wifi. The advantage of PacketZoom is that we have zero roundtrips to establish connection with our EDGE servers, small amount of data like API call is fetched from PZ server within single roundtrip as oppose to traditional multi-roundtrip TLS/SSL over TCP flow

unnamed.png

Now consider more complex real world scenario. To give you some perspective of how much time it takes make an API call to your endpoint in AWS US East (N. Virginia) location from customer located in India on mobile network here some raw numbers

| Tables | 3g | 4g | | -------------- |--------------:| ---------:| | Control plane | 200–2,500 ms | 50–100 ms | | DNS lookup | 200 ms | 100 ms | | TCP handshake | 200 ms | 100 ms | | TLS handshake | 200 - 4000 ms |100 - 200 ms | | HTTP request | 200 ms | 100 ms | | Total latency overhead | 200–3500 ms | 100–600 ms|

Thats a whole lot of time user have to wait for completing just single API call, she might already switched to another app or decided to check Facebook feed while waiting for your app to respond.

Where Control plane latency: Fixed, one-time latency cost incurred for RRC negotiation and state transitions: <100 ms for idle to active, and <50 ms for dormant to active.

To understand how just few seconds can affect your customers experience here is great excerpt from Ilya Grigorik book High Performance Browser Networking

We are not accustomed to measuring our everyday encounters in milliseconds, but studies have shown that most of us will reliably report perceptible "lag" once a delay of over 100–200 milliseconds is introduced into the system. Once the 300 millisecond delay threshold is exceeded, the interaction is often reported as "sluggish," and at the 1,000 milliseconds (1 second) barrier, many users have already performed a mental context switch while waiting for the response

Not convinced yet ?

There is a whole chapter (7th) dedicated to mobile networks. The book states that the problem with high performance is almost always tied to latency, we usually have plenty of bandwidth but the protocols gets in the way. Be it TCP slow start, the Radio Resource Controller (RRC) or suboptimal configurations. If you are experiencing poor latency only in mobile networks it's the way they are designed.

Besides eliminating legacy handshakes and DNS lookups PZ stack uses custom congestion control algorithms tailored for specific network types which makes data delivery faster than TCP with it's slow start, Tahoe, Reno, CuBiC or whatever else one-size-fits-all approach.

PacketZoom treats the actual mobile device as the destination for data packets, compared to legacy protocols that use only the device's IP address.

Treating the device itself as a unique destination allows PacketZoom to easily handle the intermittent nature of mobile connections in an intelligent, fault-tolerant way. So as your device moves across networks, any ongoing transfers can continue seamlessly something that is simply impossible with old-fashioned legacy protocols.

Here is another piece by PacketZoom CTO/co-founder Chetan Ahuja on [faster approach to DNS lookups] (http://www.infoworld.com/article/3133104/mobile-technology/why-your-mobile-connection-is-so-slow.html) which used in our stack.

Installation

First, download the library from npm:

npm install react-native-packetzoom@latest --save

Then you must install the native dependencies: You can use rnpm (now part of react-native core) to add native dependencies automatically then continue the directions below depending on your target OS.

$ react-native link

React Native versions from 0.30 and above should work out of the box, we cannot guarantee that earlier than 0.30 will have smooth integration experience, it may require additional manual steps like rnpm for example.

Javascript


import Packetzoom from 'react-native-packetzoom'

Packetzoom.init('packetzoom-app-id', 'packetzoom-api-key')

You can sign up for free PacketZoom account here: https://packetzoom.com/developers.html to get your credentials.

The XMLHttpRequest API is built in to React Native. This means that you can use third party libraries such as Frisbee, Fetch or Axios that depend on it. Ultimately XMLHttpRequest API is implemented using native NSURLSession API on iOS side and OkHttp3 on Android where PacketZoom native sdk would eventually intercept them.

From now on all your Fetch API, Axios or Apisauce requests will be accelerated by PacketZoom. You can access all NewRelic'sque kind of network analytics data on web dashboard when you login under your account.

iOS

Drag PZSpeed.Framework from RNPacketZoom.xcodeproj to your app frameworks folder like shown bellow:

Make sure you linking against it in Build Phases -> Link Binary with Libraries section

Also make sure that the following frameworks and libraries are part of your project:

  • CoreLocation.framework
  • SystemConfiguration.framework
  • CoreTelephony.framework
  • Foundation.framework
  • libz.tbd
  • libc++.tbd

Android

No additional changes required for Android

##Who uses PacketZoom

Join The Rebellion and experience request speedups and uninterrupted network connections across all mobile and wifi networks