Sencha Ext JS 7.7 is Here – Discover What’s New and Exciting – LEARN MORE

https://staging.sencha.com/blog/ext-js-customer-spotlight-2gears/
Table of Contents Hide
  1. What Are Dynamic UIs?
  2. What Are JS Frameworks’ Fundamentals For Dynamic UIs?
  3. How Do You Build Dynamic UIs with JavaScript Frameworks?
  4. What Are the Best Practices for Performance Optimization?
  5. JS Frameworks: Conclusion
  6. JS Frameworks: FAQs
  7. What’s your reaction?
  8. What Are Dynamic UIs?
  9. What Are JS Frameworks’ Fundamentals For Dynamic UIs?
  10. How Do You Build Dynamic UIs with JavaScript Frameworks?
  11. What Are the Best Practices for Performance Optimization?
  12. JS Frameworks: Conclusion
  13. JS Frameworks: FAQs
  14. What’s your reaction?

Ext JS Customer Spotlight: 2Gears

October 27, 2016 1 Views
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. [caption id="attachment_18380" align="alignnone" width="1024"]Governance.io Dashboard Governance.io dashboard showing Ext JS Donut and Column charts and Pivot Grid[/caption] 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. [caption id="attachment_18381" align="alignnone" width="1024"]Governance.io Object Editor Governance.io object editor featuring Ext JS FormPanel, breadcrumb toolbar, custom tab layout, navigation tree and D3 chart integrated[/caption] 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. [caption id="attachment_18382" align="alignnone" width="1024"]Ext JS Grid Ext JS grid with sorting, paging, server-side grid filtering, and localization with only 50 lines of JSON configuration[/caption] 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. [caption id="attachment_18383" align="alignnone" width="1024"]Custom Filter Components Custom filter components in Governance.io report generator[/caption] 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. [caption id="attachment_18384" align="alignnone" width="1024"]Ext JS Grid-to-Grid Drag and Drop Ext JS grid-to-grid drag and drop makes complex cash reconciliations feel easy[/caption]

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Table of Contents Hide
  1. What Are Dynamic UIs?
  2. What Are JS Frameworks’ Fundamentals For Dynamic UIs?
  3. How Do You Build Dynamic UIs with JavaScript Frameworks?
  4. What Are the Best Practices for Performance Optimization?
  5. JS Frameworks: Conclusion
  6. JS Frameworks: FAQs
  7. What’s your reaction?
  8. What Are Dynamic UIs?
  9. What Are JS Frameworks’ Fundamentals For Dynamic UIs?
  10. How Do You Build Dynamic UIs with JavaScript Frameworks?
  11. What Are the Best Practices for Performance Optimization?
  12. JS Frameworks: Conclusion
  13. JS Frameworks: FAQs
  14. What’s your reaction?
Ready to get started?

Create an account now!

Latest Content
Highlights of Virtual JS Days 2024

Highlights of Virtual JS Days 2024 From February 20-22, 2024, we held the third Virtual…

From the GM’s Desk 2023: An Exciting Year for Sencha & Ext JS 7.7

We are past the midpoint of 2023 and we are very proud of what we…

Sencha MVP Spotlight: Animap - The Historical Research Tool with Andy Allord

Welcome to our Developer Spotlight Series, where we showcase the remarkable talents and achievements of…

See More

Leave a Reply

Your email address will not be published. Required fields are marked *

*

coming soon

Something Awesome Is

COMING SOON!