Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kudo Chien
December 12, 2015

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

@TechCCU 2015

Kudo Chien

December 12, 2015
Tweet

More Decks by Kudo Chien

Other Decks in Technology

Transcript

  1. github.com/Kudo . @kudochien . [email protected] ABOUT ME ▸ CCUCSIE 2002

    - 2008, BS + MS (GAIS Lab) ▸ CNA 2002 - 2008 ▸ Trend Micro, startups… ▸ ಑褾ૡ牧Ոኞ缏ப薹 Bugs ▸ 磧蜱ฎ Facebook 罭妟牧缏ப蝱 Facebook 牧ݢఠ Algorithm ䷱娞অ牧螭蝱犋݄ QQ ▸ ݝঅӞ螲娞聜 React Native 牧Ӟ螲媣媲വࣗ
  2. OUTLINE ▸ य़扖ૡ纷䒍ԏ᪠ ▸ React Native Օ奧 ▸ 犋Ӟ䰬ጱ React

    Native Օ奧 ▸ ౯ጱ React Native 䋊聜ԏ᪠ ▸ 奾
  3. य़扖ૡ纷䒍ԏ᪠ 磪Ӟ圵ૡ纷䒍 ▸PHP ▸Perl ▸Python ▸Ruby ▸C ▸C++ ▸HTML ▸CSS

    ▸jQuery ▸JavaScript ▸Java ▸Objective C ▸Swift Ջ讕᮷䨝
  4. REACT NATIVE Օ奧 硲Ԫฎ蝡讕樄তጱ ▸ @Scale 2014 - Facebook’s iOS

    Architecture https://www.youtube.com/watch?v=mLSeEoC6GjU
  5. REACT NATIVE Օ奧 硲Ԫฎ蝡讕樄তጱ ▸ Immutable data model ▸ Uni-direction

    data flow ▸ Component ▸ Declarative UI ▸ Flexbox
  6. 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
  7. 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 ԏ樌᪡㬵᪡݄ԧ
  8. REACT NATIVE Օ奧 REACT NATIVE ▸ Benefits from React ▸

    Virtual DOM ▸ state / props ▸ Integrate with flux implementations for uni-directional data flow ▸ API 墋㻌牧਻ฃ䋊聜 ▸ ݝฎӞ樄ত盄ग़盄褾ጱੜ䩚ᥜᥝ೪೪仡仡牧䨝蜢舚Ӟ讨
  9. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 TALK DRIVEN LEARNING ▸ JavaScript <->

    Native code Bridge ▸ React Native ጱ猻玊
  10. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫

    ▸ Q: ᥝ搚櫚矎کӮኴӤጱ犋ݶ㾴疑牧狶Ӟ㮆獊純玕ጱԪ禂牧֦ 磪Ջ讕ොဩ牫 ▸ A: ▸ 翄ӞӮኴ ▸ ಑蝢蝢᪠牧ℂӾ瓷䓻瞆搚کӮኴݱ瑿 ▸ کྯ㮆㾴疑戔缏硁讨
  11. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫

    ▸ Q: ᥝ狶Ӟ㮆᪜ଘݣጱ mobile development framework ֦䨝 ெ讕狶牫 ▸ A: ▸ ಩ Apple, Google, … ᮷揮ӥ㬵牧ݞ犢㮉蝢蝢硬አ֦ጱොୗ 樄咳 ▸ HTML5 ▸ Bridge for Native code
  12. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 Q: ᥝ狶Ӟ㮆᪜ଘݣጱ MOBILE DEVELOPMENT FRAMEWORK ֦䨝ெ讕狶牫

    ▸ ᮎ Transpiler 珌 ? ▸ J2ObjC ▸ Xcode support C++ ▸ Android NDK ▸ ֕犋螕ݳ UI 樄咳
  13. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 CROSS PLATFORM MOBILE DEVELOPMENT FRAMEWORK ▸

    PhoneGap ▸ HTML5 ▸ 傶Ո扑የጱ WebView performance ▸ Appcelerator Titanium ▸ React Native ▸ JS <-> Native bridge
  14. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸

    Ḓض牧಑蝢᪠犋ฎॡ櫞牧盄ग़᮷磪൉׀ ▸ JavascriptCore / V8 ▸ Chrome extension ▸ RPC ▸ ൉׀ጱොୗ犋क़Ԓ ▸ eval() ▸ event
  15. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸

    ֢傶Ӟ㮆 Framework 牧吚簁犋胼ݝ൉׀ eval() 妔ֵአᘏአࠩ ▸ IDL (Interface Description Language) ▸ MIDL for Windows COM/DCOM ▸ AIDL for Android ▸ JSON ▸ protobuf / Thrift
  16. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE UI


    event queue Native
 event queue JS event queue JSON IDL
  17. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸

    ெ讕 Export module/method ک JSON config ▸ iOS by Macro ▸ Android by Java Annotation
  18. 犋Ӟ䰬ጱ 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
  19. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 JAVASCRIPT <-> NATIVE CODE BRIDGE ▸

    Debugging JS mode ▸ Leverage Chrome Devtool ▸ V8
  20. 犋Ӟ䰬ጱ 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
  21. 犋Ӟ䰬ጱ REACT NATIVE Օ奧 REACT NATIVE ጱ猻玊 ▸ Ӟਧᥝ蟴 flux

    ▸ ፓ獮磧॥ redux ▸ 犋ᥝٚ൥ Fat Controller, MVC, MVP, MVVM, MVW ▸ Live Reload ▸ 犥盅ݢ胼䨝磪 Hot Reload ▸ 犋襑ᥝ᯿ build
  22. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ ٌ䋿犖಍獋㮆์ ▸ 櫒簁Ӟፗ盄磪岉蚕牧֕ฎ舚篷秚䨝䌃 mobile app ▸

    ፗک獋㮆์獮಍磪秚䨝Ᏻ mobile app ▸ 匍ࣁ蝱䁰盄蜢舚牧֕ฎ盄独஑盄磪蚕 ▸ 盄ग़ੜੜ褾褾ጱ䩚ᥜ牧盄੝෈կ ▸ ୿䕣ݢ犥蚤Ӯኴٌ犢ጱૡ纷䒍矑敍
  23. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ SOURCE CODE ኞ眲 ▸ ྯॠ᮷磪盄ग़ጱ commits

    ▸ 㬵ᛔक़ᶎጱ contributors ▸ 㬵ᛔ Facebook 獉蟂ጱ㹓ૡ ▸ ֕螭ฎྯॠ蚤Ӟӥ commits 㹧 ▸ Facebook keeps sync with internal repo Facebook internal repo github
  24. ౯ጱ REACT NATIVE 䋊聜ԏ᪠ GITHUB ኞ眲 ▸ GitHub issues 盄ग़

    ▸ ֕य़ग़᮷ฎ㺔㺔氂 ▸ 㺔㺔氂藶ک StackOverflow #react-native ▸ Feature Request 藶ک ProductPains ▸ 磪ጱ碻狡犋Ꭳ螇蝡ฎ㺔氂牧螭ฎ፥ጱ bug ▸ 磪ጱ碻狡ᥝ蝑 PR ֕犋Ꭳ螇 Facebook roadmap ฎ犋ฎӞ膌
  25. ౯ጱ 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
  26. 奾 ૡ纷䒍 ▸ QBQ ▸ 吚ૡ纷䒍牧֦፡憎獨Ո纷ୗ౲礍䯤盅ᶎጱ聅ԧ㻟 ? ▸ 吚戔懯䒍牧֦፡茐 UI

    蚤 Flow牧眤ݑکܻ獺吚碻మ蔭螈ጱ 藗穩ԧ㻟 ? ▸ 吚 PM牧֦ಧ茐Ո疑叨ߝጱۑ胼碻牧覿ఉک䌘ොܻ๜വ蝡㮆 ۑ胼碻牧ஞӾమጱᒽኼԧ㻟 ?
  27. REFERENCE REACT NATIVE ▸ 獈槹 ▸ React Native Tutorial: Building

    Apps with JavaScript ▸ Navigating the React.JS Ecosystem
  28. REFERENCE REACT NATIVE ▸ 蝱褩 ▸ Under the hood of

    React Native ▸ From React web to native mobile: mapping out the unknown unknowns | Brent Vatne | Reactive 2015