s3thi

Motivation

• Most of abof's traffic is mobile (true for most e-commerce companies in India)
• Old website took ~20s to load on 3G, which killed conversion rates
• We got it down to <5s, increasing conversion rates by 40%

Part 1: Building abof.com

• Choosing a tech stack
• The competition: React, Angular, Angular 2, Riot, Vue

s3thi

private midiInputs = [];

s3thi

initializeMIDI() {
    window.navigator.requestMIDIAccess()
        .then((midi) => {
            midi.inputs.forEach((input) => this.midiInputs.push(input));
        });
}

s3thi

`
    <div><button (click)='playSample()' [disabled]='loadingSample'>play</button></div>
    <div>
        <label for='playbackRate'>Playback rate: </label>
        <input type='range' min='0.01' max='5.0' step='0.01' [(ngModel)]='playbackRate' id='playbackRate'>
    </div>
    <div>
        <label for='gain'>Volume: </label>
        <input type='range' min='0' max='1.0' step='0.1' [(ngModel)]='gain' id='gain'>
    </div>

s3thi

private gain: number = 1.0;

s3thi

playSample() {
    let bufferSource = this.audioContext.createBufferSource();
    bufferSource.buffer = this.audioBuffer;
    bufferSource.playbackRate.value = this.playbackRate;
    
    let gainNode = this.audioContext.createGain();
    gainNode.gain.value = this.gain;
    
    bufferSource.connect(gainNode);
    gainNode.connect(this.audioContext.destination);

s3thi

playSample() {
    let bufferSource = this.audioContext.createBufferSource();
    bufferSource.buffer = this.audioBuffer;
    bufferSource.playbackRate.value = this.playbackRate;
    bufferSource.connect(this.audioContext.destination);
    bufferSource.start(0);
}

s3thi

`
    <div><button (click)='playSample()' [disabled]='loadingSample'>play</button></div>
    <div><input type='range' min='0.01' max='5.0' step='0.01' [(ngModel)]='playbackRate'></div>
`

s3thi

private playbackRate: number = 1.0;

s3thi

onClick() {
    this.playSample();
}