Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add future-proof front-end tooling guidance #585

Closed
jeddy3 opened this issue Feb 8, 2019 · 3 comments

Comments

1 participant
@jeddy3
Copy link
Contributor

commented Feb 8, 2019

As a developer
I want to know what tools I should use for writing code
So that my product is consistent with others and future-proof

Description

What tools to use and approach to take?

Links

  • Related code quality issue - #183

@jeddy3 jeddy3 added the type: story label Feb 8, 2019

@jeddy3 jeddy3 added this to Backlog in Board via automation Feb 8, 2019

@jeddy3

This comment has been minimized.

Copy link
Contributor Author

commented Feb 8, 2019

From What is Babel?:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

  • Transform syntax
  • Polyfill features that are missing in your target environment (through @babel/polyfill)
  • Source code transformations (codemods)

From @babel/preset-env:

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!

This lets us write future-friendly code because we can rely on tooling to make it compatible with older browsers.

@jeddy3

This comment has been minimized.

Copy link
Contributor Author

commented Feb 8, 2019

From PostCSS:

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

From postcss-preset-env:

PostCSS Preset Env lets you convert modern CSS into something most browsers can understand, determining the polyfills you need based on your targeted browsers or runtime environments, using cssdb.

@jeddy3

This comment has been minimized.

Copy link
Contributor Author

commented Feb 8, 2019

Monolithic non-standard language extensions like Sass (for CSS) and CoffeeScript (for JavaScript) have been superseded by a new set of frameworks which transform code with modular plugins:

The main criticism against monolithic language extensions is that it’s very easy to shoot yourself in the foot with them because they do so much out-of-the-box. As such, developers usually need to rely on discipline to avoid using troublesome features. With this new breed of modular tools we only opt-in to the features we need, and so the technical choices are enforced at the tooling level which removes the need for developer discipline.

Specification writers skimmed off the best features introduced in these monolithic language extensions and added them to their respective specs (e.g. ES6+ and various CSS specs). These new modular tools can transpile this specification-compliant code into something that current browsers understand now. This means new developers only need to understand (modern) standard CSS and JavaScript to work with our code base. The lifetime of these languages will be greater than any non-standard language extension. There is also consistency in having the same future-friendly approach for both CSS and JavaScript.

Both Babel and PostCSS have preset-env plugins which transpile their respective languages to be compatible with our target browsers. Both plugins use the browserslist configuration, which means we can specify in one location the browsers we target.

@jeddy3 jeddy3 moved this from Backlog to To do in Board Feb 8, 2019

@jeddy3 jeddy3 moved this from To do to In progress in Board Feb 8, 2019

@jeddy3 jeddy3 changed the title Add front-end tooling guidance Add future-proof front-end tooling guidance Feb 8, 2019

@jeddy3 jeddy3 closed this in #586 Feb 12, 2019

Board automation moved this from In progress to Done Feb 12, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.