![Page 1: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/1.jpg)
Dive into the details of our Node.js applicationsLevel: Intermediate - Advanced
![Page 2: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/2.jpg)
All slides are available @
slideshare.net/heka1
![Page 3: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/3.jpg)
Andrew Maxwell
About Me:
● GoPro, Inc.
● Frontend Software Technical Lead
● 10+ years in the industry
● I manage the Web-App team
Contact Info:
● Google+: Andrew Maxwell
● LinkedIn: Andrew Maxwell
● Twitter: @amaxwell02
● Github: amaxwell01
● Instagram: amaxwell01
● andrewcmaxwell.com
![Page 4: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/4.jpg)
Gopro Web Applications
![Page 5: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/5.jpg)
GoPro: Case Study
● Goals of our applications
● Development setup
● Coding process
● Problems & solutions
● What’s next?
![Page 6: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/6.jpg)
Goals for our applications
![Page 7: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/7.jpg)
Goals for our applications
1. Follow the Unix philosophy
![Page 8: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/8.jpg)
“Do one thing and do it well”
![Page 9: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/9.jpg)
2. All apps are isolated from each other and are only connected through the login application
Goals for our applications
![Page 10: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/10.jpg)
3. All Node applications are based off of our web-base framework
Goals for our applications
![Page 11: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/11.jpg)
4. All apps must run in docker
● Single docker image for all environments (local, QA, staging and production)
● Every deploy gets its own tagged image with code
Goals for our applications
![Page 12: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/12.jpg)
5. All apps MUST be deployed independently
● No app should block one another from being deployed
● Move Fast
Goals for our applications
![Page 13: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/13.jpg)
6. Easy roll backs thanks to every deploy getting its own tagged version of a docker image
● Send an update notice to our cluster to roll back to the previous tag
● Removing the impact on our customers
Goals for our applications
![Page 14: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/14.jpg)
Goals for our applications
7. Follow rolling release train to ship consistently, but only what’s ready
![Page 15: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/15.jpg)
Development setup
![Page 16: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/16.jpg)
Development setupIsomorphic App Setup
![Page 17: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/17.jpg)
Start from SCRATCH
![Page 18: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/18.jpg)
● Start a new project
● Clone from web-base to the name of your new project
$git clone [gopro-web-base].git gopro-web-login
Development setup
![Page 19: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/19.jpg)
● Hello World
Development setup
![Page 20: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/20.jpg)
Development setup
Update our configuration files
● app-config.js
● gopro.json
● package.json
● docker-compose.yml
![Page 21: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/21.jpg)
One command to run them all
Development setup
$MAKE
![Page 22: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/22.jpg)
We can get you coding in 10 minutes:
$git clone gopro-web-login
$cd gopro-web-login
$make
Development setup
![Page 23: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/23.jpg)
● $make install
○ Mapped to NPM install
● $make build
○ mapped to gulp build
■ runs webpack with node
● $make lint
○ gulp eslint
● $make test
○ Mapped to gulp test
■ runs Jest / Jasmine unit tests
● $make server
○ node babel.server.js
● $make dev
○ runs make install, make build, make
watch
● $make
○ make dev
All apps run with 7 simple commands:
Development setup
![Page 24: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/24.jpg)
Build Process with Node and Gulp
Development setup
&
![Page 25: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/25.jpg)
Quality and standards in our builds
Development setup
![Page 26: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/26.jpg)
Watch files for changes
Development setup
![Page 27: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/27.jpg)
Coding process
![Page 28: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/28.jpg)
All components are react components
![Page 29: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/29.jpg)
Lint our code
Coding process
![Page 30: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/30.jpg)
Check docker
● Every time we make a change to our server setup, we make sure that we run our changes locally in docker
$docker-compose run
Coding process
![Page 31: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/31.jpg)
Push the changes up to Github and fires off our build
1. All features get their own branch
2. Circle CI automatically kicks off our build process for the new branch
3. Circle CI creates a tags a new docker image with the built code
4. Each branch can be tested in isolation with a unique sub-domain
Coding process
![Page 32: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/32.jpg)
Create pull requests
1. Create a new PR for the changes
a. Must be a single commit or as little of commits as possible
b. Must include the ticket number as the first part of the commit title
2. Circle CI run’s our build process and adds badges to the Github PR
3. Code is reviewed by team
4. Original developer merges their own code and close the PR
Coding process
![Page 33: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/33.jpg)
![Page 34: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/34.jpg)
Pro’s & Con’s
![Page 35: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/35.jpg)
Pro’s of isomorphic applications:
● One language (JavaScript)
● Shared components
● Faster rendering time
● Less moving parts
● Easy deployments
● Fast development
● Better S.E.O
![Page 36: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/36.jpg)
● Running similar, but not identical, API requests on the server/client
● Unit tests require some HTML to be tested (blurs the line of unit vs E2E test)
● Some routes set in Hapi, some in React Router
● Debugging API requests can be tricky depending on if it is done on the client,
the server, or both
● 2 forms of logging
Con’s of isomorphic applications:
![Page 37: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/37.jpg)
Problems & Solutions
![Page 38: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/38.jpg)
Memory leak on health checks
Node-debugger
Sever metric monitoring
Problems & Solutions:
![Page 39: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/39.jpg)
Problems & Solutions:
Debugging API requests on the client / server
Set up better logging using Bunyan
![Page 40: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/40.jpg)
Problems & Solutions:
Lib-sass not staying up to date with Node changes
Node.js foundation - All is well again
![Page 41: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/41.jpg)
Problems & Solutions:
Moving fast and staying up to date with Node versions
NVM
![Page 42: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/42.jpg)
Problems & Solutions:
30+ second startup times because Babel6 doesn’t play nice with NPM 2
Changed to a new version of Node.js with NPM 3
![Page 43: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/43.jpg)
Problems & Solutions:
Building multiple apps at once and keeping them in sync
Set up Web-base, our internal “desired” collection of frameworks and configuration
![Page 44: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/44.jpg)
Problems & Solutions:
100+ feature based deployments a day, leaving around unused docker images on server
A bi-hourly cleaner to remove unused docker images
![Page 45: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/45.jpg)
What’s next?
1. Continue improving our web-base framework.
2. Improve feature-base branch development to work better with our API’s
3. Create a CLI-tool to help start new projects, add tests, etc.
4. More tests!
![Page 46: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/46.jpg)
Let’s dive into code
![Page 47: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/47.jpg)
Questions?
Thank You!
![Page 48: Go Pro, Inc. Case Study: Dive into the details of our node.js applications](https://reader030.vdocument.in/reader030/viewer/2022020301/58efc1c21a28ab280d8b45a7/html5/thumbnails/48.jpg)
● https://gopro.com
● https://www.docker.com
● https://nodejs.org/en
● http://hapijs.com
● http://gulpjs.com
● https://github.com/dlmanning/gulp-sass
● http://eslint.org
● https://babeljs.io
● https://facebook.github.io/react
● https://webpack.github.io
● https://github.com/trentm/node-bunyan
Links: