How to push a react js application in production and sleep better
-
Upload
emanuele-rampichini -
Category
Software
-
view
500 -
download
0
Transcript of How to push a react js application in production and sleep better
![Page 1: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/1.jpg)
How to push a ReactJS application in production and sleep betterEmanuele Rampichini Application Engineer @spreaker
![Page 2: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/2.jpg)
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?
![Page 3: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/3.jpg)
SINGLE PAGE APPLICATIONS ARE COMPLEX
3
![Page 4: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/4.jpg)
PnP® APPROACH
4
![Page 5: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/5.jpg)
TESTING AND MONITORING TO THE RESCUE
5
![Page 6: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/6.jpg)
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
![Page 7: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/7.jpg)
![Page 8: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/8.jpg)
WHAT ABOUTTESTING?
8
![Page 9: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/9.jpg)
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
![Page 10: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/10.jpg)
LET’S SEE HOW TO FIT THIS INSIDE AREACT + REDUX APP
![Page 11: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/11.jpg)
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.
![Page 12: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/12.jpg)
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
![Page 13: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/13.jpg)
![Page 14: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/14.jpg)
![Page 15: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/15.jpg)
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
![Page 16: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/16.jpg)
![Page 17: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/17.jpg)
![Page 18: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/18.jpg)
![Page 19: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/19.jpg)
![Page 20: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/20.jpg)
![Page 21: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/21.jpg)
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()
![Page 22: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/22.jpg)
![Page 23: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/23.jpg)
![Page 24: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/24.jpg)
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
![Page 25: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/25.jpg)
![Page 26: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/26.jpg)
![Page 27: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/27.jpg)
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.
![Page 28: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/28.jpg)
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
![Page 29: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/29.jpg)
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
![Page 30: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/30.jpg)
IT’S NOT HUGE BUT WE BUILT IT...
30
![Page 31: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/31.jpg)
A LOT OF TESTS TO WRITE AND TO MAINTAIN… NOT A LOT OF TIME 31
![Page 32: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/32.jpg)
▫ 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 )
![Page 33: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/33.jpg)
P.S. WE ARE HIRING,IF YOU ARE INTERESTED OR YOU JUST WANT A T-SHIRT JUST PING ME
![Page 34: How to push a react js application in production and sleep better](https://reader031.fdocuments.us/reader031/viewer/2022021921/58f2e41f1a28abdc678b458b/html5/thumbnails/34.jpg)
Thanks. EMANUELE RAMPICHINI
APPLICATION ENGINEER @spreaker
Get It Touch
@emanuele_r