2019 App.js Conf - Building Expo & React Native Apps with Draftbit

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. —The guy who stole source code from Tesla and
    got caught and wrote a Medium article about it
    “10 Secrets to Starting
    Businesses Elon Musk
    Doesn’t Want You To
    Know About”
    

    View Slide

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

    View Slide

17. View Slide

18. Draftbit, finally
    

    View Slide

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

    View Slide

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

    View Slide

21. Layers Frame Config
    

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. Stop Wasting Time
    Doing The Same Shnitzel
    

    View Slide

26. • React / ReasonML
    • Web Assembly
    • Expo
    • GraphQL
    • Postgres
    Draftbit Stack
    

    View Slide

27. TypeScript
    Reason
    Reason + Draftbit
    

    View Slide

28. View Slide

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

    View Slide

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

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. Screen Templates
    Shipping Next Week
    

    View Slide

36. View Slide

37. View Slide

38. Actions
    Upcoming Project
    

    View Slide

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

    View Slide

40. Navigation
    Upcoming Project
    

    View Slide

41. BYO GraphQL
    Shipping Soon
    

    View Slide

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

    View Slide

43. BAEs
    BEST. AUDIENCE. EVER.
    draftbit.com/appjs
    draftbit • peterpme
    

    View Slide