reactjs render anywhere?

24 Pages·2017·2.79 MB·English

by  Jan Västernäs

REACTJS RENDER
ANYWHERE?
STEPHEN WHITE
CADEC 2018.01.24 | CALLISTAENTERPRISE.SE
CADEC APP
INSTALL - EXPO
CODE
• https://github.com/callistaenterprise/cadec-2018-reactjs
AGENDA
• Multiple platforms
• Traditional methods
• Learn once write anywhere!
• Seperation of the dom - React Native
• Shared code
• Demo
• Conclusions
MULTIPLE PLATFORMS
• Multiple apps for each platform!
APP
Android
WEB
APP
IOS
APP
TRADITIONAL APPROACH
• One app to rule them all!
• One code base!
Android • One web team
• Skip the app store!
• Releases in realtime
APP • Dev team costs
WEB UIWebView/WKWebView
IOS
WE WANT 60FPS!!
• One app to rule them all, not quite…
• Slow
Android • Unresponsive
• Tech doesn’t reflect the
enormity of the device!
App
WEB
IOS
CADEC APP
INSTALL - EXPO
LEARN ONCE WRITE ANYWHERE
• What is react?
- Its a declarative way of visualising the state of your application.
- When the state changes the views update.
Android
A Component
export default ({ title, title2, date }) => ( IOS
<HeaderContainer>
<HeaderText>{title}</HeaderText> React renderer
<HeaderUnderSub>{title2}</HeaderUnderSub>
<HeaderUnderDate>{date}</HeaderUnderDate>
WEB
</HeaderContainer>
);
?
LEARN ONCE WRITE ANYWHERE
• What is react?
- Its a declarative way of visualising the state of your application.
- When the state changes the views update.
Android
A Component Renderers
REACT VR
export default ({ title, title2, date }) => ( IOS
REACT HARDWARE
<HeaderContainer>
<HeaderText>{title}</HeaderText> REACT NATIVE
<HeaderUnderSub>{title2}</HeaderUnderSub> REACT DOM
<HeaderUnderDate>{date}</HeaderUnderDate> REACT OSX
WEB
</HeaderContainer>
REACT WINDOWS
);
REACT BLESSED
?