My experience with hacking Atom



I’m currently working on a package “mocha UI” - not finished yet. The aim is, to have a separate (beauty) window for test results which I want to combine with the atom watch functionality.

I stumbled upon a few problems, I wanted to share.

  • Views are difficult

The first time I saw the space pen repo I thought “nice syntax, looks cool”.
But using it isn’t very cool. I think the main advantage over plain jquery is, that it is easier to encapsulate recurring elements, but a small package has nearly no recurring elements (at least mine).

I think one solution is to provide more reusable views or snippets.
I had to cut out the list of the SelectListView from the atom-space-pen-view package to use it for a modal, the plain list could be easily provided by the package and the SelectListView could build on top of that.
Snippets could be provided in the form of the styleguide, that would be cool.

The implicit syntax isn’t powerful enough, at least, what I can grasp.
How do I get data/events in/out of a view? When I click on a view, how do I efficiently change the behavior of a sibling view? That’s the main reason I ended up with a single big ugly view. A few examples concentrating on dataflow would be helpful.

  • Styleguide isn’t very prominent

I found it right after working through several less files of different themes. The Styleguide is great, it should get several honorable mentions in the tutorial.

  • No Information on panes

The only information I found was, to go look how other packages did it. The problem is, that is hard work :wink:
I can come up with 3 usage scenarios for panes. One pane per Atom / Project and an arbitrary number of panes. I want to create one pane per project. I used the terminal package (arbitrary number of panes) and the settings repo (one pane per Atom) to get something working, but it took quite some time.

  • No Information on scrolling

I have no Idea how scrolling works, nor what I have to do, to make it work. I tried overflow=scroll in the style, but it hadn’t the desired effect.
I looked into the ScrollView from atom-space-pen-views, but didn’t understood what’s going on.
Also, how do I link to a scroll position? Say I want two scrollable divs in a pane and scroll one to a specific position by clicking a link in the other div?

  • Project-wise doesn’t exist?

I could need a way to store some data project-wise. For the regular work, I use the package Project Manager. I think something similar should be integrated in the core, accompanied with a small but decent api to save / retrieve data.

  • No way to find /create Atom specific helper-package

Besides the packages of the Atom repo, I don’t know how to get packages which help me with atom-specific package development.
In my case, I want a wrapper around the Atom watch functionality, as it is to low level to expose it to the user. I want to build something, like watchByPattern, but how can I publish the wrapper, so that other package creators can use it also?
I think, there should be some sort of list of npm packages which only work in the atom context.

I hope, this helps to some extend and I would really appreciate help with the scrolling :smiley:


You use jquery for the old space pen. A new framework to replace space-pen is being chosen to be the standard. It will support binding so changes to the model and events will be handled automatically.