Latest Ext JS 7.8 is now available. Learn more

Ext JS Customer Spotlight: 2Gears

October 27, 2016 168 Views
Show

2Gears

2Gears specializes in the development of complex desktop and mobile applications. The company has offices in Luxembourg and The Netherlands. In 2014, 2Gears decided to focus exclusively on the development of its flagship product: Governance.io.

Governance.io is a powerful corporate governance platform. By combining our deep industry knowledge of the investment fund sector with state of the art software technology, we have alleviated the regulatory pressure our clients experience on a daily basis. Governance.io makes it easy to follow the right procedures and workflows, apply the necessary controls, and document everything with drag and drop simplicity. The application ensures that all the necessary checks and balances are done and tracks the entire audit trail history of any piece of information in the system.

Governance.io Dashboard

Governance.io dashboard showing Ext JS Donut and Column charts and Pivot Grid

Reporting is equally simple: complex reports can be created visually within minutes, without any in-depth training, putting decision-critical information at the fingertips of the right people. Clients include banks, depositories, management companies, and other regulated professionals.

In June 2016, Govenance.io was awarded FinTech Startup of the Year, and we received this prestigious prize from the Luxembourg Minister of Finance. After securing an Angel investment funding in 2015, 2Gears recently closed a new €2 million funding round to further accelerate product development and international expansion.

Why We Chose Ext JS

2Gears has been using the Ext JS framework and other Sencha tools since their inception. The combination of a robust architecture, excellent documentation, a very complete UI component library, and true cross-browser support made Ext JS the logical choice. The same reasons still hold true today. Although we continuously research new technologies and frameworks to see if they can improve development, Ext JS remains the core framework for all of our front-end applications. Recent additions like the MVVM architecture, Modern Toolkit integration, and Pivot Grid speed up our development even more and help us to create a solution that is easy to maintain.

Governance.io Object Editor

Governance.io object editor featuring Ext JS FormPanel, breadcrumb toolbar, custom tab layout, navigation tree and D3 chart integrated

For Governance.io, we literally use every component and feature in the framework. Components like the Ext JS Grid, Form, and Trees are unrivaled for any serious business application. For just about any use case, Ext JS provides a robust component that does the trick. The true power of the framework for us, however, is the extensible architecture and the complete and easy-to-navigate documentation. On top of the Ext JS framework, we created a rich set of reusable components, mixins, and features that extend the already great features of the framework.

One of the key strengths of the Ext JS framework is its data layer. All the applications’ model structures, associations, and data sessions are handled with minimal coding required. To speed up development even more, we created a metadata layer on top of the Ext JS data layer. The metadata layer receives all model metadata from our server, caches the result, and instantiates the entire data structure including client-server communication. It also adds lots of utilities for inferring information from the structures in the data layer and allows our custom components to easily leverage that information.

Ext JS Grid

Ext JS grid with sorting, paging, server-side grid filtering, and localization with only 50 lines of JSON configuration

For example, our developers can specify a complete grid or form with only a couple of lines of JSON. All the blanks that can be inferred from the application’s metadata are automatically filled in by the metadata layer, including choosing and configuring the right subcomponents, localizing information, fetching data from the server or data session, and storing it when we’re done editing. Creating the metadata layer and custom components was only possible due to the open architecture of Ext JS itself.

Business Value of Using Ext JS

For complex applications like Governance.io that are business critical for clients, a solid architecture is required. This architecture should not only cover the user interface but also the integrity of the data, client-server communication, and many other things. Ext JS provides all of these requirements while leaving more than sufficient room to extend or change functionality. It’s easy to combine Ext JS with microframeworks or libraries that solve a particular problem. For Governance.io, we integrated D3 for custom charting, ReactJS for performance critical mobile components, and many other libraries. The fact that the Ext JS components are thoroughly tested against a wide range of browsers saves us an incredible amount of time.

2Gears is rapidly growing, so it’s crucial that new developers can quickly find their way around our code and the frameworks we use. Although the sheer amount of possibilities is often daunting for new developers, they are typically productive within days. The reason is the excellent documentation, guides and examples, and the structure of the framework.

Custom Filter Components

Custom filter components in Governance.io report generator

Governance.io excels at making complex tasks seem simple. Deployments for our clients should be equally simple yet reliable. To support this goal, we integrated the Sencha Cmd build process into our Continuous Integration flow. Sencha Cmd allowed us to even add a number of build steps ourselves like ES6 transpiling. After the client application is built and tested in isolation, it’s combined with the server and tested as a whole. When everything looks good, Docker deployment images are automatically created for our clients. To improve our test coverage, we’re currently looking into incorporating Sencha Test into our test suite.

Ext JS Grid-to-Grid Drag and Drop

Ext JS grid-to-grid drag and drop makes complex cash reconciliations feel easy

Our Advice to New Developers

When searching for a way to solve a particular problem, the Ext JS examples and Kitchen Sink are often the best place to start looking for inspiration. More often than not, there will be a component that exactly matches your requirements.

Before doing so though, it’s crucial to really understand the core principles of the framework. This will make new developers productive much faster and prevent common pitfalls. Our typical approach in helping a new developer learn the framework is:

  • Study the “Getting Started” and “Core Concepts” guides. Especially important are the Class system, Data package, Components and Layout guides. These guides will lay the foundation for understanding how things are done in Ext JS and why.
  • Browse through the Ext JS Examples and Kitchen Sink to see what can be accomplished with Ext JS and how.
  • Study the “Architecture” guides. By learning more about MVVM, ViewModels, ViewControllers, and framework internals, the developer will become an Ext JS ninja in no time.
  • Test new ideas by quickly creating a Sencha Fiddle to play around with a certain feature. There are already hundreds of fiddles available that can be easily copied and extended.

Final Thoughts

Whether you’re creating a simple mobile application or an enterprise grade platform, it does not make sense to waste your time writing boilerplate code or stitching together dozens of microframeworks. Ext JS supplies a base architecture that is solid enough to very quickly build well-documented and maintainable applications. At the same time, it’s light enough to allow you to define or redefine anything as you see fit, or mash up microframeworks to help you with specific problems.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More