VTEX IO: Simplifying web development
Learn how IO facilitates development by ensuring compatibility, consistent documentation, and simplified integrations.
As access to the Internet and sites became more popular and democratic, fifteen-year-old sites created to display information and images have incorporated more sophisticated resources every day.
A wide range of online tools and features displaced programs that used to require installation on your personal computer, such as messaging software and photo editors. Thus, websites progressively demanded more complex infrastructures and more powerful servers.
To keep track of the fast-paced web reinvention and evolution, we are challenged to provide developers with the tools they need to create more sophisticated solutions.
With this in mind, VTEX developed a resource to leverage the process by turning some of the developer’s manual and exhausting tasks into practical actions; especially, in systems with millions of code lines maintained by teams of hundreds of engineers, designers, and other professionals.
How VTEX IO works.
A tool to integrate and simplify the process
When developing a web page, we frequently check information from an external source, usually from our own server, to make sure the user can see it, interact with it, and modify it. Usually, the developer runs and access the site from their own computer while updating the code and confirming that the changes are displayed in the browser. This is what we call “local development.”
When the developer follows this process, they will feed the website with information from some server (external or local) while adjusting the website’s code. Once development is over, the updated code is uploaded to a cloud repository, such as Github. A new code version is then created and published in a server or CDN (AWS S3, for example) so that users may access and view the website.
There are many tools that are able to automate each of those steps, and even run them in a pipeline, a sort of joint automatization. However, the increasing number of tools creates some problems, including maintaining compatibility, making updates, documentation consistency, not to mention that more specific knowledge is required to operate the whole.
In an effort to simplify process integration and facilitate this workflow, VTEX created IO.
VTEX IO’s proposal
With IO, you can develop websites from your own computer and see the results in real-time. Running the website in a similar environment to the one the final version will run on helps getting more consistent results regarding performance and integration with other site components. Also, you do not require an initial setup either because IO offers a set of builders that take care of it.
IO also allows other people to keep track of the website’s development – they just need to know the link you are using. This is particularly useful in large teams where other developers check the code and test new functionalities.
When the updated code is sent to Github, IO automatically recognizes it and creates new tags (versions) of the application, making it available to be applied on the end user’s environment whenever it is convenient, also allowing to revert to previous versions in case a rollback is needed.
All of these features run in the same tool in a simplified way.
IO also introduces the concept of app-based development, which allows breaking the code into different modules that make up a whole. The tool also performs the orchestration and communication between the apps, which enables organizing projects in different parts that are developed and supported by different teams, which work together nonetheless.
VTEX IO in practice
With VTEX IO, introducing changes to an app is easy and quick. During development, you will use what we call a workspace in an account. In this example, I will use the ericshop account, a fictitious clothing store.
Once the IO toolbelt is installed on your computer, you need to login into your account with your credentials using the command:
vtex login ericshop
Once logged in, you create your workspace, and it will work just as a branch works in Git, with the use command:
vtex use myworkspace
Once the workspace configuration is done, just run the link command, and your code will be running and “connected” to the VTEX infrastructure, live and open to the public!
Your workspace will use the same permissions as the linked store, so you do not need to worry about security, deployment, or APIs, and can focus on development. In this scenario, you will see changes while programming directly on https://myworkspace–ericshop.com.br, which runs with HMR – Hot Module Replacement.
Once you have finished coding and uploaded a Pull Request into Github, the IO Bot will ask you what type of changes you are publishing:
When merging, and after clicking on the right type, a tag will be automatically created in the repository following semantic versioning, and the created version will be available for deployment on the selected environment. The Bot will reply on the PR showing the command you need to use:
You can find all the IO documentation here: https://vtex.io/docs/
Semantic versioning: https://semver.org/lang/pt-BR/
Hot Module Replacement: https://webpack.js.org/concepts/hot-module-replacement/
IO offers more than practical development. It also allows connecting different repositories as part of the same domain/site. This is useful when several teams develop different modules that are part of the same product because each module can be updated and modified independently, even though it looks like one “site” from the end user’s perspective.
For instance, we can have the Financial and Catalog modules in a store administration website. In this scenario, it is possible that each module is a project that takes different routes to display its contents, and IO organizes this operation following the same flow mentioned before. This configuration scheme is works through the apps’ interfaces in order to determine the right route for each component.
You can check the interfaces’ documentation here: https://vtex.io/docs/concepts/interfaces/
Using IO, you may also create BFFs or Back-end For Front-end in the apps. These are Node services that belong to an intermediary category between the front application and some server, or even other BFFs, which use the store domain and resources determined by IO Routes. The routes defined in the BFF can be accessed from the account domain where they are published.
For example, if you want to test an address API but you do not want to expose the details of the service being used, credentials, etc. on the front-end, you may create a BFF that does that, encapsulating and hiding the information. The front-end will communicate to its own domain through the route where the BFF is configured.
You can check the Routes’ documentation here: https://vtex.io/docs/concepts/routes/
Simpler and integrated workflow
Bringing the most diverse tools that can be integrated in different ways, VTEX’s solution simplifies the workflow, inncorporating all development steps into one toolbelt for a simplified code creation process that can be tested in realistic environments, even during the development phase.
Using IO, the apps may be semantically divided into smaller parts without compromising the evolution of the applications and without limiting the technology and frameworks used in each part. While keeping the publishing and updating architecture of those projects is easy to manage.
Furthermore, the app concept enables us to “plug” and “unplug” those app sections, according to our need to evolve, migrate, and even create new business strategies.
Do you want to be part of our team? Go to: careers.vtex.com