![]() ![]() This is already incorporated into the existing UI, it has just yet to be enforced by pre-commit. They are simple functions that can be dropped into any component that needs API dataĮSLint - adopt standard linting rules (Airbnb) to maintain code style. Far more lightweight than other boilerplate-heavy state management solutions. Advanced async logic like caching, background updates, optimistic updates, and refetching come out-of-the-box and are easy to configure. React Query - powerful async data handler that will manage all of our API requests. All of this is driven by what a user sees and does and not the underlying code itself. In this example from the POC, we can test a flow for a DAGs view: show a loading indicator when fetching data -> DAGs render -> clicking on a switch changes makes a DAG active/paused with a modal confirming the update. It emphasizes best practices of testing how our software is used vs implementation details that don’t affect a user. RTL is a lightweight framework specifically for React components. React Testing Library (RTL) & Jest - Jest is the standard built-in tool for testing JavaScript. A small learning curve to this, but the properties/naming are identical so it’s easy to pick up. One notable aspect of this system is that it utilizes styled-system, a CSS-in-JS methodology of writing styles as props instead of traditional stylesheets (see examples in POC source code). This will allow us to have a strong base of reusable components and theming so people can focus on features instead of styles. Ĭhakra UI - a simple, modular and accessible component library that gives you all the building blocks you need to build React applications. This carries a very lightweight footprint in the codebase with all the configuration in a single file. Neutrino - lets you build web and Node.js applications with shared presets or configurations. Global model related typings will reside in a shared interfaces file. React components will all utilize typing of internal functions as well as typing of their external props. TypeScript - extends JavaScript by adding types. React - a JavaScript library for building user interfaces (more about this choice below) The source code for this POC is viewable at: Note: This demo is a very simplified example of the final application’s scope and does not reflect any design decisions (see IA & Design section below). It fully utilizes the API of a remote Airflow instance.Ī demo of the POC can be accessed at: ( login: demo / demo ) We’ve produced a POC that demonstrates how the resulting product may look and feel, using the technologies we seek to adopt. An actual real-time UI is not part of this AIP (as it requires more serious backend support to achieve efficiently). Present the underlying data-in-motion dynamically-as it deserves (and users have come to expect). Enables building a Real-time UI - No more manually refreshing.Everything being in JavaScript allows improved linting and testing across the entire app whereas today it is difficult in our mixed technology environment. ![]() Maintainability - Removing the CRUD view templates generated by Flask Application Builder (FAB) would give us much more control of the end-to-end experience across the app.Community Interest - We hope to attract more creativity and front-end/UX specialists to the project by using modern, industry preferred technologies with a clear (and documented) framework for contributing.The current system is an aged version of Bootstrap we’re tethered to as a dependency of a dependency (Flask AppBuilder). Modernized Design System - Building the UI with a componentized system of building blocks that ensures a uniform and accessible experience throughout the application now and upon further evolution by the community.We can take into better account features such as Plugins and determine a thoughtful approach for providing extensibility. Reassess Information Architecture (IA) and User Experience (UX) - This will provide an opportunity to take a holistic approach to organizing and presenting the overall product experience.Decoupled Architecture - Drive the maturation and utility of the API by building a client fully dependent on it.We will reimagine the Airflow UI foundation with modern principles and technologies to continue to grow the appeal and adoption of Airflow with the following resulting outcomes: We’ve reached a point where the expectations of a modern SaaS product have grown immensely since Airflow’s inception and emerging competitors are better positioned to fulfill those expectations by being built upon newer foundations. The current application has served Airflow well and continued to evolve in functionality with the maturation of the product. While the Airflow UI did receive a recent facelift for the 2.0 release, the changes merely made it look like a modern web application, but not function as one. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |