Sign in

I write about Architecture and Software Engineering. https://github.com/pedromoraisf 🇧🇷

Intention

Allow E2E tests built through the Postman tool to be included in a GitHub Actions pipeline.

Thus, the way of building E2E tests becomes broader, not only limited to code, but also to a visual approach.

In the end, there is the versioning of collections and test environments, in addition to their integration in the GitHub Actions pipeline.

Scenery

I sampled the entire content of this publication in the sample repository of my last publication: Hexagonal Architecture Distilled in JavaScript — Ultimate Guide.

This repository contains a backend of a Blog written in JavaScript, running in Node.js. Nothing so sophisticated.


I plan to write this article to clearly share how to understand and implement the pattern Ports and Adapters (Hexagonal Architecture) in JavaScript.

I chose to build this publication in a different format. Developed a repository with the actual implementation of a Blog using Hexagonal Architecture.

The purpose of this repository is to present concrete examples of the concepts I will explain.


For JavaScript Apps (Part 1/2)

The strategy I will present in this publication was implemented by me in Menon products. I will encourage the reader to take a strategic, practical and broad view of such an environment.

I will use an example monorepo project where I will model a Continuous Delivery process from the frontend on Vercel and the API on Heroku.

Before doubts arise, I will use images built on top of Github Actions itself to accomplish the task. …


For JavaScript Apps (Part 2/2)

This publication is a continuation of Building a Continuous Delivery + Branching Process with Github Actions, Vercel and Heroku for JavaScript Applications [EP. 1/2], where we modeled a workflow for the Continuous Delivery of the project’s web stack used in the examples. If you haven’t read the previous post, I suggest you read it.

Recap and objectives

In the previous post, I describe the objectives and motivations for this strategy.

We will model a process that permeates the project’s branching activities, creating an isolated and secure preview in the cloud.


I will use the Chain of Responsibility Design Pattern in a more functional approach to create a clean, maintainable, and clear design for important filters on base objects.

Summary

  • What is the Chain of Responsibility?
  • Understanding the problem
  • Hands-on
  • Conclusion

What is the Chain of Responsibility?

As described in the book Design Patterns: Elements of Reusable Object-Oriented Software, it is a behavioral pattern that allows you to pass a request (which can be a primitive parameter, an HTTP request, an object, etc) to a chain of manipulators (isolated functions or methods).

Upon receiving the request, the handler decides whether to process or move on to the next…


In this publication I will build on the Principles of Component Cohesion, described in the book Clean Architecture: A Craftsman’s Guide to Software Structure and Design by Robert C. Martin (a.k.a Uncle Bob), for creating not only mature components, but also mature relationships between components.

Summary

What is an component?

Reuse/Release Equivalence Principle (REP)
An example and a practical reflection

Common Closure Principle (CCP)
An practical example

Common Reuse Principle (CRP)
Reflection

I can't apply the three…

Conclusion

What is an component?

Thanks to the advent of SPA's frameworks and creation libraries, we started to hear more about the components.

In the environments that these…


The purpose of this publication is to present a composition technique for working with Vue.js 2 at the level of defining architectural boundaries.

There will be no codes on this page, just in a repository that I have reserved for us to analyze calmly step by step.

It’s not about how to do it, it’s about an idea of ​​maybe how to do it.

Summary

Introduction
What are Higher-Order Components (HoC)?
Presentation and Visualization Layer?
Why think about this architecture?

Understanding the context

Step-by-step
Presentation Layer
Accessing the UI layer
Higher-Order Component

The architectural composition

Divide and conquer

"Shortcut"

Finally.

Introduction

What are Higher-Order Components (HoC)?

Higher-Order…


O objetivo dessa publicação é apresentar uma técnica de composição para trabalhar com Vue.js 2 a nível de definição de limite arquitetural.

Não terá códigos nessa página, apenas em um repositório que deixei reservado para irmos analisando com calma passo a passo.

Não é sobre o jeito de fazer, é sobre uma ideia de talvez como fazer.

Sumário

Introdução
O que são Higher-Order Components (HoC)?
Presentation e Visualization Layer?
Por que pensar nessa tal arquitetura?

Entendendo o contexto

Step-by-step
Presentation Layer
Acessando a camada de UI
Higher-Order Component

A composição arquitetural

Dividir e conquistar

"Atalho"

Por fim.

Introdução

O que são Higher-Order Components (HoC)?

Os Higher-Order Components estendem…


Como vimos na última postagem, aprendemos a criar um boilerplate para projetos monorepo utilizando as tecnologias do título (os packages são meramente ilustrativos, a grande ideia esta na organização desse nível de complexibilidade de monorepo).

Agora iremos finalizar implementando uma rotina de CI (Continuous Integration) vinculado com o nosso sistema de versionamento. Irei descomplicar ao máximo estruturas com o Github Actions para objetivos como este.

Antes de mais nada, o que é Github Actions?

Essa feature do nosso querido Github nos permite automatizar fluxos de entrega de nossos softwares.

Para tal, é importante que o versionamento do projeto esteja sendo hosteado no próprio Github.

Sintetizadamente, com ele conseguimos desencadear…


Neste aprenderemos como aplicar profissionalmente um projeto full stack monorepo utilizando Yarn Workspaces, Vue.js, Node.js com Typescript e workflow de continuous integration com Github Actions.
Concluiremos em dois episódios com a mão na massa o entendimento para criação do que permeia um projeto desses e um boilerplate pronto para ser utilizado.

TL;DR

O objetivo desse primeiro EP será a explicação do que seria o Yarn Workspaces, pontuações de por que utilizar, configuração do mesmo e das stacks de desenvolvimento (web com Vue.js e server com Node.js e Typescript). …

Pedro Morais

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store