How to Upload Your Code to Github as a Front End Web Developer

Grab Front End Guide

Credits: Analogy by @yangheng

This guide has been cross-posted on Costless Lawmaking Army camp.

Grab is Southeast Asia (Sea)'south leading transportation platform and our mission is to drive Sea forward, leveraging on the latest technology and the talented people we accept in the company. Every bit of May 2017, nosotros handle 2.3 one thousand thousand rides daily and we are growing and hiring at a rapid scale.

To continue up with Grab'southward astounding growth, our spider web team and web platforms have to grow also. Fortunately, or unfortunately, at Grab, the web team has been keeping upwardly with the latest best practices and has incorporated the modernistic JavaScript ecosystem in our web apps.

The consequence of this is that our new hires or back cease engineers, who are not necessarily well-acquainted with the modern JavaScript ecosystem, may feel overwhelmed by the barrage of new things that they have to acquire just to complete their characteristic or problems fix in a web app. Front end evolution has never been and so complex and exciting as information technology is today. New tools, libraries, frameworks and plugins emerge every other day and there is so much to learn. It is imperative that newcomers to the web team are guided to embrace this evolution of the front end terminate, learn to navigate the ecosystem with ease, and get productive in shipping code to our users as fast as possible. We have come up with a study guide to introduce why we practice what we exercise, and how we handle forepart stop at scale.

This report guide is inspired by "A Written report Plan to Cure JavaScript Fatigue" and is mildly opinionated in the sense that we recommend certain libraries/frameworks to acquire for each aspect of front terminate development, based on what is currently deemed most suitable at Grab. We explicate why a certain library/framework/tool is called and provide links to learning resources to enable the reader to pick it up on their ain. Alternative choices that may be ameliorate for other utilise cases are provided equally well for reference and further self-exploration.

If y'all are familiar with front end development and have been consistently keeping up with the latest developments, this guide will probably not be that useful to yous. It is targeted at newcomers to forepart finish.

If your company is exploring a modern JavaScript stack as well, you may notice this study plan useful to your company too! Feel free to accommodate information technology to your needs. We will update this report plan periodically, according to our latest work and choices.

- Grab Web Team

Pre-requisites

• Good understanding of core programming concepts.
• Comfortable with basic command line deportment and familiarity with source code version command systems such every bit Git.
• Experience in web development. Accept built server-side rendered web apps using frameworks like Ruby on Rail, Django, Limited, etc.
• Understanding of how the web works. Familiarity with web protocols and conventions like HTTP and RESTful APIs.

Table of Contents

• Single-page Apps (SPAs)
• New-age JavaScript
• User Interface
• Country Management
• Coding with Style
• Maintainability
  • Testing
  • Linting JavaScript
  • Linting CSS
  • Formatting Code
  • Types
• Build System
• Package Management
• Continuous Integration
• Hosting and CDN
• Deployment
• Monitoring

Certain topics can be skipped if y'all have prior experience in them.

Single-page Apps (SPAs)

Web developers these days refer to the products they build as web apps, rather than websites. While there is no strict difference between the 2 terms, web apps tend to be highly interactive and dynamic, assuasive the user to perform actions and receive a response for their action. Traditionally, the browser receives HTML from the server and renders it. When the user navigates to some other URL, a full-page refresh is required and the server sends fresh new HTML for the new page. This is called server-side rendering.

Nonetheless in modern SPAs, customer-side rendering is used instead. The browser loads the initial page from the server, along with the scripts (frameworks, libraries, app code) and stylesheets required for the whole app. When the user navigates to other pages, a page refresh is not triggered. The URL of the page is updated via the HTML5 History API. New data required for the new page, usually in JSON format, is retrieved by the browser via AJAX requests to the server. The SPA then dynamically updates the page with the data via JavaScript, which it has already downloaded in the initial page load. This model is similar to how native mobile apps work.

The benefits:

• The app feels more responsive and users do not run across the flash between page navigations due to full-page refreshes.
• Fewer HTTP requests are made to the server, equally the same assets practise non have to be downloaded again for each folio load.
• Clear separation of the concerns between the customer and the server; you tin can easily build new clients for different platforms (e.g. mobile, chatbots, smart watches) without having to modify the server lawmaking. You can likewise alter the technology stack on the customer and server independently, every bit long as the API contract is not broken.

The downsides:

• Heavier initial folio load due to loading of framework, app code, and assets required for multiple pages.¹
• There's an boosted step to be done on your server which is to configure it to route all requests to a unmarried entry point and allow client-side routing to take over from at that place.
• SPAs are reliant on JavaScript to render content, but non all search engines execute JavaScript during itch, and they may run across empty content on your page. This inadvertently hurts the Search Engine Optimization (SEO) of your app. ². Nevertheless, most of the time, when you are edifice apps, SEO is not the most important factor, as non all the content needs to exist indexable by search engines. To overcome this, you lot tin can either server-side render your app or use services such every bit Prerender to "render your javascript in a browser, save the static HTML, and return that to the crawlers".

While traditional server-side rendered apps are even so a viable option, a clear client-server separation scales ameliorate for larger engineering teams, as the client and server lawmaking can be adult and released independently. This is especially then at Grab when nosotros have multiple client apps hitting the same API server.

As web developers are now edifice apps rather than pages, organisation of client-side JavaScript has go increasingly of import. In server-side rendered pages, it is mutual to use snippets of jQuery to add user interactivity to each folio. Even so, when edifice big apps, simply jQuery is insufficient. After all, jQuery is primarily a library for DOM manipulation and it's not a framework; it does not define a clear construction and organization for your app.

JavaScript frameworks have been created to provide higher-level abstractions over the DOM, allowing you lot to go along country in memory, out of the DOM. Using frameworks also brings the benefits of reusing recommended concepts and best practices for building apps. A new engineer on the team who is unfamiliar with the lawmaking base, but has experience with a framework, will find information technology easier to sympathize the code because information technology is organized in a construction that they are familiar with. Popular frameworks have a lot of tutorials and guides, and tapping on the knowledge and experience from colleagues and the community volition help new engineers get up to speed.

Study Links

• Unmarried Page App: advantages and disadvantages
• The (R)Evolution of Spider web Evolution
• Here's Why Client Side Rendering Won

New-age JavaScript

Earlier y'all dive into the various aspects of building a JavaScript spider web app, it is important to become familiar with the linguistic communication of the web - JavaScript, or ECMAScript. JavaScript is an incredibly versatile language which you lot can also use to build web servers, native mobile apps and desktop apps.

Prior to 2015, the concluding major update was ECMAScript v.1, in 2011. However, in the recent years, JavaScript has all of a sudden 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 y'all 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 uniform for browsers.

Existence familiar with both ES5 and ES2015 is crucial. ES2015 is notwithstanding relatively new and a lot of open up source code and Node.js apps are yet written in ES5. If y'all are doing debugging in your browser console, yous might not be able to apply ES2015 syntax. On the other hand, documentation and instance lawmaking for many modern libraries that we will innovate after beneath are still written in ES2015. At Grab, nosotros use boom-boom-preset-env to savour the productivity boost from the syntactic improvements the hereafter of JavaScript provides and nosotros take been loving it so far. boom-boom-preset-env intelligently determines which Boom-boom plugins are necessary (which new language features are non supported and accept to be transpiled) equally browsers increment native support for more ES language features. If you prefer using linguistic communication features that are already stable, y'all may find that babel-preset-stage-3, which is a consummate specification that will near likely exist implemented in browsers, will exist more than suitable.

Spend a twenty-four hours or two revising ES5 and exploring ES2015. The more heavily used features in ES2015 include "Arrows and Lexical This", "Classes", "Template Strings", "Destructuring", "Default/Residuum/Spread operators", and "Importing and Exporting modules".

Estimated Duration: 3-4 days. You tin can learn/lookup the syntax as you lot learn the other libraries and try edifice your own app.

Study Links

• Learn ES5 on Codecademy
• Learn ES6 on Codecademy
• Acquire ES2015 on Babel
• ES6 Katas
• Y'all Don't Know JS (Avant-garde content, optional for beginners)
• Answers to Front end Job Interview Questions — JavaScript

User Interface - React

If whatever JavaScript project has taken the front cease ecosystem by tempest 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 spider web interface and compose them together.

React brings about many radical ideas and encourages developers to rethink best practices. For many years, web developers were taught that it was a adept practice to write HTML, JavaScript and CSS separately. React does the exact opposite, and encourages that you write your HTML and CSS in your JavaScript instead. This sounds like a crazy idea at first, only later trying it out, it actually isn't as weird as it sounds initially. Reason being the front cease development scene is shifting towards a epitome of component-based evolution. The features of React:

• Declarative - You lot depict what you want to come across in your view and not how to achieve information technology. In the jQuery days, developers would have to come up up with a series of steps to dispense the DOM to get from one app state to the next. In React, you simply change the land within the component and the view will update itself according to the state. It is too easy to decide how the component volition await similar just by looking at the markup in the return() method.

• Functional - The view is a pure office of props and state. In most cases, a React component is defined by props (external parameters) and country (internal data). For the same props and state, the same view is produced. Pure functions are easy to test, and the same goes for functional components. Testing in React is made easy considering a component'south interfaces are well-defined and y'all can test the component by supplying different props and state to it and comparing the rendered output.

• Maintainable - Writing your view in a component-based way encourages reusability. We find that defining a component's propTypes brand React code self-documenting as the reader can know clearly what is needed to use that component. Lastly, your view and logic is self-contained within the component, and should not be affected nor affect other components. That makes it easy to shift components effectually during large-scale refactoring, as long as the aforementioned props are supplied to the component.

• High Performance - You might take heard that React uses a virtual DOM (not to exist confused with shadow DOM) and it re-renders everything when there is a change in state. Why is there a need for a virtual DOM? While modernistic JavaScript engines are fast, reading from and writing to the DOM is tiresome. React keeps a lightweight virtual representation of the DOM in memory. Re-rendering everything is a misleading term. In React it really refers to re-rendering the in-memory representation of the DOM, not the bodily DOM itself. When there's a change in the underlying data of the component, a new virtual representation is created, and compared against the previous representation. The divergence (minimal ready of changes required) is then patched to the real browser DOM.

• Ease of Learning - Learning React is pretty simple. The React API surface is relatively small compared to this; in that location are only a few APIs to learn and they practise not change ofttimes. The React customs is 1 of the largest, and along with that comes a vibrant ecosystem of tools, open up-sourced UI components, and a ton of nifty resource online to go you started on learning React.

• Programmer 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 lot having to refresh the browser. Forepart 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 lawmaking to the new APIs. This makes the upgrading procedure relatively pain-free. Kudos to the Facebook squad for their dedication in making the evolution experience with React great.
  

Over the years, new view libraries that are even more than performant than React accept emerged. React may not be the fastest library out there, simply in terms of the ecosystem, overall usage experience and benefits, it is still one of the greatest. Facebook is besides channeling efforts into making React even faster with a rewrite of the underlying reconciliation algorithm. The concepts that React introduced has taught us how to write better code, more than maintainable web apps and fabricated us amend engineers. We like that.

Nosotros recommend going through the tutorial on edifice a tic-tac-toe game on the React homepage to go a feel of what React is and what it does. For more in-depth learning, check out the Egghead course, Build Your First Product Quality React App. It covers some advanced concepts and real-world usages that are not covered past the React documentation. Create React App by Facebook is a tool to scaffold a React project with minimal configuration and is highly recommended to use for starting new React projects.

React is a library, not a framework, and does not bargain with the layers below the view - the app state. More on that afterward.

Estimated Duration: 3-4 days. Try edifice simple projects like a to-exercise listing, Hacker News clone with pure React. You lot will slowly gain an appreciation for it and perchance face some issues along the way that isn't solved past React, which brings united states to the side by side topic...

Study Links

• React Official Tutorial
• Egghead Form - Build Your First Product Quality React App
• Uncomplicated React Evolution in 2017
• Presentational and Container Components

Alternatives

• Angular
• Ember
• Vue
• Cycle

State Management - Flux/Redux

As your app grows bigger, you may find that the app construction becomes a picayune messy. Components throughout the app may have to share and display common data but there is no elegant way to handle that in React. Later all, React is just the view layer, it does non dictate how you structure the other layers of your app, such equally the model and the controller, in traditional MVC paradigms. In an effort to solve this, Facebook invented Flux, an app architecture that complements React's composable view components by utilizing a unidirectional data flow. Read more than most how Flux works here. In summary, the Flux pattern has the post-obit characteristics:

• Unidirectional data period - Makes the app more than predictable as updates can be tracked hands.
• Separation of concerns - Each part in the Flux architecture has clear responsibilities and are highly decoupled.
• Works well with declarative programming - The store can send updates to the view without specifying how to transition views between states.

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

• App land is described by a unmarried plain old JavaScript object (POJO).
• Dispatch an action (likewise a POJO) to alter the state.
• Reducer is a pure function that takes in current state and action to produce a new land.

The concepts sound simple, simply they are actually powerful every bit they enable apps to:

• Accept their state rendered on the server, booted up on the client.
• Trace, log and backtrack changes in the whole app.
• Implement disengage/redo functionality easily.

The creator of Redux, Dan Abramov, has taken great intendance in writing up detailed documentation for Redux, along with creating comprehensive video tutorials for learning basic and advanced Redux. They are extremely helpful resources for learning Redux.

Combining View and Land

While Redux does not necessarily have to be used with React, it is highly recommended as they play very well with each other. React and Redux have a lot of ideas and traits in common:

• Functional composition paradigm - React composes views (pure functions) while Redux composes pure reducers (also pure functions). Output is predictable given the aforementioned set up of input.
• Easy To Reason About - You may have heard this term many times but what does information technology actually mean? We interpret it as having control and agreement over our lawmaking - Our code behaves in means we expect information technology to, and when there are problems, we can find them easily. Through our feel, React and Redux makes debugging simpler. As the data flow is unidirectional, tracing the catamenia of information (server responses, user input events) is easier and it is straightforward to decide which layer the problem occurs in.
• Layered Construction - Each layer in the app / Flux architecture is a pure function, and has clear responsibilities. It is relatively easy to write tests for pure functions. You have to centralize changes to your app within the reducer, and the simply way to trigger a change is to acceleration an action.
• Development Experience - A lot of effort has gone into creating tools to aid in debugging and inspecting the app while development, such every bit Redux DevTools.
  

Your app will likely have to deal with async calls like making remote API requests. redux-thunk and redux-saga were created to solve those problems. They may take some fourth dimension to empathize as they require understanding of functional programming and generators. Our communication is to deal with information technology only when you demand it.

react-redux is an official React binding for Redux and is very simple to larn.

Estimated Duration: 4 days. The egghead courses can be a picayune time-consuming just they are worth spending time on. After learning Redux, yous can try incorporating it into the React projects y'all have congenital. Does Redux solve some of the state management problems you were struggling with in pure React?

Study Links

• Flux Homepage
• Redux Homepage
• Egghead Form - Getting Started with Redux
• Egghead Course - Build React Apps with Idiomatic Redux
• React Redux Links
• Yous Might Non Need Redux

Alternatives

• MobX

Coding with Fashion - CSS Modules

CSS (Cascading Way Sheets) are rules to describe how your HTML elements await. Writing good CSS is hard. It usually takes many years of experience and frustration of shooting yourself in the foot before ane 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 cease developers have designed methodologies to guide people on how to write organized CSS for complex projects, such as using SMACSS, BEM, SUIT CSS, etc.

However, the encapsulation of styles that these methodologies bring about are artificially enforced by conventions and guidelines. They interruption the moment developers do not follow them.

Every bit yous might have realized by now, the front end end ecosystem is saturated with tools, and unsurprisingly, tools have been invented to partially solve some of the problems with writing CSS at scale. "At scale" means that many developers are working on the same large project and touching the same stylesheets. There is no community-agreed approach on writing CSS in JS at the moment, and we are hoping that 1 solar day a winner would emerge, just like Redux did, among all the Flux implementations. For now, we are banking on CSS Modules. CSS modules is an improvement over existing CSS that aims to gear up the problem of global namespace in CSS; information technology enables you to write styles that are local by default and encapsulated to your component. This feature is achieved via tooling. With CSS modules, big teams can write modular and reusable CSS without fearfulness of disharmonize or overriding other parts of the app. However, at the end of the solar day, CSS modules are still existence compiled into normal globally-namespaced CSS that browsers recognize, and it is still important to larn and understand how raw CSS works.

If you lot are a total beginner to CSS, Codecademy's HTML & CSS course volition be a good introduction to yous. 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.

Estimated Duration: 3-4 days. Try styling up your app using the SMACSS/BEM approach and/or CSS modules.

Study Links

• Learn HTML & CSS course on Codecademy
• Intro to HTML/CSS on Khan Academy
• SMACSS
• BEM
• SUIT CSS
• CSS Modules Specification
• Sass Homepage
• Answers to Front End Job Interview Questions — HTML
• Answers to Front End Chore Interview Questions — CSS

Alternatives

• JSS
• Styled Components

Maintainability

Code is read more often than it is written. This is especially true at Grab, where the team size is large and nosotros accept multiple engineers working across multiple projects. We highly value readability, maintainability and stability of the code and at that place are a few ways to achieve that: "Extensive testing", "Consistent coding style" and "Typechecking". Also when you are in a squad, sharing same practices becomes really important. Cheque out these JavaScript Project Guidelines for instance.

Testing - Jest + Enzyme

Jest is a testing library by Facebook that aims to make the procedure of testing pain-free. As with Facebook projects, information technology provides a great development experience out of the box. Tests can be run in parallel resulting in shorter duration. During picket style, by default, simply the tests for the changed files are run. One particular characteristic we similar is "Snapshot Testing". Jest tin can salve the generated output of your React component and Redux state and salve it equally serialized files, so you wouldn't have to manually come up up with the expected output yourself. Jest also comes with congenital-in mocking, assertion and test coverage. One library to rule them all!

React comes with some testing utilities, just Enzyme past Airbnb makes information technology easier to generate, assert, manipulate and traverse your React components' output with a jQuery-like API. Information technology is recommended that Enzyme be used to exam React components.

Jest and Enzyme makes writing forepart tests fun and easy. When writing tests becomes enjoyable, developers write more tests. It also helps that React components and Redux actions/reducers are relatively easy to test because of conspicuously defined responsibilities and interfaces. For React components, we tin test that given some props, the desired DOM is rendered, and that callbacks are fired upon sure fake user interactions. For Redux reducers, we tin can exam that given a prior state and an action, a resulting country is produced.

The documentation for Jest and Enzyme are pretty concise, and it should be sufficient to learn them past reading it.

Estimated Duration: two-3 days. Attempt writing Jest + Enzyme tests for your React + Redux app!

Study Links

• Jest Homepage
• Testing React Applications with Jest
• Enzyme Homepage
• Enzyme: JavaScript Testing utilities for React

Alternatives

• AVA
• Karma

Linting JavaScript - ESLint

A linter is a tool to statically analyze code and finds issues 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 take to go out nitpicky comments on coding way. ESLint is a tool for linting JavaScript lawmaking that is highly extensible and customizable. Teams can write their ain 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.

For the most part, using ESLint is equally elementary as tweaking a configuration file in your projection folder. There's zip much to learn about ESLint if you're not writing new rules for it. But be aware of the errors when they surface and Google it to find out the recommended style.

Estimated Duration: 1/two twenty-four hours. Nothing much to learn hither. Add ESLint to your project and fix the linting errors!

Study Links

• ESLint Homepage
• Airbnb JavaScript Style Guide

Alternatives

• Standard
• JSHint
• XO

Linting CSS - stylelint

Every bit mentioned before, good CSS is notoriously hard to write. Usage of static analysis tools on CSS can help to maintain our CSS code quality and coding fashion. For linting CSS, we utilise stylelint. Similar ESLint, stylelint is designed in a very modular fashion, assuasive developers to turn rules on/off and write custom plugins for it. Too CSS, stylelint is able to parse SCSS and has experimental support for Less, which lowers the barrier for most existing code bases to adopt information technology.

In one case yous have learnt ESLint, learning stylelint would exist effortless considering their similarities. stylelint is currently being used by big companies similar Facebook, Github and Wordpress.

One downside of stylelint is that the autofix characteristic is not fully mature yet, and is only able to fix for a limited number of rules. Withal, this upshot should improve with time.

Estimated Duration: 1/2 twenty-four hour period. Nothing much to learn here. Add stylelint to your project and fix the linting errors!

Study Links

• stylelint Homepage
• Lint your CSS with stylelint

Alternatives

• Sass Lint
• CSS Lint

Formatting Lawmaking - Prettier

Some other tool for enforcing consistent coding style for JavaScript and CSS is Prettier.

In almost cases, it is recommended to setup Prettier on acme of ESLint and stylelint and integrate information technology into the workflow. This allows the lawmaking to be formatted into consequent style automatically via commit hooks, and so that developers do non need to spend time formatting the coding style manually.

Annotation that Prettier only enforces coding fashion, just does not check for logic errors in the lawmaking. Hence information technology is not a replacement for linters.

Estimated Duration: 1/2 day. Nothing much to acquire here. Add Prettier to your project and add hooks to enforce the coding style!

Report Links

• Prettier Homepage
• Prettier GitHub repo
• Comparing between tools that allow yous to use ESLint and Prettier together

Types - Flow

Static typing brings nearly many benefits when writing apps. They tin can grab common bugs and errors in your lawmaking early. Types also serve as a form of documentation for your lawmaking and improves the readability of your code. As a code base grows larger, we see the importance of types as they gives the states greater confidence when nosotros do refactoring. It is likewise easier to onboard new members of the team to the project when information technology is clear what kind of values each object holds and what each function expects.

Adding types to your code comes with the trade-off of increased verbosity and a learning bend of the syntax. Just this learning cost is paid upfront and amortized over time. In complex projects where the maintainability of the code matters and the people working on it alter over time, adding types to the code brings about more benefits than disadvantages.

Recently, I had to fix a problems in a code base that I haven't touched in months. It was thank you to types that I could easily refresh myself on what the lawmaking was doing, and gave me confidence in the fix I fabricated.

The ii biggest contenders in calculation static types to JavaScript are Menses (past Facebook) and TypeScript (by Microsoft). As of date, in that location is no clear winner in the battle. For now, we take made the choice of using Menstruation. We find that Period has a lower learning curve as compared to TypeScript and it requires relatively less endeavor to drift an existing code base to Period. Beingness congenital by Facebook, Flow has better integration with the React ecosystem out of the box. James Kyle, one of the authors of Menstruum, has written on a comparing betwixt adopting Menses and TypeScript.

Anyway, it is not extremely difficult to motility from Flow to TypeScript every bit the syntax and semantics are quite similar, and we will re-evaluate the state of affairs in time to come. After all, using one is better than not using whatsoever at all.

Menstruation recently revamped their homepage and it'due south pretty not bad now!

Estimated Elapsing: one twenty-four hours. Flow is pretty simple to acquire as the type annotations feel like a natural extension of the JavaScript linguistic communication. Add together Menstruum annotations to your project and embrace the ability of type systems.

Report Links

• Flow Homepage
• TypeScript vs Catamenia

Alternatives

• TypeScript

Build Arrangement - webpack

This part will be kept brusque as setting upwards webpack tin be a tedious process and might be a plow-off to developers who are already overwhelmed by the barrage of new things they take to larn for front end development. In a nutshell, webpack is a module bundler that compiles a front stop project and its dependencies into a final bundle to exist served to users. Usually, projects will already have the webpack configuration set upwardly and developers rarely accept to change it. Having an understanding of webpack is notwithstanding a good to have in the long run. Information technology is due to webpack that features like hot reloading and CSS modules are made possible.

We have found the webpack walkthrough by SurviveJS to exist the all-time resource on learning webpack. Information technology is a good complement to the official documentation and we recommend following the walkthrough first and referring to the documentation later when the demand for further customization arises.

Estimated Elapsing: 2 days (Optional).

Report Links

• webpack Homepage
• SurviveJS - Webpack: From apprentice to master

Alternatives

• Rollup
• Browserify
• Parcel

Package Direction - Yarn

If you take a peek into your node_modules directory, you will be appalled by the number of directories that are contained in it. Each babel plugin, lodash function, is a package on its own. When y'all have multiple projects, these packages are duplicated across each project and they are largely similar. Each time you run npm install in a new project, these packages are downloaded over and over over again even though they already be in some other project in your estimator.

There was besides the trouble of non-determinism in the installed packages via npm install. Some of our CI builds fail because at the point of time when the CI server installs the dependencies, it pulled in small-scale updates to some packages that independent breaking changes. This would non have happened if library authors respected semver and engineers did not assume that API contracts would exist respected all the time.

Yarn solves these problems. The outcome of non-determinism of installed packages is handled via a yarn.lock file, which ensures that every install results in the verbal 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 non take to be downloaded again. This also enables offline installation of dependencies!

The near mutual Yarn commands tin can be plant here. Well-nigh other yarn commands are similar to the npm equivalents and it is fine to use the npm versions instead. One of our favorite commands is yarn upgrade-interactive which makes updating dependencies a cakewalk especially when the modern JavaScript projection requires so many dependencies these days. Do check information technology out!

npm@5.0.0 was released in May 2017 and it seems to address many of the issues that Yarn aims to solve. Do keep an eye on it!

Estimated Duration: two hours.

Written report Links

• Yarn Homepage
• Yarn: A new packet director for JavaScript

Alternatives

• Good old npm

Continuous Integration

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

• Run linting for the project.
• Run unit of measurement tests for the project.
• If the tests laissez passer:
  • Test coverage generated by Jest is uploaded to Codecov.
  • Generate a production bundle with webpack into a build directory.
  • tar the build directory as <hash>.tar and upload it to an S3 bucket which stores all our tar builds.
• Mail service a notification to Slack to inform nearly the Travis build upshot.

Study Links

• Travis Homepage
• Codecov Homepage

Alternatives

• Jenkins
• CircleCI
• GitLab CI/CD

Hosting and CDN

Traditionally, web servers that receive a request for a webpage will render the contents on the server, and render a HTML folio with dynamic content meant for the requester. This is known as server-side rendering. As mentioned earlier in the section on Single-page Apps, modernistic web applications practice 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 non 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 unmarried entry signal and allow client-side routing to have over. The flow for front end routing goes like this:

1. Web server receives a HTTP request for a item route, for example /user/john.
2. Regardless of which route the server receives, serve up index.html from the static avails directory.
3. The index.html should incorporate scripts that load upward a JavaScript framework/library that handles client-side routing.
4. The client-side routing library reads the current route, and communicates to the MVC (or equivalent where relevant) framework about the current route.
5. The MVC JavaScript framework renders the desired view based on the road, possibly later fetching data from an API if required. Instance, load up UsersController, fetch user data for the username john equally JSON, combine the information with the view, and render it on the page.

A expert exercise for serving static content is to utilize caching and putting them on a CDN. We apply Amazon Unproblematic Storage Service (S3) for hosting our static website content and Amazon CloudFront as the CDN. We find that information technology is an affordable and reliable solution that meets our needs.

S3 provides the option to "Use this saucepan to host a website", which substantially directs the requests for all routes to the root of the bucket, which means we exercise not demand our own web servers with special routing configurations.

An instance of a web app that we host on S3 is Hub.

Other than hosting the website, we as well utilise S3 to host the build .tar files generated from each successful CI build.

Study Links

• Amazon S3 Homepage
• Hosting a Static Website on Amazon S3

Alternatives

• Google Cloud Platform
• Now

Deployment

The last step in shipping the product to our users is deployment. We used Ansible Tower which is a powerful automation software that enables united states to deploy our builds easily.

Equally mentioned before, 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 information technology is time to release, we run a command to tag the latest commit and push to our code hosting surround. Travis volition 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.

On Tower, we just have to specify the name of the .tar nosotros want to deploy to our hosting bucket, and Tower does the following:

1. Download the desired .tar file from our builds S3 bucket.
2. Extracts the contents and swap in the configuration file for specified environment.
3. Upload the contents to the hosting saucepan.
4. Mail a notification to Slack to inform about the successful deployment.

This whole procedure is done under thirty seconds and using Belfry has made deployments and rollbacks easy. If we realize that a faulty deployment has occurred, we can simply observe the previous stable tag and deploy it.

Study Links

• Ansible Tower Homepage

Alternatives

• Jenkins

Monitoring

Later on shipping the product, yous would likewise desire to monitor it for any errors.

Apart from network level monitoring from our CDN service provider and hosting provider, we use Sentinel to monitor errors that originates from the app logic.

Study Links

• Sentry Homepage

The Journey has But Begun

Congratulations on making it this far! Forepart terminate development today is hard, but it is also more interesting than before. What nosotros have covered so far will assist any new engineer to Grab'southward spider web team to get upwardly to speed with our technologies pretty quickly. In that location are many more things to be learnt, but building upward a solid foundation in the essentials will aid in learning the rest of the technologies. This helpful front end terminate spider web developer roadmap shows the culling technologies available for each aspect.

We made our technical decisions based on what was important to a chop-chop growing Catch Engineering science squad - maintainability and stability of the code base. These decisions may or may not apply to smaller teams and projects. Do evaluate what works best for yous and your company.

Every bit the front end ecosystem grows, nosotros are actively exploring, experimenting and evaluating how new technologies can make us a more than efficient team and amend our productivity. Nosotros promise that this mail has given you insights into the front finish technologies we utilize at Take hold of. If what we are doing interests you, we are hiring!

Many thanks to Joel Low, Li Kai and Tan Wei Seng who reviewed drafts of this article.

More Reading

General

• Country of the JavaScript Landscape: A Map for Newcomers
• The Hitchhiker's guide to the modern front end evolution workflow
• How it feels to learn JavaScript in 2016
• Roadmap to becoming a web developer in 2017
• Modernistic JavaScript for Ancient Web Developers

Other Report Plans

• A Study Program To Cure JavaScript Fatigue
• JS Stack from Scratch
• A Beginner'south JavaScript Study Plan

Footnotes

1. This can be solved via webpack code splitting. ↩

ii. Universal JS to the rescue! ↩

moneverelgray1.blogspot.com

Source: https://github.com/grab/front-end-guide