React, Agular, Vue and the boom 💥of Javascript libraries stared a new era in the development of web apps, we have been building great and new kind of products since then, but we are facing a weird complexity paradox because all the advances and tools in the industry that are supposed to make easier our life as developers are creating other problems that are making our life a bit more complex.

Part of the complexity in the modern development comes from maintaining apps with hundreds or thousands of components, managing states, dealing with the reactivity of the async world and the modern UI standards 👨🏽‍🎨, all that is new stuff for all of us, and there are no patterns or guides to follow at the moment of starting a modern web project, when we became aware of that at Dohnny we decided that in order to keep progressing as software engineers we must need to fix that.

Components and maintainability. 👀

We spend 80% of our time reading the code 👩🏽‍💻 of our past selves and other people if a project is not clear and decently structured the cost of maintainability increases.

In order to fix that we must pay attention and create tools 🔧to avoid the following common problems:

• Bad quality code that produces bugs, tech debt and nightmares with legacy code.
• The structure between folders and files when you have big projects with nested components.
• Modules or libraries that require a lot of setups and learning curve to be implemented.
• Slow and Inefficient communication and debugging methods to see what a segment of code does.
• Having huge libraries and modules when you only need a small segment of a library.

Those are some of many variables that add complexity to the cost of maintaining your projects and components. 💣 💣 💣

To keep innovating, solving problems and creating great products we need to optimize the way we are maintaining and building our projects.

Components manifesto:

• Everything is a component (UI/Logic/API’s).
• Components have types/context.
• Components should behave like independent apps, avoid import other components.
• Beautiful UI.
• Document your code, add videos, images, text, and instructions.
• Use state managers and connectors to wire your app or component.

Note: In a upcoming post we are going to talk about the manifesto with more details.

Introducing Dohnny components

In order to use the manifesto in its maximal potential and improve the process of maintaining components, we created an online development environment where you can share, maintain and reuse your components.

Dohnny component helps you to have a cleaner and organized code using the tools you know (We only support React for now).

The main values of the platform are:

• More structure between files, components and states.👷🏽
• Ready to go templates and components created by the community. 🌎
• Tools to Write human-readable code.👨🏻‍💻
• Features to always create awesome UI. 👩‍🎨

Let’s take a look in the follow small example to see what Dohnny does with the code:

• Regular code:

//index.js (file)

import React,{useState} from "react"

const Button = ({data})=>{

return <h1>Hello, Bro.</h1>
}

• Dohnny refactored code:

//Button (Dohnny component - type view)

const {data} = props;
return (<h1>Hello, Bro. </h1>);

What is going on right here?

Here is where we can see the magic of Dohnny, this possible thanks to having component types, Import manager and component nesting witch are the features that allow us to keep our code clean.

Component Types:

Component types are files that allow us to identify our code by a context and automate somethings to reduce the amount of code you need to write.

UI types:

When we need to create anything related with UI we use this kind of components:

• Views: UI components that represent the Full layout/window of an app.
• Molecules: Small UI component like cards, toolbars, sidebar, buttons, etc.

A View can be made using a set Molecules and other files, this type of components uses a functional component as wrapper by default and all the imports occur in the right bar where you can find the imports and nested components.

Logic and data types:

This type of components could represent regular files, data managers and functions, this components may differ in the way to return or export it’s data but that will help us to reuse our components in other projects and to enable features to interact with other components and types.

• General: Regular JS file.
• Hooks: React Hooks.
• HOC: React High Order Components.
• Providers: React Context Providers.

Component Nesting:

Following the principle of the manifesto “Components should behave like independent apps, avoid import other components” all the top level components have independent components inside, isolated from the rest of the project, so their are only accessible from the component.

You can add or manage you nested components using the right bar.

Imports manager:

Import the dependencies and packages you need and Dohnny do all the npm duty for you, this also help you to maintain the code cleaner and have more control over the things you are importing to your components.

Let’s see a real example:

Example of a Component in a Regular editor:

Example of a component using Dohnny:

Templates and Bookmarks.

When you are going to create a new component you can use some of templates we have created for you, but you can also bookmark components from your projects or the public projects in the community.

Download your component

You can download your components with a single click in the download component button, you will get a create-react-app project ready to go, just run:

npm install //To install all the packages of the component
npm start //To start your component

Note: When you download your component Dohnny creates a normalized file, so your file is going to look like a regular react component file, without any weird change or code.

Advantages of using Dohnny:

• Component isolation.
• Your code is maintainable and documented.
• Every component is easy to reuse or refactor.
• No special libraries, framework or patterns to create your components.
• Work with less code, you don’t need to declare imports or nested components.
• Typed components, every file behaves differently and has an opinionated way to return and export it’s data.
• Don’t need to install or setup anything.
• Pixel perfect tools.
• improve communication with your team.

Disadvantages:

• Only in the web (for now 😏)

Once we reach a decent version of the compiler we plan to add more libraries and frameworks like Angular, Vue and also add server support with Next, Express and other component types.

Roadmap:

• Git/GitHub integration.
• Dohnny CLI. (Developers can integrate components to their project from Dohnny using the terminal).
• Monaco editor.
• Custom debugger and error handler.
• Self-hosting.
• Server components.
• Other frameworks.
• Web assembly.

If you want to be part of our journey, you can sign up and join our Discord server to keep all the updates and receive your early access as soon as possible. Sign up for Early Access, or check out our the latest Demo.

Who solve the problem of the developers?🤔

As software developers, our job tends to be very stressful. At its core, our job is to build and solve problems with software and do it quickly, dealing with a lot of complexity, repetitive tasks, and nonhuman communication, we tend to ignore that those things are taking over our time and energy to do the real job of developers which is solve problems.

The current process of development requires to do things like set the environment up, organize a bunch of files and folders, read hundreds of libraries and old code, write repetitive code, go from mockups to functional prototypes and implement new things over and over again until you get the result you want or something close to it. There is also an explosion of tooling in the existing developer ecosystem so we have to learn more things, we’re also seeing a fundamental shift in the programming models and possibilities available to us, but the complexity of what we have to do and learn becomes higher.

Do you remember the computers from the 60's? huge machines, right? with prolonged learning curves to use it, lots of wires, connections, and really complex logic.

Software development is coming like computers in the 60’s, just take a look in the picture of above.

There is more than just complexity

We are forced to finish our job within a limited amount of time, solving complex tasks. Is very common to be overloaded for all the things we have to do in a limited time so we have to work day and night, losing our life-work balance.

Most of the time we have to sacrifice the quality of our code to have something functional quickly, that lead us to have no chance to understand or edit the code in the future, we end up doing everything from scratch again unless you have a decent documentation, yes, documentation written or not, you are going to feel pain anyway, as a tip is better to have it.

Not everywhere in the development industry are things increasing in complexity. It’s never been easier to put together a backend or database API. You can use Firebase and have a powerful database just using its API. The tooling and automation are becoming more sophisticated every day, and as a result, many tasks are simpler than ever before.

Creating the software’s integrated circuit

After working for several apps and sharing experiences with other developers, we realize that software development is not just about writing code, the code is a tool that helps us to give instructions to the computer in order to solve problems, but now solve problems using code is becoming more complex, we have a bunch of new libraries, frameworks, prototyping tools, but any of those are enough to solve problems with less stress.

We need to improve the way we write code with tools to take away all the mental overload we have when we are building apps, that’s why we start to work in the software´s integrated circuit and we call it Dohnny, a development tool that changes the way to think and visualize your app, so you can invest your time as an architect, putting all your attention on creating incredible solutions instead of all time consuming and repetitive tasks of development.

Dohnny changes the traditional programming paradigm, we are working to let you access your components from everywhere directly in the cloud in that way your development and production environment becomes one, so you don’t need to spend more time setting up environments or installing a lot of libraries, with Dohnny all pieces you need to create your apps are in one place and ready to go.

We also are working to teach computers how to create apps by themselves or at least take care of all the time-consuming tasks, we know that AI is the natural evolution of computers, for example, now instead of creating algorithms we just need to train a neural network with data or rules, in most of the cases that will save us a lot of time and headaches.

Nowadays there are applications that transpile mockups in code, really soon an AI writing code is going to be a really common thing, but there are going to be serious problems if you don’t make the code more human readable, imagine to maintain, refactor or read the messy code of an AI, we haven’t solved that problem ourselves, most of the time we sacrifice the clean code and a decent structure to make our apps work as fast as possible.

To solve the problem of code we are integrating an old friend of the 80’s: literate programming which is the most efficient way to write human readable code, this will enable new ways to write beautiful and well-documented code, without spending time and crying for having an unreadable code that only your machine understands.

The code is the input to tell the computer how to do things, but writing code is a really slow communication method, and that’s why we are looking new ways to make more efficient the computer-human communication, we think that with the current stage of technology we can create an AI that using natural language processing and visual recognition interface, and with that improve the way humans give instructions to a computer, we feel great to be part of the group of people that will make it possible.

We are creating Dohnny to build everything else…

Sign up for Early Beta

If you want to be part of our journey, you can sign up and join our Discord server to keep all the updates and receive your early access as soon as possible. Sign up for Early Beta, and you will get access before we release to the public.

Peace ✌️

— Jensen Baronville, CEO, Dohnny

We’re on Product Hunt🐱🚀

Bonus trap: