-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
291 lines (270 loc) · 10.1 KB
/
index.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
---
layout: home
keywords: home index welcome
---
<div class="section first-section background-image-side">
<div class="wrapper">
<div class="columns column w-row">
<div class="column herocontent w-col w-col-8">
<h1 class="heading">Fully-featured typescript framework for Node.js</h1>
<p class="short-paragraph">
<b>
Typetron is a modern Node.js framework for building fully-featured backend apps with Typescript.
</b>
</p>
<p class="short-paragraph">
<a class="button2 w-button github-button" href="https://github.com/typetron/typetron"
target="_blank">
GITHUB
</a>
</p>
<p class="short-paragraph">
Join the newsletter to be the first to find out when updates are coming.
</p>
<div class="value-proposition-container">
<div class="value-proposition-buttons">
{% include newsletter.html %}
<br>
<br>
<a href="https://discord.gg/AjAk6qVgUN">
<img src="/images/social-media/discord.svg" alt="discord logo" width="200">
</a>
</div>
</div>
</div>
<div class="w-col w-col-4">
<img alt="" class="image" src="images/hero1.png" width="400">
</div>
</div>
</div>
</div>
<div class="div-block-9">
<div class="section less-v-margin">
<div class="wrapper">
<h1 class="text-center ondark" style="margin: 50px 0;">Why Typetron?</h1>
<div class="row-2">
<div class="col lg-6">
<img alt="" class="side-image" data-w-id="a2b6252f-4804-1566-b140-e9f96b8c4838"
src="/images/performance.png" style="opacity:0" width="625">
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-4 sm-2 lg-vertical-align">
<div class="sm-align-centre">
<h2 class="ondark">Performance</h2>
<p class="margin-bottom ondark">
Being built in Typescript with fresh, modern and clean modules from scratch, Typetron
offers the best performance out of the box compared with other available, taking advantage
of the native speed of Node.js.
</p>
<a href="/benchmark" class="ondark">Read more</a>
</div>
</div>
</div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2 sm-reverse">
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-4 sm-2 lg-vertical-align">
<div class="sm-align-centre">
<h2 class="ondark">Code sharing</h2>
<p class="margin-bottom ondark">
One of the main advantages of Node.js is that you can use
the server-side code in your front-end applications.
Typetron helps you make the code reusability seamless
between your backend and frontend. For example, you can share
the form validation between your apps.
<a href="/frontend" class="ondark">Read more...</a>
</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-6">
<img alt="" class="side-image" data-w-id="6894a54a-7ec3-cf46-4a35-b936bb428dba"
src="/images/sharing.png" style="opacity:0" width="625">
</div>
</div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2">
<div class="col lg-6">
<img alt="" class="side-image" data-w-id="a2b6252f-4804-1566-b140-e9f96b8c4838"
src="/images/scalability.png" style="opacity:0" width="625">
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-4 sm-2 lg-vertical-align">
<div class="sm-align-centre">
<h2 class="ondark">Feature rich</h2>
<p class="margin-bottom ondark">
Typetron provides all the tools necessary for adding almost every feature need in your
web app. Things like Forms, Models, Authentication, Authorization, ORM and many many more
are already built in the framework.
<a href="/docs" class="ondark">Read more...</a>
</p>
</div>
</div>
</div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2 sm-reverse">
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-4 sm-2 lg-vertical-align">
<div class="sm-align-centre">
<h2 class="ondark">Scaling seamlessly</h2>
<p class="margin-bottom ondark">
Intelligently designed, beautifully crafted framework
with user and developer needs in mind, Typetron offers the
scalability feature out of the box if you want to build
enterprise level apps.</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-6">
<img alt="" class="side-image" data-w-id="a2b6252f-4804-1566-b140-e9f96b8c4838"
src="/images/hero1.png" style="opacity:0" width="500">
</div>
</div>
</div>
</div>
</div>
<h1 class="text-center" style="margin-top: 50px;">What does it look like?</h1>
<div class="section">
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2">
<div class="col lg-3 sm-2 vertical-align">
<div class="sm-align-centre">
<h2 class="onlight">Controllers</h2>
<p class="margin-bottom onlight">
</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-8 md-12">
<pre data-src="/code-examples/controller.ts" class="line-numbers"></pre>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;"></div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2">
<div class="col lg-3 sm-2 vertical-align">
<div class="sm-align-centre">
<h2 class="onlight">Entities</h2>
<p class="margin-bottom onlight">
</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-8 md-12">
<pre data-src="/code-examples/entity.ts"></pre>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;"></div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2">
<div class="col lg-3 sm-2 vertical-align">
<div class="sm-align-centre">
<h2 class="onlight">Forms</h2>
<p class="margin-bottom onlight">
</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-8 md-12">
<pre data-src="/code-examples/form.ts"></pre>
</div>
</div>
<div style="border-bottom: 1px solid #ddd;"></div>
</div>
</div>
<div class="section less-v-margin">
<div class="wrapper">
<div class="row-2">
<div class="col lg-3 sm-2 vertical-align">
<div class="sm-align-centre">
<h2 class="onlight">Configuration</h2>
<p class="margin-bottom onlight">
</p>
</div>
</div>
<div class="col lg-1 hidden-lg-down"></div>
<div class="col lg-8 md-12">
<pre data-src="/code-examples/config.ts"></pre>
</div>
</div>
</div>
</div>
</div>
<div class="div-block-9">
<div class="section less-v-margin">
<div class="wrapper">
<h1 class="text-center ondark" style="margin: 50px 0;">Frequently asked questions</h1>
<div class="ondark">
<div class="column w-col-12">
<ol>
<li class="margin-bottom-2">
<h3>Why did you build Typetron?</h3>
<p>
Building a framework was one of my side-projects created to learn how a web framework works and also, to learn Typescript.
It was not my intention to create a competing framework 😅.
After it was presented on a small local meetup, people there wanted to know more about it and therefore I created a website and added documentation.
Then, after making some performance and developer-experience comparison with the other available frameworks, I decided Typetron is a good addition to the community and I continued working on it.
</p>
</li>
<li class="margin-bottom-2">
<h3>How does Typetron compare with Express.js?</h3>
<p>
Typetron is really fast and full of features. One of the key differences between Typetron and Express is that Typetron is an opinionated framework.
This means Typetron has a file structure already created for you in a way that it will play nicely with the features it provides.
This way, you don't have to spend time thinking about where or how should a piece of code interact with another piece of code.
Speaking of features, Typetron is a fully-features framework, or batteries included framework.
This means Typetron has everything a developer needs to build 99% of the possible apps (if not, file an issue on Github and it will be added).
No packages to search, compare and install.
</p>
<p>
Some other differences is that Typetron is more performant and has Typescript support built-in. This already helps you build next-gen, highly scalable and maintainable apps.
</p>
</li>
<li class="margin-bottom-2">
<h3>How does Typetron compare with Nest.js?</h3>
<p>
While they are similar in developer experience, look and feel, Typetron has some key differences.
Not using Express "under the hood" will make Typetron a lot faster. Not even Fastify can't help Nest.js to gain some performance boost over Typetron.
Another difference is that Typetron does not inherit any Angular-like modularisation making it a bit cleaner.
Also, Nest.js is trying to maintain compatibility with Javascript, making it overuse decorators.
</p>
<p>
Some other difference is that Typetron has all the features as first-party packages. This means that the developer experience is the same for every feature, making your app more consistent.
</p>
<p>
The biggest and most important difference is that Typetron has tools for sharing your code (Forms and Models) with your frontend app, which will make the development faster.
You won't even need to look at the backend API documentation.
</p>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper">
<h2 style="text-align: center; margin-top: 50px;">
Join the newsletter to get notified about new features coming.
</h2>
</div>
<div class="section">
<div class="wrapper">
{% include newsletter.html %}
</div>
</div>