Analytics reverse engineering

Slide 1

Slide 1 text

Analytics reverse engineering Paris TypeScript #13 05/04/2018 https://goo.gl/S6Q1Ri

Slide 2

Slide 2 text

Me, myself & I Paul Souche Front End developer @S_A_N_T_E_C_H In love with TypeScript since 2014 @paul.souche paulsouche @paulsouche https://goo.gl/S6Q1Ri

Slide 3

Slide 3 text

What’s the topic ? Analytics mostly (segment) Bundlers: webpack / rollup es2015 Some TypeScript Few code https://goo.gl/S6Q1Ri

Slide 4

Slide 4 text

What is segment ? - Basically a big infrastructure dealing with analytics requests at the femtosecond stage - API & SDKs for all your platforms - Import data from all your sources (Mobile / Websites / Applications / Servers) and make it available for any destination (email / analytics / helpdesks...) https://goo.gl/S6Q1Ri

Slide 5

Slide 5 text

Our needs Publish analytics of : - 1 desktop angular app - 1 mobile cordova ionic app - and 1 tablet cordova ionic app. https://goo.gl/S6Q1Ri

Slide 6

Slide 6 text

Architecture All clients analytics will be posted on our servers (written in java) that will post these on segment https://goo.gl/S6Q1Ri

Slide 7

Slide 7 text

Architecture All dtos respect segment API Java library on server JavaScript library on each Clients https://goo.gl/S6Q1Ri

Slide 8

Slide 8 text

Getting started Snippet ! https://goo.gl/S6Q1Ri

Slide 9

Slide 9 text

Getting started umd bundle 289 Ko for analytics ! All we want is http POST a dto ! For comparison angular.min.js ~ 165 Ko jquery.min.js ~ 85 Ko https://goo.gl/S6Q1Ri

Slide 10

Slide 10 text

Why ? Integration for anything ! https://goo.gl/S6Q1Ri

Slide 11

Slide 11 text

Why ? But empty... https://goo.gl/S6Q1Ri

Slide 12

Slide 12 text

Issues - Can’t have a 289Ko snippet loaded on mobile & tablet - Write key on the client - Don’t care about all integrations - Can’t hack segment integration to POST on our backend https://goo.gl/S6Q1Ri

Slide 13

Slide 13 text

What if webpack ? analytics.js is the segment JavaScript library. Can’t get rid of all integrations with it Can’t hack segment integration with it Hacks inside ! Deprecations under the hood ! https://goo.gl/S6Q1Ri

Slide 14

Slide 14 text

But how does it work afterall ? 2 core libraries : - Analytics.js-core (facade) - analytics.js-integration All integrations - analytics.js-integration-segmentio https://goo.gl/S6Q1Ri

Slide 15

Slide 15 text

And what if ? A module exports core & integration libraries I could write my own integration https://goo.gl/S6Q1Ri

Slide 16

Slide 16 text

Rollup FTW Es6 bundler Fast ! Tree shaking Lot of plugins https://goo.gl/S6Q1Ri

Slide 17

Slide 17 text

Node resolution https://goo.gl/S6Q1Ri

Slide 18

Slide 18 text

yarn resolutions https://goo.gl/S6Q1Ri

Slide 19

Slide 19 text

Conclusion - Can’t have a 289Ko snippet loaded on mobile & tablet Bundle is now 84Ko in app bundle - Don’t care about all integrations - Can’t hack segment integration to POST on our backend Only one integration : mine https://goo.gl/S6Q1Ri

Slide 20

Slide 20 text

QUESTIONS ? https://goo.gl/S6Q1Ri