Atomic GUI

The Atomic GUI aids in the creation of new atomics by providing a web form that can be filled out in order to generate the YAML test definition. This YAML can then by copy and pasted into the YAML for the appropriate Technique Number (e.g. T1003) in order to add a new atomic test. Instructions for using the Atomic GUI are provided below.

Atomic GUI

Use the provided web form to define the new atomic. Any optional components can be left blank if you don't intend to use them. Once you've filled out the form, click the Generate Test Definition YAML button.

Use the "Copy" button to copy and then paste the generated YAML into the parent YAML file of an exiting technique (e.g. T1564.004.yaml). Make sure the indention of the YAML for your new atomic matches that of other atomics within the parent YAML file.

Make it easier for your design team to adopt atomic design methodology. Design component-based prototypes. Bring React components to UXPin with its revolutionary Merge technology. Learn more about UXPin Merge.

With Atomic Design methodology, developers can take UI elements independently, rather than as a single brick that needs to move as one. This allows developers to reuse, repurpose, or pair atomic components with other elements to form new, more complex components.

This is true for both developers and final users. For developers, the code of sites created with Atomic Design is easier to read and understand. For users, atomically designed sites are easier to navigate and more intuitive. When and if developers need to go back into the site to make changes in its content structure, Atomic Design makes it easy to identify each element and what it represents and alter things accordingly.

Chemical reactions are represented by chemical equations, which often show how atomic elements combine together to form molecules. In the example above, we see how hydrogen and oxygen combine together to form water molecules.

Atomic design is a methodology composed of five distinct stages working together to create interface design systems in a more deliberate and hierarchical manner. The five stages of atomic design are:

One of the biggest advantages atomic design provides is the ability to quickly shift between abstract and concrete. We can simultaneously see our interfaces broken down to their atomic elements and also see how those elements combine together to form our final experiences.

Atomic design gives us a language for discussing the structure of our UI patterns and also the content that goes inside those patterns. While there is a clean separation between the content structure skeleton (templates) and the final content (pages), atomic design recognizes the two very much influence each other. For instance, take the following example:

I show this non-web example because atomic design tends to get misinterpreted as an approach to web-specific technologies like CSS and JavaScript. Let me be clear about this: atomic design has nothing to do with web-specific subjects like CSS or JavaScript architecture. In chapter 1 we discussed the trend toward modularity in all aspects of design and development, which includes CSS and JavaScript. These are fantastic trends in CSS and JavaScript, but atomic design deals with crafting user interface design systems irrespective of the technology used to create them.

This chapter introduced the atomic design methodology and demonstrated how atoms, molecules, organisms, templates, and pages all work together to craft thoughtful, deliberate interface design systems. Atomic design allows us to see our UIs broken down to their atomic elements, and also allows us to simultaneously step through how those elements join together to form our final UIs. We learned about the tight bond between content and design, and how atomic design allows us to craft design systems that are tailored to the content that lives inside them. And finally we learned how the language of atomic design gives us a helpful shorthand for discussing modularity with our colleagues, and provides a much needed sense of hierarchy in our design systems.

Beginning to build a new UI library using the atomic design methodology we quickly ran into a problem when trying to categorise the smallest UI building blocks as atoms. An example here might be a React component that might be say, . Initially classified as an atom - it quickly became apparent that it probably wasn't. In terms of atomic design it wouldn't fit the vocabulary of being an atom - it is an implementation detail. So an component might fit the design classification of atom and the implementation of that component might be composed of an . There are other examples of such components eg .

I have to try this out myself, but this way of managing templates and atomic design makes a lot of sense, and feels like a great way to build the missing link between front and back end in this respect. ( Figata! :) )

c. Some atomics are destructive, in that they add things such as registry autoruns without cleaning up, thus reverting from a snapshot is an easy way to ensure the test is run on a clean platform each time

d. For this same reason, Tevora recommends not running this tool on production systems unless careful tuning and removal of destructive atomics is done, or if only single or few atomics that are known to not modify the system are run.

I recently spoke with Nikolay Advolodkin on my Test Guild Automation podcast about automation best practices. The importance of atomic automation tests came up, but I felt like we didn't talk enough about it.

We slightly failed with this, because we only started creating documentation halfway through creating the components. This meant that someone (i.e., me) had to go through all the components retroactively to add documentation, which seemed like lost time to our customer. If you want a documented atomic design system, do it from the beginning! And, above all, use meaningful names that are simple enough for anyone working with it to understand.

Elevator System models the core logic that delegates incoming requests from the UI to the nearest available elevator car. This chart contains a pair of atomic subcharts that implement identical logic for the cars.

The model in this example is a redesigned version of an older model that does not use atomic subcharts. The original model uses separate subcharts to manage floor requests (subcharts Elevator_A and Elevator_B of the Elevator System chart) and to control the UI display of elevator cars (subcharts CarA_Controller and CarB_Controller of the UI Controller chart). In each case, the subcharts are nearly identical copies of one another. They differ only in the names of the data and events that they use.

To convert the duplicate subcharts to atomic subcharts, first make a library atomic subchart out of one of the subcharts. Then use linked instances of this library to replace the duplicate subcharts. For example, consider the duplicate elevator car subcharts of the Elevator System chart. These subcharts call several functions and local variables that are defined in the Elevator_Manager subchart. Before creating an atomic subchart, you must make these subcharts independent and self-contained units.

7. Replace the two elevator subcharts with the linked atomic subchart. For each linked atomic subchart, map data and events to the parent chart. For more information, see Map Variables for Atomic Subcharts and Boxes. 041b061a72