Plan to switch to ES6 syntax
See original GitHub issueNow that IE support has been dropped in 1.84, we should make a plan to update our code. This issue can be a place to brainstorm ideas for these changes.
There are some things that need to happen before we can start making changes in CesiumJS:
- Update coding guide
- Update eslint config
Other things to think about:
- The
when
library is not completely compatible with native promises, use ofasync
andawait
might need to be delayed until we get rid ofwhen
. - Some ES6 features might be a performance downgrade from ES5
- Can we make the switch from
var
tolet
andconst
now? Some of this effort already started with the last gltf-pipeline PR: https://github.com/CesiumGS/gltf-pipeline/pull/600.
Issue Analytics
- State:
- Created 2 years ago
- Reactions:3
- Comments:10 (10 by maintainers)
Top Results From Across the Web
A Practical guide to ES6 modules - freeCodeCamp
The solution is to utilize ES6's syntax, import and export statements, an elegant and maintainable approach that allows us to keep things ...
Read more >Getting started with ECMAScript6 - Pluralsight
Fortunately, there's a project called Babel which allows you to convert your ES6 code into ES5 code. This means that you can still...
Read more >ES6 - Syntax - Tutorialspoint
ES6 - Syntax, Syntax defines the set of rules for writing programs. ... A JavaScript program can be composed of − ... break,...
Read more >ES6 In Depth: Modules - the Web developer blog
Your ES6 code can import individual functions from Lodash: import {each, map} from "lodash"; each([3, 2, 1], x => console. log(x));
Read more >ES6 Modules and How to Use Import and Export in JavaScript
The ES2015 (ES6) edition of the JavaScript standard gives us native support for modules with the import and export syntax.
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’m glad to see the official intention to update the syntax of the source code.
Using
let
andconst
avoids the problem of variable promotion in JavaScript:if use
var
the above code will run well:const
maintains the immutability of variables:If you use
var
to make the code run normally, there is generally no need to change it tolet
andconst
.For the
for ... of
mentioned by @ptrgags , I have seen in some evaluation reports that the performance of iterative access to the object’skey
andvalue
is acceptable, but the performance of iterative access to the array may not be as good as that offor ( let i = 0; i <someLength; i++) {/* some code */ }
and theArray.prototype.forEach
method.Modularization technology has been changed from
requirejs
toesmodule
in version 1.63, which has done a good job.I have used the
vitejs
packaging tool, and have usedCesiumJS
in thereactjs
andvuejs
frameworks. Adding some guidance documents combined with these front-end frameworks maybe a good idea.The above are some of my simple views, I hope it will be useful to the official.
In addition, is it possible to extract the math module of CesiumJS (most of the codes is in the
Source/Core
directory) separately into an npm package? This is a relatively complete js math library I have seen so far.Background
Motivation
CesiumJS currently disallows using many language features of ES6 (as seen here). As part of our efforts to modernize the CesiumJS code base and tooling, we want to revisit our usage of ESLint and take advantage of the latest features. This will be beneficial to all contributors to CesiumJS.
Proposed Changes
Move eslint-config-cesium to its own repository
Upgrading eslint configuration in CesiumJS
Inside CesiumJS, there are 6 configurations:
.eslintrc.json
Apps/.eslintrc.json
Apps/Sandcastle/.eslintrc.json
Apps/TimelimeDemo/.eslintrc.json
Source/.eslintrc.json
Specs/.eslintrc.json
Specs/TestWorkers/.eslintrc.json
Here’s how they depend on each other, with ES6 configurations in green and ES5 configurations in red:
eslint-config-prettier
- Turns off all rules that are unnecessary or might conflict with Prettier. I don’t believe there is any change needed here.eslint-config-es
- We use several rules from this, but the key plugin that we need to remove isplugin:es/restrict-to-es5
that is appled inSource/.eslintrc.json
Exceptions
As of 1.93, we use disable eslint in our code for the following rules:
Note: It was easy enough to find these because in most cases, we specify the rule being broken. However, in other cases, we just use
eslint-disable-line
. We should enforce that all rules being broken be explicitly mentioned.Current Rules
At the moment, the primary source of ES6 restrictions come from the
eslint-plugin-es
plugin. Specifically, from the use of theplugin:es/restrict-to-es5
configuration. From the source code of the module, we can see that this configuration is composed of the following plugins:Since each of these is composed of many rules, it may be cumbersome to create a PR for each one. Therefore, I propose that we incrementally work through each of these plugins - with a PR for removing the restrictions for each one, eventually ending up with support for ECMAScript 2020, which is what we should set our
ecmaVersion
to.Additionally, going through the ESLint documentation for environments, I noticed that the
jasmine
environment only adds global variables for version 1.3 and 2.0. There is a more up to date plugin calledeslint-plugin-jasmine
. I don’t want to update for the sake of updating, but I think it may be worth investigating once the core upgrades are done.Another step may be to use
eslint-plugin-jsdoc
to ensure consistency in our documentation.Proposed Rules
I went through all the rules available in
eslint-plugin-es
and found some rules that I think we may want to impose:Ideally, anything we exclude we exclude with good reason. I selected these on first impression and am hoping I can get more feedback on what we should allow or not.
Upgrade coding guide