Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

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

August 2, 2023 138 Views

Developer Spotlight

Welcome to our Developer Spotlight Series, where we showcase the remarkable talents and achievements of our developers and Sencha Most Valuable Players (MVPs) who are making a significant impact in the tech industry. In this series, we dive deep into their journeys, explore their projects, and gain insights into their experiences and perspectives. In this edition, we’re featuring Andy Allord, the mastermind behind Animap, a full-featured historical and genealogy research tool operating in a desktop environment.

So, let’s dive in and get a sneak peek into his fascinating journey as a software developer.

What is Animap?

Animap is an interactive mapping and research paid application. Users can get an idea of how the application works by visiting the website.

BuiltWith Technology Profile:

  • Ext JS: 7.5 Classic Toolkit
  • CMD-based app
  • Neptune Theme
  • OpenStreetMap, Leaflet, Omnivore

Could you please describe how and why this application was developed for your client (in this case, yourself)?

The original creator of AniMap passed away in 2008, leaving the application without any marketing or further development. For the next 14 years, AniMap remained in sales and support, but its usage and sales did not increase since 2008, with only a few users remaining.
AniMap 4.0 was developed when I offered to Mark Lassagne to create a web-based version as a way to carry forward the legacy of AniMap. I volunteered for this task with the sole purpose of preserving their legacy.

During the development process, it became evident that AniMap was in a critical state, with broken links scattered across the internet. The development of version 4.0 became more of a resurrection of AniMap, aiming to not only preserve its legacy but also bring a crucial tool for historical and genealogical purposes back into the spotlight. This new version aims to provide researchers with an advantageous tool that can significantly reduce their research time, potentially saving them hours or even months.

What was the business case or the need for the application?

The historical changes of county boundaries have been lost, and many researchers, especially those new to genealogy, do not fully understand the importance of these changes. The simple reality is that a one-day difference can lead to significant confusion. For example, if you believe an event you are researching occurred in Langlade County, Wisconsin in December of 1879, you could spend hours or even months conducting research in Langlade County, unaware that Langlade County, Wisconsin did not exist until 1882. Similarly, you might research Brown County, Wisconsin without realizing that, on the specific date you are researching, it was actually part of the Michigan Territory, where it was originally established.

What were the other choices you had besides our tools?

There are numerous tools available that could potentially solve this problem. Each tool has its own list of pros and cons, which are determined by the individual making the choice based on their programming style and desired outcomes. Some of the other options considered include:

  • React
  • Angular
  • jQuery and jQuery UI

Why did you ultimately select our software?

Ext JS and Sencha fulfilled my framework requirements. They minimized the need for me to develop HTML views, including repetitive views for tables and grids. This automation happens behind the scenes as I code in JavaScript using a JSON format. It allowed me to minimize the amount of code without requiring an additional library.

Ext JS offers several advantages that the other options lack. It provides built-in tools within the framework, eliminating the need to search for third-party solutions to address various issues. Upgrading to the next version seamlessly integrates when working within the designed parameters of Ext JS.

The MVVM architecture greatly reduces the number of files and enhances reusability. The structured approach keeps everything organized, with each view having a corresponding controller and model. While other frameworks may achieve this, in my opinion, Sencha products offer this functionality with exceptional ease.

How did the solution/app address your organization’s business challenges/opportunities?

The challenges and opportunities faced by our organization went beyond the scope of any framework. They involved data collection, database design, and backend technology, specifically how to create, input, and develop the views that users would interact with.
One remaining challenge is developing a mobile version, with the tablet version being the smaller challenge. The larger challenge lies in creating a mobile version for phones.

The difficulty here is designing a user-friendly interface that can handle large amounts of data, which is best viewed in a single view. For example, displaying a list of events, a map, and event details in a phone form factor without constantly requiring the user to switch between multiple views, causing confusion.

What results have you seen from using the software?

The results on the desktop have been fantastic. With minimal customization in the Neptune theme, I was able to create a robust user interface (UI) that effectively presents a vast amount of historical information to users with just a click.

Furthermore, using the software has led to increased efficiency in production time. This is mainly due to the elimination of the need to create HTML code for data display. Additionally, the well-contained components provided by the software can be reused wherever necessary, enhancing the overall user experience.

What are your three favorite features of Sencha Ext JS?

MVVM or MVC: This feature is a significant advantage as it allows for easy reusability of components within the application.

UI: The ability to code the application with minimal emphasis on HTML presentation is a standout feature. Unlike other frameworks, where you need to develop both the HTML and code for generating the UI experience, Sencha Ext JS streamlines this process.

Customization using overrides and the capability to create custom components as needed: The flexibility to customize and override default behaviors, along with the ability to create unique components when required, is another favorite feature.

Who does your application help?

AniMap assists both historical and genealogy researchers in understanding the actual county boundaries during the time period they are studying.

One of the challenges in historical and genealogy research lies in determining the exact location of a town, city, or organization. While these areas generally remain stationary, county boundaries often underwent frequent changes. These changes can lead to surprising discoveries.

For example, when using AniMap and applying a specific date range, researchers may realize that the place they believed to be in one county during that time period was actually located in a different county.

What motivated you to create this tool?

The motivation behind creating this tool stemmed from a discovery about the original AniMap. Adrian Ettlinger and Art Lassagne were the original creators of AniMap, and the last update, version 3.0.2, was released in mid-2008 exclusively for Windows.

After learning about the history of AniMap, I became motivated to develop an updated, browser-based version that would include more tools, enhanced mapping capabilities, and an expanded range of information compared to the original software.

The stories of Adrian Ettlinger, Art Lassagne, and my own father, Robert Allord, became intertwined in my mind. The development of AniMap 4.0 has always been driven by the desire to carry forward the legacy of these three individuals. I believe their story should continue and that there should always be someone to whom the torch can be passed for many years to come. AniMap is a valuable tool for researchers, and while profitability is important, sometimes preserving a legacy holds even greater significance.

Is there any competition for this application?

As of now, there are no known competitors for AniMap. However, The Newberry Library offers a similar resource called The Atlas of Historical County Boundaries, developed by John Long. This project receives substantial funding to create a comprehensive historical record of county boundary changes in the United States, including associated laws and the best sources available at the time those laws were passed. The Newberry Library also provides an interactive map that presents information comparable to what is found in AniMap.

AniMap sets itself apart by offering additional features such as subjects, notes, circles, locations, and the integration of Site Finder. Site Finder is a database that encompasses 2 million locations across the United States, encompassing both present and historical places.

What is the roadmap for this project?

Defining a specific roadmap for a project like this is challenging. However, below is a broad outline:

  • Develop a tablet-friendly version.
  • Expand the application to include information on location history.
  • Incorporate county founder history.
  • Focus on community formation history, particularly for communities that no longer exist or have limited historical records.
  • Expand the application to include other countries.
  • Develop a genealogy program as an add-on.
  • Plan the development of a phone version.

What comes next?

The next steps include:

  • Streamlining the backend speed for improved performance.
  • Refining the user interface (UI) to enhance the user experience.
  • Addressing any bugs and data corrections.
  • Developing a solid foundation for historical information storage and presentation.

Program Purpose: Show historical county boundary changes throughout the U.S. in all states from the mid-1600s to 2000. Allow researchers to document their search using subjects, notes, location markers and circles.

Theme
Customized Neptune with base colors and shadows
(BIG HINT) – Create a classic version that can be customized. AniMap is a program, not a website and benefits from the streamlined views of the classic theme. Yet this theme cannot be customized having only the look of an old version of Windows. .

Application Architecture

  • MVVM or MVC
  • MVVM

Backend and Third party tools and technologies

  • PHP, MySQL Database. JSON

Routing Feature

Routing in my opinion should be used in every application. It is what users expect from years of how browsers operate. Routing allows users to bookmark pages and gives you the power to return the view they had visited. This often prevents users from having to remember selections they made.

Users refresh browser windows and you Ext JS application is no different. There will be a time a refresh is in order to help free some memory on the client side browser. Routing allows users to refresh the page and return to looking at the view they had before refreshing. This will only increase the pleasure for users while they use your application.

Routing is simple to implement in Ext JS, works well no matter how complex your view is. It increases the professionalism of you and your product. Eliminates support tickets asking why when they refresh they are taking to the initial view of the application.

What advice do you have for those who are starting to use Sencha Ext JS?

For all new users, I have two pieces of advice. First, be prepared for a steep learning curve when using Sencha Ext JS. It is important to allocate sufficient time to learn and understand how to use it effectively. This steep learning curve is actually a positive aspect of Ext JS and other Sencha products. Complex and diverse tools require time and effort to master, but the investment will benefit you in achieving your goals with minimal difficulties.

Second, it’s crucial to recognize that Ext JS is a powerful tool, but it has its specific purpose. Avoid using it for tasks it is not designed for. Just like you wouldn’t use a hammer as a screwdriver, make sure to use the appropriate tools for the job. If you do use a hammer as a screwdriver, it’s not fair to blame the hammer manufacturer for any resulting issues.

Sencha provides a high-level and programmer-friendly tool in Ext JS. However, it is the responsibility of the user to utilize Sencha Ext JS as intended. If you do this, I have no doubt that you will find it to be the best tool for overcoming any programming challenges you may encounter.

Application Screenshots

AniMap Main Screen
AniMap Main Screen, upper right is territory/state formation details, lower right is county formation details and left right is the selected event details.

AniMap Location Screen
AniMap Location Screen where users can add and place markers within their research subjects

AniMap main screen with notes panel open
AniMap main screen with notes panel open. Notes are shown based on the users selected research subject.

Site Finder Window
Site Finder Window – Database of 2 million plus locations both current and historical within the United States

Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.