Client Tool Classification

Cover Image Source: medium.com/@withinsight1/the-front-end-spec..

So, though you are a beginner or expect, you would be using lot of tools that aid in code development, its testing, fixing any errors, making it public/live, hence making your life easier.

All of these tools would mainly be classified into 3 categories.

1. Safety Net Tools

these tools are useful during code development.

2. Transformation Tools

these tools transform your code. Like one language/syntax to another.

3. Post-development Tools

these tools are helpful during testing and deployment.

Few examples under each category:

Safety Net

  1. Linters
    • Eslint

      a highly configurable tool for catching potential syntax errors and encouraging "best practices"

    • csslint
    • webhint

      that surfaces best practices including approaches to accessibility, performance, cross-browser, security, testing for PWAs etc.

  2. Source Code Control (version control)
    • SVN
    • Git
  3. Code Formatters
  4. Bundlers/Packagers

    these get your code ready for production. Some features are like removing unnecessary spaces which reduces the size (minifying), removing unnecessary lib's that your code is not using (tree-shaking).

Transformation

These Tools convert Code to browser-compatible code

  1. Write code using latest language features, and have it transformed which works on most of the devices including old browsers that don't support these features in native lang.

    • Babel

      JavaScript compiler that allows developers to write their code using cutting-edge JavaScript, which Babel then takes and converts into old-fashioned JavaScript that more browsers can understand

    • PostCSS

      allows to write cutting-edge latest CSS. If there is no equivalent way in old browsers, PostCSS will install JavaScript polyfill to emulate the same behavior.

  2. Write code in entirely different language and have it transformed

    • Sass/SCSS

      allows you to use variables, nested rules, functions and other features some of which are not available in native.

    • TypeScript

      superset of JavaScript that provides additional features. TypeScript compiler will covert Typescript Code to JavaScript when building for production.

  3. Frameworks: React, Ember, Vue etc

    built on top of vanilla JS, allows you to use custom syntax, which later be transformed.

Post-development

This makes sure that your code makes it to servers and continues to run. This stage runs mostly automatically, unless there is an issue.

  1. Testing

    1. Frameworks for writing test
    2. Automated tests
  2. Deployment

    • tools to get your site published
      • Netlify
      • Vercel
      • Github Pages
  3. Auditing Tools/Quality/etc

Exhaustive List of Tools: frontendmasters.com/books/front-end-handboo..

Source: MDN

No Comments Yet