Engineering Better Apps with React Native

Presentation from GLSEC 2016 http://glsec.softwaregr.org/2016-program-schedule/

Companion repo: https://github.com/andrewsardone/glsec-2016-presentation

## Abstract

Just over a year ago we saw the initial public release of React Native. It hit the scene with the motto, “learn once, write anywhere,” but what does this mean? In this talk, we'll introduce React's declarative approach to writing user interfaces, and demonstrate how it's a better model for writing amazing native apps. We'll explore how React Native boosts your team by reducing knowledge silos, increasing collaboration, and unifying concepts, architecture, and code that's shared amongst iOS, Android, and web.

Transcript

1. Engineer Better Apps REACT NATIVE with
2. Nutshell.com @andrewa2 github.com/andrewsardone ANDREW SARDONE
3. CURRENT LANDSCAPE
4. LOTS OF PLATFORMS
5. USER EXPERIENCE
6. ALL NON-NEGOTIABLE Feels Good Bug Free Consistent Shipped
7. HOW DO PEOPLE DO THIS?
8. THEY DON’T ¯\_(ϑ)_/¯ or…
9. MASTER LOTS OF STACKS or…
10. DEPLOY MULTIPLE TEAMS
11. PROBLEMS? MORE CODE MORE COORDINATION MORE SILOS POOR DEVELOPER EXPERIENCE
12. Clients Server {} {}
13. {} {}
14. POOR DEV EXPERIENCE slow feedback loops
15. POOR UI DEVELOPMENT PARADIGMS
16. React Native http://facebook.github.io/react-native/
17. SO WHAT’S REACT?
18. UI AS A PURE FUNCTION {}
19. BENEFITS PLAIN OL’ INERT DATA EASIER TO PERSIST EASIER TO TEST EASIER TO REASON ABOUT
20. https://twitter.com/andy_matuschak/status/560511204867575808
21. REACT NATIVE “Learn once, write anywhere”
22. Main Thread JS Thread class Component { render() { return <View />; } } NATIVE VIEWS JavaScriptCore Virtual Layout Send data to main thread
25. <View> <View> <View /> <Text /> </View> <View> <Text /> <Text /> </View> </View>
26. NATIVE SIMPLE AUTO LAYOUT REACT NATIVE DATA, FLEXBOX
27. DEMO
28. SO… HOW DO I DO THIS?
29. CURRENT PROJECT pod 'React' compile "com.facebook.react:react-native:+"
30. START FRESH react-native init MyNewProject
31. Sources, Further Reading Why React Native Matters Khan Academy’s Mobile Code Sharing Strategies ECMAScript 6 git.io/es6features Why iOS developers should try React Native The Skeptic's Guide to React Native Beyond UXKit github.com/andrewsardone/glsec-2016-presentation