React Native Ignite

A presentation at React Native EU in September 2017 in Wrocław, Poland by Gant Laborde

Slide 1

Slide 1

/ /

G e t

R e a d y

i m p o r t

{

C o o l ,

S t u f f

}

f r o m

' r e a c t

n a t i v e '

Slide 2

Slide 2

T he Organizers T he Organizers

Slide 3

Slide 3

Slide 4

Slide 4

A.K.A. Chie f Technology S tr a tegis t Chie f Technology S tr a tegis t

Slide 5

Slide 5

'\x47'[0]+(![]+[])[+!+[]]+([]+[][[]])[+!+ []]+String.fromCharCode((2<<6)­12) J a v a Scrip t J a v a Scrip t

Slide 6

Slide 6

React Na tive React Na tive Lots and lots of React Native

Slide 7

Slide 7

https://github.com/GantMan/useless-things

Slide 8

Slide 8

I nfin i t e

R e d @GantLabor de @infinite_r ed

Slide 9

Slide 9

Ignite Ignite with React Na tive with React Na tive

�� �� @gantlabor de / #r eactfinland

Slide 10

Slide 10

� �

C oding Spectrum C oding Spectrum

Slide 11

Slide 11

Mobile Mobile de velopmen t de velopmen t w as w as ... ...

Slide 12

Slide 12

Wha t people think I did... Wha t people think I did...

Slide 13

Slide 13

Wha t web de v s used t o Wha t web de v s used t o think I do... think I do...

Slide 14

Slide 14

Wha t I used t o do... Wha t I used t o do...

Slide 15

Slide 15

Slide 16

Slide 16

$169,562.00 USD a year! $169,562.00 USD a year!

Slide 17

Slide 17

Slide 18

Slide 18

Slide 19

Slide 19

Slide 20

Slide 20

Befor e After Freedom! Freedom!

Slide 21

Slide 21

Slide 22

Slide 22

T he I n finite Red Team T he I n finite Red Team 26 people. 8 Cities.

Slide 23

Slide 23

Open S ource Open S ource Paying it forwar d in the community

Slide 24

Slide 24

Slide 25

Slide 25

? ?

Slide 26

Slide 26

Slide 27

Slide 27

Slide 28

Slide 28

�   � �   � Make it be tter? Make it be tter?

Slide 29

Slide 29

Andr oid? Andr oid?

Slide 30

Slide 30

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

� � LG TM! LG TM!

Slide 34

Slide 34

HELL O W ORLD ...

Slide 35

Slide 35

Slide 36

Slide 36

The JavaScript domain is too vast T o find a be tter solution, ask: T o find a be tter solution, ask: "Why is there a pr oblem? "Why is there a pr oblem?

Slide 37

Slide 37

Ignite Ignite Our appr oach to a pr oblem that ' s all too familiar.

Slide 38

Slide 38

Slide 39

Slide 39

Slide 40

Slide 40

We use this! We use this! This is ho w we deliver pr oducts

Slide 41

Slide 41

Yes, e ven Windo w s Yes, e ven Windo w s

Slide 42

Slide 42

Slide 43

Slide 43

J u s t K i d d i n g !

Slide 44

Slide 44

C an't C an't ca tapult? ca tapult? W e help you climb

Slide 45

Slide 45

M o d ul a r i t y M o d ul a r i t y Connecting Str angers

Slide 46

Slide 46

Slide 47

Slide 47

c o n s t

N P M _ M O D U L E _ N A M E

=

' r e a c t

n a t i v e

v e c t o r

i c o n s '

c o n s t

E X A M P L E _ F I L E

=

' v e c t o r E x a m p l e . j s . e j s '

/ * *

A d d

o u r s e l f

t o

t h e

p r o j e c t .

/

c o n s t

a d d

=

a s y n c

f u n c t i o n

( c o n t e x t )

{

c o n s t

{

i g n i t e

}

=

c o n t e x t

/ /

i n s t a l l

a

n p m

m o d u l e

a w a i t

i g n i t e . a d d M o d u l e ( N P M _ M O D U L E _ N A M E ,

{

v e r s i o n :

' 4 . 3 . 0 ' ,

l i n k :

t r u e

} )

/ /

c o p y

t h e

e x a m p l e

f i l e

( i f

e x a m p l e s

a r e

t u r n e d

o n )

a w a i t

i g n i t e . a d d P l u g i n C o m p o n e n t E x a m p l e ( E X A M P L E _ F I L E ,

{

t i t l e :

' V e c t o r

I c o n s '

} )

}

/ * *

R e m o v e

o u r s e l f

f r o m

t h e

p r o j e c t .

/

c o n s t

r e m o v e

=

a s y n c

f u n c t i o n

( c o n t e x t )

{

c o n s t

{

i g n i t e

}

=

c o n t e x t

/ /

r e m o v e

t h e

n p m

m o d u l e

a w a i t

i g n i t e . r e m o v e M o d u l e ( N P M _ M O D U L E _ N A M E ,

{

u n l i n k :

t r u e

} )

/ /

r e m o v e

t h e

c o m p o n e n t

e x a m p l e

a w a i t

i g n i t e . r e m o v e P l u g i n C o m p o n e n t E x a m p l e ( E X A M P L E _ F I L E )

}

/ * *

E x p o s e

a n

i g n i t e

p l u g i n

i n t e r f a c e .

/

m o d u l e . e x p o r t s

=

{

a d d ,

r e m o v e

}

Slide 48

Slide 48

Import the code

  Pr o vide an Example

  Pr o vide Gener ators T he T he "He y, c ould y ou "He y, c ould y ou

help me?" help me?" e xperience e xperience

Slide 49

Slide 49

� ♂  � ♂ 

An e x ample? An e x ample?

Slide 50

Slide 50

A fun, ne w way to send unique te xt-art to your friends

Favorite your most used te xtables for easy acces Te xtables Te xtables

Slide 51

Slide 51

Slide 52

Slide 52

https://github.com/O T GApps/T e xtables All the Original C ode All the Original C ode

Slide 53

Slide 53

� �

T hank y ou Ignite f or T hank y ou Ignite f or making such an making such an a wesome CLI a wesome CLI

Slide 54

Slide 54

Slide 55

Slide 55

@tillersystems

Slide 56

Slide 56

Slide 57

Slide 57

https://medium.com/r eact-finland/r eact- finland-app-what-is-it-and-ho w-we-built-it- 273b34144b69

Slide 58

Slide 58

Annnnnnd Another

Slide 59

Slide 59

https://github.com/infiniter ed/ChainReactApp C on ference App C on ference App

Slide 60

Slide 60

T ake T ha t! T ake T ha t!

Slide 61

Slide 61

More Video s A v ailable More Video s A v ailable youtube.com/infiniter ed

Slide 62

Slide 62

� �

T he F uture? T he F uture?

Slide 63

Slide 63

Storybook

  T ypeScript

  Solidarity

  MobX-State- T r ee

  Mor e Reactotr on Ignite B o w ser Ignite B o w ser

Slide 64

Slide 64

l i n t

s t a g e d  

Slide 65

Slide 65

W e can 't limit your plugins

  Each pr oject can have customizations

  Use your o wn boilerplate! Ignite Ec o s y s tem Ignite Ec o s y s tem

Slide 66

Slide 66

github.com/GeekyAnts/ignite-native-base-boilerplate

Slide 67

Slide 67

github.com/infiniter ed/ignite/blob/master/BOILERPLA TES.md

Slide 68

Slide 68

NEW Docs and Videos!

Slide 69

Slide 69

Another Confer ence App

Slide 70

Slide 70

What

a r e yo u

g o n n a

d o ? R e a s o n

B o i l e r pl a t e ? G r a phQL B o i l e r pl a t e ? L O L C a t s ?

Slide 71

Slide 71

S te ve Kellock S te ve Kellock Ke vin V angelder Ke vin V angelder Softwar e Engineer Senior Softwar e Engineer @k e vinvangelder @sk ellock Cindy Nguyen Cindy Nguyen J us tin Huske y J us tin Huske y Design Lead Designer @justinhusk e y Special T hank s t o: Special T hank s t o: @cindythuyvan

Slide 72

Slide 72

ReactNativeNe wsletter.com W an t More React Na tive? W an t More React Na tive?

Slide 73

Slide 73

https://github.com/ReactNativeNe ws/React-Native-Apps J us t w an t c ode? J us t w an t c ode?

Slide 74

Slide 74

C on ferences C on ferences

Slide 75

Slide 75

C on ferences C on ferences Discount code - FINLANDCR18

Slide 76

Slide 76

Learn More Learn More Join our Slack: community .infinite.r ed

  Read our Medium blog: shift.infinite.r ed

  T alk to me!  (medium/twitter/life)

Slide 77

Slide 77

T hank y ou, I n finite Red T hank y ou, I n finite Red T odd Werth T odd Werth Founder & CEO Ken Miller Ken Miller Founder & CFO/CT O @seriousk en J amon Holmgren J amon Holmgren Founder & C OO

@ twerth @ jamonholmgren

Slide 78

Slide 78

I n S umma tion I n S umma tion R e a c t N a tiv e

is

E a s y

( n o w) G iv e

I g n ite

a

T r y T we e t a t me

a n d

m y

b o s s e s R e a d

a b o u t R e a c t

N a t iv e

o n

M e d iu m R e a c tN a tiv e . c c

N e ws le t t e r J o in

o u r

C o mmu n it y !

Slide 79

Slide 79

C on tribut or s! C on tribut or s! https://github.com/infiniter ed/ignite 7 , 7 5 0 +

S t a r s

o n

G i t H u b � 8 7

C o n t r i bu t o r s A w e s o me f e e dba ck!

Slide 80

Slide 80

@GantLabor de T hank s, ReactFinland! T hank s, ReactFinland! Slides:   https://slides.com/gantlabor de/bo wser/