PDF, 2.03 MB
PDF, 2.07 MB
When the Fiddler team at Progress wanted to make its original web debugging proxy tool, Fiddler Classic, accessible to users of any device or platform, it chose the Kendo UI for Angular component library as the foundation for building its new product, Fiddler Everywhere.
The Kendo UI Grid component provided the Fiddler team with the powerful data visualization and performance capabilities needed to build Fiddler Everywhere successfully and delight its users with a sleek user interface.
Kendo UI fast-tracked the release of Fiddler Everywhere by 50% and helped onboard 20% more users in the first month only.
Progress® Telerik® acquired Fiddler Classic in 2014. Given its cult following, the engineering team was at a crossroads to find the balance of not degrading the heart of Fiddler Classic yet providing a solution with the core functionality that could meet the demands of today's user base. Fiddler Classic is a mature product and is a universally recognized name for capturing and inspecting HTTP(s) traffic. Yet, Fiddler Classic works solely on Windows, leaving macOS and Linux users without a solid alternative for their web debugging needs. The Fiddler team desired to modernize the application in order to allow the reimagined web debugging proxy to run on all platforms and meet today’s UX expectations.
“There was substantial interest in having a version of Fiddler that could run on Linux and macOS," said Kamen Velikov, Principal Developer and Team Lead at Progress. "Before undergoing the rebuild with Kendo UI, we released a ported version of Fiddler Everywhere that ran on Mono. Despite its limited functionality, the download traffic it generated was overwhelming. That's why we decided to take a step back and build a completely new version of Fiddler Everywhere from scratch in 2018."
Velikov recalls the team's passion for making Fiddler's unique capabilities to troubleshoot and modify traffic from any browser and any device accessible to more developers, "We focused our sights on revamping the entire user experience to make tasks straightforward and intuitive. In addition, new features were mapped out to enrich the existing Fiddler Classic arsenal and enable API (Application Programming Interface) debugging and team collaboration," said Velikov.
The Fiddler team was determined to build a genuinely cross-platform web application and carefully chose their technology stack. When exploring frameworks, the Fiddler team was drawn to Angular because of its native performance capabilities. By choosing to develop Fiddler Everywhere's UI in Angular and compiling on the fly with Electron, they needed ready-to-run Angular components. Progress® Kendo UI® for Angular was perfect for the frontend because it met all the stringent requirements for UX, including modern UI, accessibility and performance.
The first task for the Kendo UI for Angular Grid control was to support the fundamental feature of the new Fiddler Everywhere application—to capture live network traffic on a single machine. To support a Live Traffic tab within the UI of Fiddler Everywhere, the grid needed to deliver beyond impressive speed results and offer unparalleled scalability. The purpose of the Live Traffic tab within the UI is to debug issues and find performance bottlenecks within seconds. The Fiddler team knew the Kendo UI for Angular Grid could handle this workload without sacrificing other requirements.
"The traffic data displayed in the grid sometimes reaches over 100,000 simultaneous sessions, and speed and performance were a high priority," said Velikov. "Kendo UI for Angular is engineered to handle substantial amounts of data fast, and along with the built-in sorting and filtering, it aligns perfectly with our needs."
As more functionality was added to build Fiddler Everywhere, the team leveraged the full breadth of the Kendo UI for Angular suite to design the UI and presentation layer quickly. The professionally designed themes and out-of-the-box styling offered the Fiddler team a consistent design standard, allowing them to focus on development rather than UI.
"We were able to implement Kendo UI components rapidly to build the Fiddler Everywhere application the way it was envisioned. No compromises based on lack of controls," said Velikov. "By having the library of fully native components, the modern features and themes were readily available, giving the Fiddler team time back to focus on business logic."
Kendo UI for Angular enabled the Fiddler team to build Fiddler Everywhere securely and reduced the engineering complexities often associated with building world-class software. The Fiddler team managed to deliver a holistic solution that provided unmatched functionality across major platforms. The well-managed project took around eight months to produce a Beta version, and less than a year and a half later, the RC version of Fiddler Everywhere hit the market.
Velikov estimated that the Kendo UI Grid component alone sped up development time by 50%. "Strictly looking at the grid, we forecasted it would've taken us close to eight months to build the grid component from scratch," shared Velikov.
Another factor in the continuous delivery of Fiddler Everywhere is the Kendo UI support team. "If we faced an obstacle or required direction on best practices for implementation, the Kendo UI support team was there at every turn," said Velikov. "From their comprehensive documentation to code samples and access to the source code, this level of service allowed us to operate under optimal conditions," he added.
When Fiddler Everywhere was released to the market in 2018, the solution quickly found itself positioned as the "go-to" for efficiently and securely debugging network traffic on Windows, macOS and Linux. Within the first few months, the Fiddler team recorded significant growth in their customer base, and these users have been instrumental in helping further shape the product.