Building Salesforce1 Communities Apps with React Native and Flux
1 like1,558 views
The document discusses building Salesforce community apps using React Native and Flux, highlighting their functionalities and advantages. It explains React Native as an open-source framework for mobile app development and Flux as an architecture for scaling applications efficiently. The presentation emphasizes seamless integration of React Native and Flux for enhancing customer experiences in app development.
Building Salesforce1 Communities Apps with React Native and Flux
- 1. Building Salesforce Communities Apps with React Native & Flux Joseph Ferraro @joeferraro David Helmer @kidtsunami
- 2. Joseph Ferraro CTO, Mavens Consulting @joeferraro
- 3. David Helmer Technical Architect, Mavens Consulting @kidtsunami
- 4. About Mavens Consulting Preferred Healthcare & Life Sciences implementation partner for salesforce.com and Veeva 50+ Salesforce1 & Heroku consultants located across North America and Europe 12 Mavens in attendance at #Dreamforce15, speaking in 8 different technical sessions #mavensDF15
- 5. Agenda React Native • What is it? • Platform support • Componentry • Code • Demo Flux Application Architecture • What is it? • How it’s different from MVC • Code • Demo Questions?
- 6. React Native
- 7. React Native Open source JavaScript framework from Facebook for building native mobile apps React • Javascript library for building User Interfaces • Just the UI React Native • Supports iOS today - Android support coming soon • “Learn once, write anywhere” • Component-driven (JSX) • Native performance
- 8. React Native Componentry Native components • UITabBar → TabBarIOS • UINavigationController → NavigatorIOS Native bindings (Objective-C) • RCT_EXPORT_MODULE • RCT_EXPORT_METHOD Flexbox styling ECMAScript 6 & 7 capabilities via Babel UITableView UITabBar UINavigationBar
- 9. Demo
- 11. Traditional MVC Architecture Application architecture comprised of 3 major parts • Model – data/state store • View – interacts with controller • Controller – responds to view, informs model Recent JavaScript frameworks have re-framed as MV* (Model View Anything) which can become problematic • Difficult to scale View Model Action Controller
- 12. Scaling MVC Architecture View Model Action Model Controller Model View View ViewView Action Action
- 13. Flux Application Architecture Pattern (not a framework) for building client-side web applications • Introduced as a response to struggles scaling MVC apps Three main components • Dispatcher • Stores • Views Unidirectional data flow Action Dispatcher Store View
- 14. Architecture Overview Action Dispatcher Store View Action
- 15. Demo
- 16. Summary React Native • Open source • Really fast • JavaScript! Flux architecture • Addresses difficulty when scaling MVC apps • Not a requirement for building RN apps, but certainly encouraged! Communities • Super simple to integrate RN + Flux • Delivers great customer experience Questions?
- 17. Thank you