Building large scalable mission critical business applications on the web

  • Published on
    15-Apr-2017

  • View
    328

  • Download
    0

Transcript

Building large scalable mission critical business applications on the web

Building large scalable mission critical business applications on the webMaurice de Beijer@mauricedb

Safety in hard to reach places

2

Deepwater Horizon Offshore Drilling Platform on Fire

https://www.flickr.com/photos/ideum/47114817812

Who am I?Maurice de BeijerThe Problem SolverMicrosoft Azure MVPFreelance developer/instructorTwitter:@mauricedb and @React_TutorialWeb:http://www.TheProblemSolver.nlE-mail:maurice.de.beijer@gmail.com

3

3

Where we startedExisting app. Replace frontend with React

HTTP is not as reliableChaos monkeyScaling out from 1 to 2 servers is hardDefine contracts using Swagger

Global error loggerDont forget about promises and async code

Use a type checker like TypeScriptReactDefine all propTypes in Reactreact-safe-render or react-transform-catch-errorsUse ESLint/TSLinteslint-plugin-reacteslint-config-airbnbWebPack performanceHappypack and awesome-typescript-loaderDllPlugin& DllReferencePlugin instead of CommonsChunkPlugin

Date and times

OverviewHTTP and Ajax requestsScaling outProgramming language and code qualityWebpackError logging and collectionDates and times

https://www.flickr.com/photos/quinnanya/5046072204/

5

HTTP is hard

Swagger for HTTP contracts

Do contract first developmentsGenerate the client and server side DTOs7

Chaos MonkeyHttp request have a tendency of failingSimulate this behavior when developing

HTTP in the wild is tends to fail occasionallySpecially for mobile and satellite connectionsRequest will complete in a different order then startedMake sure this already happens during development

https://www.flickr.com/photos/87913776@N00/460181144/8

Retry on errorsRetry requests that failAfter a brief pause

With HTTP Status codes >= 500 you can retryPolly will help you9

HTTP Caching is hardCaching static data can help performanceBut cache invalidation is hardUse the HTTP vary headerAccept headerAuthorization header

Always add cache headersUse Etags for larger objects that change over timeAdd a content hash or version number to js/css/images files

https://www.flickr.com/photos/nodespt/610149606010

Scaling out

Scaling out is hardWhen going to the second serverBut easy going from the second to the third

Scaling from 1 to 2 servers I shardFrom 2 to around 10 is easyAbove 10 it becomes hard again

https://www.flickr.com/photos/orangebrompton/22464998712

Chaos MonkeyMiddleware to randomly route all requests to a different server when developing

Always run with at least 2 servers during test and QAChaos load balancer randomly picks a server per request

https://www.flickr.com/photos/87913776@N00/460181144/13

WritingCode

https://www.pexels.com/photo/coffee-writing-computer-blogging-34676/14

TypeScriptOr use another type checker like Flow

TypeChecking is extra work in a small appBut a life saver in a big appMakes refactoring much easier15

ESLint & TSLintUse ESLint and/or TSLintUse eslint-plugin-react for React codeAirbnb publish a great configurationThe eslint-config-airbnb NPM package

Linting is similar to type checking but finds a different type of errorSome rules like number of spaces to indent is not that importantBut consistency helps a lotOther rules like declaring variables an React props are much more important16

Webpack

Webpack is an awesome bundelerUsed to trigger Babel and TypeScriptUsing presets: es2015, stage-0 and react17

Webpack CommonsChunkPluginBuild shared library bundles just onceUsing DllPlugin& DllReferencePluginBetter performance then using the CommonsChunkPlugin

The CommonsChunkPlugin is easy to use but keeps being evaluatedThe DllPlugin just builds once and its static manifest is reused18

HappyPackSpeed up Webpack buildsUse Awesome Typescript Loader for TypeScript

HappyPack caching can greatly speed builds of large code basesAlso use multiple threads for parallel builds19

Error loggingErrors will happenDont assume you are online

Add a global error handlerLog your errors to the serverAlso store in LocalStorage or IndexedDB in case the server is unreachableBundle identical errors in a time slot to prevent a lot of HTTP trafficDont forget to log HTTP and Promis errors20

Errors in React components

Runtime errors in React lifecycle methods is really badDan Abramov created react-transform-catch-errors which is a good alternative but only does render functions.

21

Display with redbox-react

Make sure errors are very clear during development.But maybe a bit less so in production22

Dates and timesWorking with date and time is hardSpecially when objects are movingHaving to coordinate across multiple time zones

http://www.flickr.com/photos/torley/2705966678

23

Moment.jsThe best library for working with datesUse Moment Timezone to convert to individual timezones

ConclusionHTTP and Ajax requests can be unreliableSpecially on remote and mobile connectionsScaling outIsnt hard if you do so from day oneProgramming language and code qualityJavaScript and JSX is fine for small projectsBig projects need more helpWebpack is awesomeBut rebuild times add up with a large codebaseError logging and collectionError will happenMake sure you know about themDates and timesCan be very tricky Use moments.js for time zone conversions and formatting

Thank you

Maurice de Beijer - @mauricedb

https://www.flickr.com/photos/stevendepolo/4582437563/

26

Recommended

View more >