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

2019 MagnoliaJS: Building Expo Apps with Draftbit

2019 MagnoliaJS: Building Expo Apps with Draftbit

As developers, the last thing we want to do is push pixels. The cool stuff lies in the API, data, animations, component flow and architecture, so why do I still spend all this time pushing pixels?

As a React Native veteran, former consultant, co-host of React Native Radio, I’ve struggled through it for years which is how we got the idea for Draftbit. Draftbit is a way to let your other team members deal with the pixel pushing and let you run free.

Draftbit uses the same layout engine in the browser as it does on your device which means we can perfectly recreate any screen that you’ve built in the past. The software runs in the browser, is powered by ReasonML and GraphQL and has the coolest looking UI on the web right now. There’s a lot of cool stuff under the hood that I’m excited to share with you.

Peter Piekarczyk

April 18, 2019
Tweet

More Decks by Peter Piekarczyk

Other Decks in Programming

Transcript

  1. Building Expo Apps
    with Draftbit ✨
    Peter Piekarczyk

    View Slide

  2. Peter Piekarczyk
    • Polish
    • Loves to Cycle
    • ReasonML Enthusiast
    • React Native Lover (obv)
    • Expo’s First User
    • Loves Plants (@petersplantss)
    • Y Combinator Alumn
    • Co-Founder of Draftbit

    View Slide

  3. React Rally 2015
    The humble beginnings

    View Slide

  4. Dramatic Recreation of Creating React Rally
    Expo App in 45 Minutes
    Circa August 2015

    View Slide

  5. Real Recreation of Creating *Any* App in 45
    minutes (or any time frame)
    Circa Every Day

    View Slide

  6. Orchard
    • Manage your personal &
    professional connections
    • Keep in touch with the
    people you already know

    • Built with Expo, GraphQL,
    React Navigation

    • Accepted into Y Combinator

    View Slide

  7. Perry from Shrek
    $3.5 million dollar house
    TFW 1 Day Sprints

    View Slide

  8. View Slide

  9. View Slide

  10. You should be working on dev tools
    - Amjad Masad, co-founder repl.it

    View Slide

  11. View Slide

  12. Snowy mountain top
    Wooded mountain top
    Rocky Mountain top

    View Slide

  13. –Every Medium writer
    “The Ultimate Guide to
    Finding Yourself While
    You’re Standing On a
    Mountain Top in
    Colorado”

    View Slide

  14. — Someone who started 16 companies in 2 weeks
    to write a Medium article about it
    “What I learned
    starting 16 companies
    in 2 weeks”

    View Slide

  15. • YC Intros
    • Altos
    • Twitter Prospector
    • slither.io
    Life After Orchard

    View Slide

  16. View Slide

  17. Draftbit, finally

    View Slide

  18. Draftbit is a platform to help
    you build mobile apps
    visually

    View Slide

  19. 1. Scan QR Code
    2. Drag Components
    3. Export Code

    View Slide

  20. Layers Frame Config

    View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. View Slide

  25. Stop Wasting Time
    Doing The Same Shit

    View Slide

  26. • React / ReasonML
    • WebAssembly
    • Expo
    • GraphQL
    • Postgres
    Draftbit Stack

    View Slide

  27. Components
    • Jigsaw library (themed)
    • React Native Primitives
    • Helpers

    View Slide

  28. Theming
    • Custom Fonts
    • Colors
    • Spacing
    • Shadows & Border Radius
    • Typography

    View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. Screen Templates
    Shipping Now

    View Slide

  34. View Slide

  35. View Slide

  36. Actions
    Upcoming Project

    View Slide

  37. Actions
    • Push Notifications
    • Location
    • Navigation
    • Linking
    • Login with {}

    View Slide

  38. Navigation
    Upcoming Project

    View Slide

  39. BYO GraphQL
    Shipping Soon

    View Slide

  40. • Enter GraphQL Endpoint
    • Select Nodes
    • Connect Components
    • Celebrate

    View Slide

  41. BAEs
    BEST. AUDIENCE. EVER.
    draftbit.com/magnolia
    draftbit • peterpme

    View Slide