Going cross-platform with React

We're going to talk about how to make cross-platform development less painful by leveraging React. This is the lightning talk version :)

Transcript

1. GOING CROSS­PLATFORM WITH REACT BY HUGO DI FRANCESCO @hugo__df
2. HUGO DI FRANCESCO @hugo__df Async
3. WHAT IS THE PROBLEM? Cross­platform development: Fast development Cheap development App performance Pick two
4. Why do we even care about mutiple platforms? A quick history lesson
5. CORPORATION­CENTERED DESIGN Money is king
6. PRODUCT REQUIREMENTS: IE8 Desktop app Punch­card interface...
7. Today...
8. USER­CENTERED DESIGN The user is king
9. (MODERN) PRODUCT REQUIREMENTS: Web Mobile Desktop
10. So we need three platforms (at least) Do I know all three to a decent level? Does anyone?
11. USUAL SOLUTIONS Build x4 apps: Time/money cost Only build a web/iOS/Android/Desktop app: Business cost Only build a web app and put it everywhere: UX cost
12. Who do we know that needs to do things fast and cross­ platform? Facebook ­ "Move fast and break things"
13. A NATIVE JAVASCRIPT APP Not Hybrid Not Java Not Objective­Cor Swift
14. WHY JAVASCRIPT?
15. Code reuse
16. Fewer context switches
17. Over the air updates
18. WHY REACT NATIVE?
19. REACT
20. THE PROBLEM REACT SOLVES
21. UIs that are easier to reason about State => UI
22. Android (Java) and JavaScript projects look surprisingly similar
23. 1. Wait until app/window is loaded 2. Attach a listener/handler combo 3. When event is fired, execute handler
24. STATE VS UI Every time c o u n t e r changes we need to "manually" update all the elements that display it Doesn't scale/increases headaches
25. BUTTON? B u t t o n b u t t o n = ( B u t t o n ) f i n d V i e w B y I d ( R . i d . b u t t o n 1 ) ; v a r b u t t o n = d o c u m e n t . g e t E l e m e n t B y I d ( ' b u t t o n ' ) ; Tight coupling but other half of the code is in another file Doesn't scale/increases headaches
26. c l a s s B u t t o n e x t e n d s R e a c t . C o m p o n e n t { / / E S 6 s y n t a x ? I t h i n k s o c o n s t r u c t o r ( p r o p s ) { s u p e r ( p r o p s ) ; t h i s . s t a t e = { c o u n t e r : 0 ; } } r e n d e r ( ) { r e t u r n ( < d i v o n c l i c k = " { t h i s . h a n d l e C l i c k . b i n d ( t h i s ) } " > { t h i s . s t a t e . c o u n t e r } < / d i v > ) } h a n d l e C l i c k ( ) { t h i s . s e t S t a t e ( { c o u n t e r : t h i s . s t a t e . c o u n t e r + 1 } ) ; } } Component­contained State Declarative UI Scales/fewer headaches
27. The way we build Android, iOS and Web apps is very similar. They have the same advantages and drawbacks. Using JavaScript is a win, using React is a bigger win.
28. The hardest part of learning iOS Development 3% Objective­C Syntax, 97% iOS APIs Brandon Keepers, Ruby at GitHub, 2013
29. to build on mobile across three platforms, you need three different engineers because there are three different sets of tool chains, languages, and API’s Christopher Chedeau on the Core Philosophies that Underlie React, 2016
30. React Native is more about writing native apps in React than it is about writing native apps in JavaScript
31. SOME FEATURES
32. The target platform as an implementation detail
33. You build the exact same way as for the web Flex Box Logic Web APIs
34. There's more
35. React Native Web (react­native­web) React Native and Web: 1 codebase 0 context switching
36. REACT NATIVE CHECKLIST
37. 1. ABUSE HIGH­LEVEL COMPONENTS Abstract away platform­specific code High­level components are portable
38. 2. USE JSX STYLES As web developers we like our CSS We're not talking about web development Will fridges CSS? Does the terminal CSS?
40. 4. PROFIT Challenge: make a Web, Android, iOS app in no time APIs you know, without a speed/performance tradeoff
41. THE RESULT iOS Android ~Web
42. YOUR OTHER OPTIONS NativeScript Appcelerator/Titanium RubyMotion not trolling
43. But...
44. The language doesn't matter, the architecture does
45. DIVE IN!! http://facebook.github.io/react­native/ https://github.com/necolas/react­native­web This presentation: or: talks.artificial.io/cross­platform­react https://speakerdeck.com/hugodf/going­cross­platform­ with­react
46. THAT CHECKLIST AGAIN 1. Abuse high­level components 2. Use JSX styles 3. Profit Thanks to the React contributors for making awesome things
47. GET IN TOUCH hugo@artificial.io @hugo__df