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 full-size 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 full-size slide

  3. React Rally 2015
    The humble beginnings

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Snowy mountain top
    Wooded mountain top
    Rocky Mountain top

    View full-size slide

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

    View full-size slide

  11. — 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 full-size slide

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

    View full-size slide

  13. Draftbit, finally

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Layers Frame Config

    View full-size slide

  17. Stop Wasting Time
    Doing The Same Shit

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Screen Templates
    Shipping Now

    View full-size slide

  22. Actions
    Upcoming Project

    View full-size slide

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

    View full-size slide

  24. Navigation
    Upcoming Project

    View full-size slide

  25. BYO GraphQL
    Shipping Soon

    View full-size slide

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

    View full-size slide

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

    View full-size slide