a talk by Martijn walraven

1. Exploring the continuum
between Cordova and
React Native
Martijn Walraven
Core Developer, Meteor Development Group

3. M E T E O R : F U L L S T A C K J A V A S C R I P T
App Microservices
FRAMEWORK
Blaze
Livequery
Client Data Cache
DB REST SOAP
App Components & Logic
React Angular
SERVER
CLIENT
SOURCES
DDP
MobileWeb
Universal JavaScript
The same code runs from the client to the cloud, from packages
to database APIs. The same code runs cross browsers and
mobile devices via Meteor's unified build system.
Reactive Rendering
Client GUI components provide the look, feel and response of a
thick client app using any combination of React, Angular, or
Blaze.
Optimistic UI
Meteor presents 'Data-on-the-wire' with latency compensation
and conflict resolution built-in. When data changes, updates
propagate reliably to affected clients and users’ screens update
via Livequery, full stack DB drivers and mini database sources.
Websocket Microservices
Meteor's Distributed Data Protocol (DDP) provides 'REST for
Websockets', a standard protocol for delivering microservice
APIs over Websockets that push data from the cloud to live-
updating clients.

4. • Only downloads changed assets
• Detects faulty JavaScript and rolls back to the last known good version
• Blocks updates when the platforms or plugins have changed
Hot Code Push in Meteor 1.3

5. W H Y C O R D O V A ?

6. Product teams, not
technology teams

7. Learn once, write anywhere

8. Responsive design is for
web sites, not for apps

9. You’ll probably need a
mobile UI framework

10. Composable user interfaces
React Angular

12. Raise the level of abstraction
from HTML/CSS
to declarative components

13. class Story extends React.Component {
render() {
const story = this.props.story;
return (
<Card>
<ProfilePicture user={story.author} />
<span>{story.author.name}</span>
<span>{story.body}</span>
<CommentList comments={story.comments} />
</Card>
);
}
}

14. <ProfilePicture>
<Card>
<CommentList>
<div>
<span>
<img>
<span>
<div> <Comment>
<div>
story.author.name
story.body

15. DOM independence

16. React Native
Bringing modern web
techniques to mobile

17. Web View Plugins
JavaScript-native bridge
Native App
Application code
(HTML, CSS, and
JavaScript)
Native code
C O R D O V A

18. JavaScript context Native UI components
JavaScript-native bridge
Native App
Application code
(JavaScript)
Native code
R E A C T N A T I V E

19. iOS

20. 85%
code reuse
Android

21. <ProfilePicture>
<Card>
<CommentList>
<View>
<Text>
<Image>
<Text>
<View> <Comment>
<View>
story.author.name
story.body

22. https://github.com/necolas/react-native-web

23. https://github.com/axemclion/react-native-cordova-plugin

24. Microsoft’s Project Ace:
https://github.com/Microsoft/ace

25. Thank you
@martijnwalraven