Константин Якушев «Как красиво программировать в AngularJS то, что обычно программируют в 1С» Frontend Dev Conf'14 www.fdconf.by

1. Как (красиво)
программировать в
AngularJS то, что
обычно программируют
в 1С

2. Инфраструктурная компания
1. Складская система
2. Контакт-центр
3. Система отчѐтности
4. Личный кабинет для клиентов
5. Ещѐ несколько проектов без фронтэнда

3. Почему AngularJS, а не 1С?
Во-первых, это круто
Поди найди умных программистов 1С
Масштабировать 1С можно, но плохо
1С в браузере можно, но плохо
1С — очень некрасивый

5. Что легко в 1С и сложно в
AngularJS?
Таблицы и фильтрация (справочники и всѐ такое)
CRUD
Загрузка и выгрузка Excel
Контроль доступа
Блокировки
Промышленное оборудование

6. Как мы это делаем
Стандартные компоненты для фильтрации и таблиц
Стандартные компоненты для CRUD
Стандартный сервис для загрузки/выгрузки Excel
Стандартный сервис аутентификации
Стандартный сервис блокировок
Творческое переосмысление работы с оборудованием

7. Распространяем через bower
Пока нет своего bower-репозитория
Собираем на teamcity, кладѐм в папку и раздаѐм по http
"dependencies": {
…
"everada-auth": "http://bower.everada.ru/ev-auth-0.1.5.zip"
}

9. Таблица (html)
<ev-ng-table
table-params="tableParams"
ev-loading="loading.load"
columns-data="tableFields">
<each-row
ng-click="editTransaction($data[$index])"/>
</ev-ng-table>

10. Таблица (контроллер)
$scope.tableFields = [
{ title: 'ID', value: 'id' },
{ title: 'Тип', value: 'type' },
(…)
{ title: 'Статус', value: 'status' },
{ title: 'Привязка', value: 'isMapped'}
];

11. Фильтры
<div ev-datepicker model="dateFilter">
</div>

12. Фильтры
<div
button-checkbox-group
filter-params="statusGroupConfig"
model="tableParams.filter()"
header="Статус:">
</div>

13. Фильтры
$scope.statusGroupConfig = {
buttonPrefix: 'status',
buttons:
[
{ filterValue: 'All', textValue: 'Все', isAll: true },
{ filterValue: 'Correct', textValue: 'ОК' },
{ filterValue: 'Warning', textValue: 'Требуется уточнение' },
{ filterValue: 'Error', textValue: 'Ошибка' }
]
};

15. Загрузка из Excel
1. Отправка файла на /excel/headers
2. Получение заголовков и разметка на модель
3. Отправка разметки и файла на /excel/map. Сервер
возвращает json
4. Отправка json’а в API

17. Блокировки
Пробуем заблокировать на 10 минут.
Если заблокировалось:
1. Продляем при редактировании
2. Снимаем при выходе
Если не заблокировалось:
1. Пингуем блокировку каждые 10 секунд
2. Администратор всегда может снять

18. android
+
chrome
bluetooth-

19. /Как (красиво) программировать в
AngularJS то, что обычно
программируют в 1С
Константин Якушев
Everada
19 апреля 2014 г.