Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Community Engineering

Community Engineering

I spoke at iOS Con SG in Singapore & shared technical stories about my experience building social media apps

Tamar Nachmany

January 18, 2020
Tweet

More Decks by Tamar Nachmany

Other Decks in Technology

Transcript

  1. Seke (sek-ey) • An indigenous language of Nepal • Estimated

    to have 700 speakers • One building in Brooklyn has 50 of the world’s 700 Seke speakers
  2. “Evolving community” • The number of users changes • Consumer

    tech changes • Users seek new ways of expressing themselves • Bad actors join the community • Sub-communities with different needs form
  3. 1. Anecdote 1: Scaling new social media 2. Anecdote 2:

    Rearchitecting posts @ Tumblr Community Engineering
  4. Senior Engineer @ Glossier, a digital-first beauty company Formerly iOS

    @ Tumblr, small startups & the New York Times About Me
  5. After we conceptualized the iOS app, built a frontend &

    backend and set up the infrastructure, we realized our API requests were slow.
  6. Amazon EC2 vs. AWS Lambda Amazon EC2 • Infrastructure as

    a service • Computing resources always on • Manual scaling & configuration • More customizable AWS Lambda • Infrastructure platform as a service • Computing resources only on demand • Implicit scaling • Not customizable
  7. const handler = async (event: any = {}, _context: Context,

    callback: Callback) => { } Lambda function
  8. COLD START WARM START 1st call 2nd call 3rd call

    4th call Lambda Initialized User makes a request Code Code Code Code
  9. COLD START WARM START • Lambda code is executed •

    Lambda code is downloaded • Container is mounted • with language • & runtime • & database • Lambda code is executed
  10. People often skip ahead and build experiences that they imagine

    will work well at a large scale Communities need to be successful at a small scale before they can grow to a large scale
  11. • Bring paid creators onto your platform • Distribute the

    responsibility of giving folks a good experience (uplift community leaders) • Bring an existing, external community onto your platform Create a large(r) scale “manually”
  12. • Small, trustworthy community makes people feel more comfortable sharing

    • Levers for joy & interaction don’t need to be about popularity like likes and comments Create a compelling small-scale
  13. Romanesco is a natural fractal • Fractals are shapes with

    self-similar forms at different scales • At every scale, a fractal looks the same
  14. Communities don’t scale like fractals. They’re complex, and different at

    every scale. Scale has a huge, non-linear impact on users.
  15. Takeaways • New community products can fail because of scale

    • We chose a good technology for scaling up, but a bad technology for scaling down • Moreover, the technology we used is probably not optimized for social media • The reality is, you will probably start at a small scale. Don’t design an experience or build tech that is doomed at a small scale.
  16. This next example is also a story of scale. But

    more than just scale, it’s a story about how the early technical decisions teams make and how those decisions can be gracefully transformed over time.
  17. <li /> <div /> <img> <quoteblock / > <h1 />

    <video /> <h2 /> These are HTML tags
  18. HTML • Stands for Hyper Text Markup Language • Describes

    the structure of a web page • Is made up of a series of elements • …which tell the browser what to display & how
  19. Why? • HTML was an important part of what expression

    meant in online culture when Tumblr was founded • One of Tumblr’s original forms of expression was building themes • Browsers are built with this exact purpose
  20. By definition, browsers know how to build a UI using

    HTML but native iOS apps don’t. Rendering HTML was a complex, inefficient, multi-step process for our iOS app.
  21. type 1 2 3 Post table was designed for the

    early realities of Tumblr: for a small scale and small number of post types HTML HTML HTML HTML Image Data HTML Text Post Photo Post
  22. type 1 2 3 Adding new content to a post

    type became impossible at scale HTML HTML HTML HTML Image Data HTML Text Post Photo Post ? New HTML New HTML
  23. You can check out Tumblr’s public post format spec here:

    https://github.com/tumblr/docs/blob/master/npf-spec.md
  24. Post "content": [ { "type": "text", "text": “Here’s some text"

    }, { "type": "text", "subtype": "quote", “text": “Here’s a quote.", } ]
  25. This concept of a client that uses a content type

    & some styling metadata to figure out how to render stuff sounds familiar…
  26. With NPF, Tumblr clients behave like simplified browsers, taking arrays

    of JSON objects and figuring out how to render each type of supported content type. Sounds like a browser!
  27. type 1 2 3 The post database was simplified as

    well HTML HTML HTML HTML Image Data HTML Text Post Photo Post
  28. type 1 JSON Array Text Post Photo Post JSON Array

    The post database was simplified as well
  29. type 1 {}, {} Text Photo {}, {} Photo Video

    Audio Text {}, {} {}, {} {}, {} {}, {} Video {}, {} Photo {}, {}
  30. NPF was a smart and thoughtful refactor that became a

    foundation for supporting the features of the future
  31. Takeaways 1. You are who you are 2. Decouple evergreen

    and ephemeral features 3. Not everything needs to be strict 5. Leverage Swift 6. How do you make fundamental changes to a product without anybody noticing?
  32. Every social media app has the DNA of its early

    vision & early community Tumblr began as a website building tool, founded during the ‘internet of tags’ era. As users shifted to mobile, Tumblr’s underlying technology had to evolve. 1.You are who you are
  33. The desire to share beauty and ideas won’t change but

    the vehicle for that expression will. Don’t tightly couple creative content to the current vehicle for that content such as a post 2. Decouple evergreen & ephemeral features
  34. By using a more flexible data structure to represent post

    data (an array of validated JSON objects) and a simplified database strategy (a single column for post contents), this refactor made introducing new features far faster & easier to do at Tumblr’s scale 3. Not everything needs to be strict
  35. Compilers are our friends. Swift has many language features that

    are conducive to creating content blocks that can be used throughout an app. Switch cases (without a default) for example make it easier to ensure that new content types enums are handled absolutely everywhere. Protocols enabled the creation of a flexible yet structured contents array, which created an easy workflow of adding support for new content types 4. Leverage Swift
  36. Shout out to the entire Tumblr engineering team & to

    the Tumblr Expression Team folks who implemented this project
  37. What did we discuss today? • We started by flipping

    the scale mantra on its head and discussing AWS Lambda and the importance of building community tech that can scale down. • Then we discussed Tumblr’s post spec evolution, from HTML to JSON, from tightly coupled post types to extensible content blocks and what this refactor & the challenges of Tumblr’s scale teach us about evolving from early technical decisions • & languages, fractals, and more
  38. Your app will have the DNA of its history And

    of the future as it evolves
  39. It will be easier to create the future we want

    if we’re not doing it alone
  40. Photo Credits • Seke photography by Diana Zeyneb Alhindawi for

    the New York Times • Dinner photography by Michael Graydon and Nikole Herriot • Font is Dark Mono