Development Environment Tips for Napa

As browser based IDEs and page designers continue to become commonplace, our demand on them to reach parity with their client based counterparts is to be expected. The capabilities and features of a development environment greatly impact accuracy (think Intellisense), readability, writeability, and the overall time and effort it will take to test and maintain our software. Working in the browser doesn’t require a degraded core experience, and the Microsoft “Napa” Office 365 Development Tools experience is proof of that.

Along the many great features and options, here are a couple that I find very useful as well as pointers to the rest.

Split Screen

When developing, we often find ourselves viewing source files side-by-side to trace program flow, view sample data, read APIs, and so on. The Visual Studio client provides the capability to split a single window pane for these common tasks, and so does “Napa”. The button to launch split screen is in the upper right hand corner of the source code editor. This control is outlined in red below.

Before…

Napa Split

After…

Powerful Search

Developers need the capability to search all source in a solution and we often find ourselves refactoring code through search-and-replace. Napa provides some pretty powerful search capabilities to achieve these common tasks and much more.

Searching Specific or All Files…

When using the Search task pane exhibited below, you’ll see that you can specify file name query parameters as well as regular expressions to filter your results. After searching, the pane provides intuitive arrow icons through which search results can be expanded and selected (causing the results to be loaded in the source edit pane).

Napa Search All

Search and Replace…

Getting to Search and Replace in Napa is identical to the steps taken for Visual Studio.

  1. Ctrl + F and use the drop down in quick find
  2. Ctrl + H will launch quick find with ‘Replace’ already open

Search and Replace

And More

The commands above offer just a glimpse of the powerful set of pro-dev features offered by Napa. Explore the rich feature set further by listing all or editor-only options via the ellipsis UI in the main control pane or in the editor pane.

Command Dialogs…

Napa Commands

Open in Visual Studio…

Finally, the Visual Studio client is seamlessly integrated. So when you do need to upgrade your development experience to support project integration, test automation, or the addition of managed code…just click the Open in Visual Studio button.

Open in Visual Studio
Open in Visual Studio

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s