Aphinya Dechalert

At the foundation of every web app, there is a collection of JavaScript frameworks and libraries. [Angular](https://angular.io/), [React](https://reactjs.org/), and [Vue](https://vuejs.org/) is the most talked-about and used JavaScript structures currently deployed across different types of projects, businesses, and organizations.

While at its core, Angular, React, and Vue is essentially JavaScript, vanilla JavaScript is not the easiest to deal with when views and frontend data management start to grow. In a nutshell, Angular, React, and Vue offers a structured way to communicate code between developers, organize views, and connect them up in a manageable and repeatable process.

## Let's start with Angular

Angular as we currently know it started out its life as something completely different. The structure, the cohesion, and the way things communicate with each other looked more like React in design with its own distinctive Angular-esque `{{curly brackets}}`.

Two-way binding used to be available until developers learned the hard way that multi-directional data communication is hard to manage over time. As the application and its data grew, so did the complexity and potential nodes of support that needs to be monitored. In the current form of Angular, they've adopted unidirectional data binding, which means that data can only be inherited from a parent-to-child direction and not the other. 

In addition to this, a module's separation of concern is split between three different files - the module, the HTML, and the CSS. This means that data, its logical processes, and views are physically separated. 

## What about React?

React has exploded in popularity over the years. In part, it is a lot easier to pick up than Angular. When it comes to React, the setup is minimal and each component is contained to the smallest visual and functionality set possible.

Then it just becomes one big jigsaw task of composing your views and linking up everything via `props` injections. While you can do this in Angular, the way React is structured makes it much easier for beginners and veterans of code to perform. 

From an implementation point of view, React is easy to pick up, integrate into current projects, and highly modular - if it is correctly written.

Unlike Angular, where structure is required and pre-baked into the framework, React's freedoms do come with a series of costs. New developers (especially those who are also new to code in general) are more likely to create tightly coupled architectures. Data management and code modularization can easily be abused. 

Despite this, the ecosystem of React developers is also growing at a faster rate due to the number of starter free courses pushed by major code learning spaces such as Free Code Camp, Code Academy, and HarvardX. As a result, more developers are talking about React, resulting in more resources due to the strong and constantly growing community. With over [2 million GitHub repositories](https://github.com/search?q=react) that are related to React in some form, React is bigger than [Angular (840k)](https://github.com/search?q=angular) and [Vue (644k)](https://github.com/search?q=vue).

## Where does Vue fit in with the Angular vs. React debate?

Vue is an interesting one. In a way, it can be seen as a fork of Angular.js, pruned and trimmed to only contain the good and favorite bits. It came out three years after Angular.js' debut and three years before Angular's architectural framework rewrite.

Over the years, it has grown into its stand-alone JavaScript framework sued for building user interfaces and single-page applications. Syntactically, it is very much like Angular.js but with better scoping controls and easier routing implementations. Templating is achieved through a series of components that can be modularized and injected with properties for data sharing and flow through.

It is much more lightweight than Angular but a little beefier than React when it comes to size. In part, this is because React is a library with a focus on UI rendering rather than data management. Similar to React and its relationship with Redux, Vue also has a flux-inspired centralized state management system called Vuex. The most challenging aspect of frontend development is maintaining the growing data needs by applications and their functionalities.

## Which framework/library should you use?

React is popular because it's easy to pick up and robust to use. However, Angular and Vue should not be disregarded as they both have their technical merits. 

To decide which framework or library you should use for your project, there are a few things that need to be considered:

- **size of community for ongoing support and learning resources**
  - React has the biggest community, followed by Angular, and then Vue. 
- **speed of delivery required** 
  - Angular has the biggest learning curve because it is a full framework that comes with a kitchen sink full of pre-written modules, extensions, and add-ons. React is minimal in terms of bundled APIs but has a strong open-source community. Vue is highly supported, despite it being the smallest in the comparison.
- **current team knowledge, strengths, and weaknesses** 
  - This is possible the deal breaker. If your team are Angular developers, then it might make sense to stick to Angular. If your team is an ad-hoc eclectic collection of skills, React or Vue may be the better option due to the smaller learning curve. Angular requires time investment to learn. React and Vue requires structural discipline, which can work well for seasoned developers who have strengths in other programming languages such as Java and C++.

Over time, as developers, we also become biased towards what we know. It doesn't hurt to dive into alternative frameworks and libraries. At the foundation of most frontend frameworks and library is JavaScript. Methodologies and ideas can be cross-pollinated for a more robust implementation of your app. The more you know, the easier and faster it is you can create connections based on your features and app requirements. 

Frontend

  Angular vs. React vs. Vue - A Quick Look

CSV - love them or hate them, they are part of many businesses and how they operate. These comma-separated values come in the form of a text file with a specific format that allows for data to be translated into a tabulated structure when imported into spreadsheet software and apps such as Excel and Google Sheets. These table-based reports are often used by analysts, accountants, commercial, and marketing to view, add, and manipulate. 

As developers, a majority of us work primarily with JSON, making CSV an incompatible dataset. We cannot easily filter it in its raw form or hook into the data the way we can with JSON.

This is where JavaScript CSV parsers come in. For JavaScript-based apps, CSV parsers are bridging libraries that translate tabular data into JSON compatible formats. 

Here are the top 10 free JavaScript CSV parsers that you can use for your next (or current) project that contains comma-separated values.

## 1. fast-csv

[`fast-csv`](https://www.npmjs.com/package/fast-csv) is a CSV parser and formatter that combines two other popular packages ([`@fast-csv/format`](https://c2fo.io/fast-csv/docs/formatting/getting-started) and [`@fast-csv/parse`](https://c2fo.io/fast-csv/docs/parsing/getting-started)) together to form a single package for node.js. It has grown dramatically over the past few years from 0 to approximately 153k downloads per week. `fast-csv` is also actively maintained with monthly updates and great documentation.

Features of `fast-csv` include CSV formatting, parsing, flexible formatting, and parsing options. 

To install `fast-csv`, use the following command:

```nginx
npm i -S fast-csv
```

## 2. xlsx - SheetJS

[`xlsx`](https://sheetjs.com/) , also known as `SheetJS`, ranks as one of the most popular JavaScript CSV parsers. However, it is not a completely 'free' library but more a freemium starter library with options to upgrade to a pro version for commercial support. 

The free version is intensely popular with more than a quarter-million downloads each week and over 100 contributors to the library. The documentation is not as extensive as `fast-csv` but adequate enough to get you started and do what you need.

`xlsx` also comes demo directories that give sample implementation into major frameworks and libraries such as Angular, Ionic, knockout, meteor, React, React Native, Vue, and nodeJS. 

To install `xlsx`, use the following command:

```nginx
npm install xlsx
```

## 3. papaparse

[`papaparse`](https://www.papaparse.com/) is an MIT license and open-sourced CSV parser library with great documentation and easy-to-use implementations. It has zero dependencies and can work as a stand-alone library that is able to parse CSV files directly in a local environment or stream larger files. 

There is also the ability to pause, resume, and abort data transfers and CSV parsing, convert numbers and booleans into types. `papaparse` was created with NodeJS in mind, allowing for readable streams instead of just accepting data via a file.

To install `papaparse`, use the following command:

```nginx
npm install papaparse
```

## 4. json-2-csv

It's one thing to go from CSV to JSON - but what about JSON to CSV? The ability to export CSV can be achieved with [`json-2-csv`](https://github.com/mrodrig/json-2-csv) library that lets you convert JSON and CSV data in both directions.

`json-2-csv` also supports sub-documents, custom ordering of columns, and the ability to re-generate JSON documents that were used to generate the CSV. Its ability to handle nesting is fairly extensive and function.

To install `json-2-csv`, use the following command:

```nginx
npm install json-2-csv
```

## 5. csvtojson

[`csvtojson`](https://github.com/Keyang/node-csvtojson) is a library that is modular and comprehensive in its handling of CSV. The library is to parse CSV to JSON or column arrays. In addition to being a library, it can also be used as a command line tool or directly in the browser for quick and targeted parsing.

`csvtojson` is built on `bluebird` (a promise library), `lodash` (utility library), and `strip-bom` (a UTF-8 byte order mark from a string) in order to deliver streaming capabilities and enable asynchronous integrations. 

To install `csvtojson`, use the following command:

```nginx
npm install csvtojson
```

## 6. csv-parser

[`csv-parser`](https://github.com/mafintosh/csv-parser)  is a library that lets you convert CSV to JSON at the rate of around 90,000 rows per second. It also has the ability to convert CSV to JSON via the command line using `csv-parser [filename?] [options]`

The library is MIT licensed and is downloaded at the rate of approximately 100k per week. With the help of [browserify](https://browserify.org/), `csv-parser` can also be used in the browser. 

To install `csv-parser`, use the following command:

```nginx
npm install csv-parser
```

## 7. csv

[`csv`](https://csv.js.org/) is a collection of packages that can be used as stand-alone implementations or together based on the requirements. `csv` is the umbrella package that contains four other packages. 

To install `csv`, use the following command:

```nginx
npm install csv
```

The above will also install the following (which can be installed as separate packages if not everything is required):

- [csv-generate](https://csv.js.org/generate/) - a flexible CSV string and JavaScript objects generator. To install `csv-generate`, use the following command:

    ```nginx
    npm install csv-generate
    ```

- [csv-parse](https://csv.js.org/parse/) - a reader that allows your app to read CSV strings, buffers, and write objects and arrays. To install `csv-parse`, use the following command:

    ```nginx
    npm install csv-parse
    ```

- [csv-stringify](https://csv.js.org/stringify/) - a stringifier that converts records into CSV text. To install `csv-stringify`, use the following command:

    ```nginx
    npm install csv-stringify
    ```

- [stream-transform](https://csv.js.org/transform/)`- a simple object transformation framework for nodeJS. To install `stream-transform`, use the following command:

  ```nginx
  npm install stream-transform
  ```

## 8. nest-csv-parser

[`nest-csv-parser`](https://github.com/mCzolko/nest-csv-parser) is a [csv-parser](https://github.com/mafintosh/csv-parser) wrapper NestJS. This means that all the features and functionality available in `csv-parser` will also be available in `nest-csv-parser`. Using `nest-csv-parser` is generally straightforward and all you have to do is import the module into your NestJS project. 

To install `nest-csv-parser`, use the following command:

```nginx
npm i nest-csv-parser
```

## 9. ya-csv

[`ya-csv`](https://github.com/koles/ya-csv) is a low-key event based CSV parser created to process large CSV streams. It is designed with zero dependencies, making it highly performant and unreliant on other libraries to make it work. With `ya-csv`, you can also configure the separators, quote and escape characters as required.

To install `ya-csv`, use the following command:

```nginx
npm i ya-csv
```

## 10. skipper-csv

[`skipper-csv`](https://github.com/hammady/skipper-csv) is a CSV parser adapter created to receive upstreams. It also supports multipart file uploads and starts parsing the CSV as soon as the first chunks are ready. This means that you don't have to wait for the upload to finish before you start parsing - resulting in saved time and faster data parsing.

To install `skipper-csv`, use the following command:

```nginx
npm i skipper-csv
```

## Which JavaScript CSV parser is the best?

Based on popularity, downloads and GitHub stars, [fast-csv](https://www.npmjs.com/package/fast-csv),  [xlsx - SheetJS](https://sheetjs.com/), [papaparse](https://www.papaparse.com/), and [json-2-csv](https://github.com/mrodrig/json-2-csv) are the most popular. These top four libraries make up the majority of downloads and comes to a combined 2+ million downloads and installs.

However, [csvtojson](https://github.com/Keyang/node-csvtojson), [csv-parser](https://github.com/mafintosh/csv-parser)  and [csv](https://csv.js.org/) also make good contenders for the 'best JavaScript CSV parser' title. 

The final three libraries on this list - [nest-csv-parser](https://github.com/mCzolko/nest-csv-parser), [ya-csv](https://github.com/koles/ya-csv), and [skipper-csv](https://github.com/hammady/skipper-csv) - are solid libraries but they haven't been updated in the last year. However, it doesn't make them bad libraries. It might just mean that they are stable enough to not warrant an update. Overall, the best JavaScript CSV parser is the one that works best with your project. 




# JavaScript

Angular vs. React vs. Vue - A Quick Look

Top 10 JavaScript CSV Parsers