$30 off During Our Annual Pro Sale. View Details »

Analytics reverse engineering

Analytics reverse engineering

paul souche

April 06, 2018
Tweet

More Decks by paul souche

Other Decks in Programming

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