# es2015

Published articles for es2015.

This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles.

## The State of ES5 on the Web

DevFeed: [The State of ES5 on the Web](<https://devfeed.tech/articles/the-state-of-es5-on-the-web-29530.md>)

Original publisher: [Read original article](<https://philipwalton.com/articles/the-state-of-es5-on-the-web/>)

Author: For library authors

Published: 2024-09-08T15:18:32Z

Content type: article

Language: en

Sources: [Philip Walton](<https://devfeed.tech/sources/philip-walton.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [legacy](<https://devfeed.tech/topics/legacy.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>), [polyfill](<https://devfeed.tech/topics/polyfill.md>), [Code](<https://devfeed.tech/topics/code.md>), [browser](<https://devfeed.tech/topics/browser.md>)

Tags: [article](<https://devfeed.tech/tags/article.md>), [browser](<https://devfeed.tech/tags/browser.md>), [build-tools](<https://devfeed.tech/tags/build-tools.md>), [code](<https://devfeed.tech/tags/code.md>), [dependencies](<https://devfeed.tech/tags/dependencies.md>), [developers](<https://devfeed.tech/tags/developers.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [legacy](<https://devfeed.tech/tags/legacy.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>), [recommendations](<https://devfeed.tech/tags/recommendations.md>), [web](<https://devfeed.tech/tags/web.md>)

### AI overview

This article examines whether web developers and JavaScript library authors still need to transpile code to ES5. It uses data about browser support, popular libraries, tools, and websites to offer production recommendations, while discussing the bundle-size costs of transpilation and polyfills.

### Source excerpt

Should web developers and JavaScript library authors still transpile their code to ES5? This post looks at what the data suggests based on what popular libraries, tools, and websites are doing

## Lazy Loading with Angular Elements and ngx-lazy-el

DevFeed: [Lazy Loading with Angular Elements and ngx-lazy-el](<https://devfeed.tech/articles/lazy-loading-with-angular-elements-and-ngx-lazy-el-21361.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2019/11/lazy-loading-angular-ngx-lazy-el/>)

Published: 2019-11-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Angular CLI](<https://devfeed.tech/topics/angular-cli.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [angular](<https://devfeed.tech/tags/angular.md>), [angular-elements](<https://devfeed.tech/tags/angular-elements.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [ci](<https://devfeed.tech/tags/ci.md>), [cli](<https://devfeed.tech/tags/cli.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [firefox](<https://devfeed.tech/tags/firefox.md>), [lazy-loading](<https://devfeed.tech/tags/lazy-loading.md>), [performance](<https://devfeed.tech/tags/performance.md>), [web-performance](<https://devfeed.tech/tags/web-performance.md>)

### AI overview

A tutorial on reducing startup time in Angular web applications through lazy loading. It focuses on lazy loading non-routed components with Angular Elements and ngx-lazy-el, and also discusses differential loading, performance budgets, and router-based lazy loading.

### Source excerpt

Lorem ipsum dolor sit amet

## Simple JavaScript API wrapper

DevFeed: [Simple JavaScript API wrapper](<https://devfeed.tech/articles/simple-javascript-api-wrapper-37352.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/simple-javascript-api-wrapper/>)

Author: Stanko

Published: 2017-12-06T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [API](<https://devfeed.tech/topics/api.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [fetch](<https://devfeed.tech/topics/fetch.md>), [Promise](<https://devfeed.tech/topics/promise.md>), [HTTP](<https://devfeed.tech/topics/http.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [fetch](<https://devfeed.tech/tags/fetch.md>), [http](<https://devfeed.tech/tags/http.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [javascript-api](<https://devfeed.tech/tags/javascript-api.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>)

### AI overview

A tutorial presenting a reusable JavaScript API wrapper built around native fetch. It explains parsing successful responses, converting HTTP failures and unresolved requests into custom errors, and handling the returned Promise. The code is provided as a native ES2015 module with usage examples and a CodePen demo using the Star Wars API.

### Source excerpt

For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If you need a polyfill isomorphic-fetch is a great one. For successful requests it will parse the response and return it. When HTTP error occursIt detects errors based on request's HTTP status. it will throw a custom error with status code, error message and response (parsed if it is a JSON). If request never gets resolved, same custom error will be thrown but response will be set to null and status code to REQUEST_FAILED. Please note that function will return a Promise so you need to handle how it resolves. Code # It is written as a native ES2015 module, which means you may need to transpile it depending on your browser support policy. // ------------------------------------------------------ // // Simple JavaScript API wrapper // https://muffinman.io/blog/simple-javascript-api-wrapper // ------------------------------------------------------ // // For demo purposes I'm using this awesome Star Wars API const API_URL = 'https://swapi.tech/api'; // Custom API error to throw function ApiError(message, data, status) { let response = null; let isObject = false; // We are trying to parse response try { response = JSON.parse(data); isObject = true; } catch (e) { response = data; } this.response = response; this.message = message; this.status = status; this.toString = function () { return `${ this.message }\nResponse:\n${ isObject ? JSON.stringify(this.response, null, 2) : this.response }`; }; } // API wrapper function const fetchResource = (path, userOptions = {}) => { // Define default options const defaultOptions = {}; // Define default headers const defaultHeaders = {}; const options = { // Merge options ...defaultOptions, ...userOptions, // Merge headers headers: { ...defaultHea

## Deploying ES2015+ Code in Production Today

DevFeed: [Deploying ES2015+ Code in Production Today](<https://devfeed.tech/articles/deploying-es2015-code-in-production-today-29497.md>)

Original publisher: [Read original article](<https://philipwalton.com/articles/deploying-es2015-code-in-production-today/>)

Published: 2017-09-13T19:23:12Z

Content type: tutorial

Language: en

Sources: [Philip Walton](<https://devfeed.tech/sources/philip-walton.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [es2015](<https://devfeed.tech/topics/es2015.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [apis](<https://devfeed.tech/tags/apis.md>), [async](<https://devfeed.tech/tags/async.md>), [await](<https://devfeed.tech/tags/await.md>), [babel](<https://devfeed.tech/tags/babel.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [classes](<https://devfeed.tech/tags/classes.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

### AI overview

The article explains how to deploy ES2015+ JavaScript to production by serving a modern bundle to browsers that support the relevant syntax and retaining an ES5 fallback for older browsers. It discusses feature detection, polyfills, module bundlers, and Babel configuration.

### Source excerpt

Most web developers I talk to these days love writing JavaScript with all the newest language features--async/await, classes, arrow functions, etc. However, despite the fact that all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still on older browsers.

## Using Proxies with Redux Types

DevFeed: [Using Proxies with Redux Types](<https://devfeed.tech/articles/using-proxies-with-redux-types-21864.md>)

Original publisher: [Read original article](<https://reactjsnews.com/proxies-with-redux-types>)

Author: Zach Silveira

Published: 2017-03-28T16:00:00Z

Content type: tutorial

Language: en

Sources: [ReactJS News](<https://devfeed.tech/sources/reactjs-news.md>)

Topics: [Redux](<https://devfeed.tech/topics/redux.md>), [debugging](<https://devfeed.tech/topics/debugging.md>), [Code](<https://devfeed.tech/topics/code.md>)

Tags: [code](<https://devfeed.tech/tags/code.md>), [debugging](<https://devfeed.tech/tags/debugging.md>), [errors](<https://devfeed.tech/tags/errors.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [es6](<https://devfeed.tech/tags/es6.md>), [import](<https://devfeed.tech/tags/import.md>), [js](<https://devfeed.tech/tags/js.md>), [react](<https://devfeed.tech/tags/react.md>), [redux](<https://devfeed.tech/tags/redux.md>)

### AI overview

This tutorial explains how misspelled Redux action types can be imported as undefined without raising browser errors, causing reducers to fall through to their default case. It proposes using ES2015 Proxies to validate action-type properties and make such mistakes easier to detect.

### Source excerpt

One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. One of the most common problems that I run into when using Redux is trying to figure out why an action is not being captured by a reducer. For someone just getting starting with Redux, debugging this issue can be especially overwhelming because of how Redux manages data flow. So before you start pouring over configuration code, or the logic contained in your action creators and reducers, please, make sure your action types are defined and spelled correctly. In any application that I have built, most bugs that I have run into are simply due to typos. However, the solution to this particular problem is harder to spot because no errors are raised when the application is run. Take a look at the snippet below. // actionTypes.js export const FETCH_FILE_REQUEST = 'fetch_file_request'; export const FETCH_FILE_SUCCESS = 'fetch_file_success'; export const FETCH_FILE_FAIL = 'fetch_file_fail'; // filesReducer.js import { FETCH_FILE_REQUEST, FETCH_FILE_SUCESS, FETCH_FILE_FAIL } from '../actions/actionTypes'; const filesReducer = (state = {}, action) => { switch (action.type) { case FETCH_FILE_SUCESS: return { ...state, file: action.payload }; default: return state; } } export default filesReducer; Assuming we dispatched an action with type FETCH_FILE_SUCCESS, the filesReducer should catch the action before the default case is returned. But what if that is not happening? Where do we start the debugging process. There does not appear to be anything wrong with the code in the reducer; the action type was imported and matches the

## Highlight variables in Atom, Babel template strings

DevFeed: [Highlight variables in Atom, Babel template strings](<https://devfeed.tech/articles/highlight-variables-in-atom-babel-template-strings-37281.md>)

Original publisher: [Read original article](<https://muffinman.io/blog/highlight-vars-in-atom-babel-javascript/>)

Author: Stanko

Published: 2016-05-07T00:00:00Z

Content type: tutorial

Language: en

Sources: [Stanko Tadić](<https://devfeed.tech/sources/stanko-tadic.md>)

Topics: [Atom](<https://devfeed.tech/topics/atom.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [es6](<https://devfeed.tech/topics/es6.md>), [Snippet](<https://devfeed.tech/topics/snippet.md>), [Less](<https://devfeed.tech/topics/less.md>)

Tags: [atom](<https://devfeed.tech/tags/atom.md>), [babel](<https://devfeed.tech/tags/babel.md>), [css](<https://devfeed.tech/tags/css.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [es6](<https://devfeed.tech/tags/es6.md>), [less](<https://devfeed.tech/tags/less.md>), [snippet](<https://devfeed.tech/tags/snippet.md>), [template-strings](<https://devfeed.tech/tags/template-strings.md>), [variable](<https://devfeed.tech/tags/variable.md>)

### AI overview

A guide to fixing an Atom Babel plugin issue where variables in ES6 template strings are not highlighted. It provides an Atom style.less snippet that styles JavaScript variables and explains how to inspect Atom's element classes for additional CSS or LESS customizations.

### Source excerpt

Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add atom-text-editor::shadow before your rules. If anyone is interested, I'm using Monokai Seti theme.

## If You Know Sass, You Know ES2015

DevFeed: [If You Know Sass, You Know ES2015](<https://devfeed.tech/articles/if-you-know-sass-you-know-es2015-28834.md>)

Original publisher: [Read original article](<https://una.im/sass-es2015/>)

Published: 2016-02-23T00:00:00Z

Content type: comparison

Language: en

Sources: [Una Kravets](<https://devfeed.tech/sources/una-kravets.md>)

Topics: [Sass](<https://devfeed.tech/topics/sass.md>), [es6](<https://devfeed.tech/topics/es6.md>), [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Babel](<https://devfeed.tech/topics/babel.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [programming-language](<https://devfeed.tech/tags/programming-language.md>), [sass](<https://devfeed.tech/tags/sass.md>)

### AI overview

This article compares Sass and ES2015, explaining how familiarity with Sass concepts can help developers understand modern JavaScript. It discusses language design similarities, string interpolation, and using Babel to transpile ES2015 for browser compatibility.

### Source excerpt

If you know some Sass, you're probably a lot further than you think to understanding and diving into the world of modern JavaScript. This post showcases some of the similarities.

## ES6 IIFE with fat arrow functions

DevFeed: [ES6 IIFE with fat arrow functions](<https://devfeed.tech/articles/es6-iife-with-fat-arrow-functions-32301.md>)

Original publisher: [Read original article](<https://jack.ofspades.com/es6-iife-with-fat-arrow-functions/>)

Author: Jack Tarantino

Published: 2015-11-29T17:45:39Z

Content type: tutorial

Language: en

Sources: [Jacopo Tarantino](<https://devfeed.tech/sources/jacopo-tarantino.md>)

Topics: [es6](<https://devfeed.tech/topics/es6.md>), [es2015](<https://devfeed.tech/topics/es2015.md>), [function](<https://devfeed.tech/topics/function.md>), [syntax](<https://devfeed.tech/topics/syntax.md>)

Tags: [best-practices](<https://devfeed.tech/tags/best-practices.md>), [closure](<https://devfeed.tech/tags/closure.md>), [context](<https://devfeed.tech/tags/context.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [es6](<https://devfeed.tech/tags/es6.md>), [function](<https://devfeed.tech/tags/function.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [syntax](<https://devfeed.tech/tags/syntax.md>)

### AI overview

This tutorial explains how to write Immediately Invoked Function Expressions (IIFEs) in ES6 using fat arrow functions. It compares shorter syntax options, notes differences in function context, and describes a compact form for creating closures that cannot accept arguments.

### Source excerpt

Writing Immediately Invoked Function Expressions or IIFEs in ES6(Also known as ES2015 now) just got a lot easier with the introduction of fat arrow functions. (global => { const MY_CONSTANT = 'api key or something' let counter = 0 let some_array = [1,2,34,5,6,7] counter = some_array.

## ES2015 - Jump Start

DevFeed: [ES2015 - Jump Start](<https://devfeed.tech/articles/es2015-jump-start-21248.md>)

Original publisher: [Read original article](<https://juri.dev/blog/2015/08/jump-start-es2015/>)

Published: 2015-08-25T00:00:00Z

Content type: tutorial

Language: en

Sources: [Juri Strumpflohner](<https://devfeed.tech/sources/juri-strumpflohner.md>)

Topics: [JavaScript](<https://devfeed.tech/topics/javascript.md>), [Tutorial](<https://devfeed.tech/topics/tutorial.md>), [Babel](<https://devfeed.tech/topics/babel.md>), [browsers](<https://devfeed.tech/topics/browsers.md>)

Tags: [babel](<https://devfeed.tech/tags/babel.md>), [compatibility](<https://devfeed.tech/tags/compatibility.md>), [es2015](<https://devfeed.tech/tags/es2015.md>), [es6](<https://devfeed.tech/tags/es6.md>), [javascript](<https://devfeed.tech/tags/javascript.md>), [transpilers](<https://devfeed.tech/tags/transpilers.md>), [tutorial](<https://devfeed.tech/tags/tutorial.md>)

### AI overview

A learning article on ES2015 (ES6) covering browser compatibility, transpilers such as BabelJS and Traceur, browser-based tooling, and block scoping with let and const.

### Source excerpt

Lorem ipsum dolor sit amet