Repository navigation
Expand file tree
/
Copy pathstack.html
More file actions
106 lines (102 loc) · 3.87 KB
/
Copy pathstack.html
File metadata and controls
106 lines (102 loc) · 3.87 KB
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
---
layout: modern
title: Stack — ZumbaTech™
description: How we build our applications.
author: cjsaylor
notitle: true
data_page: stack
---
<section class="page-heading">
<div class="page-heading-inner">
<span class="crumb"><a href="/">ZumbaTech</a><span class="sep">/</span>Stack</span>
<h1>Our Tech Stack</h1>
<p>How we architect, build and ship code — from request to release.</p>
</div>
</section>
<section class="page-card">
<div class="card-content">
<h2>Service-oriented architecture</h2>
<p>
We operate using a service-oriented architecture (SOA). This enables us to have multiple
ways for users to consume data and issue commands without fracturing data logic throughout
all the apps.
</p>
<p>
We use a <b>presentation layer</b> for shaping data in the form of APIs for mobile
applications and partners, or rendering HTML for a customer's browser. This layer is
mostly concerned with display logic.
</p>
<p>
The <b>service layer</b> is responsible for business logic and data persistence.
</p>
<p>
The <b>data layer</b> is the various database technologies we use to store and query
information. The presentation layer never talks directly to our data layer to prevent all
the applications from forming their own business rules.
</p>
<figure>
<div class="stack-diagram">
<div class="stack-tier is-plum">
<div class="stack-tier-label">Presentation</div>
<div class="stack-tier-title">Web & API</div>
<ul class="stack-tier-list">
<li>CakePHP</li>
<li>Vue 3 + TypeScript</li>
<li>Mobile clients</li>
</ul>
</div>
<div class="stack-arrow" aria-hidden="true">→</div>
<div class="stack-tier is-blue">
<div class="stack-tier-label">Service</div>
<div class="stack-tier-title">Business Logic</div>
<ul class="stack-tier-list">
<li>PHP 8 micro-framework</li>
<li>AWS Lambda services</li>
<li>Rules Engine</li>
</ul>
</div>
<div class="stack-arrow" aria-hidden="true">→</div>
<div class="stack-tier is-black">
<div class="stack-tier-label">Data</div>
<div class="stack-tier-title">Stores</div>
<ul class="stack-tier-list">
<li>MySQL (Aurora)</li>
<li>Cache</li>
<li>Search</li>
</ul>
</div>
</div>
<figcaption>A typical application setup</figcaption>
</figure>
<h2>Development languages</h2>
<p>
We primarily use <b>PHP 8</b> as our main server language and <b>JavaScript (TypeScript)</b>
as our front-end language. Our presentation layer makes use of
<a href="https://cakephp.org/">CakePHP</a>, while our service layer makes use of a custom
micro-framework.
</p>
<p>
For our component-driven designed applications, we use
<a href="https://vuejs.org/">Vue 3</a> with scoped CSS for styling.
</p>
<p>
For non-component-driven applications, we use the CSS pre-processor
<a href="https://sass-lang.com/documentation">Sass</a> with a
<a href="https://en.bem.info/methodology/css/">BEM</a> style approach.
</p>
<h2>Deploying code</h2>
<p>
We use GitHub as our primary code repository storage. Engineers create feature branches
and open pull requests to our main branch. A Github Actions CI process lints, runs tests,
and ensures the build works.
</p>
<p>
Once the pull request is reviewed by another engineer and all the tests pass, the engineer
merges the pull request and then tests their changes behind a feature flag in
production.
</p>
<p>
Finally, when the engineer is satisfied, the feature flag is opened to allow customers.
</p>
</div>
</section>