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