[{"name":"ECMAScript 2015 (ES6)","quadrant":"Languages & Techniques","ring":"Adopt","isNew":true,"description":"[ECMAScript 2015](http://es6-features.org/) (initially referred to as ES6) was finalized in June 2015 and introduces new syntax for writing complex applications (including classes & modules) and is generally a sorely needed upgrade to the language. As of Q1 2017, majority of the ES6 features are supported by the common browsers. The not supported ES6 features can be used with the [Babel](https://babeljs.io/) transpiler.","opinion":"We have been an active adopter of ES6 features ever since it's inception, initially through transpilers and later as direct features. Apps without ES6 features usage are being migrated."},{"name":"CoffeeScript","quadrant":"Languages & Techniques","ring":"Hold","isNew":true,"description":"[CoffeeScript](http://coffeescript.org/) is a programming language that transcompiles to JavaScript. It adds syntactic sugar in an effort to enhance JavaScript's brevity and readability.","opinion":"We started using CoffeeScript in 2015. The primary reason was to reduce boiler plate code due to JavaScript idiosyncrasies. Example - [Pros and cons of CoffeeScript](http://softwareengineering.stackexchange.com/questions/72569/what-are-the-pros-and-cons-of-coffeescript). It did improve our productivity during the time of usage and multiple apps based out of CoffeeScript run in production. But as of 2017 Q1, we no longer use it because ES2015/ES6 solves a lot of the problems that CoffeeScript was trying to solve without drastic syntax changes. Migration of existing apps to ES6 is in backlog and will be picked on case-by-case basis."},{"name":"React JSX","quadrant":"Languages & Techniques","ring":"Adopt","isNew":true,"description":"[JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) is a JavaScript syntax extension that looks similar to XML. It is developed by Facebook and is acknowledged for the benefit of writing composable micro-components.","opinion":"We've been active users of React JSX ever since its beta stage. The ability to define every UI element as a component and pass-on rich state to the components are very beneficial. Lesser number of bugs are being observed in production apps as the views are reactive to how the state of the app changes."},{"name":"Web Components","quadrant":"Languages & Techniques","ring":"Assess","isNew":true,"description":"[Web Components](https://www.webcomponents.org/) are a set of standards currently being produced by Google engineers as a W3C specification that allow for the creation of reusable widgets or components in web documents and web applications.","opinion":"We assessed WebComponents in its early alpha stages and found it promising for the core concept of representing every visual item as a component. From the time it's assessed, the list of components repository has grown drastically and we're looking forward to trying Web Components in one of our upcoming project."},{"name":"HAML","quadrant":"Languages & Techniques","ring":"Adopt","isNew":true,"description":"[HAML](http://haml.info/) (HTML abstraction markup language) is based on one primary principle - markup should be beautiful. HAML accelerates and simplifies HTML template creation.","opinion":"Some of our production apps are already using HAML. Quicker turn-around time of app development is being observed for apps developed using HAML."},{"name":"LESS","quadrant":"Languages & Techniques","ring":"Hold","isNew":true,"description":"[LESS](http://lesscss.org/) is a CSS pre-processor; it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.","opinion":"We're a major consumer of [Bootstrap](http://getbootstrap.com/) and ever since Bootstrap made SASS as its default, LESS has been put on hold. All existing apps are already migrated to SASS."},{"name":"SASS","quadrant":"Languages & Techniques","ring":"Adopt","isNew":true,"description":"[Sass](http://sass-lang.com/) is an extension of CSS and defines a clean structured way of writing CSS by allowing to modularize CSS snippets while offering a whole slew of features which are practised in javascript environment. Features like variables, external imports, functions and extensibility allow to experience the benefits of modular patterns.","opinion":"Given SASS advantages, we actively adopt it for styling our web apps. SASS adds defined structure to app styling code base and make the code easily readable. The extensible nature allowed us to define low level themes and reuse it across apps."},{"name":"PostCSS","quadrant":"Languages & Techniques","ring":"Trial","isNew":true,"description":"[PostCSS](http://postcss.org/) was launched as a method to use JavaScript for CSS processing. PostCSS on its own is simply an API, which, when used with its vast ecosystem of plugins, offers powerful abilities.","opinion":"Because of its promising custom plugins and tools for transforming styles, the language is under active trial. [Autoprexifer](https://github.com/postcss/autoprefixer) is one common plugin on top of PostCSS that is being used."},{"name":"Yeoman","quadrant":"Languages & Techniques","ring":"Trial","isNew":true,"description":"[Yeoman](http://yeoman.io/) helps you to kickstart new apps by providing generator templates with frameworks of developer's choice. Any developer who want to quickly bootstrap a web app can pick the web frameworks of his/her choice and let Yeoman generate the scaffolding of project structure.","opinion":"We picked up Yeoman generators like [React-starter-kit](https://github.com/kriasoft/react-starter-kit/tree/yeoman-generator) and have active production apps running on them. We handpicked some from the huge ecosystem of generators under active trial and will use them as need arises. For any non-front-end engineer who wants to quickly prototype an app, Yeoman is the preferred choice to bootstrap at a quicker pace."},{"name":"Material Design","quadrant":"Languages & Techniques","ring":"Trial","isNew":true,"description":"Google created [Material Design](https://material.io/guidelines/) principles with the intention to create a visual language and a single unified experience across platforms.","opinion":"We tried Material Design in one of our internal apps, and we're actively following its associated frameworks. The themes and the user experience are seamless and being actively adopted to Google applications. We're in wait-and-watch mode for extensive adoption of the technique, as the concept gives flexibility only to override the theme and colors of the visual elements, but not the feel and behaviour. We will move the technique to adopt once Material design provides extensive overriding capabilities to fit the technique to our own visual theme and behaviour."},{"name":"Typed Javascript","quadrant":"Languages & Techniques","ring":"Adopt","isNew":true,"description":"Javascript being loosely typed, gives the developer flexibility to play with data types. While in some cases, this flexibility is useful, most of the cases, apps need to be strict-typed in-order to communicate with the backend.","opinion":"[Flow](https://flowtype.org/) and [TypeScript](https://www.typescriptlang.org/) are two frameworks which we assessed; we ended up picking Typescript as it was better at catching type errors during compilation. The active community of TypeScript and its support for all the common libraries is another added advantage."},{"name":"Node.js","quadrant":"Frameworks","ring":"Adopt","isNew":true,"description":"[Node.js](https://nodejs.org/en/) is a JavaScript runtime built on top of Chrome's V8 JavaScript engine. It's lightweight, efficient, event-driven model and carries a extensive community of plugins. ","opinion":"We adopted Node.js since its early stages, and a large set of packages help us quickly bootstrap an app and get it to production. Applying ES6 features and Typescript on top of Node.js proved to be a wholesome experience of building highly productive web apps. We runs apps on different versions of Node.js ranging from v6.0 to as recent as v7.7.x."},{"name":"Io.js","quadrant":"Frameworks","ring":"Hold","isNew":true,"description":"[Io.js](https://iojs.org/en/) was a fork of Node.js. The benefits being adoption of performance improvements of V8 and [Semver](http://semver.org)-based release cycles.","opinion":"We used Io.js for a brief period, but then put Io.js on hold when Io.js merged back with Node.js."},{"name":"Express","quadrant":"Frameworks","ring":"Adopt","isNew":true,"description":"[Express](http://expressjs.com/) is a [Node.js](https://nodejs.org/en/) web application framework with many HTTP utility methods and act as middleware for building web applications. ","opinion":"Many utilities and an active community make Express an easy choice of middleware for all Node.js apps for us."},{"name":"Meteor","quadrant":"Frameworks","ring":"Assess","isNew":true,"description":"[Meteor](https://www.meteor.com/) is a highly-opiniated platform to build web, mobile and desktop apps with a same set of javascript code and connects database to end user's screen with high set of integrations.","opinion":"We assessed Meteor during its beta stage. We observed open-source apps with lesser code and tighter integrations, but support of the community and set of frameworks on top of it were quite less at that time. For now, we have left Meteor in the Assess stage and will pick it back in later part of 2017 to re-assess the framework."},{"name":"TypeScript","quadrant":"Frameworks","ring":"Adopt","isNew":true,"description":"[TypeScript](https://www.typescriptlang.org/) is a free and open-source programming language developed and maintained by Microsoft. It is a strict superset of JavaScript and adds static typing to the language.","opinion":"Initially, we had a hard-time debugging non-typed JS and the turn-around time to fix an issue was very high. Such problems led us to explore possibilities of typed JavaScript. While assessing TypeScript in some of open-source apps, we found that though the initial development time was more compared to developing in Javascript, but once the app hit production, maintenance of the app has been highly productive. Any new member joining the team found it easy to bootstrap on the code base. While existing projects continue to remain in Javascript, any new project, TypeScript has become the default choice."},{"name":"Koa","quadrant":"Frameworks","ring":"Assess","isNew":true,"description":"[Koa](http://koajs.com/) is an alternate to Express+Connect with better support for error handling & middleware cascading. Koa is built using ES6 generators (with Koa v2 dropping around April 2017 with `async`/`await` support) and more lightweight.","opinion":"We design lightweight server apps with pure REST API. Majority of the heavy lifting is handled in client. For such lightweight server, express+connect fits as an apt combination. Koa is kept at assessing stage due its pros and cons; pros being the lightweight and cons being lesser support for routing and file serving."},{"name":"Backbone.js","quadrant":"Client Libraries","ring":"Hold","isNew":true,"description":"[Backbone.js](http://backbonejs.org/) provides a Model-View-Collection structure to web applications and helps with utilities to build APIs RESTful.","opinion":"We were an early adopter of Backbone.js due to to its minimalist MVC model, but with Redux handling unidirectional flow of events and virtual DOM updates, we've put Backbone on hold."},{"name":"AngularJS 1.0","quadrant":"Client Libraries","ring":"Hold","isNew":true,"description":"[Angular 1.0](https://angularjs.org/) was developed by Google to build dynamic web pages with support for data-binding and templates on client side.","opinion":"We evaluated AngularJS for some internal projects, but put the 1.0 version on hold after the release of Angular 2.0."},{"name":"AngularJS 2.0+","quadrant":"Client Libraries","ring":"Assess","isNew":true,"description":"[Angular 2.0+](https://angular.io/) is rewritten in TypeScript and has made Components first-class citizens.","opinion":"Although we're a React-heavy shop, we are currently assessing possibilities of Angular 2.0+ use; simplified directives & built-in support for Web sockets are some features which look promising."},{"name":"React","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[React](https://facebook.github.io/react/) is an open-source JavaScript library providing a view for data rendered as HTML.","opinion":"React with benefits of composable components and intelligent state maintenance has made it our default client-side framework. It abstracts the DOM away from the app and supports one-way data flow, as an alternate to Angular's two-way binding. Moving from backbone, the learning curve initially seemed to slow progress a little bit, but it made the team more productive in the longer run."},{"name":"Redux","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Redux](http://redux.js.org/) is a state container for JavaScript apps and helps the app to behave consistently.","opinion":"Redux helps to plug-in immutable state to a web app and its combination with React help to enable unidirectional state flow, thus resulting in lesser bugs in the code."},{"name":"MobX","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[MobX](https://github.com/mobxjs/mobx) is a state management system that is somewhat similar to Redux, but is less opinionated. It makes state management very simple by transparently applying functional reactive programming (TFRP).","opinion":"We use it in some React-based projects. We prefer MobX over Redux for apps where automatic state flow makes more sense."},{"name":"Ember.js","quadrant":"Client Libraries","ring":"Assess","isNew":true,"description":"[Ember.js](http://emberjs.com/) is a full lifecycle MVC framework that supports [Handlebars](http://handlebarsjs.com/) templates. It promises improved developer productivity and has common utilities to build apps faster.","opinion":"Though we are fans of non-opinionated frameworks, we're currently assessing the use of Ember.js for one of our new products to see if there are improvements to productivity."},{"name":"Polymer","quadrant":"Client Libraries","ring":"Assess","isNew":true,"description":"[Polymer](https://www.polymer-project.org/) lets you declaratively create new [Web components](http://webcomponents.org).","opinion":"We assessed Polymer it's early alpha stages, and we continue to keep an eye on Polymer. We feel Polymer would gain huge community adoption in the future, since it's one of the early adopters of web components."},{"name":"Bootstrap 3.x","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Bootstrap 3.x](http://getbootstrap.com/) is the most popular HTML framework with in-built support for responsive design, built by Twitter.","opinion":"We were an early adopter of Bootstrap and it is our default framework for designing webapps. It took a lot of effort to move from 2.x to 3.x, but the benefits of 3.x justified the efforts invested."},{"name":"Bootstrap 4.x","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Bootstrap 4.x](https://v4-alpha.getbootstrap.com/), still in [Alpha]((https://v4-alpha.getbootstrap.com/)), is a major revision to our favourite CSS framework. It introduces Flexbox support (finally!) and includes many new welcome changes like a `rem`-based grid, [cards](http://v4-alpha.getbootstrap.com/components/card/) and built-in Tether!","opinion":"Being an Alpha release, it is bound to break; but we have begun using Bootstrap v4 for a few internal projects."},{"name":"Foundation","quadrant":"Client Libraries","ring":"Trial","isNew":true,"description":"[Foundation](http://foundation.zurb.com/) is an alternative to Bootstrap with lightweight code and built with better understanding of web accessibility.","opinion":"With more form controls out of the box and flexible navigation patterns, we're big fans of Foundation. If we face use-cases specific to these advantages, Foundation seems to be preferred choice than Bootstrap."},{"name":"Material UI","quadrant":"Client Libraries","ring":"Trial","isNew":true,"description":"[Material UI](https://www.material-ui.com/#/) framework of UI components built with React by Google. With React being in adoption, and Google introducing Material UI guidelines, The Material UI HTMl/CSS framework provides a combination of the two.","opinion":"We use Material UI framework in some of our projects and we're evaluating the possibilities of adopting more of Material UI themes and guidelines."},{"name":"Lodash","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Lodash](https://lodash.com) provies utilities to act and manipulate JSON data. It has flexibility to work both in browser as well as server side.","opinion":"Lodash is used by virtually every single webapp out there, and we're no exception. Lodash cuts down on development time and helps us write simpler and more readable code."},{"name":"Underscore.js","quadrant":"Client Libraries","ring":"Hold","isNew":true,"description":"[Underscore.js](http://underscorejs.org/) A JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.","opinion":"Underscore in an utility similar to lodash, but given that Lodash has grown into a more consistent superset of Underscore features for NodeJS apps, we have Underscore on hold for now."},{"name":"Isomorphic Fetch","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Isomorphic Fetch](https://github.com/matthew-andrews/isomorphic-fetch) helps write a single piece of code for AJAX calls, which can work both on the server as well as the client side.","opinion":"Isomorphic Fetch brings us one small step closer to maintaining a unified codebase for both server & client; It works well on both the browser and Node.js."},{"name":"jQuery","quadrant":"Client Libraries","ring":"Hold","isNew":true,"description":"[jQuery](https://jquery.com/) is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.","opinion":"With React adopted for its component based approach, jQuery features have become a very limited for our current needs, we've put jQuery on hold and will possibly use it when need arises."},{"name":"RxJS","quadrant":"Client Libraries","ring":"Trial","isNew":true,"description":"[Reactive eXtensions of JavaScript](https://github.com/Reactive-Extensions/RxJS) is a set of libraries for composing asynchronous and event-based programs using observable collections and query operations. It acts like lodash for DOM events and allows developer to chain a sequence of operations both on data as well as DOM events.","opinion":"We have tried RxJS in one of our apps which is in need of heavy DOM interactions. We continue to follow the community for more use-cases."},{"name":"Socket.IO","quadrant":"Client Libraries","ring":"Adopt","isNew":true,"description":"[Socket.IO](https://socket.io/) is a library that provides comprehensive support for WebSockets.","opinion":"It is isomorphic (meaning we can use it on both the client & the server sides) and supports automatic reconnection and disconnection detection, making for a very robust and reliable WebSocket library. We use Socket.IO for real-time IPCs between many of our microservices."},{"name":"NPM","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[NPM](https://www.npmjs.com/) is the default package manager that ships with Node.js.","opinion":"For a number of projects, we simply use npm scripts for test runs & build processes."},{"name":"Yarn","quadrant":"Testing & Build Tools","ring":"Trial","isNew":true,"description":"Written by Facebook as an alternative to NPM, [Yarn](https://yarnpkg.com/) is a package manager. Yarn uses a deterministic algorithm to quickly flatten dependencies, resulting in a completely flat dependency tree and *very fast* installation times. Yarn is also a drop-in replacement for NPM (well, almost) and so migrating should be relatively painless.","opinion":"Yarn is exciting to us for a lot of reasons, but mostly a flat dependency tree & very fast install times. We've begun trials of Yarn over our in-house NPM repository. The Indix Tech-Radar uses Yarn for package management."},{"name":"Grunt","quadrant":"Testing & Build Tools","ring":"Hold","isNew":true,"description":"[Grunt](https://gruntjs.com/) is a config-based build automation tool as opposed to Gulp which is code based.","opinion":"Grunt was one of the first task runners to arrive on the scene, and we immediately adopted it. But after Gulp was introduced, we noticed that the performance of Grunt in terms of file processing is comparatively worse to Gulp. We put Grunt on hold and adopted Gulp instead."},{"name":"Gulp.js","quadrant":"Testing & Build Tools","ring":"Hold","isNew":true,"description":"[Gulp](http://gulpjs.com/) uses the power of Node.js streams to automate the build workflow.","opinion":"After Gulp was introduced, the community around it picked up a lot of steam owing to the power of streams and its code-over-config paradigm. We used Gulp for a lot of our apps until Webpack came along."},{"name":"Webpack","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[Webpack](https://webpack.github.io/) is a module bundler that promises chunked dependency trees and small loading times while bundling even very large products.","opinion":"After having used both Grunt and Gulp for bundling our static assets, Webpack was a logical next step; Webpack offers tons of plugins that take most of the work out of bundling dependencies, and our engineers get to focus on building the real stuff. We now use Webpack on most of our webapps."},{"name":"Mocha","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[Mocha](https://mochajs.org/) is a unit testing Javascript testing framework, with support for asynchronous tests, coverage reports, handling uncaught errors and timeouts.","opinion":"Mocha has been the most popular test framework for quite a while now, and we naturally adopted the tool for the huge community around it."},{"name":"Chai","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[Chai](http://chaijs.com/) is a [BDD](https://en.wikipedia.org/wiki/Behavior-driven_development) assertion library and easily pairable with Mocha.","opinion":"Chai comes with a range of assertion interfaces & plugins that improves productivity during TDD. We love the chaining capabilities of Chai's assertions."},{"name":"Jest","quadrant":"Testing & Build Tools","ring":"Assess","isNew":true,"description":"[Jest](https://facebook.github.io/jest/) is built by developers of React and provides powerful mocking functions as default behaviour. It virtualizes Javascript environment using [JSDOM](https://github.com/tmpvar/jsdom) and has utilities to test varied DOM behaviour.","opinion":"We initially tried Jest in one of our React apps. But due to slow performance aspects of Jest, we've put the framework back to assess mode; we're actively following the community, looking for performance improvements."},{"name":"Istanbul","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[Istanbul](https://github.com/gotwarlost/istanbul) is a code coverage measurement tool from the YUI team and offers coverage for statement, branches and functions.","opinion":"It's multiple report formats and support as both a command line tool as well as a library makes Istanbul our favourite coverage tool."},{"name":"Jasmine","quadrant":"Testing & Build Tools","ring":"Hold","isNew":true,"description":"[Jasmine](https://jasmine.github.io/) was one of the earliest Javascript testing tools and comes as a package with in-built assertion utilities.","opinion":"Jasmine doesn't come with a test runner, while Mocha does. We've put Jasmine on hold, with Mocha + Chai being adopted."},{"name":"Nock","quadrant":"Testing & Build Tools","ring":"Assess","isNew":true,"description":"[Nock](https://github.com/node-nock/nock) is a HTTP mocking and expectation library and provides utilities to mock RESTful APIs.","opinion":"Since most of our products are API-based microservices, we have been actively assessing the use of Nock to mock API responses for our tests."},{"name":"WebdriverIO","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[WebdriverIO](http://webdriver.io/) provides Selenium bindings for Node.js, which allows us to write functional tests. It allows to write a series of asynchronous commands which is run on a headless browser and couples well with Mocha+Chai combination.","opinion":"We're using WebdriverIO as the default functional testing tool for all of our web apps as it allows a great deal of control over our test cases and also comes with very good tooling."},{"name":"Bower","quadrant":"Testing & Build Tools","ring":"Hold","isNew":true,"description":"[Bower](https://bower.io/) is a package manager for all client-side libraries.","opinion":"Although Bower started out as a \"NPM for the front-end\" tool with a guaranteed flat dependency tree, with the advent of NPM 3, Webpack & Rollup - the tooling is much better and there is really no need for another package manager. With our move towards Yarn as our choice for package management, we have put Bower on hold."},{"name":"Browser Stack","quadrant":"Testing & Build Tools","ring":"Adopt","isNew":true,"description":"[Browser Stack](https://www.browserstack.com/) provides a plethora of browser testing capabilities across different OS.","opinion":"Browser Stack being a market leader in that domain, we have adopted it as our default browser testing tool; we automatically test all of our consumer-facing products on all popular browsers."}]