how to push a react js application in production and sleep better

How to push a ReactJS application in production and sleep betterEmanuele Rampichini Application Engineer @spreaker

So, you are building a large ReactJS single page application...

2

● Do you need it?

● Are you sure?

● 100% Sure?

● I’m gonna ask it again...

● ARE YOU SURE?

SINGLE PAGE APPLICATIONS ARE COMPLEX

3

PnP® APPROACH

4

TESTING AND MONITORING TO THE RESCUE

5

Monitor your ReactJS application in production

Monitoring your application in production is crucial even if you don’t write tests. The good news is that nowadays is quite easy

6

● https://sentry.io

● https://newrelic.com

● https://trackjs.com

WHAT ABOUTTESTING?

8

Let’s start by defining some testing concepts...

Test families ordered from the cheapest to the most expensive one.

Cost is a mix of write difficulty, execution time, and maintenance effort requested.

9

● Unit Tests

● Integration Tests (or midway)

● End 2 End Tests

● Manual Tests

LET’S SEE HOW TO FIT THIS INSIDE AREACT + REDUX APP

Useful tools to do unit testing in ReactJs

11

● https://karma-runner.github.io/1.0/index.html

● http://jasmine.github.io/

● http://phantomjs.org/

● Look for Karma + Webpack + PhantomJS on google and you are gonna find a lot of tutorials to create your setup.

Unit testing a reducer function is a piece of cake... really!

We are just testing pure functions (without side effects) in the form:

(State, Action) => State

These tests are very good to ensure correctness of your state mutation logic.

12

Unit testing components rendering

Given some props we want to ensure the correctness of the rendered output.

15

● https://facebook.github.io/react/docs/test-utils.html

● Shallow Renderer

● https://github.com/sheepsteak/react-shallow-testutils

● https://github.com/airbnb/enzyme

Unit testing components behaviour

We want to ensure that when something happens on our component (lifecycle callbacks, clicks etc...) the right action get dispatched to our store.

21

● http://jasmine.github.io/2.0/introduction.html#section-Spies

● Lifecycle: getMountedInstance()

● UI interaction: getOutput()

Unit testing middlewares and rich actions (thunk)

We want to ensure that a rich action dispatches the right simple actions in the right order to our store when some preconditions are met.

24

● https://github.com/arnaudbenard/redux-mock-store

● http://jasmine.github.io/2.0/introduction.html#section-Spies

Midway testing

We want to test components only mocking things at the lower level in our architecture (ex. xhr request). Every other piece is gonna be the real application code.

27

● https://github.com/jasmine/jasmine-ajax

● Setup can be tricky, ensures that all the pieces are working well together.

End 2 End testing with protractor

In that case we want to interact directly with our application, we ignore completely the fact that we are testing a reactJS app. These tests are quite slow to run, hard to maintain and they require full control of your backend data.

28

● http://www.protractortest.org/

● Expected Conditions

● browser.ignoreSynchronization=true

Manual testing on multiple devices

These test are the most expensive ones, still they are crucial. Be sure to have as many real devices as you can. Here are some tips:

29

● Build your own device wall

● Have a staging environment that maps 1:1 the production one and do internal testing.

● Adopt canary deployment strategies

IT’S NOT HUGE BUT WE BUILT IT...

30

A LOT OF TESTS TO WRITE AND TO MAINTAIN… NOT A LOT OF TIME 31

▫ It’s OK not to test everything

▫ At first you are gonna be super slow, then you are gonna improve. Training is crucial.

▫ If you don’t have time to implement tests just take some to write test definitions and mark them as skipped. You can add coverage when you have slack time. (xdescribe, xit )

P.S. WE ARE HIRING,IF YOU ARE INTERESTED OR YOU JUST WANT A T-SHIRT JUST PING ME

Thanks. EMANUELE RAMPICHINI

APPLICATION ENGINEER @spreaker

Get It Touch

emanuele.rampichini@spreaker.com

@emanuele_r