JakartaJS 24・1・2018
Alfian Busyro (Aru)
9+ years (Salary-man)
iOS Developer
Past
Present
Developer MasterClass Trainer
Consultant
Mobile App Developer
Min: Jo, Kenapa aplikasi kita lemot ?
Jo: Karena kita pakai React Native
cross platform layout engine
https://facebook.github.io/yoga/
React Native is Fast
shouldComponentUpdate(nextProps, nextState) {
return (
(!isEqual(this.props.a, nextProps.a)) ||
(!isEqual(this.state.data, nextState.data))
)
}
Don't compare:
// From
export default class AwesomeComponent extends React.Component {
// To
export default class AwesomeComponent extends React.PureComponent {
Don't :
class MyComponent extends React.PureComponent {
render() {
return this.props.data.map((item, i) => {
return <Text key={item.id}>{item.title}</Text>
});
}
}
export default class AwesomeComponent extends Component {
glamorousAsyncProcess() {
// redux action that remains forever
}
constructor() {
super()
// don't
glamorousAsyncProcess()
}
componentWillMount() {
// don't
glamorousAsyncProcess()
}
async populateUser() {
// populate 1M Users
await this.props.populateMillionUsers()
}
render() {
//don't
populateUser()
return(
<View>
<Text>
Hello World! with heavy process on the back
</Text>
</View>
)
}
}
class AwesomeComponent extends Component {
glamorousAsyncProcess() {
// redux action that remains forever
}
constructor() {
super()
this.viewContacts = this.viewContacts.bind(this)
}
componentDidMount() {
// do
glamorousAsyncProcess()
}
viewContacts() {
// Show Contact List
}
render() {
return(
<View>
<Text>
Hello World! with heavy process on the back
</Text>
<TouchableOpacity onPress={this.viewContacts} >
<Text>Press Me!</Text>
</TouchableOpacity>
</View>
)
}
}
Advantages:
Common issue:
Advantages:
Common issue:
Goal: deferred process until the next paint on JS Thread
https://github.com/corbt/next-frame
import nextFrame from 'next-frame';
// ...
for (let recording of recordingsJSON) {
await nextFrame(); // This is all we need to add!
mergeRecordingToLocalDatabase(recording);
}
let setDefaultAddressInRedux = async () => {
await nextFrame()
setTimeout(() => {
self.props.setDefaultAddressInRedux(selectedDefaultAddress)
}, 0)
}
setDefaultAddressInRedux()
https://github.com/maicki/why-did-you-update
Best: 60 FPS (Apple)
alfian@payfazz.com / arufian703@gmail.com
arufian_b
Inquiry