When comparing Atom vs React, the Slant community recommends Atom for most people. In the question“What are the best web design tools?” Atom is ranked 14th while React is ranked 16th. The most important reason people chose Atom is:
Atom has a built-in package manager and an extensive [list of packages](https://atom.io/packages).
Specs
Ranked in these QuestionsQuestion Ranking
Pros
Pro Extensive list of packages
Atom has a built-in package manager and an extensive list of packages.
Pro Built-in package management
Atom was built from the ground up with the community in mind. Package management is therefore a first class feature.
Pro Multiplatform
Atom can run on Mac, Windows, and Linux.
Pro Extendable
Due to its modular design, almost any aspect of the editor can be changed. Even seemingly core packages, like those taking care of search and replace functionality, can be forked on GitHub, and changed and replaced in the editor.
The documentation for creating new plugins is also great, making it easier for developers to jump in and create plugins for Atom.
Pro Free and open source
Atom is free, open source, and written in C++, LESS, and CoffeeScript.
Pro Beginner friendly
One of the goals of Atom is to be a text editor for both experienced and beginner programmers. You can add keyboard shortcuts, change themes, install plugins, and change core settings by clicking through a GUI, or by manually editing config files the old-fashioned way. It has the added advantage of being built using the same engine that powers Google Chrome, so actions like opening and closing tabs feel familiar, even to new or non-programmers.
Pro Embedded Git control
Atom will highlight folders, files, and lines that have any uncommitted edits made. It also integrates really well with GitHub.
Pro Multi-line select and edit
Multiple cursors and column selection allow for versatile ways of editing.ctrl + d
will select the current word and each time the command is repeated, it adds the next occurrence of the word to the selection.ctrl + click
or middle-mouse click
will place another cursor in the place that's clicked. Cursors can then be controlled together. This also allows for selecting vertically.
Pro Command Palette support
The Command Palette permits fuzzy searching all available functions, settings, snippets, etc.
Pro Allows for instant file switching
By pressing Ctrl or Command + T and using fuzzy search, you can look for a file in your project.
Pro Themes
You can theme and customize Atom to your liking.
Pro Command line integration out of the box
Installing Atom adds two command line commands - atom
and apm
. The first one runs the application itself while the second is the Atom Package Manager that's used to add and remove various components from the package listing. While these features can be set up with other editors as well, Atom takes care of them out of the box.
Pro HiDPI support
Atom has built-in HiDPI support with zero scaling issues.
Pro Modern feel and very customizable and extendable
Pro Vim plugin turns Atom into a modernized vim
Pro Best support for Arduino with Platformio
Arduino is the most important platform for developing embedded systems.
Pro Could also be used as an IDE
Atom qualifies to be a good IDE because of the packages like linters, atom browser and hydrogen.
Pro Easy to reuse components
Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them.
Pro Supported by Facebook and Instagram
React is built by Facebook engineers initially to be used only for their inner projects especially to solve the problem of building large complex applications with constantly changing data.
Pro Server side rendering
React can render it's components and data server side, then it sends those components as HTML to the browser.
This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines.
Pro Virtual DOM support
Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself.
Pro One-way data flow
React's one-way data binding (or one-way data flow) means that it's easy to see where and how your UI is updated and where you need to make changes. It's also very easy to keep everything modular, fast and well-organized.
Pro Can be used with different libraries
ReactJS can be used independently as the only library for building the front-end, or it can be used alongside JavaScript libraries such as jQuery, or even Angular.
Pro Template engine independent
React provides a template engine (JSX) which is easy to use. But it's not mandatory.
Pro Widely used
The framework is widely used in the industry.
Pro Functional programming style leads to less buggy UIs
Pro Easy to write tests
Since React's virtual DOM system is implemented completely in JavaScript, it's very easy to write UI test cases.
Pro Good debugging tools
React has an official Chrome Extension which is used as a developing and debugging tool. It can be used to quickly and painlessly debug your application or view the whole application structure as it's rendered.
Pro Flux architecture pattern
Flux is a platform agnostic pattern which can technically be used with any application or programming language.
One of Flux' main features is that it enforces uni-directional data flow which means that views do not change the data directly.
With React this is useful because this way it's easier to understand an application as it starts getting more complicated. By having two-way data binding, lead to unpredictable changes, where changing one model's data would end up updating another model. By using the Flux architecture, this can be avoided.
Pro Extensive SVG support
Since React v0.15, SVG is fully supported. React supports all SVG attributes that are recognized by today's browsers.
Pro Keep control over your app's logic
React is just a view library, so you still have (almost) full control over how your app behaves.
Pro Supported by ClojureScript libraries
Reagent, Om, Rum, etc.
Pro Tested on Facebook itself
React is used on one of the most visited websites on the planet, Facebook. With stellar results and with millions of people experiencing it every day.
Cons
Con Very slow startup time
Atom is very slow to startup, which is a big disadvantage if you are accustomed to using it to make quick changes on your files.
Con High memory usage
Atom has a relatively high memory usage, especially when compared to some other text editors not based on Electron. For those who develop on the go, this also tends to mean shorter battery life.
Con Has difficulty with large text files
Tends to crash or hang with large >(10MB) text files, making it less useful as a general text editor.
Con Slows down exponentially with plugins
Extending it needs sacrificing responsiveness.
Con Not suitable for older computers
Atom requires a lot of system resources to run, so it will most probably be painfully slow on an older machine.
Con Doesn't handle RTL (right-to-left text) well
Text can't be highlighted and manipulated properly, cursor isn't displayed visually according to where it is logically (you have to type to find out), and similar issues.
Con Indent errors
Sometimes, especially when given a file that has different indentation that the current setting, the programm seems to get confused.
Con Not known when a new window will open
It's not really clear why and when a new window is opened when you open a file out of the tree view.
Con No text UI
Con Bloated - too many packages, too little productivity
Unable to use package to even convert a C file to PDF.
Con Slow because of Electron
Atom is not a native application. As such performance is subpar and the lag is especially noticeable on larger projects. It also opens a surprising amount of sub-processes and leaks a considerable amount of memory.
Con Crash and data loss
Repeated data loss when the app crashes.
A bugreport about that was closed automatically after some time, nobody cares.
Con Missing additional touches
As Atom is still relatively new, it's missing nice little touches that other text editors have implemented over the years. From simple ease-of-use items like middle-mouse button multi-cursor select, to the ways pasted information from a spreadsheet is interpreted in multi-select situations.
Con Doesn't recognize some keyboards
Con Heavy on memory
React's virtual DOM is fast, but it requires storing elements in the virtual and real DOM increasing memory usage for the page. This can be a real problem for single-page webapps designed to be left running in the background.
Con Template(view) mixed into code
Con Verbose
React gets a little verbose as applications get more complicated with more components. It's simply not as straightforward as simply writing HTML and JavaScript would be.
Con You have to learn a new syntax
Requires learning a custom syntax, JSX, that has some gotchas and introduce complexity, a steeper learning curve, and incompatibility with other tools.
Though you can opt out from JSX and use vanilla JS instead. But that is not recommended since it adds a lot of unneeded complexity which JSX tries to avoid.
Con Not a complete solution
React does not do everything for the developer, it's merely a tool for building the UI of a web app. It does not have support for routing or models, at least not out of the box. While some missing features can be added through libraries, to start using React and use it in production, you still would need to have experience, or at least a good grasp on what the best libraries to use would be.
Con Large file size
React's react.min.js
is 145.5KB in size. It's much larger than some other libraries that offer roughly the same features and it's almost the same size as some MV* frameworks such as Angular or Ember that offer more features out of the box.
Although, it should be mentioned that sometimes having a smaller library may force developers to reinvent the wheel and write inefficient implementations on features that React already has. Ending up with a larger application that's harder to maintain and/or that has bad performance.
Con Renders too frequently
Con No support for legacy browsers
React has recently dropped support for Internet Explorer 8. While the library may still work on IE8, issues that affect only IE8 will not be prioritized and/or solved.