Skip to content

Commit 89323b6

Browse files
committed
a bunch of updates, add sentry and monitoring
1 parent a9d942c commit 89323b6

File tree

1 file changed

+23
-5
lines changed

1 file changed

+23
-5
lines changed

README.md

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -366,6 +366,7 @@ We have found the [webpack walkthrough](https://survivejs.com/webpack/foreword/)
366366

367367
- [Rollup](https://rollupjs.org/)
368368
- [Browserify](http://browserify.org/)
369+
- [Parcel](https://parceljs.org/)
369370

370371
## Package Management - Yarn
371372

@@ -394,7 +395,7 @@ [email protected] was [released in May 2017](https://github.com/npm/npm/releases/tag/v5.
394395

395396
## Continuous Integration
396397

397-
We use [Travis CI](https://travis-ci.com/) for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its [build matrix](https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix) feature is useful for repositories which contain multiple projects like Grab's. We configured Travis to do the following:
398+
We used [Travis CI](https://travis-ci.com/) for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its [build matrix](https://docs.travis-ci.com/user/customizing-the-build#Build-Matrix) feature is useful for repositories which contain multiple projects like Grab's. We configured Travis to do the following:
398399

399400
- Run linting for the project.
400401
- Run unit tests for the project.
@@ -413,8 +414,9 @@ We use [Travis CI](https://travis-ci.com/) for our continuous integration (CI) p
413414

414415
- [Jenkins](https://jenkins.io/)
415416
- [CircleCI](https://circleci.com/)
417+
- [GitLab CI/CD](https://about.gitlab.com/product/continuous-integration/)
416418

417-
## Hosting - Amazon S3
419+
## Hosting and CDN - Amazon S3 and Amazon CloudFront
418420

419421
Traditionally, web servers that receive a request for a webpage will render the contents on the server, and return a HTML page with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modern web applications do not involve server-side rendering, and it is sufficient to use a web server that serves static asset files. Nginx and Apache are possible options and not much configuration is required to get things up and runnning. The caveat is that the web server will have to be configured to route all requests to a single entry point and allow client-side routing to take over. The flow for front end routing goes like this:
420422

@@ -424,11 +426,13 @@ Traditionally, web servers that receive a request for a webpage will render the
424426
1. The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.
425427
1. The MVC JavaScript framework renders the desired view based on the route, possibly after fetching data from an API if required. Example, load up `UsersController`, fetch user data for the username `john` as JSON, combine the data with the view, and render it on the page.
426428

427-
A good practice for serving static content is to use caching and putting them on a CDN. We use [Amazon Simple Storage Service (S3)](https://aws.amazon.com/s3/) because it can both host and act as a CDN for our static website content. We find that it is an affordable and reliable solution that meets our needs. S3 provides the option to "Use this bucket to host a website", which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.
429+
A good practice for serving static content is to use caching and putting them on a CDN. We use [Amazon Simple Storage Service (S3)](https://aws.amazon.com/s3/) for hosting our static website content and [Amazon CloudFront](https://aws.amazon.com/cloudfront/) as the CDN. We find that it is an affordable and reliable solution that meets our needs.
430+
431+
S3 provides the option to "Use this bucket to host a website", which essentially directs the requests for all routes to the root of the bucket, which means we do not need our own web servers with special routing configurations.
428432

429433
An example of a web app that we host on S3 is [Hub](https://hub.grab.com/).
430434

431-
Other than hosting the website, we also use S3 to host the build `.tar` files generated from each successful Travis build.
435+
Other than hosting the website, we also use S3 to host the build `.tar` files generated from each successful CI build.
432436

433437
#### Study Links
434438

@@ -442,7 +446,7 @@ Other than hosting the website, we also use S3 to host the build `.tar` files ge
442446

443447
## Deployment
444448

445-
The last step in shipping the product to our users is deployment. We use [Ansible Tower](https://www.ansible.com/tower) which is a powerful automation software that enables us to deploy our builds easily.
449+
The last step in shipping the product to our users is deployment. We used [Ansible Tower](https://www.ansible.com/tower) which is a powerful automation software that enables us to deploy our builds easily.
446450

447451
As mentioned earlier, all our commits, upon successful build, are being uploaded to a central S3 bucket for builds. We follow semver for our releases and have commands to automatically generate release notes for the latest release. When it is time to release, we run a command to tag the latest commit and push to our code hosting environment. Travis will run the CI steps on that tagged commit and upload a tar file (such as `1.0.1.tar`) with the version to our S3 bucket for builds.
448452

@@ -459,6 +463,20 @@ This whole process is done under 30 seconds and using Tower has made deployments
459463

460464
- [Ansible Tower Homepage](https://www.ansible.com/tower)
461465

466+
#### Alternatives
467+
468+
- [Jenkins](https://jenkins.io/)
469+
470+
## Monitoring
471+
472+
After shipping the product, you would also want to monitor it for any errors.
473+
474+
Apart from network level monitoring from our CDN service provider and hosting provider, we use [Sentry](https://sentry.io/) to monitor errors that originates from the app logic.
475+
476+
#### Study Links
477+
478+
- [Sentry Homepage](https://sentry.io/)
479+
462480
### The Journey has Just Begun
463481

464482
Congratulations on making it this far! Front end development today is [hard](https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f), but it is also more interesting than before. What we have covered so far will help any new engineer to Grab's web team to get up to speed with our technologies pretty quickly. There are many more things to be learnt, but building up a solid foundation in the essentials will aid in learning the rest of the technologies. This helpful [front end web developer roadmap](https://github.com/kamranahmedse/developer-roadmap#-front-end-roadmap) shows the alternative technologies available for each aspect.

0 commit comments

Comments
 (0)