Recommended way of creating complex UI's


Hi, I’m learning how to develop packages for Atom and have noticed that in all the examples, when it comes to creating a view for your package, the view is created using document.createElement() etc.

Whilst I like the simplicity of this I imagine it will become difficult to develop complex UI’s using bog-standard DOM manipulation.

How are people developing complex UI’s for Atom packages and is there a standard framework that’s being used?

Many thanks.


There is not a standard framework. This is a long-standing open issue. Basically, it’s the Wild West. This is one case where the best thing you can do is to look at packages that perform similar tasks and observe what their authors have chosen to use.


Thanks for clearing that up. I’ll do a bit of research and try a few things out.


It probably goes without saying, but virtually anything can work. If you make your stylesheet respect the standard @ui-variables conventions and keep in mind how Atom regards panes, panels, and modals, that’s all you need. Atom doesn’t make any assumptions about how things should be displayed within a pane. When choosing a view framework, performance should be your big consideration. Atom’s already a little slow compared to other editors, and if you use a framework that brings more power than you actually need, you might risk weighing down the editor more.