Analytics reverse engineering

Transcript

1. Analytics reverse engineering Paris TypeScript #13 05/04/2018 https://goo.gl/S6Q1Ri
2. 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
3. What’s the topic ? Analytics mostly (segment) Bundlers: webpack / rollup es2015 Some TypeScript Few code https://goo.gl/S6Q1Ri
4. 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
5. Our needs Publish analytics of : - 1 desktop angular app - 1 mobile cordova ionic app - and 1 tablet cordova ionic app. https://goo.gl/S6Q1Ri
6. Architecture All clients analytics will be posted on our servers (written in java) that will post these on segment https://goo.gl/S6Q1Ri
7. Architecture All dtos respect segment API Java library on server JavaScript library on each Clients https://goo.gl/S6Q1Ri
8. Getting started Snippet ! https://goo.gl/S6Q1Ri
9. 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
10. Why ? Integration for anything ! https://goo.gl/S6Q1Ri
11. Why ? But empty... https://goo.gl/S6Q1Ri
12. 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
13. 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
14. 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
15. And what if ? A module exports core & integration libraries I could write my own integration https://goo.gl/S6Q1Ri
16. Rollup FTW Es6 bundler Fast ! Tree shaking Lot of plugins https://goo.gl/S6Q1Ri
17. Node resolution https://goo.gl/S6Q1Ri
18. yarn resolutions https://goo.gl/S6Q1Ri
19. 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
20. QUESTIONS ? https://goo.gl/S6Q1Ri