Meet the New Distil Networks Portal

May 30, 2013 Mark Malek

Portal Domains View Screenshot

For the past several months, the team at Distil has been hard at work on a brand new Portal. We designed and developed the Portal from the ground up with fundamental changes in various components you may already be familiar with including the navigation and the overall look and feel.

One of the biggest driving factors behind the re-architecting of the Portal was to have the ability to release new features and respond to our users’ feedback quickly. The new Portal allows us to focus more on developing new features and improving our existing features and less on general code maintenance due to its more modular design. This was also a great opportunity for us to simplify the user interface and app navigation.


Portal User Dropdown Screenshot

The new navigation consists of two sections. The first contains a single drop down that displays the currently logged in user. When expanded, the drop down has links to change your password, sign out, and for account management. The account management view is where you can grant additional users access to the account or to individual domains. You can also view the account’s billing information, past invoices, or change your current plan.

Portal Domains Dropdown Screenshot

The second component for navigation shows the domain you are viewing, a drop down containing all your domains, and a button to toggle between a domain’s reports and its settings. The domains drop down allows you to easily change the context of a report or settings you are viewing to a different domain without having to navigate back to the main list and finding the same view again.

Performance was another focus for us in designing and developing the new Portal. Our goal was to make the Portal feel as responsive as a native application on your device. This meant that the static user interface elements had to load quickly, navigating between pages had to feel almost instant. To achieve this we designed the Portal as a single page JavaScript application. What this means is the first time you access a page in the Portal, the entire application is downloaded and cached in your browser’s history. When you navigate from one page to another, the page’s template is already available to the browser and can be loaded almost instantly. The only data that needs to be fetched from our servers is your dynamic data. This data is fetched as JSON from our servers whenever you navigate to a new page or change a report’s parameters. The dynamic data is significantly smaller in size than static files such as CSS, JavaScript, and images which helps improve load times. This is just the beginning in terms of performance improvements of the Portal. We are continuously looking for ways to speed up reporting and other involved data queries.

Although the Portal is a single page JavaScript application, it is leveraging the browser’s pushState API. Whenever you navigate from one page to another you will notice that the url in the browser’s address bar is changing and can still be bookmarked and accessed later.

Portal Domain Settings Screenshot

In the new Portal, changing a domain’s settings has seen a significant improvement. There are now three primary sections for a domain’s settings: Content Protection; IP and Country Access List; Content Distribution.

Portal Content Protection Settings

Content Protection is where you control how Distil Networks protects your site. If you are not sure what a particular setting does, clicking on the name will display a tooltip with a brief explanation. Each mode is also color coded, Monitor (green), Captcha (orange), and Block (red) allowing for a quick glance at your current settings.

IP and Country Access List is where you can enter in IPs you want to block or allow until the filter is revoked. You can also block and unblock individual countries. If you use automated tools for testing this is where you can whitelist your own IPs to allow these tools uninterrupted access to your protected site.

Portal Content Distribution Settings Screenshot

Content Distribution is where you can configure cacheing and start improving your website’s performance. Enabling cache means any objects you designate as cacheable will be cached on the Distil CDN and served to your end users from our servers. This allows for faster load times and reduces your bandwidth burden. You can see the impact caching has by viewing the Cache Analysis report for any of your domains.

As an Agile development team, we believe in deploying our bug fixes, new features, and improvements and getting them in front of our users as quickly as possible, after we’ve tested internally of course. Its quite common for us to have a new release several times a week. In the coming months you will start to see  many new features rolling out and we hope you are just as excited about them as we are.

About the Author

Mark Malek

Mark Malek has a passion for all things front end. As VP of Engineering at Distil, his responsibilities include the design and development of all customer facing applications such as the Distil Portal. Previously Mark was a front end engineer at 6fusion and iContact.

Follow on Twitter More Content by Mark Malek
Previous Article
Please Don’t Feed the Bots (or Web Scrapers and Crawlers)
Please Don’t Feed the Bots (or Web Scrapers and Crawlers)

If you stop feeding your web pages to malicious bots, scrapers and crawlers, you can improve SEO results, p...

Next Article
Are Bots Influencing Your Marketing Metrics?
Are Bots Influencing Your Marketing Metrics?

Are the numbers you report actually accounting for malicious bot traffic visiting your site without you eve...