need for speed

a guide to frontend optimization

muskein singh

lazy loading

cdn

caching

service worker

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then(registration => {
        console.log('Service worker registered:', registration);
      })
      .catch(error => {
        console.error('Service worker registration failed:', error);
      });
  });
}

service worker

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-cache')
      .then(cache => {
        return cache.addAll([
          '/',
          '/index.html',
          '/styles.css',
          '/script.js',
          '/image.jpg'
        ]);
      })
  );
});

service worker

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request);
      })
  );
});

service worker

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        if (response) {
          return response;
        }
        return fetch(event.request)
          .then(response => {
            return caches.open('my-cache')
              .then(cache => {
                cache.put(event.request, response.clone());
                return response;
              });
          });
      })
      .catch(error => {
        return caches.match('/offline.html');
      })
  );
});

service worker

self.addEventListener('push', event => {
  const title = 'My App';
  const options = {
    body: event.data.text(),
    icon: '/icon.png',
    badge: '/badge.png'
  };
  event.waitUntil(
    self.registration.showNotification(title, options)
  );
});

service worker

if ('PushManager' in window) {
  navigator.serviceWorker.ready
    .then(registration => {
      registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: 'my-public-key'
      })
      .then(subscription => {
        console.log('Subscribed:', subscription);
      })
      .catch(error => {
        console.error('Subscription failed:', error);
      });
    });
}

thank you

Working

Issues

Issues

Tips

Animations

  • Interaction Manager
  • useNativeDriver
  • REA2
  • GPU

1

Bundle

  • Hermes
  • RAM Bundles
  • babel for console
  • Lean RN

2

Tooling

  • Sentry/bugsnag
  • Firebase
  • Expo
  • NativeBase

3

  • Fabric UI
  • JSI
  • Turbo Modules

Future

Made with Slides.com