1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
# Como dev, como você dev pensar?
## _Ou como usar makefiles...?_
Já vou começando dando um spoiler: _foque no que quer chegar,
não em como chegar_.
Todo objeto que você quer construir tem o seu propósito, seja um HTML,
um programa nativo ou qualquer coisa. Quando você começa a analisar o
propósito daquilo que você quer construir, você sempre chega nas melhores
descrições do que quer fazer. _Descrição_ é uma palavra chave aqui.
Se você quer construir um HTML para um blog ou um site, você faz o mais óbvio
pra construir o seu HTML: um bloco de notas, e um HTML. Pronto. Se precisar
fazer outra página, você só dá um ctrl-c/ctrl-v. Até aqui, está tudo certo,
não tem muito o que pensar. Mas agora vamos dizer que você queira fazer
uma mudança na estruturação do seu HTML, talvez adicionar uma header, footer,
um css. Agora essas mudanças precisam ser replicadas manualmente em cada HTML
que você criou.
Mas temos um computador, podemos automatizar isso, não? Se todas as páginas
terão a mesma base, porquê não dizemos ao computador: construa esse HTML pra mim
usando esses pedaços? E não precisa ser algo grande.
<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">index.html: header.html.part index.html.part footer.html.part</span>
cat header.html.part index.html.part footer.html.part > index.html</pre>
E salvamos isso em um arquivo chamado `Makefile` pra que o programa `make`
leia isso pra nós e crie o index.html pra gente. A primeira linha contém o que
nós queremos (index.html) e o que vamos usar pra construir o que queremos.
Logo abaixo, e identado **com tabs**, o comando que queremos executar pra cada
um dos htmls que queremos fazer.
Com isso, chegamos no conceito de "fonte".
Você pode entender a fonte como fonte de um recurso que um programa precisa pra
construir algo para nós, nós estamos passando o que queremos e os requisitos
para a construção do que queremos. Perceba que nós ainda queremos o HTML
completo, mas agora melhoramos a _descrição_ do nosso HTML para nós focarmos
apenas naquilo que é necessário: um HTML é construído com header, footer e o
nosso conteúdo. Agora podemos só editar o conteúdo, ou a header, ou a footer,
e todo HTML conterá as mudanças que queremos.
Então fazemos isso para cada arquivo que criamos.
<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">index.html: header.html.part index.html.part footer.html.part</span>
cat header.html.part index.html.part footer.html.part > index.html
<span style="color: rgb(136, 0, 0); font-weight: 700;">about.html: header.html.part about.html.part footer.html.part</span>
cat header.html.part about.html.part footer.html.part > about.html</pre>
Mas estamos no tema de automação usando o computador, não? Ok que reduzimos
bastante a quantidade de mudanças manuais que precisariamos fazer, mas podemos
ir um pouco além disso.
<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">%.html: header.phtml %.phtml footer.phtml</span>
cat <span style="color: rgb(171, 86, 86); font-weight: 400;">$^</span> > <span style="color: rgb(171, 86, 86); font-weight: 400;">$@</span>
</pre>
Agora os arquivos deverão ter uma extensão diferente porque o Makefile se
confunde um pouco se usarmos o jeito anterior, porém agora o `make` vai tentar
a executar essa regra para todo *.html que for requisitado. O `$^` significa
todos os requisitos, em ordem que foram declarados, e o <span>$@</span>
significa o nome da output, para fins de tornar essa regra mais genérica.
Com isso, estabelecemos um padrão para o nosso projeto. Todo HTML é construído
seguindo essa regra: existe um header.phtml, um outro .phtml com a mesmo nome,
e footer.phtml. E não só isso, como ainda podemos prosseguir adicionando mais
regras, e ainda regras sobre arquivos que existem.
<pre style="font-family:monospace;color: rgb(68, 68, 68); background-color: rgb(243, 243, 243); font-weight: 400; "><span style="color: rgb(136, 0, 0); font-weight: 700;">%.html: header.phtml %.phtml footer.phtml</span>
cat <span style="color: rgb(171, 86, 86); font-weight: 400;">$^</span> > <span style="color: rgb(171, 86, 86); font-weight: 400;">$@</span>
<span style="color: rgb(136, 0, 0); font-weight: 700;">%.phtml: %.md</span>
markdown < <span style="color: rgb(171, 86, 86); font-weight: 400;">$<</span> > <span style="color: rgb(171, 86, 86); font-weight: 400;">$@</span></pre>
Agora toda vez que um phtml não existir, ele vai tentar criar a partir de um
arquivo markdown.
Note o que estamos fazendo aqui: nós queremos um arquivo html. Não é o phtml,
não é o markdown, e sim o html final. Os phtmls e os arquivos markdowns são
apenas formas de se chegar no html. E cada vez que adicionamos mais uma camada
de dependência e regras de resolução de dependência, estamos aumentando a
capacidade de descrever o resultado final que queremos.
O mesmo vale para o seu programa e na arquitetura do seu programa. Quanto mais
você consegue descrever sobre o seu programa, mais você irá notar componentes,
partes que se mantém estáveis, padrões, testes e outras coisas, e notar que essas
coisas existem irá tornar o seu programa mais simples de desenvolver, ou
pelo menos você irá fazer menos cagadas, afinal: você vai estar entendendo o
seu programa.
Por fim, note que isso resulta em um grafo, mais especificamente uma árvore:
index.html
|
+--- header.phtml
+--- footer.phtml
+--- index.phtml
about.html
|
+--- header.phtml
+--- footer.phtml
+--- about.phtml
|
+ --- about.md
Ao notar essa árvore, perceba que nós não só podemos notar padrões mas agora
podemos planejar o que devemos fazer para resolver todos os problemas de forma
geral.
As conexões também são pontos de resolução de problemas. Perceba aqui que o
`make` é um programa que nós já tinhamos em mãos para resolver as dependências
mas mesmo esses programas precisam de outros pra transformar "simbolos em
outros simbolos". Então não tenha medo de fazer _código que escreve código_, o
seu trabalho sempre foi resolver problemas usando o computador, inclusive os
seus próprios problemas.
|
