Tumblr iOS architecture

Transcript

1. iOS architecture
   Bryan Irace
   August 5, 2014
   

   View Slide

2. Purpose of this talk
   • The iOS codebase should not be this magical, black
   box that you’re scared to look at or touch
   • All engineers should feel comfortable reading
   through the code (and opening pull requests)
   

   View Slide

3. Relational DB
   File system
   Tumblr API Local storage
   Networking and storage
   Run loop (waits for user interaction)
   

   View Slide

4. Sync engine
   UI Sync
   engine
   User requested posts
   User created a post,
   liked/followed something,
   etc.
   New posts persisted
   No Internet? No problem
   Local storage
   Outgoing posts are queued,
   retried when connected
   Fetch new posts if connected,
   no worries if not
   

   View Slide

5. Core Data
   Basically an ORM, but don’t call it that
   

   View Slide

6. Our database is (mostly)
   just a cache
   Provides speed plus a nice offline experience without
   complication
   

   View Slide

7. Controller
   Controller
   View
   View
   MVC
   Controller View
   View View
   View
   What you see on screen and
   interact with
   Exists in a
   hierarchy
   Drawn programatically or
   using a visual editor
   (Interface Builder)
   Manages a screenful
   (or so) of information
   Responds to user
   interaction
   Contains only
   presentation
   logic
   Has a single
   view
   Populates its
   view with data
   

   View Slide

8. Adaptive layout
   • iOS 1-7
   • Check if we’re running on an iPhone or iPad
   • Check if we’re in portrait or landscape
   • iOS 8
   • At any point, app will be either vertically/horizontally
   “regular” or “compact”
   • This can change based on rotation, other factors
   

   View Slide

9. Post rendering
   ryan:
   
   The site may
   crash. 16-
   bitch met href="http://tmblr.co/
   mJmaPYlIVDe7tP9jhKEHlRw">
   david.
   
   Tumblr - making dreams
   come true (for David)
   API response
   XML parser
   Mapping of
   character ranges
   to semantic
   section types (and
   attributes)
   Output string +
   data structure
   Or “Why inline embeds and stuff don’t show up”
   

   View Slide

10. 
    ryan.tumblr.com/post/
    93783287034/the-site-may-
    crash-16-bitch-met-
    david">ryan:
    
    
    The site may crash. href="http://tmblr.co/
    mqneDxY-
    aNcK8DhWHP23qvw">16-bitch
    a> met tmblr.co/
    mJmaPYlIVDe7tP9jhKEHlRw">da
    vid.
    
    
    
    Tumblr - making dreams
    come true (for David)
    
    (0, 4): [
    {
    type: 'link',
    attributes: {
    url: ‘http://ryan.tumblr.com/post/…’
    }
    }
    ],
    (0, 6): [
    { type: 'paragraph' }
    ],
    (46, 45): [
    { type: 'paragraph' }
    ],
    (6, 40): [
    { type: 'blockquote' },
    { type: 'paragraph' }
    ],
    (26, 8): [
    {
    type: 'link',
    attributes: { url: ‘http://tmblr.co/…’ }
    }
    ],
    (39, 5): [
    {
    type: 'link',
    attributes: { url: ‘http://tmblr.co/…’ }
    }
    ]
    ryan:\nThe site may crash. 16-bitch met david.\nTumblr - making dreams come true (for David)
    

    View Slide

11. TextKit
    NSMutableAttributedString *string = [[NSMutableAttributedString alloc] initWithString:
    @"ryan:\nThe site may crash. 16-bitch met david.\nTumblr - making dreams
    come true (for David)"];
    !
    // Loop through ranges, add the right attributes to each range
    !
    [postContent addAttributes:@{
    NSLinkAttributeName : [NSURL URLWithString:@“http://ryan.tumblr.com/post/…”]
    } range:NSMakeRange(0, 4)];
    !
    // Lots of work required to support things like nested blockquote indentation, nested
    lists, inline images, etc.
    

    View Slide

12. Yes, I realize we’re kind of
    implementing a web
    browser here
    All in the name of performance
    

    View Slide

13. GIFs
    • Save each individual frame as a JPEG (plus a
    metadata file)
    • Play by looping through the individual frames
    • Don’t read them all into memory at once
    

    View Slide

14. • Think Gems/Bundler, NPM, etc.
    • Used for both internal and third-party
    dependencies
    • Downloads as well as integrates with Xcode
    project file, compilation settings, etc.
    

    View Slide

15. Internal libraries
    BRYMailToURIParser*

    BRYParseKeyboardNotification*

    SnoopySDK

    TMCache*

    TMTumblrSDK*

    TMVideoPlayer

    TumblrCommon
    * Open source
    

    View Slide

16. Third-party libraries
    CHTCollectionViewWaterfallLayout

    GRMustache

    HockeySDK

    JCKeyPathValidator

    JRSwizzle

    MTMigration

    PocketAPI

    ObjectiveCHTMLParser

    Reachability
    

    View Slide

17. Application lifecycle
    • Apps can be purged from memory at any time, if iOS
    needs to reclaim memory
    • iOS 7 added “background fetch” – app can
    periodically update itself even if it had previously
    been killed
    • Apps can perform “background tasks” (within reason)
    • e.g. User creates a post and then backgrounds
    the app – post will continue uploading
    

    View Slide

18. Push notifications
    Notification
    App is foregrounded
    App is backgrounded
    App is
    foregrounded
    and given
    payload
    App is given
    payload
    immediately
    iOS displays notification
    without app’s involvement
    

    View Slide

19. Inter-app communication
    • Apps define protocols that they can handle, e.g. “tumblr://“
    • We’ve support a number of URLs, including:
    • tumblr://x-callback-url/tag?tag=gif
    • tumblr://x-callback-url/blog?blogName=bryan
    • tumblr://x-callback-url/quote?
    quote=Quote&source=Source
    • x-callback-url is an unofficial specification for how iOS URLs should
    be structured
    • x-success and x-error URL parameters are used to return
    the user to the app where they came from
    

    View Slide

20. Inter-app communication
    Apps can also register to open files of a
    certain type, e.g. JPEG or MP4
    

    View Slide

21. Inter-app communication
    iOS 8 allows apps to expose “share
    extensions”
    

    View Slide