工程師的生涯規劃，從 React Native 開始

@TechCCU 2015

Transcript

1. ૡ纷䒍ጱኞ႕憒㴟
 ℂ REACT NATIVE 樄ত KUDO@CSIE.IO
2. github.com/Kudo . @kudochien . kudo@csie.io ABOUT ME ▸ CCUCSIE 2002 - 2008, BS + MS (GAIS Lab) ▸ CNA 2002 - 2008 ▸ Trend Micro, startups… ▸ ಑褾ૡ牧Ոኞ缏ப薹 Bugs ▸ 磧蜱ฎ Facebook 罭妟牧缏ப蝱 Facebook 牧ݢఠ Algorithm ䷱娞অ牧螭蝱犋݄ QQ ▸ ݝঅӞ螲娞聜 React Native 牧Ӟ螲媣媲വࣗ
3. OUTLINE ▸ य़扖ૡ纷䒍ԏ᪠ ▸ React Native Օ奧 ▸ 犋Ӟ䰬ጱ React Native Օ奧 ▸ ౯ጱ React Native 䋊聜ԏ᪠ ▸ 奾
4. Image from: https://pixabay.com/zh/%E7%8B%AE%E5%AD%90-%E5%8A%A8%E7%89%A9-%E5%8F%AF%E7%88%B1-%E6%A9%99%E8%89%B2-%E5%8D%A1%E9%80%9A-%E5%93%BA%E4%B9%B3%E5%8A %A8%E7%89%A9-%E5%BF%AB%E4%B9%90-158639/ ૡ纷䒍 硭उ劂 䒍纷ૡ
5. TEXT Image from: https://en.wikipedia.org/wiki/Railroad_switch#/media/File:SunsetTracksCrop.JPG 
 盄ग़ 盄裾
 Ӟӥ獤 Ӟӥݳ
 ֦蚎Ӥጱ ౯᪭ڊጱ
 獤犋竃 ፡犋蝚
 ਑অ ਑瓥
 路
6. य़扖ૡ纷䒍ԏ᪠ ౯మ蚎ૡ纷䒍ጱԏ᪠ ▸ 桽ग़ ▸ Ԫ੝ ҁWork smart & efficiency) ▸ 櫝疑蜱 ▸ ౮疰眤
7. य़扖ૡ纷䒍ԏ᪠ 盄ग़Ԫ眐
 螇ቘ᮷ฎፘ蝢ጱ
8. य़扖ૡ纷䒍ԏ᪠ Q: ֦螡䢔Ջ讕ಋ秚牫 簁盅螭磪牧裾࿯ಋ秚 …
9. य़扖ૡ纷䒍ԏ᪠ 磪Ӟ圵ૡ纷䒍 䢐磪Ӟದԏ裾牧಑螁ॠӥ篷碊ಋ
10. य़扖ૡ纷䒍ԏ᪠ 磪Ӟ圵ૡ纷䒍 ▸PHP ▸Perl ▸Python ▸Ruby ▸C ▸C++ ▸HTML ▸CSS ▸jQuery ▸JavaScript ▸Java ▸Objective C ▸Swift Ջ讕᮷䨝
11. य़扖ૡ纷䒍ԏ᪠ Q: ইຎ֦ฎ聲樿牧֦మ肝አՋ讕䰬ጱૡ纷䒍牫 簁盅犖螭磪牧᮷犋ॡ䨝 … 䢐磪Ӟದԏ裾 ፡蚏㬵Ջ讕᮷䨝
12. य़扖ૡ纷䒍ԏ᪠ 磪㰷独ጱૡ纷䒍 ▸ 薹究㺔氂ጱ胼ێ牧ᘒ犋ݝฎ䨝盄ग़纷ୗ承᥺牧䨝狶盄ग़圵Ԫ ▸ 窼ଶ䋊聜 ▸ 蝍礬绗礙 ▸ ᶎ䌘 Bug 犋胼஑螂Ӭ螂 ▸ QBQ ֦፡憎ԧ㻟
13. 犋ᥝ拻疵扖಑ṛ绚
 ֺৼֺࠡৼࠡ य़扖ૡ纷䒍ԏ᪠
14. React Native
15. REACT NATIVE Օ奧 硲Ԫฎ蝡讕樄তጱ ▸ @Scale 2014 - Facebook’s iOS Architecture https://www.youtube.com/watch?v=mLSeEoC6GjU
16. REACT NATIVE Օ奧 硲Ԫฎ蝡讕樄তጱ ▸ Immutable data model ▸ Uni-direction data flow ▸ Component ▸ Declarative UI ▸ Flexbox
17. REACT NATIVE Օ奧 REACT NATIVE ▸ A framework for building native apps using React ▸ Consistent developer experience based on JavaScript and React ▸ Learn once, write anywhere ▸ Native, not HTML ▸ Highly shared code between iOS and Android ▸ 85%+ for Facebook Ads Manager app ▸ https://speakerdeck.com/mkonicek/under-the-hood-of-react-native?slide=13
18. REACT NATIVE Օ奧 SHOWCASE ▸ https://facebook.github.io/react-native/showcase.html
19. REACT NATIVE Օ奧 REACT NATIVE ▸ Component based ▸ Always thinking in Custom View for iOS / Android ▸ Flexbox ▸ ℂ iOS 舚ێ窔碍䋊ڰ UI
 Auto Layout ೉Ӟञ constraints
 奰ෝکԧ iOS 9 ಍磪 UIStackView ▸ inline CSS (CSS in JS) ▸ 犋襑ᥝࣁ xml 蚤 source code ԏ樌᪡㬵᪡݄ԧ
20. REACT NATIVE Օ奧 REACT NATIVE ▸ Benefits from React ▸ Virtual DOM ▸ state / props ▸ Integrate with flux implementations for uni-directional data flow ▸ API 墋㻌牧਻ฃ䋊聜 ▸ ݝฎӞ樄ত盄ग़盄褾ጱੜ䩚ᥜᥝ೪೪仡仡牧䨝蜢舚Ӟ讨
21. REACT NATIVE Օ奧 REACT NATIVE
22. REACT NATIVE Օ奧 THIRD PARTY COMPONENTS ▸ https://react.parts/native
23. REACT NATIVE Օ奧 INSTANTLY UPDATE YOUR APPS AppHub
 https://apphub.io/ Microsoft CodePush
 https://microsoft.github.io/ code-push/
24. 蝡犚翕᪠᮷磪䌃
 犋ᥝ拻蝡犚窚揲౯碻樌 REACT NATIVE Օ奧
25. 犋Ӟ䰬ጱ REACT NATIVE Օ奧
26. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 TALK DRIVEN LEARNING ▸ JavaScript <-> Native code Bridge ▸ React Native ጱ猻玊
27. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫 ▸ Q: ᥝ搚櫚矎کӮኴӤጱ犋ݶ㾴疑牧狶Ӟ㮆獊純玕ጱԪ禂牧֦ 磪Ջ讕ොဩ牫 ▸ A: ▸ 翄ӞӮኴ ▸ ಑蝢蝢᪠牧ℂӾ瓷䓻瞆搚کӮኴݱ瑿 ▸ کྯ㮆㾴疑戔缏硁讨
28. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫 ▸ Q: ᥝ狶Ӟ㮆᪜ଘݣጱ mobile development framework ֦䨝 ெ讕狶牫 ▸ A: ▸ ಩ Apple, Google, … ᮷揮ӥ㬵牧ݞ犢㮉蝢蝢硬አ֦ጱොୗ 樄咳 ▸ HTML5 ▸ Bridge for Native code
29. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫 ▸ ᮎ Transpiler 珌 ? ▸ J2ObjC ▸ Xcode support C++ ▸ Android NDK ▸ ֕犋螕ݳ UI 樄咳
30. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 CROSS PLATFORM MOBILE DEVELOPMENT FRAMEWORK ▸ PhoneGap ▸ HTML5 ▸ 傶Ո扑የጱ WebView performance ▸ Appcelerator Titanium ▸ React Native ▸ JS <-> Native bridge
31. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸ Ḓض牧಑蝢᪠犋ฎॡ櫞牧盄ग़᮷磪൉׀ ▸ JavascriptCore / V8 ▸ Chrome extension ▸ RPC ▸ ൉׀ጱොୗ犋क़Ԓ ▸ eval() ▸ event
32. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸ ֢傶Ӟ㮆 Framework 牧吚簁犋胼ݝ൉׀ eval() 妔ֵአᘏአࠩ ▸ IDL (Interface Description Language) ▸ MIDL for Windows COM/DCOM ▸ AIDL for Android ▸ JSON ▸ protobuf / Thrift
33. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE UI
 event queue Native
 event queue JS event queue JSON IDL
34. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸ ெ讕 Export module/method ک JSON config ▸ iOS by Macro ▸ Android by Java Annotation
35. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸ iOS ▸ ֵአ獉ୌጱ JavaScriptCore ▸ Android ▸ ۱ JavaScriptCore 牧绝 JNI ▸ 傶Ջ讕犋ฎ V8 珌 ? ▸ https://news.ycombinator.com/item?id=10216234 ▸ We designed React Native to run with any JS engine by @vjeux ▸ ಅ犥蝫 Chakra ᮷磪ࣁᘍ眾 XD
36. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸ Debugging JS mode ▸ Leverage Chrome Devtool ▸ V8
37. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 REACT NATIVE ጱ猻玊 ▸ 䄸癲 React ጱ猻玊 ▸ 獮ᒒૡ纷䒍ጱ碝毣᪠ ▸ Code share 纷ଶ盄ṛ ▸ Keep 60fps in mind ▸ 盄ဳ᯿ Profiler ጱֵአ膏樄咳 ▸ 螨ع᯿᫃ HTML5 ጱ稲ݥ Image from: https://facebook.github.io/react-native/docs/android-ui-performance.html
38. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 REACT NATIVE ጱ猻玊 ▸ Ӟਧᥝ蟴 flux ▸ ፓ獮磧॥ redux ▸ 犋ᥝٚ൥ Fat Controller, MVC, MVP, MVVM, MVW ▸ Live Reload ▸ 犥盅ݢ胼䨝磪 Hot Reload ▸ 犋襑ᥝ᯿ build
39. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 REACT NATIVE ጱ猻玊 ▸ React Native Playground ▸ https://rnplay.org/
40. ౯ጱ REACT NATIVE 䋊聜ԏ᪠
41. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ ٌ䋿犖಍獋㮆์ ▸ 櫒簁Ӟፗ盄磪岉蚕牧֕ฎ舚篷秚䨝䌃 mobile app ▸ ፗک獋㮆์獮಍磪秚䨝Ᏻ mobile app ▸ 匍ࣁ蝱䁰盄蜢舚牧֕ฎ盄独஑盄磪蚕 ▸ 盄ग़ੜੜ褾褾ጱ䩚ᥜ牧盄੝෈կ ▸ ୿䕣ݢ犥蚤Ӯኴٌ犢ጱૡ纷䒍矑敍
42. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ SOURCE CODE ኞ眲 ▸ ྯॠ᮷磪盄ग़ጱ commits ▸ 㬵ᛔक़ᶎጱ contributors ▸ 㬵ᛔ Facebook 獉蟂ጱ㹓ૡ ▸ ֕螭ฎྯॠ蚤Ӟӥ commits 㹧 ▸ Facebook keeps sync with internal repo Facebook internal repo github
43. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ SOURCE CODE ኞ眲 - FACEBOOK-GITHUB-BOT ▸ https://github.com/facebook/mention-bot
44. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ GITHUB ኞ眲 ▸ GitHub issues 盄ग़ ▸ ֕य़ग़᮷ฎ㺔㺔氂 ▸ 㺔㺔氂藶ک StackOverflow #react-native ▸ Feature Request 藶ک ProductPains ▸ 磪ጱ碻狡犋Ꭳ螇蝡ฎ㺔氂牧螭ฎ፥ጱ bug ▸ 磪ጱ碻狡ᥝ蝑 PR ֕犋Ꭳ螇 Facebook roadmap ฎ犋ฎӞ膌
45. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ REACTIFLUX
46. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ TWITTER ▸ Follow य़ᐟ疰䌘ԧ ▸ #reactnative
47. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ RXRNBRIDGE ▸ ౯ጱᒫӞ㮆 React Native 䋊聜 project/toy ▸ 碝Ӯդጱ Android 樄咳ᘏ牧ӞਧᥝሻӞӥ RxJava ▸ RxJava 磪盄ਠ碉ጱ libraries ኞ眲瑹牧ই֜盠蝧಩ RxJava 蚤 RN 翉 ࣁӞ蚏 ▸ Java annotation processing ▸ https://medium.com/@kudochien/introduce-rxrnbridge-the- bridge-helper-between-rxjava-and-react-native-94e5a43d8583 ▸ https://github.com/Kudo/RxRNBridge
48. ೴ OPEN SOURCE FRAMEWORK / LIBRARY
 疰猟೴聲甬Ӟ䰬
 螡অԧ疰অঅӞ蚏繬櫞Ӟ蚏౮裾 ౯ጱ REACT NATIVE 䋊聜ԏ᪠
49. 奾
50. 奾 REACT NATIVE ▸ Ḓض螭ฎᥝവࣗӞӥ ▸ ֕૶磭ᴻԧ೭㬵አ犥क़牧螭ᥝ蚤ᐒᗭ矑敍牧犋ᥝ者ฎ缛Ո疑 ጱ౮ຎ牧犖犋ᥝӞፗࣁ缛Ո疑౮ᆧ绐ਧ牧蝡ฎ襑ᥝय़疑Ӟ蚏 蝱㬵ۘێጱ ▸ React Native 胙盅ጱ聅牧֦፡憎ԧ㻟 ?
51. 奾 ૡ纷䒍 ▸ QBQ ▸ 吚ૡ纷䒍牧֦፡憎獨Ո纷ୗ౲礍䯤盅ᶎጱ聅ԧ㻟 ? ▸ 吚戔懯䒍牧֦፡茐 UI 蚤 Flow牧眤ݑکܻ獺吚碻మ蔭螈ጱ 藗穩ԧ㻟 ? ▸ 吚 PM牧֦ಧ茐Ո疑叨ߝጱۑ胼碻牧覿ఉک䌘ොܻ๜വ蝡㮆 ۑ胼碻牧ஞӾమጱᒽኼԧ㻟 ?
52. 奾 ૡ纷䒍 ▸ ૱䁰Ӥ䨝䌃纷ୗጱՈ፥ጱ盄ग़ ▸ Ӟਧᥝ蚎ڊ㮆Ո粬ᜋ Image from: https://en.wikipedia.org/wiki/Final_Fantasy_VII_Remake#/media/File:FFVIIRemake.png
53. HOW ABOUT YOU? 路
54. REFERENCE REACT NATIVE ▸ 獈槹 ▸ React Native Tutorial: Building Apps with JavaScript ▸ Navigating the React.JS Ecosystem
55. REFERENCE REACT NATIVE ▸ 蝱褩 ▸ Under the hood of React Native ▸ From React web to native mobile: mapping out the unknown unknowns | Brent Vatne | Reactive 2015