Guide · Open source
How to use front-end-guide: a reading path for the modern JavaScript front end
Updated · written with AI from the project's own documentation and checked against our catalogue data
front-end-guide is a written study guide from Grab's web team that explains the modern JavaScript front end ecosystem. It is aimed at engineers new to front end work, especially back end engineers joining a team that builds web apps. By the end of this guide you will know what the project is, whether it fits you, and how to work through its reading order.
Grab Front End Guidegrab/front-end-guide · ★ 15.2k · MIT Install options & downloads Quick start
- 1Confirm the guide fits you. Check the prerequisites and the 'not for' list. If you already work with current front end practice, skim rather than study in full.
- 2Open the guide. Read it online, or clone the repository with git clone https://github.com/grab/front-end-guide for a local copy.
- 3Read the SPA section first. Understand client-side rendering, the HTML5 History API and AJAX data loading before the tool sections.
- 4Work through the tool sections in order. Follow the sequence from React and Redux through styling, testing, linting and build tools.
- 5Note the reasons and alternatives. For each tool, record why Grab chose it and which alternatives the guide mentions.
- 6Follow the linked resources. Use the learning links in each section to practise the topics you find unfamiliar.
- 7Verify before adopting. Check any tool choice against its current official documentation, since the guide may be out of date.
What front-end-guide is and what it isn't
front-end-guide is a study plan, not a library or an app. It covers single-page apps, React, Redux, CSS Modules, linting, testing, build tools, and deployment. For each area it recommends tools that Grab currently considers suitable, explains why they were chosen, and links to learning resources.
The guide is published under the MIT licence and is written in JavaScript, but there is no code to run. Its own install method is reading online; the README's only setup step is cloning the repository with git clone https://github.com/grab/front-end-guide if you want a local copy.
- Type: written study guide, not a runnable project
- Licence: MIT
- Install method: read online (optionally clone the repository)
- Prerequisites: none listed by the project
git clone https://github.com/grab/front-end-guideCheck whether this guide fits your background
The README lists prerequisites that assume you already know core programming concepts, basic command line use, Git, and server-side web development with frameworks such as Ruby on Rails, Django or Express. It also expects you to understand HTTP and RESTful APIs.
The guide says it is targeted at newcomers to front end. Experienced front end developers who keep up with current practice will probably find little new in it, and the guide notes that some topics can be skipped if you already have experience in them.
- Good fit: back end engineers joining a web app team
- Good fit: new front end developers overwhelmed by the number of tools
- Good fit: teams exploring a modern JavaScript stack who want a starting point to adapt
- Good fit: students who want a structured reading order
- Poor fit: experienced front end developers already following current practice
- Poor fit: readers who need runnable code or a project to install
- Poor fit: anyone who needs current tool recommendations
Read the guide in its table of contents order
The guide is organised as a sequence, so reading it in order is the simplest approach. Start with Single-page Apps, which explains client-side rendering and why it differs from traditional server-side rendering. Then move through New-age JavaScript and User Interface, which covers React, followed by State Management with Flux and Redux.
Next come Coding with Style (CSS Modules) and Maintainability, which includes testing with Jest and Enzyme, linting JavaScript with ESLint, linting CSS with Stylelint, formatting with Prettier, and types with Flow. The last part covers the Build System (webpack), Package Management (Yarn), Continuous Integration, Hosting and CDN, Deployment, and Monitoring.
- Single-page Apps (SPAs)
- New-age JavaScript
- User Interface (React)
- State Management (Flux/Redux)
- Coding with Style (CSS Modules)
- Maintainability: testing, linting JavaScript and CSS, formatting, types
- Build System (webpack)
- Package Management (Yarn)
- Continuous Integration, Hosting and CDN, Deployment, Monitoring
Understand the key trade-offs before you adopt the stack
The guide describes single-page apps as more responsive, with fewer HTTP requests because assets are not downloaded again on each page. Its listed downsides are a heavier initial page load, an extra server step to route requests to one entry point, and weaker search engine visibility when content depends on JavaScript. The guide suggests server-side rendering or a service such as Prerender to address the last point.
It also explains why jQuery alone is not enough for large apps, because jQuery is a DOM manipulation library rather than a framework that defines app structure.
- Benefit: a more responsive feel between pages
- Benefit: client and server can be developed and released independently
- Downside: heavier initial page load
- Downside: search engines may not execute JavaScript and may see empty content
Use the guide as a starting point, not a final decision
The guide is mildly opinionated and says it will be updated periodically. Its last push was in June 2023, so check tool choices against current documentation before you rely on them. The guide itself also lists alternative choices for each area for further exploration.
If your company is exploring a similar stack, the README invites you to adapt the study plan to your needs. A comparable project is A Study Plan to Cure JavaScript Fatigue, which inspired this guide.
- Use the alternatives section of each topic to compare options
- Verify tool recommendations against current official docs
- Compare with A Study Plan to Cure JavaScript Fatigue for a second perspective
What people use it for
- A back end engineer reading the guide to understand the front end code in a web app their team maintains.
- A new front end developer using the reading order to tell which tools matter first.
- A team lead adapting the study plan as an onboarding document for a new web project.
- A student working through the topics in a structured order alongside other learning material.
Frequently asked questions
Is front-end-guide free to use?
Yes, the project is licensed under MIT. The README does not describe any paid tier.
Do I need to install anything to use front-end-guide?
No. The install method is reading online, and no prerequisites are listed. Cloning the repository with git clone https://github.com/grab/front-end-guide is optional if you want a local copy.
What does front-end-guide cover?
It covers single-page apps, React, Redux, CSS Modules, linting, testing, build tools, and deployment. Each topic explains why a tool was chosen and links to learning resources.
Is front-end-guide good for beginners?
It is written for newcomers to front end, especially back end engineers. The README also says experienced front end developers will probably find it less useful.
Are the tool recommendations up to date?
Not necessarily. The last push was in June 2023 and the guide says it is updated periodically, so check current documentation before adopting any tool.
What is an alternative to front-end-guide?
The README names A Study Plan to Cure JavaScript Fatigue as the study plan that inspired this guide, and it is listed as a comparable project.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
front-end-guide is a useful reading path for back end engineers, new front end developers and students who feel lost among front end tools. It is not a good choice for experienced front end developers, for anyone who wants runnable code, or for readers who need up-to-date tool recommendations.
Install options & downloads