Analytics reverse engineering

Transcript

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

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

17. Node resolution
    https://goo.gl/S6Q1Ri
    

    View Slide

18. yarn resolutions
    https://goo.gl/S6Q1Ri
    

    View Slide

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
    

    View Slide

20. QUESTIONS ?
    https://goo.gl/S6Q1Ri
    

    View Slide