GoPro, Inc. Case study: Dive into the details of our web applications
•
2 likes•848 views
The document discusses GoPro's web applications. It outlines GoPro's goals for their applications, including following the Unix philosophy, isolating apps that connect only through login, basing apps on a common framework, running all apps in Docker, and enabling independent deploys. It also describes their development setup, coding process, problems encountered and solutions, and plans for the future, including continued framework improvements and more testing.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (13)
Similar to GoPro, Inc. Case study: Dive into the details of our web applications
Similar to GoPro, Inc. Case study: Dive into the details of our web applications (20)
Recently uploaded
Recently uploaded (20)
GoPro, Inc. Case study: Dive into the details of our web applications
- 1. Dive into the details of our web applications Level: Intermediate - Advanced
- 2. All slides are available @ slideshare.net/heka1
- 3. Andrew Maxwell About Me: ● GoPro, Inc. ● 10+ years in the industry ● I manage the front-end web-app team Contact Info: ● Google+: Andrew Maxwell ● LinkedIn: Andrew Maxwell ● Twitter: @amaxwell02 ● Github: amaxwell01 ● Instagram: amaxwell01 ● andrewcmaxwell.com
- 5. GoPro: Case Study ● Goals of our applications ● Development setup ● Coding process ● Problems & solutions ● What’s next?
- 6. Goals for our applications
- 7. Goals for our applications 1. Follow the Unix philosophy
- 8. “Do one thing and do it well”
- 9. 2. All apps are isolated from each other and are only connected through the login application Goals for our applications
- 10. 3. All Node applications are based off of our web-base framework Goals for our applications
- 11. 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
- 12. 5. All apps MUST be deployed independently ● No app should block one another from being deployed ● Move Fast Goals for our applications
- 13. 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
- 14. Goals for our applications 7. Follow rolling release train to ship consistently, but only what’s ready
- 16. Development setup Isomorphic App Setup
- 18. ● 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
- 19. ● Hello World Development setup
- 20. Development setup Update our configuration files ● app-config.js ● gopro.json ● package.json ● docker-compose.yml
- 21. One command to run them all Development setup $MAKE
- 22. We can get you coding in 10 minutes: $git clone gopro-web-login $cd gopro-web-login $make Development setup
- 23. ● $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
- 24. Build Process with Node and Gulp Development setup &
- 25. Quality and standards in our builds Development setup
- 26. Watch files for changes Development setup
- 27. Coding process
- 28. All components are react components
- 29. Lint our code Coding process
- 30. 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
- 31. 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
- 32. 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
- 34. Pro’s & Con’s
- 35. Pro’s of isomorphic applications: ● One language (JavaScript) ● Shared components ● Faster rendering time ● Less moving parts ● Easy deployments ● Fast development ● Better S.E.O
- 36. ● 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:
- 38. Problems & Solutions: Debugging API requests on the client / server Set up better logging using Bunyan and moved to isomorphic fetch
- 39. Problems & Solutions: React Router API changes Updated web-base and changed how the API was used
- 40. Problems & Solutions: Making reusable components Made all applications manage state, not the reusable component
- 41. Problems & Solutions: Lib-sass not staying up to date with Node changes Node.js foundation - All is well again
- 42. 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
- 43. Problems & Solutions: Building multiple apps at once and keeping them in sync Set up Web-base, our internal “desired” collection of frameworks and configuration
- 44. Problems & Solutions: 100+ feature based deployments a day, leaving around unused docker images on server A bi-hourly cleaner to remove unused docker images
- 45. 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, create components, add tests, etc. 4. More tests!
- 46. Let’s dive into code
- 47. Questions? All slides are available @ slideshare.net/heka1 Thank You!
- 48. ● 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: