Pepperoni - A React Native Blueprint (London, Sept 2016)

At Futurice we 💚 building apps with React Native, because it helps us create high quality products for both major mobile platforms quickly and cost-effectively.

Getting started on a new app just takes too damn long, though. Most apps need the same basic building blocks and developer infrastructure, and we are bored of reinventing the wheel time and time again.

That's why we wrote and released Pepperoni, as starter kit that reflects the best practices of React Native development we have discovered while building real-world applications for our customers.

Transcript

1. Jani Eväkallio @jevakallio Futurice
2. What do these apps
 have in common? Censored for distribution
3. App Bar Tab Bar Navigator
4. Web API Local cache Crash reporting Analytics Login Authentication App Infrastructure
5. Test automation Development Infrastructure Continuous Integration Deployment pipeline Configurability Dev tooling
6. Application architecture People Infrastructure Modular
 codebase Documentation Good practices Enforced
 code style
7. Resource
 Developer availability Business goals Rapid 
 prototyping Short time to market Maintainability High
 quality
 app
8. React Native
9. A blueprint of our best ideas on 
 how to build React Native apps 2339
10. Yeah? Well that’s just like your opinion, man.
11. We reserve the right to change our minds at any time.
12. <Code>
13. data flow architecture
14. ui = f(state) react state = f(state, action) redux
15. Drink a beer! Go to the offie and buy a sixpack!
17. 1 2 3 4
18. state dispatch props props
19. props view
20. Soft functional programming
21. persistent immutable data structures
22. defensive cloning with …spread safe updates with immutable Map.
23. async data flow & side effects
24. [state, effects] = f(state, action) redux-loop state = f(state, action) redux
25. async
 action side
 effect update
 state
26. BDD/Unit testing +enzyme
27. Testing redux logic with Mocha BDD change state verify state verify side effects
28. Testing React views with Enzyme
29. Test coverage istanbul
31. Modular architecture
32. </Code>
33. Navigation NavigatorIOS Navigator NavigationExperimental
34. Web API Local cache Crash reporting + beta distribution Login App Infrastructure
35. Xamarin Test Cloud Development Infrastructure Deployment pipeline Configurability Dev tooling Continuous Integration Test automation Evaluating
36. Developer availability Business goals Rapid 
 prototyping Short time to market Maintainability High
 quality
 app
37. Target audience • Native developers who want to get into React Native • React.js developers who want to get into native • Absolute beginners
38. http://getpepperoni.com
39. Thank you! Questions, please? @jevakallio Futurice