building salesforce1 communities apps with react native and flux
TRANSCRIPT
Building Salesforce Communities
Apps with React Native & Flux
Joseph Ferraro @joeferraro
David Helmer @kidtsunami
Joseph FerraroCTO, Mavens Consulting
@joeferraro
David HelmerTechnical Architect, Mavens Consulting
@kidtsunami
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
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?
React Native
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
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
Demo
Flux Application Architecture
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
Scaling MVC Architecture
View
Model
Action
Model
Controller
Model
View View ViewView
Action Action
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
Architecture Overview
Action Dispatcher Store View
Action
Demo
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?
Thank you