DEV Community: Boris Siscanu

Recycle your HTML code

Boris Siscanu — Mon, 11 Feb 2019 21:37:36 +0000

The basic mantra of software development "don't repeat yourself" was hardly achievable in the process of HTML layout creation, template engines smoothed the flow, but it kept to be an ocean of pain and divs for a long period of time.

Gladly, everything changed with the introduction of web components, a set of web platform APIs used to produce encapsulated HTML tags. It reduces development span considerably, improves code quality and makes HTML code scalable ad infinitum.

Apparently, it's a game changer and to persuade you to adopt web components as early as possible, we started the Domy project, a package manager for web components.

teamdomy / domy

Custom Elements Storage

Custom Elements storage

Utilization

domy signup

domy login

Compile the project using Stencil and after publish it, submitting the whole directory:

domy publish --version 0.1.0

Execute the command in the root (base) directory of your project
The version is optional. Non-versioned components will be sent to the master branch

It's possible to publish just one component by passing its class name

domy publish MyComponent --version 0.1.0

Install the component in another project using its class name:

domy install MyComponent --version 0.1.0

Installed components will be tracked in package.json webcomponents compartment

To install all components listed in package.json webcomponents compartment, drop the class name:

domy install

Components are installed in the node_modules/@ directory and could be reused in another Stencil application:

// master is a non-versioned

…

View on GitHub

It detects and publishes every single web component used in a Stencil project, no configuration required. The compiled code represents mostly an "intermediate" set of instructions generated by Stencil for distribution purpose. It means that on the last mile, Stencil compiler should be used to bundle everything together. In the registry, components are stored in deeply nested collections, where the root is the current user name

Currently, only Stencil-like generated components are supported, the integration of LitElement base class is coming next.

We would be thrilled to hear your opinion on the matter. Submission of a feature or a bug would be even better. Thanks!

The package manager for React components

Boris Siscanu — Thu, 27 Dec 2018 11:33:27 +0000

Update: Webpack was deprecated in favor of Stencil compiler (v. 0.5.0)

We released an alpha version of the zero-configuration package manager for React components.

It helps developers to publish and to reuse any component directly from an existing app, no metadata or configuration files required. Basically, Domy will reuse the configuration data of your main app to transpile the component (ex. webpack.config.js).

teamdomy / domy

Custom Elements Storage

Custom Elements storage

Utilization

domy signup

domy login

Compile the project using Stencil and after publish it, submitting the whole directory:

domy publish --version 0.1.0

Execute the command in the root (base) directory of your project
The version is optional. Non-versioned components will be sent to the master branch

It's possible to publish just one component by passing its class name

domy publish MyComponent --version 0.1.0

Install the component in another project using its class name:

domy install MyComponent --version 0.1.0

Installed components will be tracked in package.json webcomponents compartment

To install all components listed in package.json webcomponents compartment, drop the class name:

domy install

Components are installed in the node_modules/@ directory and could be reused in another Stencil application:

// master is a non-versioned

…

View on GitHub

The current release supports only React components, no Angular or Web components for the moment. It's coming after alpha test stage.

In order to start your journey into the magical world of the Domy's package manager, install it first:

npm install -g domy-cli

... and create your personal account by executing:

domy signup

it will ask for your username, password, and email.

Then, navigate up to the root directory of your best React app and publish the desired component to the registry. Domy will detect the configuration of your main app and will apply it to the process of packing the component:

domy publish <name> <file>

In the above example, we use angle brackets as an example of parameters that are expected. In our case, it is the name of a component and the path to the file where it is stored. The path is relative to the root of the app.

Finally, navigate to the root directory of another project with initiated npm package.json and execute the command install:

domy install <name>

It will create new components directory in the root of your project and will drop component right there. Installed component can be required as a simple local file/module.

What else? I supposed that's it for now. Come as you are, try our awesome library aka package manager and don't forget to give us a star on Github. Thanks

Introducing darkwasp library

Boris Siscanu — Mon, 17 Sep 2018 08:19:22 +0000

Update: Darkwasp joined Domy project (web components).

Most of the websites right now use one processor core out of many, by doing so they reduce the user experience considerably, freezing the entire web in its actual state of progress. In the era of Deep Learning and real-time experience, it seems that the web hit the wall.

Why is this all happening? The reason is dead simple — thread safety. Web Workers were made isolated by design and the most inconvenient thing out of this is the constraint to run the Web Worker from a separate file.

Consequently, to facilitate the work with parallel processes in web environment, we came out with new library called The Dark Wasp. In a nutshell, the idea is to save the biggest part of the web app code in the storage and load it on request in a separate thread, no need to load the entire codebase all at once. The same functions could be used in frontend and backend (web browser or Node.js).

teamdomy / wasp

Web Workers Superset

The Distributed Storage for Functions

The package makes simple the work with parallel processes (websites on multi-core processor). It supports web browsers and backend clients.

Apache 2.0 License

Starting the first app

To start the work call the connect function, it returns the Promise and listens for an object with 2 properties:

app - the name of your app/storage and
peer - secret and unique UID of the user (think about it as the username and the password in one string).

The package provides 3 core types named agents: Peer, Wasp and Swarm. Allagent methods return the Promise.

For the purpose of the example, lets create and save 2 files with functions, we will store them lately:

random.js

module.exports = function() {
  return (Math.random() + 10).toString(7)
}

fibonacci.js

module.

…

View on GitHub

To access the storage, we’ll need the name of the storage itself - “app” property and the unique identifier of the current user - “peer” property. If the storage with the given name doesn’t exist, it’ll be created and the user will get owners rights. Latest joined users will have limited rights, being simple peers.

Now, for the sake of example, let’s create a random function:

In the example above, app.wasp.random.set() means create the wasp (lambda function) with the name “random” and the code which follows in set() method. In the same time, storage doesn’t exist, so the “peer” will get owner rights.

Next, deliver the function to the storage by executing the file:

node store.js

Done! Further use of stored functions is a piece of cake, in the browser it looks as follows:

… and the Node.js environment (the “peer” is not the first, so no special treatment in this case)

That’s it!