Facebook for Developers

Facebook Platform
Developer Training
PUWANDI M ADITYO PRATOMO
Head of Technology Froyo Story Chief Academic Froyo Framework

Download slide https://goo.gl/Sg7S67

Hi, I’m Didit. Hi, I’m Purwandi.
I mostly develop I mostly develop
hardware, game web application,and
and interactive love containers
graphics. technology.

didit@froyo.co.id purwandi@froyo.co.id
Please tell us about you

- Your name?
- OS
- Which Progaming Language
- NodeJs , NPM
- ReactJs & React Native
https://www.facebook.com/groups/DevCJakarta/
Topics
1. ReactJs
2. React Native
3. Facebook Analytics
JavaScript

● Dynamic programming language

● It can manipulate CSS and HTML
attributes
● Can change the content and the way
things look in a web page when a user
interacts with it
JS Refresh: variable
var foo;
JS Refresh: integer variable
var foo = 1;
JS Refresh: String variable
var foo = ‘My name’;
JS Refresh: array of string
var foo = [‘London’, ‘Jakarta’];
JS Refresh: object
var foo = {

city: ‘Jakarta Selatan’,

Country: ‘Indonesia’

};
var foo = <div>Hello World</div>;
JSX
var foo = <div>Hello World</div>
ES6 Class

var Motor = function () { class Motor {

this.run = function () { run () {
console.log('Gassssssss!!') console.log('Gassssssss!!')
} }
} }

let Yamaha = new Motor() let Yamaha = new Motor()

Yamaha.run(); // Gassssssss Yamaha.run(); // Gassssssss
Arrow Function

var hello = function (name) { var hello = (name) => {

console.log('Hello ' + name); console.log('Hello ' + name);
} }

hello (‘Gunadarma’); hello (‘Gunadarma’);

Advantages JavaScript Frameworks

EFFICIENT SECURITY COST

JavaScript Framework
Based on Github Stars
What is ReactJS?
https://code.facebook.com/projects/176988925806765/react/
https://reactjs.org/

● Open source JavaScript library (not a

framework) to create UI component
● Only for building user interfaces not
concerned with issues unrelated to UI
● Not opinionated about your overall
application architecture

Template syntax like HTML, but

provides full power of
JavaScript.
Why React?
- “We built React to solve one problem: building large applications with data
that changes over time”
- React uses Virtual DOM, so that only necessary object is rendered according
to data that may arrive asynchronously
- Philosophy: UIs as functions. Call them with data, and get rendered views
predictably
- Bonus: component based architecture → easier to maintain front end
component of a large scale application
Hello World
DOM Manipulation

● JS and HTML interop via

DOM Manipulation
● A script in JS access a
certain DOM and then
change what’s inside of
that DOM
● This is slow and
inefficient
● A solution is to use
Virtual DOM
Virtual DOM
● In React, for every DOM object,
there is a corresponding "virtual
DOM object."
● A virtual DOM object is a
representation of a DOM object
● Update a view inside a DOM tree
whenever a state is changed
● Manipulating the virtual DOM is
much faster, because nothing gets
drawn onscreen
Virtual DOM
● The entire virtual DOM gets updated.
● The virtual DOM gets compared to
what it looked like before you updated
it. React figures out which objects have
changed. → Diffing algorithm
● The changed objects, and the changed
objects only, get updated on the real
DOM.
● Changes on the real DOM cause the
screen to change.
One Way Data Binding

● all data flows in one direction,

down from parent to children
● code is easier because the
DOM just reflects application
state
ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
We will cover
● JSX
● Components
● Props
● States
● Lifecycle
● Events
ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
JSX
● JSX stands for JavaScript XML
● Imagine this as writing HTML inside JS
● Makes HTML easy to understand
● It is robust
● Boosts up the JavaScript performance
var AppComponent = React.createClass({
render: function () { REGULAR JSX
return (
<div>
Hello world!! JSX NESTED ELEMENTS
</div>
)
}
ATTRIBUTES
});
multiple element

var AppComponent = React.createClass({

render: function () { EXPRESSION

return <div>Hello world!!</div>;

}
});
single element
 REGULAR JSX

var AppComponent = React.createClass({

render: function () { JSX NESTED
ELEMENTS
return (
<div>
<h1>Title</h1>
ATTRIBUTES
<p>Lorem builder</p>
</div>
)
} EXPRESSION
});
 REGULAR JSX

var style = { backgroundColor: 'red' };

var AppComponent = React.createClass({
render: function () { JSX NESTED ELEMENTS
return (
<div style={styles} className="MyClassComponent">
<h1>Title</h1>
<p>Lorem builder</p> ATTRIBUTES
</div>
)
}
});
EXPRESSION
 REGULAR JSX

var AppComponent = React.createClass({

render: function () { JSX NESTED ELEMENTS
return (
<div>{ 2 + 3 }</div>
)
} ATTRIBUTES
});

EXPRESSION
ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
Components
Components
Component 1
Component 3

Component 2
Components
● Everything is component
● Each component returns a DOM Object ( render function )
● It splits the UI into independent reusable pieces
● Each independent pieces is processed separately ( scoped )
● It can refer other components in output
● It can be further split into smaller components
Example React Component
<app></app>

<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script>
var Hello = React.createClass({
render: function () {
return React.createElement('p', null, 'Hello world');
}
});
var App = React.createClass({
render: function() {
return React.createElement("div", null,
React.createElement('h1', {}, 'App Text'),
React.createElement(Hello, {}, '')
);
},
});
ReactDOM.render(React.createElement(App), document.querySelector("app"));
</script>
ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
Props
var AppComponent = React.createClass({ ● Communication from parent to child components
propTypes: { ● It can be done by using attributes values, and/or
name: React.PropTypes.string,
callback function
age: React.PropTypes.number
● Callback function allows to the child component to
},
communicate back to the parents
getDefaultProps: function() {
return {
name: 'Hasan',
age: 28 AVAILABLE VALIDATION PROPS
}
},
- array - bool
render: function () {
return (
- nunc - number
<div> - object - string
<h1>Name : {this.props.name}</h1> - node - element
<p>Age: {this.props.age}</p>
</div>
)
}
});

ReactDOM.render(<AppComponent name=”Purwandi” age={23} />, document.getElementById(‘app’));

ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
 props

States components

props props
● Heart of react components
components components
● Must be kept as simple as possible state state
● Determines components rendering props props
behaviour
components components
● The way to create dynamics and
state state
interactive components props
● Every UI component, reflects the
app state components
state
Example state
class App extends React.Components {
constructor (props) {
super (props)
this.state = {
counter: 1
}
}
render () {
return (
<div>
<button onClick={this.setState({counter: this.state.counter++})}>
Increment
</button>
{this.state.counter} // 1, 2, 3, 4, 5
</div>
)
}
}
ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
Lifecycle
UNMOUNTING PHASE INITIAL PHASE

● There are special event handlers

that are called at various points in
component life
● Code can be added to them to
perform various tasks
● They are invoked in predictable
order PROPS CHANGE
PHASE
UPDATING

● Entire lifecycle is divided into 4

phases
Initial Phase

UNMOUNTING PHASE INITIAL PHASE

getDefaultProps()
getInitialState()
componentWillMount()
render()
componentDidMount

PROPS CHANGE PHASE UDATING PHASE

Updating Phase

UNMOUNTING PHASE INITIAL PHASE

PROPS CHANGE PHASE UDATING PHASE

shoudComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Props Change Phase

UNMOUNTING PHASE INITIAL PHASE

PROPS CHANGE PHASE UDATING PHASE

componentWillReceiveProps()
sholdComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
Unmounting Phase

UNMOUNTING PHASE INITIAL PHASE

ComponentWillUnMount()

PROPS CHANGE PHASE UDATING PHASE

ReactJs Fundamentals / Framework Js
JSX Props Lifecycle Refs Router

1 2 3 4 5 6 7 8 9 10

Components States Events Keys Centralized

State
Events
● Events pass event arguments to the event
handler
● Whenever an event is specified in JSX, a
synthetic event is generated
● This synthetic event wrap up the browser
native event are passed as argument to
the event handler
● React events are named using
camelCase
HTML REACT
<button onclick=”activateLasers()”> <button onClick=”{activateLasers}”>
Activate Lasers Activate Lasers
</button> </button>

<a href="#" onclick="console.log('The link function ActionLink() {

was clicked.'); return false"> function handleClick(e) {
Click me e.preventDefault();
</a> console.log('The link was clicked.');
}

return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}
Passing Argument in Event Handler
class LoggingButton extends React.Component {
handleClick(something) {
console.log('this is:' + something);
}

render() {
// This syntax ensures `this` is bound within handleClick
return (
<button onClick={(e) => this.handleClick(‘Event click’)}>
Click me
</button>
);
}
}
Lab Time
$ npm install -g create-react-app
$ create-react-app my-app

$ cd my-app
$ npm start

Follow instructions
https://gitlab.com/froyo-framework/facebook-react/blob/master/my-app/lab.md

You can see the source code at :

https://gitlab.com/froyo-framework/facebook-react/tree/master/my-app
What is React Native
● A framework for building native ios, android Native App
and windows apps with JavaScript and React Native Library
ReactJs for bind JSX to
○ IOC Cocoa Touch JavaScript Engine
○ Android UI
ReactJs
● Officially announced by Facebook in 2015
● Not “write once, run everywhere” React Native Js
Library
● More like “learn once, write everywhere”
● React native wrap existing UI controls Your App Code
A Brief History of React Native
● March 2015, announced at F8, iOS only
● September 2015, introduces Android support
● April 2016, announced at F8, Microsoft added Universal
WIndows Platform support to React Native
What does the development environment look like?
● node, npm, yarn
● android studio
● android 6 (Marshmallow) SDK
● an android device or the simulator
● a JavaScript IDE
● OpenSSL
UI Component Library
Activity Indicator Picker Toucheable ActionSheet
ToucheableOpacit
Date Picker ScollView Alert
y
Toucheable
Image Slider Border
Highlight
Toucheable
ListView TabBar StatusBarIOS
WithoutFeedback
MapView Text View

Navigator TextInput WebView CameraRoll

REACTJS REACT NATIVE

const CartComponent = (props) => { const CartComponent = (props) => {

<div>
<span>Omid Nikrah</span>
<img src="http://sssss.com/me.png" />
<input type="text" value="My age" />
</div>
} }
<View>
<Text>Omid Nikrah</Text>
<Image source={require('./assets/me.png)} />
<TextInput value="My age" />
</View>
Getting started
create-react-native-app react-native-cli

● Easy to start ● Prepare env

● Includes batteries ● Batteries
● Native code ● Native code
Getting Started
$ npm install -g create-react-native-app ( we will cover using expo )
$ npm install -g exp
$ create-react-native-app reactTraining

$ cd reactTraining
$ npm start

You can see the source code at :

https://gitlab.com/froyo-framework/facebook-react/tree/master/myReact
Build file
Build result
Creating Mobile App using
React Native is fun and more
productive
Creating Mobile App using
React Native is fun

Before

You meet native code

Debugging Device
● Reload
● Stop Remote JS Debugging
● Enable live reload
● Start systrace
● Enable hot reloading
● Show inspector
● Show perf monitor
ERROR WARNING
Debug Inside Async

1. Set breakpoint
2. Highlight variable
3. Start inspecting
Sudo npm install -g react-devtools

1. react-native run-android/run-ios
2. react-devtools
Reactotron

https://github.com/infinitered/reactotron
Introducing Facebook Analytics
● Build better experiences
● Get valuable insight automatically
● Re-engage and grow your audience
What makes Facebook Analytics unique
● Deep, rich demographics data
● Accurate because it’s based on
Facebook Profile
● Included by default and
automatically available
● No dependence on Facebook
Login
The Facebook Analytics value proposition
● Aggregated demographic from Facebook
● Support for mobile, web, Messenger, Pages & physical stores
● Integrated with Facebook Ads tools
● Free to use
○ Products that offer all of these features are not usually free
○ Other free products don’t offer all of these advanced features
● Not only for Facebook insights
● Does not require Facebook login
Include the Facebook SDK for JavaScript
window.fbAsyncInit = function() { (function(d, s, id){
FB.init({ var js, fjs = d.getElementsByTagName(s)[0];
appId : '{your-app-id}', if (d.getElementById(id)) {return;}
xfbml : true, js = d.createElement(s); js.id = id;
version : 'v2.10' js.src = "https://connect.facebook.net/en_US/sdk.js";
}); fjs.parentNode.insertBefore(js, fjs);
FB.AppEvents.logPageView(); }(document, 'script', 'facebook-jssdk'));
};
See result in the Dashboard
Thank You