Languages

Menu
Sites
Language
JavaScript Tips

Front end development has never been so complex and exciting as it is today. New tools, libraries, frameworks, and plugins emerge every other day. There is so much to learn.

Fortunately our web team at Grab has been keeping up with the latest best practices, and has incorporated the modern JavaScript ecosystem in our web apps.

The result of this is that our new hires or back end 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 learn just to complete their feature or bug fix in a web app.

It’s imperative that they are guided to embrace this evolution of the front end, 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 do what we do.

This study guide is inspired by “A Study Plan to Cure JavaScript Fatigue” and is mildly opinionated in the sense that we recommend certain libraries/frameworks to learn for each aspect of front end development, based on what is currently deemed most suitable at Grab.

We explain why a certain library is chosen and provide links to learning resources to enable the reader to pick it up on their own. Alternative choices that may be better for other use cases are provided as well for reference and further self-exploration.

If you 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 you. It is targeted at newcomers to front end.

If your company is exploring a modern JavaScript stack as well, you may find this study guide useful to your company too! Feel free to adapt it to your needs. We will update this study guide periodically, according to our latest work and choices.

Note that we’ve published this study guide on GitHub as well, and we’ll make future updates to it there.

 

https://medium.freecodecamp.org/grabs-front-end-guide-for-large-teams-484d4033cc41

Responses

51 Replies
John Ixion

Here's a list of guidelines we've found, written and gathered that (we think) works really well with most JavaScript projects

 

https://github.com/wearehive/project-guidelines

John Ixion

You have a Vue project and you heard about all things TypeScript can help you with. You decide to start using TypeScript. Here you’ll see how to do that in an approachable and pragmatic way.

 

https://alexjoverm.github.io/2017/06/28/Integrate-TypeScript-in-your-Vue-project/

John Ixion

Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby v1 is ready for action.

 

https://www.gatsbyjs.org/blog/gatsby-v1/

John Ixion

 the simplest and smallest (1.5kB) WYSIWYG text editor for web, with no dependencies

 

https://github.com/jaredreich/pell

John Ixion
John Ixion

This is a series of books diving deep into the core mechanisms of the JavaScript language. 

 

https://github.com/getify/You-Dont-Know-JS

John Ixion

This is the manuscript (draft) and code for Practical Node.js, 2nd Edition [Apress, 2017]. It's work in progress and the draft will be completed in the end of 2017

 

https://github.com/azat-co/practicalnode

John Ixion

If you’re getting started with React, use create-react-app to automate the build of your app. There is no configuration file, and react-scripts is the only extra build dependency in your package.json. Your environment will have everything you need to build a modern React app:

  • React, JSX, ES6, and Flow syntax support.
  • Language extras beyond ES6 like the object spread operator.
  • A dev server that lints for common errors.
  • Import CSS and image files directly from JavaScript.
  • Autoprefixed CSS, so you don’t need -webkit or other prefixes.
  • build script to bundle JS, CSS, and images for production, with sourcemaps.
  • An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

 

https://github.com/facebookincubator/create-react-app

John Ixion

Preact aims to deliver on a few key goals:

  • Performance: Render quickly & efficiently
  • Size: Small size, lightweight (approximately 3.5kb)
  • Efficiency: Effective memory usage (recycling, avoiding GC thrash)
  • Understandability: Understanding the codebase should take no more than a few hours
  • Compatibility: Preact aims to be largely compatible with the React API. preact-compat attempts to achieve as much compatibility with React as possible.

 

https://preactjs.com/

John Ixion

HyperApp was born out of the attempt to do more with less. We have aggressively minimized the concepts you need to understand while remaining on par with what other frameworks can do. What makes HyperApp unique among the alternatives like React, Preact, and Mithril, is its compact API, built-in state management, and the unrivaled, small bundle size.

In this article, I’ll introduce you to HyperApp and walk you through a few code examples to help you get started. Experience with other frameworks is not required, but since you are interested in HyperApp, I’ll assume you have some knowledge of HTML and JavaScript.

 

https://www.sitepoint.com/hyperapp-1-kb-javascript-library/

John Ixion

About a year ago we introduced "Now" to the world. We set out to validate very simple hypotheses. Deployment should generally not take more than one command. It should be serverless and you shouldn’t generally have to touch many knobs to scale.

Most importantly, that it should be built on open standards, be open source and use no proprietary APIs. Today, a quarter million deployments later and thousands of domains in production, we are happy to announce that "Now" is becoming a universal interface to every cloud provider.

 

https://zeit.co/blog/universal-now

John Ixion

Matrix is an open standard for interoperable, decentralised, real-time communication over IP. It can be used to power Instant Messaging, VoIP/WebRTC signalling, Internet of Things communication - or anywhere you need a standard HTTP API for publishing and subscribing to data whilst tracking the conversation history.

Matrix defines the standard, and provides open source reference implementations of Matrix-compatible Servers, Clients, Client SDKs and Application Services to help you create new communication solutions or extend the capabilities and reach of existing ones.

 

http://matrix.org/

 

JavaScript SDK

 

chat with the Matrix devs: https://riot.im/app/#/room/#matrix-dev:matrix.org

John Ixion

Blazing fast, 1kb search for Javascript

 

https://github.com/KingPixil/wade

John Ixion

Promise based HTTP client for the browser and node.js

 

https://github.com/mzabriskie/axios

John Ixion

A collection of awesome browser-side JavaScript libraries, resources and shiny things.

 

https://github.com/sorrycc/awesome-javascript

John Ixion

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

 

https://github.com/daneden/animate.css

John Ixion

Bulma is a modern CSS framework based on Flexbox.

 

http://bulma.io/

John Ixion

Fitty scales up (or down) text so it fits perfectly to its parent container.

Ideal for flexible and responsive websites.

 

https://github.com/rikschennink/fitty

John Ixion

WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-made for WeChat Web development, in order to improve and standardize the experience for WeChat users. Including components such as buttoncelldialog、 progress、 toastarticleactionsheeticon.

 

https://github.com/Tencent/weui

John Ixion

Material-UI

A Set of React Components that ImplementGoogle's Material Design

 

http://www.material-ui.com/#/

John Ixion

IPFS powers the creation of diversely resilient networks which enable persistent availability with or without Internet backbone connectivity.

 

https://ipfs.io/

John Ixion

The Tizen Advanced UI Framework allows creating and managing various kinds of UI components. These components represent a visual UI element, such as a button or slider, which provides interaction and manipulation features.

 

https://developer.tizen.org/community/tip-tech/tizen-advanced-ui-framework-guide-mobile-part-1

https://developer.tizen.org/community/tip-tech/tizen-advanced-ui-framework-guide-mobile-part-2

John Ixion

Web worker is a JavaScript that runs in background, independently of other scripts, without affecting the performance of an HTML page. User can continue to do whatever he/she wants: clicking, selecting things, etc., while the web worker runs in background.

The HTML5 Web Worker defines an API for spawning background scripts in a web application. Web Worker allows doing things like: fire up long-running scripts to handle computationally intensive tasks without blocking the UI or other scripts to handle user interactions.

Tizen embraces the benefits of widely adopted cross-platform web technologies. Web worker boosts up the performance of high computational applications like video filtering, Graphics rendering, Image processing, etc. without blocking the UI. A real life example: suppose one have to change a number on a table via input field and for that the whole table has to be recomputed. Now, if a developer tries to implement plain JavaScript on his code, that will make the UI unresponsive for long time. But with web worker, all computations could be moved to background leaving the UI interacting with user. This document focuses on basic implementation of HTML5 web worker in Tizen web application where it would generate time triggered event while running on background.

 

https://developer.tizen.org/community/tip-tech/web-worker-implementation-generating-time-triggered-event

John Ixion

Tizen Hybrid app is a combination of Tizen Web UI application and one or more Tizen Native Services or Widget applications.

The building and packaging process of Hybrid app is quite different. Many of us face problem to build and package the hybrid app. In this document, step by step approach for building hybrid app is shown.

 

https://developer.tizen.org/community/tip-tech/how-package-tizen-hybrid-app

John Ixion

Mailit is a drop-in microservice for sending emails over a REST API

 

https://github.com/dthree/mailit

John Ixion

Phonegap/Cordova: Hybrid Mobile Apps are Overtaking Native

 

https://blog.phonegap.com/hybrid-mobile-apps-are-overtaking-native-951a3aacacd1

John Ixion

A lightweight way to manipulate, traverse, compare, and format dates and times across planet Earth

  • Get/set dates and times in remote timezones
  • Global support for Daylight Savings Timeleap years + seconds, and hemispheres
  • Orient by quarter, season, month, and week
  • Remote date comparison
  • Written in ES2015 JS, published as ES5, tested for Node and the browser
  • Weighs in at just 35KB (12KB compressed)
  • Well tested, Apache 2.0 licensed

 

https://github.com/smallwins/spacetime

John Ixion

Geographic information systems (GIS) (also known as Geospatial information systems) are systems that enable users to capture, store, analyze and manage spatially referenced data. Uses of GIS range from indigenous people, communities, research institutions, environmental scientists, health organizations, land use planners, businesses, and government agencies at all levels. Tizen is a good platform for developing potential GIS application.

This tutorial will discuss on how to create high-performing geographic information system apps and smarter visualization techniques of important data for analysis. In this respect ArcGIS API for JavaScript is used. This API includes modern web technology integration and powerful geospatial capabilities that is designed to maximize productivity for building map based beautiful web applications. This tutorial may be considered as the first step to develop Tizen based GIS application having ArcGIS API.

 

https://developer.tizen.org/community/tip-tech/editable-bookmark-widget-on-map-application-tizen

John Ixion

TensorFire is a framework for running neural networks in the browser, accelerated by WebGL.

Applications powered by TensorFire can utilize deep learning in almost any modern web browser with no setup or installation.

TensorFire models run up to 100x faster than previous in-browser neural network libraries, at speeds comparable to highly-optimized native CPU code.

 

https://tenso.rs/

John Ixion

How I rediscovered my love for JavaScript after throwing 90% of it in the trash.

 

https://hackernoon.com/how-i-rediscovered-my-love-for-javascript-after-throwing-90-of-it-in-the-trash-f1baed075d1b

John Ixion

Vue.js, an MIT-licensed open source project, is a JavaScript library for building web interfaces. The library was first released in 2013, but not many developers took cognizance of it in web framework technology for the next two years. It was 2016 when Vue.js rose to fame and gained so much traction that it’s now seen as an alternative for even well established JavaScript libraries, such as Angular and React.

 

https://dev.codetrick.net/why-do-developers-now-compare-vue-js-to-javascript-giants-angular-and-react/

John Ixion

A popper is an element on the screen which "pops out" from the natural flow of your application.
Common examples of poppers are tooltips, popovers and drop-downs.

 

https://github.com/FezVrasta/popper.js

John Ixion

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

 

https://developers.google.com/web/tools/lighthouse/

John Ixion

ZeroTier is capable of a lot more than just being a VPN alternative. Especially with mobile devices, it has the ability to dramatically change how peer-to-peer apps are architected.

 

https://www.petekeen.net/building-a-private-backplane-network-with-zerotier

John Ixion

Google made an interesting announcementrecently. It was about WebRTC 1.0 and Google’s own commitment to it. It seems we’ve come to a point in time when WebRTC is considered a done deal and the rest are just details – getting bugs fixed and polishing its performance.I wanted to understand a bit more where we are headed, from the point of view of the company who lead the effort up until now. So I reached out to Niklas Blum, who is leading product management for WebRTC at Google, to answer a few of my questions.

 

https://bloggeek.me/google-webrtc-interview-niklas-blum/

John Ixion

Hyperledger Composer, the tool that we use to rapidly build and test business networks, uses Javascript to enable the creation of business actions. Once you dive in the technology, be mindful of the difference between permissioned versus non-permissioned ledgers (a.k.a. public versus private blockchains, respectively) and what they offer. We will soon be releasing our own teaching resources for developers get up to speed on Hyperledger and the best practices on developing blockchain based business networks.

 

https://www.hyperledger.org/blog/2017/08/08/developer-showcase-series-aram-barnett-vergo

John Ixion

Build an open source WebGL map using Mapbox and React

 

https://pusher.com/sessions/meetup/the-js-roundabout/webgl-map-with-mapbox-and-react

John Ixion

A friendly (and fast!) UI library from eBay that makes building web apps fun

 

http://markojs.com/

John Ixion

Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)

 

https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163

John Ixion

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency and readability.

 

https://github.com/colebemis/feather

John Ixion

... and join the YunoHost chat room

 

https://riot.im/app/#/room/#yunohost:matrix.org

John Ixion

YunoHost is a server operating system aiming to make self-hosting accessible to everyone. It is based on Debian GNU/Linux and is fully compatible with it.

Features

  • multi-user with LDAP integration
  • multi-domains
  • an email system
  • an instant messaging server
  • a Single sign-on (SSO)
  • an application system
  • a backup system
  • a regen configuration services system

 

https://yunohost.org/#/whatsyunohost_en

John Ixion

Early in Node.js I wrote an HTTP client library called request. It evolved along with Node.js and eventually became very widely depended upon.

A lot has changed since 2010 and I've decided to re-think what a simple HTTP client library should look like.

This new library, r2, is a completely new approach from request.

  • Rather than being built on top of the Node.js Core HTTP library and shimmed for the Browser, r2 is built on top of the browser's Fetch API and shimmed for Node.js.
  • APIs are meant to be used with async await, which means they are based on promises.
const r2 = require('r2')

let html = await r2('https://www.google.com').text

Simple JSON support.

let obj = {ok: true}

let resp = await r2.put('http://localhost/test.json', {json: obj}).json

Simple headers support.

let headers = {'x-test': 'ok'}

let res = await r2('http://localhost/test', {headers}).response

Being written to the Fetch API is a huge benefit for browser users.

When running through browserify request is ~2M uncompressed and ~500K compressed. r2 is only 66K uncompressed and 16K compressed.

 

https://github.com/mikeal/r2

John Ixion

Anime is a lightweight JavaScript animation library. It works with any CSS Properties, individual CSS transforms, SVG or any DOM attributes, and JavaScript Objects.

 

https://github.com/juliangarnier/anime

John Ixion
John Ixion

There's been a good deal of ongoing discussion about Google AMP – Accelerated Mobile Pages.

Quite a few high-profile web developers have this year weighted in with criticism and some, following a Google conference dedicated to AMP, have cautioned users about diving in with both feet.

These, in my view, don’t go far enough in stating the problem and I feel this needs to be said very clearly: Google's AMP is bad – bad in a potentially web-destroying way. Google AMP is bad news for how the web is built, it's bad news for publishers of credible online content, and it's bad news for consumers of that content. Google AMP is only good for one party: Google. Google, and possibly, purveyors of fake news.

 

https://www.theregister.co.uk/2017/05/19/open_source_insider_google_amp_bad_bad_bad/

John Ixion

After a month in alpha testing, the OpenBazaar 2.0 beta has now been released. You can download the beta now. If you try the beta, please note the warnings and follow the guidelines and tutorial on the beta page.

The beta uses real Bitcoin and real listings.

If you use the beta and run into a problem, please report the issue in the OpenBazaar 2.0 beta Megathread on our subreddit, or use the built-in “Feedback” button in the client.

 

https://www.openbazaar.org/blog/openbazaar-2-0-beta-released/

 

https://github.com/OpenBazaar

John Ixion

An efficient server implies a lower cost of the infrastructure, a better responsiveness under load and happy users. How can you efficiently handle the resources of your server, knowing that you are serving the highest number of requests as possible, without sacrificing security validations and handy development?

Enter Fastify. Fastify is a web framework highly focused on speed and low overhead. It is inspired from Hapi and Express and as far as we know, it is one of the fastest web frameworks in town. Use Fastify can increase your throughput up to 100%.

 

http://www.fastify.io/

John Ixion

Moon is a minimal, blazing fast library for building user interfaces. It combines the positive aspects of popular libraries into one small package. It's super lightweight, and includes advanced optimizations to ensure fast render times. The API is small and intuitive, while still remaining powerful.

 

http://moonjs.ga/