Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
https://www.linkedin.com/in/colinyoung10/https://www.linkedin.com/in/tyson-kunovsky-3922a341
Code	Sharing	Between	React	We...
Lambda	Consulting
• Chicago	based	software	consultancy	that	does	web/app/desktop	dev	
for	both	enterprise	and	startup	clie...
The	Problem
• Our	client	needed	a	complex	multi	platform	application	(iOS,	Android,	
Web,	Tablet,	Desktop)	for	constructio...
The	Solution
• Use	modern	JS	tools	and	techniques	(i.e.	React	Native	Web,	
HOC’s...etc)	in	order	to	share	code	between	pla...
Article	On	Sharing	Code ‘Este’	Framework
API	– Configuration	Files
Dynamically	Select	Actions	To	Dispatch
FE	Project	Structure
How	The	App	Is	Bootstrapped	For	Web
Continued…
Safety	Observation
Universal	and	Common	Components
We	aliased	react-native-web	to	react-web	in	our	Webpack config
@universal	(i.e.	native)	Components
Common	Components
Higher	Order	Components	(HOC’s)
HOC’s	In	Practice
How	Styling	Works	- stylesKeys
Applying	Styles	From	stylesKeys
In	Closing
• Use	HOC’s	as	connected	components	to	massage	props	and	pass	
down	data	into	child	components	since	they	are	p...
Mobile	(React	Native/Expo)
Developing	in	Expo
This	is	the	config
being	loaded
(exp.json),
then	app	logs
Starts	on	all	devices	and	simulators	
(use	Ge...
publish-on-expo-<env>	branches
Expo	Publishing
● Hosted	on	their	server
● Private	and	“wrapped”	in	a	Play	Store/iTunes	Sto...
“Nuts”	server
Github	releases
Publishing	Electron
Auto-updates
react-
native-web
<View>		=	<div>
<Text> =	<span>
Gotchas
No	SCSS
for	you base
native
ios
(But	you	can	cascade	styles)
Gotchas
Performance
is	harder	to	profile
- You	have	to	be	more	proactive
- Doesn’t	always	differ	uniformly
iOS
Android	
(?!!?!)
Go...
Tests
Sharing	code	for:
Unit	tests:	Easy-peasy	(use	utils	in	components!)
Functional	tests:	harder
Integration:	Oh	god
Got...
Code Sharing Between React Web and React Native Applications
Prochain SlideShare
Chargement dans…5
×

sur

Code Sharing Between React Web and React Native Applications Slide 1 Code Sharing Between React Web and React Native Applications Slide 2 Code Sharing Between React Web and React Native Applications Slide 3 Code Sharing Between React Web and React Native Applications Slide 4 Code Sharing Between React Web and React Native Applications Slide 5 Code Sharing Between React Web and React Native Applications Slide 6 Code Sharing Between React Web and React Native Applications Slide 7 Code Sharing Between React Web and React Native Applications Slide 8 Code Sharing Between React Web and React Native Applications Slide 9 Code Sharing Between React Web and React Native Applications Slide 10 Code Sharing Between React Web and React Native Applications Slide 11 Code Sharing Between React Web and React Native Applications Slide 12 Code Sharing Between React Web and React Native Applications Slide 13 Code Sharing Between React Web and React Native Applications Slide 14 Code Sharing Between React Web and React Native Applications Slide 15 Code Sharing Between React Web and React Native Applications Slide 16 Code Sharing Between React Web and React Native Applications Slide 17 Code Sharing Between React Web and React Native Applications Slide 18 Code Sharing Between React Web and React Native Applications Slide 19 Code Sharing Between React Web and React Native Applications Slide 20 Code Sharing Between React Web and React Native Applications Slide 21 Code Sharing Between React Web and React Native Applications Slide 22 Code Sharing Between React Web and React Native Applications Slide 23 Code Sharing Between React Web and React Native Applications Slide 24 Code Sharing Between React Web and React Native Applications Slide 25 Code Sharing Between React Web and React Native Applications Slide 26 Code Sharing Between React Web and React Native Applications Slide 27 Code Sharing Between React Web and React Native Applications Slide 28 Code Sharing Between React Web and React Native Applications Slide 29
Prochain SlideShare
What to Upload to SlideShare
Suivant
Télécharger pour lire hors ligne et voir en mode plein écran

0 j’aime

Partager

Télécharger pour lire hors ligne

Code Sharing Between React Web and React Native Applications

Télécharger pour lire hors ligne

https://www.youtube.com/watch?v=cmRtKpNP8WA

In this talk we will explore how the Lambda Consulting team was able to achieve close to 70% code reusability in a complex React + Redux application between web/mobile/tablet through the use of shared reducers, utility functions, higher order components, dynamic requires, Expo, and react native for web. Along the way there were many potential pitfalls and gotchas so we hope that our experiences will serve as a good starting place for anyone who is looking to share code between web and mobile applications.

www.lambdaconsulting.co

Presenters: Colin Young and Tyson Kunovsky

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir
  • Soyez le premier à aimer ceci

Code Sharing Between React Web and React Native Applications

  1. 1. https://www.linkedin.com/in/colinyoung10/https://www.linkedin.com/in/tyson-kunovsky-3922a341 Code Sharing Between React Web And React Native Applications
  2. 2. Lambda Consulting • Chicago based software consultancy that does web/app/desktop dev for both enterprise and startup clients. • We create our own SAAS products that we sell to enterprise clients around town. • lambdaconsulting.co
  3. 3. The Problem • Our client needed a complex multi platform application (iOS, Android, Web, Tablet, Desktop) for construction workers to track information in the field. • App needed to be highly configurable by company and by role. • Needed to be optimized for construction worker’s excavator sized thumbs with 100px click targets.
  4. 4. The Solution • Use modern JS tools and techniques (i.e. React Native Web, HOC’s...etc) in order to share code between platforms • All configuration lives on the client (a ‘CMS’ for modules) • Front end simply renders the configuration
  5. 5. Article On Sharing Code ‘Este’ Framework
  6. 6. API – Configuration Files
  7. 7. Dynamically Select Actions To Dispatch
  8. 8. FE Project Structure
  9. 9. How The App Is Bootstrapped For Web
  10. 10. Continued…
  11. 11. Safety Observation
  12. 12. Universal and Common Components
  13. 13. We aliased react-native-web to react-web in our Webpack config @universal (i.e. native) Components
  14. 14. Common Components
  15. 15. Higher Order Components (HOC’s)
  16. 16. HOC’s In Practice
  17. 17. How Styling Works - stylesKeys
  18. 18. Applying Styles From stylesKeys
  19. 19. In Closing • Use HOC’s as connected components to massage props and pass down data into child components since they are platform agnostic. • API configuration for modules • Front end just renders the module configuration • Use common components written in react-native-web to share code
  20. 20. Mobile (React Native/Expo)
  21. 21. Developing in Expo This is the config being loaded (exp.json), then app logs Starts on all devices and simulators (use Genymotion for the love of god) XDE Easy handoff to QA
  22. 22. publish-on-expo-<env> branches Expo Publishing ● Hosted on their server ● Private and “wrapped” in a Play Store/iTunes Store App
  23. 23. “Nuts” server Github releases Publishing Electron Auto-updates
  24. 24. react- native-web <View> = <div> <Text> = <span>
  25. 25. Gotchas
  26. 26. No SCSS for you base native ios (But you can cascade styles) Gotchas
  27. 27. Performance is harder to profile - You have to be more proactive - Doesn’t always differ uniformly iOS Android (?!!?!) Gotchas
  28. 28. Tests Sharing code for: Unit tests: Easy-peasy (use utils in components!) Functional tests: harder Integration: Oh god Gotchas

https://www.youtube.com/watch?v=cmRtKpNP8WA In this talk we will explore how the Lambda Consulting team was able to achieve close to 70% code reusability in a complex React + Redux application between web/mobile/tablet through the use of shared reducers, utility functions, higher order components, dynamic requires, Expo, and react native for web. Along the way there were many potential pitfalls and gotchas so we hope that our experiences will serve as a good starting place for anyone who is looking to share code between web and mobile applications. www.lambdaconsulting.co Presenters: Colin Young and Tyson Kunovsky

Vues

Nombre de vues

304

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

4

Actions

Téléchargements

5

Partages

0

Commentaires

0

Mentions J'aime

0

×