Sign in

I write about technology articles, focusing on Architecture and Software Engineering. https://github.com/pedromoraisf 🇧🇷

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…


Nessa publicação irei basear-me nos Princípios de Coesão de Componentes, descritos no livro Clean Architecture: A Craftsman’s Guide to Software Structure and Design by Robert C. Martin (a.k.a Uncle Bob) para criação não só de componentes maduros, mas também de relações maduras entre componentes.

Sumário

O que é um componente?

O Princípio da Equivalência do Reuso/Release (REP)
Um exemplo e uma reflexão prática

O Princípio do Fechamento Comum (CCP)
Um exemplo prático

O Princípio do Reuso Comum (CRP)
Reflexão

Não consigo aplicar os três…

Conclusão

O que é um componente?

Graças ao advento de frameworks e bibliotecas de criação de SPA's, começamos a ouvir mais sobre…


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). …


Vuex (getters) + Herança Reativa e Prototype

Quem nunca passou por uma situação onde implementava um getter da nossa querida Vuex e sem querer, outro getter já implementado tinha seus valores alterados inexplicavelmente, resultando na quebra dos testes que antes passavam?

Nesse artigo iremos devanear sobre conceitos importantes que acontecem “de baixo dos panos” no meio de todo esse ecossistema de reatividade e elegância que nos permeia, quando desenvolvemos soluções usando a Vuex.

Flux…

A inspiração para criação da Vuex é o Flux, um conceito arquitetural unidirecional onde “sintetizadamente” temos a centralização de um objeto único na aplicação (fazendo analogia a um objeto global) comumente chamado de state…

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