Front-end Guide

1

Yarn

Yarn solves these problems. The issue of non-determinism of installed packages is handled via a yarn.lock file, which ensures that every install results in the exact same file structure in node_modules across all machines. Yarn utilizes a global cache directory within your machine, and packages that have been downloaded before do not have to be downloaded again. This also enables offline installation of dependencies!

#Front End Package Manager #Package Manager #JS Build Tools 106 social mentions

2

Webpack

This part will be kept short as setting up webpack can be a tedious process and might be a turn-off to developers who are already overwhelmed by the barrage of new things they have to learn for front end development. In a nutshell, webpack is a module bundler that compiles a front end project and its dependencies into a final bundle to be served to users. Usually, projects will already have the webpack configuration set up and developers rarely have to change it. Having an understanding of webpack is still a good to have in the long run. It is due to webpack that features like hot reloading and CSS modules are made possible.

#Web Application Bundler #JS Build Tools #Module Bundler 219 social mentions

3

Vue.js

#Front-End Frameworks #Javascript UI Libraries #JS Library 341 social mentions

4

Travis CI

We used Travis CI for our continuous integration (CI) pipeline. Travis is a highly popular CI on Github and its build matrix feature is useful for repositories which contain multiple projects like Grab's. We configured Travis to do the following:.

#Continuous Integration #DevOps Tools #Continuous Deployment 6 social mentions

5

SUIT CSS

CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

#Developer Tools #Design Tools #CSS Framework 4 social mentions

6

stylelint

#Developer Tools #Code Analysis #Code Coverage 24 social mentions

7

Sass

If you are a total beginner to CSS, Codecademy's HTML & CSS course will be a good introduction to you. Next, read up on the Sass preprocessor, an extension of the CSS language which adds syntactic improvements and encourages style reusability. Study the CSS methodologies mentioned above, and lastly, CSS modules.

#Developer Tools #Design Tools #Javascript UI Libraries 131 social mentions

8

Redux.js

As Flux is not a framework per se, developers have tried to come up with many implementations of the Flux pattern. Eventually, a clear winner emerged, which was Redux. Redux combines the ideas from Flux, Command pattern and Elm architecture and is the de facto state management library developers use with React these days. Its core concepts are:.

#Javascript UI Libraries #JS Library #Front-End Frameworks 165 social mentions

9

Prettier

#Developer Tools #Code Analysis #JavaScript Framework 255 social mentions

10

Prerender

SPAs are reliant on JavaScript to render content, but not all search engines execute JavaScript during crawling, and they may see empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. 2. However, most of the time, when you are building apps, SEO is not the most important factor, as not all the content needs to be indexable by search engines. To overcome this, you can either server-side render your app or use services such as Prerender to "render your javascript in a browser, save the static HTML, and return that to the crawlers".

#Custom Search Engine #Search Engine #Custom Search 40 social mentions

11

Parcel

#Web Application Bundler #Assets Bundler #JS Build Tools 100 social mentions

12

Node.js

Before you dive into the various aspects of building a JavaScript web app, it is important to get familiar with the language of the web - JavaScript, or ECMAScript. JavaScript is an incredibly versatile language which you can also use to build web servers, native mobile apps and desktop apps.

#Runtime #JavaScript Runtime #JavaScript 785 social mentions

13

JSHint

#Front End Package Manager #JS Build Tools #JavaScript Package Manager 14 social mentions

14

Jenkins

#DevOps Tools #Continuous Integration #Continuous Deployment 5 social mentions

15

React Hot Loader

Developer Experience - There are a number of tools that improves the development experience with React. React Developer Tools is a browser extension that allows you to inspect your component, view and manipulate its props and state. Hot reloading with webpack allows you to view changes to your code in your browser, without you having to refresh the browser. Front end development involves a lot of tweaking code, saving and then refreshing the browser. Hot reloading helps you by eliminating the last step. When there are library updates, Facebook provides codemod scripts to help you migrate your code to the new APIs. This makes the upgrading process relatively pain-free. Kudos to the Facebook team for their dedication in making the development experience with React great.

#Design Tools #Development Tools #Developer Tools 2 social mentions

16

BEM

CSS (Cascading Style Sheets) are rules to describe how your HTML elements look. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before one is able to write maintainable and scalable CSS. CSS, having a global namespace, is fundamentally designed for web documents, and not really for web apps that favor a components architecture. Hence, experienced front end developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

#Developer Tools #Design Tools #CSS Framework 43 social mentions

17

Flow Type

The two biggest contenders in adding static types to JavaScript are Flow (by Facebook) and TypeScript (by Microsoft). As of date, there is no clear winner in the battle. For now, we have made the choice of using Flow. We find that Flow has a lower learning curve as compared to TypeScript and it requires relatively less effort to migrate an existing code base to Flow. Being built by Facebook, Flow has better integration with the React ecosystem out of the box. James Kyle, one of the authors of Flow, has written on a comparison between adopting Flow and TypeScript.

#Programming Language #Programming #Static Type Checker 24 social mentions

18

React with pre-made components

If any JavaScript project has taken the front end ecosystem by storm in recent years, that would be React. React is a library built and open-sourced by the smart people at Facebook. In React, developers write components for their web interface and compose them together.

#Javascript UI Libraries #JavaScript Framework #Front-End Frameworks 30 social mentions

19

facebook.github.io Jest

Jest is a testing library by Facebook that aims to make the process of testing pain-free. As with Facebook projects, it provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During watch mode, by default, only the tests for the changed files are run. One particular feature we like is "Snapshot Testing". Jest can save the generated output of your React component and Redux state and save it as serialized files, so you wouldn't have to manually come up with the expected output yourself. Jest also comes with built-in mocking, assertion and test coverage. One library to rule them all!

#Automated Testing #Developer Tools #Testing 7 social mentions

20

ESLint

A linter is a tool to statically analyze code and finds problems with them, potentially preventing bugs/runtime errors and at the same time, enforcing a coding style. Time is saved during pull request reviews when reviewers do not have to leave nitpicky comments on coding style. ESLint is a tool for linting JavaScript code that is highly extensible and customizable. Teams can write their own lint rules to enforce their custom styles. At Grab, we use Airbnb's eslint-config-airbnb preset, that has already been configured with the common good coding style in the Airbnb JavaScript style guide.

#Code Coverage #Developer Tools #Code Quality 229 social mentions

21

CircleCI

#Continuous Integration #Continuous Deployment #DevOps Tools 61 social mentions

22

Browserify

#JS Build Tools #Module Bundler #Web Application Bundler 21 social mentions

23

Babel

Prior to 2015, the last major update was ECMAScript 5.1, in 2011. However, in the recent years, JavaScript has suddenly seen a huge burst of improvements within a short span of time. In 2015, ECMAScript 2015 (previously called ECMAScript 6) was released and a ton of syntactic constructs were introduced to make writing code less unwieldy. If you are curious about it, Auth0 has written a nice article on the history of JavaScript. Till this day, not all browsers have fully implemented the ES2015 specification. Tools such as Babel enable developers to write ES2015 in their apps and Babel transpiles them down to ES5 to be compatible for browsers.

#Development Tools #Javascript UI Libraries #JavaScript Framework 134 social mentions

24

Amazon S3

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) for hosting our static website content and Amazon CloudFront as the CDN. We find that it is an affordable and reliable solution that meets our needs.

#Cloud Hosting #Object Storage #Cloud Storage 170 social mentions

25

Amazon CloudFront

A good practice for serving static content is to use caching and putting them on a CDN. We use Amazon Simple Storage Service (S3) for hosting our static website content and Amazon CloudFront as the CDN. We find that it is an affordable and reliable solution that meets our needs.

#CDN #Cloud Computing #Content Distribution 67 social mentions

26

Angular.io

#JavaScript Framework #JS Library #Web Development Tools 283 social mentions