Tools and Libraries

Tools and Libraries

(click to enlarge)

Webiny is an open-source project, and as such, it is also relying on other open-source software and tools, to bring the best possible experience and increase development productivity.

In this key topic, we briefly cover all of the different tools that are included and automatically configured for you, in every Webiny project.

Toolchain

Languages and Runtimes

In terms of languages, Webiny prioritizes TypeScript (v4). Only in a few cases, like for example configuration files, you will encounter pure JavaScript.

In terms of runtimes, for backend development, Node.js is used. Version 14 is the minimum required version.

Package Manager

From version 5, every Webiny project is initialized using yarn 2, with the workspaces feature enabled. This is necessary because Webiny projects are using the monorepo organization.

Static Code Analysis

Except TypeScript mentioned above, every Webiny project comes with the following static code analysis tools:

• Prettier - makes sure the code is consistently formatted across the whole project
• ESLint - warns about bad coding practices, redundant code, and more

Testing

For unit and integration testing purposes, Jest is configured, also with TypeScript support.

For end-to-end (E2E) testing, we provide an easy way to get started with Cypress - an E2E Testing Framework.

Building Code

For all code building needs, every Webiny project comes with the gold standard tools:

• Babel - transpiles next-gen code into backwards compatible version of JavaScript
• Webpack - performs code bundling and optimization

Both tools are used in frontend and backend development.

Deployment

For everything deployment-related, by default, Webiny projects come with Pulumi - a modern infrastructure as code (IaC) solution. Essentially, necessary cloud infrastructure is defined via TypeScript code, and the tool itself performs deployments, change detection, handles multiple environments, and more.

Backend Development

For backend development or in most cases, development of HTTP APIs, Webiny almost exclusively relies on the GraphQL standard, and provides an easy way to create new schemas or expand existing ones, via plugins. Note that, behind the scenes, the GraphQL Tools library is what is being used to make it happen.

As far as databases are concerned, you are allowed to bring your own database clients and other related tools. But, by default, we do provide our own database client which you can use as well.

Along with the primary database of default Webiny applications, for example Page Builder and Headless CMS, they also rely on Elasticsearch - a distributed search and analytics engine. The official client is what we use for interacting with it, and we also provide a convenient way to include it in your code, using the @webiny/api-elasticsearch package.

When it comes to authentication and authorization, no particular open source libraries are being used. Webiny provides a couple of its own packages that deal with it.

For communicating with AWS services, you are, naturally, free to use the AWS SDK.

Finally, it’s worth mentioning that chrome-aws-lambda library is used within the Page Builder application, for prerendering pages, and sharp for transforming images, which is part of the File Manager application.

Frontend Development

For frontend development, first and foremost, Webiny relies on React - a library for building user interfaces.

On top of it, there are many other libraries that are used, but the most significant might be:

• Apollo GraphQL Client (v2) - for everything GraphQL-related
• React Material Web Components (RMWC) - used in Admin Area React application, wrapped with our @webiny/ui package
• Emotion - used for additional CSS styling

For everything else, you’re free to bring your own libraries and tools.

FAQ

Can I Bring My Own Tools and Libraries?

Yes. The mentioned tools and libraries create a solid foundation, but feel free to expand it in any way needed.

Can I Use Another UI Library, for ExampleVue.js?

The Admin Area application, and other Webiny applications like Page Builder or Form Builder, are built with React, so when using or expanding these, you will have to use it too.

But if you’re building a brand new app from scratch, and, for example, you just want to interact with the Webiny GraphQL API, you can certainly use another library.

Can I Replace theRMWCThat's Used in the Admin Area React Application?

You can, but it has been shown several times that it’s not that easy. We don’t recommend doing it because, essentially, you’d be recreating everything from scratch. If you still want to try, send us a message, we might be able to help.