September 21, 2020

Nova

Panic launched Nova last week, a new native macOS code editor aimed at web development. Their previous editor, Coda 2, was well-received, and although it wasn't a match for my development workflows I appreciated certain aspects of it. Nova is the spiritual successor to Coda 2 - I've taken it for a spin over the past few days, and wrote about my experience and thoughts below!

Last edited on 9/23

How I used it

My opinions are formed by my particular usage patterns, and it's worth mentioning right off that bat that I don't believe my style of development is the target demographic Panic is pursuing with Nova. I expect Panic has consciously decided not to include a couple of the things I feel are missing, and there are a lot of features in Nova that I haven't found a use for. Here are some more details on how I have been using Nova over the past few days:

Editing a Ruby on Rails project - I used Nova to edit a Ruby on Rails project that primarily serves as an API (the only visual pages are for the admin panel). I was mainly working on editing the database relationships and writing migrations, but I also modified controllers, tests, and other DSLs. Commits were pushed to GitHub and deployed to Heroku. I ran unit tests and console commands in the built in terminal.
Writing this blog post - I used Nova to write this blog post. I didn't do much editing of my main website codebase, but I used tasks to run commands and used the local preview to view my in-progress work.
Working on a new Next.js Site - I'm working on a new website that acts a bit like a CMS - I used Nova to work on the admin interface and membership systems. This included working with React, Tailwind, and Next.js API routes.

Parts of this post are likely wrong!

I've used VS Code for years. I've used Nova for hours. Editors are complex pieces of software, and I've almost certainly overlooked something or have yet to discover a feature which I thought was missing. If there's something I'm wrong about, please send me a tweet and I'll update this post accordingly!

Things I love

The UI/UX - If you follow me on Twitter, you likely have seen me kvetch about VS Code's design and compare it with Atom, which had a UX and UI I loved. VS Code is... a Microsoft product. It runs and performs exceptionally well, and it's clear how to accomplish different tasks. But VS Code's UI is inconsistent and cluttered, and... well, this post is about Nova. Nova falls on the Atom side of the spectrum for me. It's clear how to edit things, what actions and options control what, and the UI feels like a native app but with its own distinctive style - something I don't think was easy to pull off. Put another way, you can tell Nova is a Mac app from a Mac-centric company and not something designed for Windows or Linux.
Reports - I don't feel like I have used Reports to their full potential, but even just storing logs and saving the output each time I run a dev server is surprisingly helpful. I really, really like the Reports system, and I'm excited to find new ways to use this feature. One thing I'll note - after running a Ruby on Rails server that handled a lot of requests for about 40 minutes, I tried to load the report and Nova locked for several minutes - across all instances of the app. I was unable to use a different Nova window to edit this blog post while I waited for the report to load.
Text Transforms - Write a single line of text, highlight it, and then type **. In VS Code this replaces the highlighted text - in Nova it wraps it instead. I vastly prefer Nova's style of editing the line rather than replacing it.

Features that have potential

Tasks - Nova allows the creation and execution of tasks (scripts) through a clean and clear UI. I used this feature over the weekend to define tasks for several common workflows I have (for instance, I made a task for ‘wipe the development database and recreate it with data pulled from the Heroku production database'). Intuitively it feels like Tasks should be light wrappers around script files to avoid getting locked into an ecosystem - I would love to spend more time figuring out if there are additional ways to leverage Tasks.
Preview - Having an inline preview is useful, but it is locked to Safari. I would like the ability to use either Chrome or Firefox depending on the task at hand (their respective devtools excel in different ways). Nova's Preview also appears to not support several scripts and development tools that run fine in the standalone Safari app - React's Fast Refresh doesn't work in the Preview, despite working in the standalone Safari app. (The 1.1 update appears to have fixed this - Fast Refresh now works in the inline Preview mode.)
Sidebar - I like their sidebar system and default file icons a lot. Putting the tabs on the top is a nice touch - I vastly prefer Nova's style as opposed to a two-tiered sidebar like VS Code has popularized. I do wish that I could scroll left and right on the sidebar though - for long filenames you have to hover over the file to see the full name. I also hope extensions can extend the default file icons to include new ones (I haven't looked into whether this is already possible).

Things that could be better

Search results in sidebar - Atom had the best search functionality in the game, and for some reason other editors have been slow to adopt its functionality. VS Code recently shipped a new "Search Editor" that is a halfway attempt to get there. Nova has a fantastic pane system, but you can't move the search results out of the sidebar and into a pane. It's too bad, as this would hugely improve readability and context.
A JavaScript debugger - I would love a built in JavaScript debugger. This probably falls into the "outside Nova's scope" category, but the lack of a debugger means I can't feasibly use Nova to work on my discord bot Aquarius. The library Aquarius uses, discord.js, has too many circular data structures to effectively debug via console.log statements.
React syntax highlighting - I'm not sure if this is caused by the built in themes or the parser itself, but component names and props aren't color differentiated. I really dislike this.

Syntax Highlighting

Top: VS Code. Bottom: Nova

Highlighting the file for the selected tab in the sidebar - This is a personal problem, but I discovered I don't look at tab names to figure out what file I'm in when navigating codebases. I look at the sidebar to see which item is highlighted, since it usually corresponds with the selected tab. In Nova, these are separate - your last highlight on the sidebar persists independent of your selected tab. This screws with me more than I would have thought!
Files without extensions don't open previews - Much like other editors do, if you single-click an item in the sidebar, Nova will pop open a preview tab (italicized title, auto closes when it loses focus or you open a preview for a different file). This doesn't happen on files without file extensions though. My codebases have a lot of these files - Procfile, Dockerfile, .gitignore, .env, and my scripts. Having to double click these to open them instead of being able to glance at them is a surprisingly large source of friction for me. (The 1.1 update fixes custom file extensions opening a preview tab, but files without an extension still don't open)
Auto Indentation - When I'm writing Ruby, Nova insists on shifting end back one level too many. It's super annoying.

Trim Extra Whitespace on Save - Would love this to be an option somewhere. (Edit: There is an extension for this, but it feels like common enough functionality that it should be built in)
Extensions for the JavaScript Ecosystem - There are some extensions published for eslint, Jest, and Prettier, but in my experience they've either been limited in their usefulness or outright not worked. There was a long beta period for extension authors so that they could publish extensions to be available when Nova launched, and I'm frankly a little surprised that solid versions of these extensions are missing.
Git - There isn't a diff view for their native Git integration which feels like a pretty big omission. I would have at least expected a button that opens your system-configured tool.

Features I didn't try

Nova includes a couple of big features and integrations that I didn't cover in this post. Things I didn't use or test include:

FTP integration
External Server support
Clips

I want to reiterate that my style of development doesn't appear to completely match the Nova target demographic - the external server and FTP integration look like thorough implementations and are treated as core parts of the development workflow. These aren't minor feature areas but large parts of the editor.

Final Thoughts

I like Nova, and it feels like something that I could use for Rails development. Nova doesn't feel compelling enough to use for my style of JavaScript development (React, Next.js, Node.js) over VS Code, but in all fairness that is an exceptionally challenging value proposition to make. I'm excited to see how Nova changes and what Panic iterates on! One of the areas I will be watching closely is the extension ecosystem - I'm hoping we see a steady flow of high quality extensions over the next few weeks and months.

I'll continue using Nova throughout the week and weekend, and will keep this post updated with things I find. My plan is to work on the typography and design of this website, which should be a fun opportunity to see how Nova handles CSS!

Edits:

9/23: Updated to reflect Fash Refresh no works as of 1.1
9/21: Updated to reflect the 1.1 update

September 21, 2020