Hello World на Derby.js

в 14:25, , рубрики: derby.js, node.js, web-разработка, Веб-разработка, метки: , , ,

Hello World на Derby.js

Если вам не безразличны новые тендеции веб-разработки, то приглашаю поучаствовать в дискуссиях в комментариях к посту Angular vs Meteor vs Derby. Там много интересных мыслей.

Ну а тем временем неделя Derby.js на Хабре продолжается. Популяция Derby-программистов удваивается. И сегодня мы будем учиться бегать на страусах настраивать окружение, создадим приложение, запустим и рассмотрим его структуру.
Если для вас это уже пройденный этап, возможно вам будет интересно посмотреть Tutorial, который по сути Faq. Остальным добро пожаловать под кат.

Окружение

Будем считать, что у вас Linux семейства Debian (Ubuntu, Debian и т.п.). Настройка окружения для других ОС: другие Linux, Windows, Mac OS имеет свои особенности, но принципиально не отличается.
Для того, чтобы запустить Derby приложение, нам нужно: node.js, mongodb, redis.

Для node.js и redis, мы будет использовать репозитарий chris-lea, у mongo есть официальный.

# Добавляем репозитарии
# node.js
sudo add-apt-repository -y ppa:chris-lea/node.js
# mongodb
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 7F0CEB10
sudo echo 'deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart dist 10gen' | sudo tee /etc/apt/sources.list.d/10gen.list
# redis
sudo add-apt-repository -y ppa:chris-lea/redis-server

# Обновляем apt-get
sudo apt-get -y update

# Устанавливаем
sudo apt-get -y install nodejs
sudo apt-get -y install mongodb-10gen
sudo apt-get -y install redis-server

Приложение

Мы конечно можем сейчас запилить приложение с нуля. Что нам стоит дом построить?
Но в Derby есть утилита, которая генерирует для нас макет приложения и экономит время. Почему бы нам не воспользоваться этим?
Для этого нам нужно установить npm пакет derby глобально:

npm install -g derby

Создаем приложение, с названием hello-derby (это будет также название папки):

derby new hello-derby

Утилита создаст нам приложение и установит все зависимости. Это займет какое-то время и в конце вы увидете:

  Project created!

  Try it out:
    $ cd hello-derby
    $ npm start

  More info at: http://derbyjs.com/

Мы будем рассматривать js приложение, но если хотите Coffeescript, используйте --coffee, -c:

derby new --coffee my-cool-coffee-derby-app

Также можно создать пустое приложение (только макет):

derby bare my-bare-app

Или создать приложение, но не устанавливать зависимости при помощи --noinstall, -n:

derby new -n empty-node_modules-app

Запускаем

Чтобы запустить, как вы уже догадались, нужно:

cd hello-derby
npm start

Видим:

1234 listening. Go to: http://localhost:3000/

Теперь в браузере идем сюда: http://localhost:3000/
Ура, работает!

Структура

Давайте быстренько пробежим по структуре проекта.

/lib — тут почти весь js. Если вы на coffee, то будет папка /src.
/lib/app — это то, клиентское приложение с названием app. Таких приложений может быть несколько. В общем это то, что может выполняться на сервере и также загрузится на клиент.
/lib/app/index.js — тут создается само приложение, добавляются компоненты 'derby-ui-boot'(это bootstap для derby) и 'ui'(это пользовательские компоненты). Затем создаются routes, которые будут исполняться и на сервере и на клиенте. В конце создаются контроллеры — это функции, которые исполняются только на клиенте и связанны с манипуляциями dom.
/lib/server — это серверное приложение. Может быть только одно. Тут код, который выполняется только на сервере и с клиента напрямую не доступен.
/lib/server/error.js — здесь мы генерируем пользовательские статичные странички ошибок (без клиентского приложения).
/lib/server/index.js — здесь создается express.js приложение, настраиваются базы данных, создается store, добавляем в express app модули connect, некоторые их которых являются частями Derby приложения. В конце создается server-side route, который выдает ошибку если до этого не сработал ни один route.
/node_modules — тут npm пакеты.
/styles — тут стили. По умолчанию Stylys. Могут быть разными для разных клиентских приложение (по именам папок). В ui — стили компонентов.
/ui — тут компоненты. Каждый компонент состоит из js и html файлов и находится в папке со своим имененм.
/ui/connectionAlert — это пример компонента. Если клиент ушел в оффлайн, этот компоненты выводит соответсвующую надпись и кнопку «Reconnect». Если переподключиться не удалось, он предлагает перезапустить приложение «Reload».
/ui/index.js — тут общие настройки компонент.
/views — html темлейты.
/views/app — тут те темплейты, которые загрузятся в клиентское приложение app.
/views/app/home.html — это стартовая страница.
/views/app/index.html — это layout для home.html и list.html.
/views/app/list.html — лист.
/views/error — тут лежат темплейты для ошибок, которые мы загружаем из /lib/server/error.js
.npmignore — это вам нужно будет если вы свое приложение будете публиковать в npm как пакет.
Procfile — это для Heroku
README.md — прочитай меня
package.json — это настройки для npm. Тут указаны все ваши зависимости. А так же что делать, если вы набрали npm start.
server.js — самый главный файл. Точка входа вашего приложения. Тут Derby запускает express приложение.

Автор: vmakhaev

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js