You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+23-5Lines changed: 23 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -366,6 +366,7 @@ We have found the [webpack walkthrough](https://survivejs.com/webpack/foreword/)
366
366
367
367
-[Rollup](https://rollupjs.org/)
368
368
-[Browserify](http://browserify.org/)
369
+
-[Parcel](https://parceljs.org/)
369
370
370
371
## Package Management - Yarn
371
372
@@ -394,7 +395,7 @@ [email protected] was [released in May 2017](https://github.com/npm/npm/releases/tag/v5.
394
395
395
396
## Continuous Integration
396
397
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:
398
399
399
400
- Run linting for the project.
400
401
- Run unit tests for the project.
@@ -413,8 +414,9 @@ We use [Travis CI](https://travis-ci.com/) for our continuous integration (CI) p
## Hosting and CDN - Amazon S3 and Amazon CloudFront
418
420
419
421
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:
420
422
@@ -424,11 +426,13 @@ Traditionally, web servers that receive a request for a webpage will render the
424
426
1. The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.
425
427
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.
426
428
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.
428
432
429
433
An example of a web app that we host on S3 is [Hub](https://hub.grab.com/).
430
434
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.
432
436
433
437
#### Study Links
434
438
@@ -442,7 +446,7 @@ Other than hosting the website, we also use S3 to host the build `.tar` files ge
442
446
443
447
## Deployment
444
448
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.
446
450
447
451
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.
448
452
@@ -459,6 +463,20 @@ This whole process is done under 30 seconds and using Tower has made deployments
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
+
462
480
### The Journey has Just Begun
463
481
464
482
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