-
Notifications
You must be signed in to change notification settings - Fork 39
/
02-getting-started.md.erb
353 lines (263 loc) · 18.7 KB
/
02-getting-started.md.erb
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
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
---
title: Начало работы
slug: getting-started
date: 0002/01/01
number: 2
contents: Установите Meteor.|Узнаете про 5 типов модулей Meteor.|Создадите файловую структуру вашего Meteor-приложения.
paragraphs: 49
---
Первое впечатление крайне важно, и установка Meteor должна пройти без особых сложностей. В большинстве случаев, весь процесс занимает не более пяти минут.
Для начала мы можем установить Meteor набрав в терминале:
~~~bash
curl https://install.meteor.com | sh
~~~
Это установит глобальную команду meteor, после чего вы сможете начать использовать фреймворк.
<% note do %>
### Либо *не* устанавливаем Meteor вовсе
Если вы не можете (или не хотите) устанавливать Meteor локально, рекомендуем вам [Nitrous.io](http://nitrous.io).
Nitrous.io - это сервис, который позволяет запускать приложения и редактировать их код прямо в браузере. Мы написали [небольшое руководство по этой теме](https://www.discovermeteor.com/2013/10/04/meteor-nitrous/)
Вы можете просто пройти эту инструкцию до пункта «Устанавливаем Meteor» включительно, а затем снова вернуться к этой книге начиная с секции «Создаем простое приложение» текущей главы.
<% end %>
### Создаем простое приложение
Теперь, когда мы установили Meteor, давайте создадим приложение. Чтобы это сделать, мы используем команду `meteor`:
~~~bash
meteor create microscope
~~~
Эта команда загрузит Meteor, развернет и создаст базовый, готовый к работе проект. Когда Meteor закончит этот процесс, вы увидите, что директория `microscope/` содержит следующее:
~~~bash
.meteor
microscope.css
microscope.html
microscope.js
~~~
Приложение, которое Meteor создал за вас - это шаблонное приложение, демонстрирующее несколько простых подходов.
Хотя наше приложение пока мало что делает, мы все же можем запустить его. Чтобы это сделать, вернитесь в окно терминала и введите:
~~~bash
cd microscope
meteor
~~~
Теперь перейдите в браузере по адресу `http://localhost:3000/` (или `http://0.0.0.0:3000/`) и вы должны увидеть что-то вроде этого:
<%= screenshot "2-1", "Meteor's Hello World." %>
<%= commit "2-1", "Created basic microscope project." %>
Поздравляем! Вы только что создали и запустили свое первое Meteor-приложение. Кстати, чтобы прервать его работу откройте вкладку терминала, в котором оно исполняется и нажмите `ctrl+c`.
Заметьте, что если вы используете Git, сейчас самое время для инициализации вашего репозитория командой `git init`.
<% note do %>
### Скатертью дорога, Meteorite
В одно время Meteor использовал внешний менеджер пакетов, который назывался Meteorite. Начиная с версии Meteor 0.9.0, Meteorite больше не нуждается, так как его функции были ассимилированы в самом Meteor.
Так что если вы обнаружите какие-либо отсылки к командам Meteorite `mrt` в этой книге, или на просторах Интернета и в материалах про Meteor, вы можете смело заменять их на привычное `meteor`.
<% end %>
### Добавляем пакет
Давайте воспользуемся системой пакетов Meteor для включения [Bootstrap](http://getbootstrap.com/) в наш проект.
Это ничем не отличается от добавления Bootstrap обычным способом, когда мы вручную добавляем CSS и JavaScript файлы в проект. За исключением того, что мы воспользуемся пакетом члена сообщества Meteor [Andrew Mao](https://github.com/mizzao) (где “mizzao” в `mizzao:bootstrap-3` имя пользователя автора этого пакета) чтобы иметь актуальную версию фреймворка.
Мы также добавим пакет [Underscore](http://underscorejs.org/). Underscore это очень полезная вспомогательная библиотека JavaScript, когда дело доходит до управления структурами данных в JavaScript.
На момент написания статьи пакет `underscore` все еще является частью «официальных» пакетов Meteor, вот почему она не имеет автора:
~~~bash
meteor add mizzao:bootstrap-3
meteor add underscore
~~~
Обратите внимание, что мы добавляем Bootstrap **3**. Некоторые скринкасты этой книги были сделаны со старой версией Microscope, которая работала под Bootstrap **2** и поэтому они могут выглядеть несколько иначе.
<%= commit "2-2", "Added bootstrap and underscore packages." %>
Как только вы добавите пакет Bootstrap, вы увидите изменения в нашем минималистичном приложении:
<%= screenshot "2-1b", "With Bootstrap." %>
В отличие от «традиционного» метода добавления внешних ресурсов нам не нужно связывать CSS или JavaScript файлы, потому что Meteor сделает это за нас! Это лишь одно из многих преимуществ пакетов Meteor.
<% note do %>
### О модулях
Когда мы говорим о модулях в контексте Meteor, необходимо учитывать некоторую специфику. Фреймворк использует несколько базовых типов модулей (packages):
- Ядро самого Meteor состоит из **базовых модулей**. Они автоматически включены в каждое Meteor-приложение, и вы пока можете не думать о них вовсе.
- Стандартные модули известны как «**изомодули**» или изоморфные модули (то есть они могут работать как на клиенте, так и на сервере). **Официальные модули** такие, как `accounts-ui` или `appcache` поддерживаются рабочей группой Meteor и [поставляются вместе с Meteor](http://docs.meteor.com/#packages).
- **Сторонние модули** - это те же изомодули, разработанные другими пользователями и загруженные на сервер пакетов Meteor. Вы можете просматривать их на [Atmosphere](http://atmosphere.meteor.com) или используя команду `meteor search`.
- **Локальные модули**, модули которые вы создаете сами и хранятся в директории `/packages`.
- **NPM-модули** (Node.js Packaged Modules) - это модули Node.js. Из коробки они не работают с Meteor, но могут быть использованы предыдущими типами модулей.
<% end %>
### Файловая структура Meteor-приложения
Прежде чем приступить непосредственно к разработке, мы должны правильно организовать наш проект. Для того чтобы создать нужную файловую структуру, сперва откройте директорию '/microscope' и удалите 'microscope.html', 'microscope.js' и 'microscope.css'.
Далее, создадим четыре основных директорий внутри `/microscope`: `/client`, `/server`, `/public` и `/lib`.
Также создадим пустые файлы `main.html` и `main.js` внутри только что созданной директории `/client`. Не волнуйтесь, что сейчас это поломает приложение, мы вернемся к этим файлам в следующей главе.
Необходимо отметить, что некоторые из этих директорий имеют специальное назначение. Когда дело касается файловой структуры, у Meteor есть ряд правил:
- Код в директории `/server` исполняется только на сервере.
- Код в директории `/client` исполняется только на клиенте.
- Все остальные файлы исполняются и на клиенте, и на сервере.
- Статичные файлы (картинки, шрифты и т.п.) - в директории `/public`.
Также полезно знать, как Meteor решает в каком порядке загрузить ваши файлы:
- Файлы в директории `/lib` загружаются самыми *первыми*
- Все файлы с именем `main.*` загружаются самыми *последними*
- Всё остальное загружается в алфавитном порядке по имени файла.
Заметьте также, что несмотря на эти правила, вы не обязаны использовать предлагаемую структуру, если вы этого не хотите. Предложенная выше структура - всего лишь один из способов организации файлов, а не строгий закон.
Если хотите получить больше информации по этому вопросу, то рекомендуем почитать [официальную документацию](http://docs.meteor.com/#structuringyourapp).
<% note do %>
### Meteor это MVC-фреймворк?
Если вы имели опыт работы с такими фреймворками, как Ruby on Rails, вы можете задаться вопросом, придерживается ли Meteor архитектуры MVC (Model View Controller)?
Короткий ответ - нет! В отличие от Rails, Meteor не заставляет придерживаться какой-либо определенной архитектуры, так что в этой книге мы просто структурируем приложение так, как считаем оптимальным, не особо заботясь о том, какой аббревиатурой это обозвать.
<% end %>
### Нет директории public?
Ладно, мы соврали. Нам не нужна директория `public/`, но только лишь потому, что Microscope не использует статичных файлов. Но, так как большинство других Meteor-приложений включают в себя хотя бы пару картинок, мы посчитали нужным коснуться и этой директории.
Кстати, вы должно быть заметили спрятанную директорию `.meteor`. Там находится код самого Meteor, и что-то там менять - обычно очень плохая идея. На деле вам вряд ли когда-нибудь понадобится туда даже заглядывать. Единственное исключение - это файлы `.meteor/packages` и `.meteor/release`, которые отвечают соответственно за ваши модули и используемую версию Meteor. Когда вы добавляете модули или меняете версию Meteor, то иногда бывает полезно проверить эти файлы.
<% note do %>
### Underscores vs CamelCase
Что мы скажем по поводу извечного холивара `my_variable` или `myVariable` - неважно, каким из этих стилей вы пользуетесь, если вы используете его везде.
В этой книге мы используем CamelCase, так как это стандартно для JavaScript (в конце концов, он именно JavaScript, а не java_script!).
Единственное исключение - это имена файлов (`my_file.js`), и CSS-классы (`.my-class`). Причина в том, что символ подчёркивания больше распространён в файловой системе, а CSS в самом своем синтаксисе использует дефисы (`font-family`, `text-align` и т.д.).
<% end %>
### Добавляем CSS
Эта книга не о CSS. Чтобы не тормозить вас заботой о стилях и не отвлекаться на него в дальнейшем, мы решили добавить весь CSS в самом начале.
Meteor автоматически минифицирует CSS, так что, в отличие от остальных статичных файлов, ему лучше находиться в директории `/client`, а не `/public`. Давайте создадим директорию `/client/stylesheets/` и положим туда вот этот файл `style.css`:
~~~css
.grid-block, .main, .post, .comments li, .comment-form {
background: #fff;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 10px;
margin-bottom: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); }
body {
background: #eee;
color: #666666; }
.navbar {
margin-bottom: 10px; }
/* line 32, ../sass/style.scss */
.navbar .navbar-inner {
-webkit-border-radius: 0px 0px 3px 3px;
-moz-border-radius: 0px 0px 3px 3px;
-ms-border-radius: 0px 0px 3px 3px;
-o-border-radius: 0px 0px 3px 3px;
border-radius: 0px 0px 3px 3px; }
#spinner {
height: 300px; }
.post {
/* For modern browsers */
/* For IE 6/7 (trigger hasLayout) */
*zoom: 1;
position: relative;
opacity: 1; }
.post:before, .post:after {
content: "";
display: table; }
.post:after {
clear: both; }
.post.invisible {
opacity: 0; }
.post.instant {
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none; }
.post.animate{
-webkit-transition: all 300ms 0ms ease-in;
-moz-transition: all 300ms 0ms ease-in;
-o-transition: all 300ms 0ms ease-in;
transition: all 300ms 0ms ease-in; }
.post .upvote {
display: block;
margin: 7px 12px 0 0;
float: left; }
.post .post-content {
float: left; }
.post .post-content h3 {
margin: 0;
line-height: 1.4;
font-size: 18px; }
.post .post-content h3 a {
display: inline-block;
margin-right: 5px; }
.post .post-content h3 span {
font-weight: normal;
font-size: 14px;
display: inline-block;
color: #aaaaaa; }
.post .post-content p {
margin: 0; }
.post .discuss {
display: block;
float: right;
margin-top: 7px; }
.comments {
list-style-type: none;
margin: 0; }
.comments li h4 {
font-size: 16px;
margin: 0; }
.comments li h4 .date {
font-size: 12px;
font-weight: normal; }
.comments li h4 a {
font-size: 12px; }
.comments li p:last-child {
margin-bottom: 0; }
.dropdown-menu span {
display: block;
padding: 3px 20px;
clear: both;
line-height: 20px;
color: #bbb;
white-space: nowrap; }
.load-more {
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.05);
text-align: center;
height: 60px;
line-height: 60px;
margin-bottom: 10px; }
.load-more:hover {
text-decoration: none;
background: rgba(0, 0, 0, 0.1); }
.posts .spinner-container{
position: relative;
height: 100px;
}
.jumbotron{
text-align: center;
}
.jumbotron h2{
font-size: 60px;
font-weight: 100;
}
@-webkit-keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
@keyframes fadeOut {
0% {opacity: 0;}
10% {opacity: 1;}
90% {opacity: 1;}
100% {opacity: 0;}
}
.errors{
position: fixed;
z-index: 10000;
padding: 10px;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
pointer-events: none;
}
.alert {
animation: fadeOut 2700ms ease-in 0s 1 forwards;
-webkit-animation: fadeOut 2700ms ease-in 0s 1 forwards;
-moz-animation: fadeOut 2700ms ease-in 0s 1 forwards;
width: 250px;
float: right;
clear: both;
margin-bottom: 5px;
pointer-events: auto;
}
~~~
<%= caption "client/stylesheets/style.css" %>
<%= commit "2-3","Re-arranged file structure." %>
<% note do %>
### О CoffeeScript
В этой книге мы будем использовать чистый JavaScript, но если вы предпочитаете CoffeeScript, то просто добавьте пакет CoffeeScript и начинайте писать на нем:
`meteor add coffeescript`
<% end %>