Presenting Asterix, a React’s components Views library.

Photo by Paul Skorupskas on Unsplash

How many projects have you developed with a login/signup, forms, content views & dashboards? This is a problem when starting a business as you want to get the product as fast as possible to your audience.

You are excited about your idea, not your Sign-up page.

Bootstrap, Bulma, Material UI, and other projects are good, even great. But not enough. I like how they work actively with props, and their API allows for great flexibility with a nice API to HTML and CSS.

Atomic design is a methodology for creating systems. Similar to nature, it sees five distinct levels in atomic design: Atoms, Molecules, Organisms, Templates, Pages. In this view, CSS frameworks would operate in the Atomic & Molecule Level. While Asterix (React’s component-view library) would operate on the level of Organisms, Templates & Pages.

Photo by Zoltan Tasi on Unsplash

Example, a Sign-Up Component:

I researched a dozen of sign-up views from the most successful internet companies (Facebook, Linkedin, Instagram, Pinterest, Airbnb, Uber, AWS, Amazon, Google, Netflix, Booking.com & Spotify) and their structure is astonishingly similar. I propose a Sign-up component with the following API:

<Sign-Up
    # Molecules
    logo = <Logo> 
    login = <LinearLogin> 
    title = <Title> 
    form = <Form> 
    button = <LoginButton> 
    social = <SocialLogin> 
    cta = <Link> 
    tos = <Link> 
    copyright = <Copyright>
    # Orgasnisms
    header = <Header> 
    background = <Background> 
    container = <Container> 
    footer = <Footer>
    modal = <Modal>
    # UIProps
    position = “centered”
    style= {}
    # DevProps
    logLevel = “info”
    silencedLogs = []
    #Methods
    signUp => ISignUp
    login => ILogin 
    socialSignup = (provider) => <response>
/>

A couple of comments:
1. There are five types of props. The main ones are molecules and order how the view is composed, they accept Rect components as inputs.

2. A big insight of molecules is that their order reflects how are they displayed on the view from top-left to bottom-right flow. This makes props not commutative and would probably be accomplished with the native JS Map data structure (ordered dictionary).

3. The second set of props is positionless and would also accept components as input. Their placing on the view is fixed for the most part and they exercise control over the molecules, they are organisms.

4. Pinterest & AirBnB have an interesting behavior, their signups are presented on a Modal. A property would allow molecules to be wrapped around a model. For that, a hierarchy of props would be established similar to how computers read arithmetic operations.

5. Good developer experience is Asterix North (guidance), in practice, this means that a component like <SignUp/> would actually render a bare-bone, good-looking sign-up form. Even more, filling the form and submitting it would actually log the output to the console, how nice! As a consequence, an extra set of props would be available exclusively for developers (and debug mode).

6. Because it is 2020, method responses are defined in an interface :). Also, extra molecules could be fed via a clever nomenclature of prefixes, using the nomenclature, molecules, and methods that could be hooked, for example, to open a modal.

Photo by Mike Lewis HeadSmart Media on Unsplash

What else?

This has been a great thought exercise, the possibilities go way further than that. I can imagine that abstracting these recurring patterns would allow more complex behavior to arise. The Sign-Up example could enable biometric, two-factor & Anonymous authentication.

The whole developer experience could be transformed. With basic AI generating a style could be automatized. I envision a dev-mode on the browser that creates potential styles. In case any of them is pleasing a JSON would be generated and stored in the project.

A meta-language would be born to control common aspects as handling grids, classes, and HTML tags in forms for example.

Agnosticism is our mantra. After developing a set of views, other frameworks as Svelte, Angular, or Vue could be adopted. For CSS I like Bulma and that would be the starting point, but no means should it be the only one. If the project gets traction a marketplace for templates and styles could be born.

Now, I see the biggest potential in integrating network requests to development. Why can’t my editor trigger my endpoint and discover the response to inferring the type?

Integrating Asterix with Serverless providers is a real possibility.

Roadmap

I would be involved light-heartedly on prototyping the aftermentioned Sign-Up component. My plan would be to release a Beta at the end of June. If you are interested in collaborating do not hesitate to hit me up.

Take good care, our future is bright!

More on Atomic Design:
https://bradfrost.com/blog/post/atomic-web-design/