Save 37% off PRO during our Black Friday Sale! »

Engineering Better Apps with React Native

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.

F3c52a0537360c85b46e043711cab0c6?s=128

Andrew Sardone

May 16, 2016
Tweet

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
  23. None
  24. None
  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