Как красиво программировать в angularjs то, что обычно...
DESCRIPTION
Небольшой доклад на fdconf.by про модульный фротнэнд Видео выступления: http://www.youtube.com/watch?v=3JA0MQB0t4gTRANSCRIPT
![Page 1: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/1.jpg)
Как (красиво) программировать в AngularJS то, что обычно программируют в 1С
![Page 2: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/2.jpg)
Интернет-магазин как услугаСобственный склад
Собственный контакт-центр
Собственная бухгалтерия (с разбором отчётов)
Служба работы с клиентами-магазинами
![Page 3: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/3.jpg)
Архитектурная концепцияAPI-first
Микросервисы
Связь через RabbitMQ
Много пользователей
Хороший UX
![Page 4: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/4.jpg)
Почему AngularJS, а не 1С?Во-первых, это круто
Умные 1С-программисты — дорогие
Масштабировать 1С можно, но плохо
1С в браузере можно, но плохо
1С — очень некрасивый
![Page 5: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/5.jpg)
![Page 6: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/6.jpg)
![Page 7: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/7.jpg)
![Page 8: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/8.jpg)
Что легко в 1С и сложно в AngularJS?Таблицы и фильтрация (справочники и всё такое)
CRUD
Загрузка и выгрузка Excel
Контроль доступа
Блокировки
Промышленное оборудование
![Page 9: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/9.jpg)
Как мы это делаемСтандартные компоненты для фильтрации и таблиц
Стандартные компоненты для CRUD*
Стандартный сервис для загрузки/выгрузки Excel
Стандартный сервис аутентификации
Стандартный сервис блокировок
Творческое переосмысление работы с оборудованием
* - ещё нет
![Page 10: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/10.jpg)
Распространяем через bowerПока нет своего bower-репозитория
Собираем на teamcity, кладём в папку и раздаём по http
"dependencies": { … "everada-auth": "http://bower.everada.ru/ev-auth-0.1.5.zip"
}
![Page 11: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/11.jpg)
![Page 12: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/12.jpg)
Таблица (html)<ev-ng-table table-params="tableParams" ev-loading="loading.load" columns-data="tableFields"> <each-row ng-click="editTransaction($data[$index])"/></ev-ng-table>
![Page 13: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/13.jpg)
Таблица (контроллер)
$scope.tableFields = [ { title: 'ID', value: 'id' }, { title: 'Тип', value: 'type' },
(…)
{ title: 'Статус', value: 'status' }, { title: 'Привязка', value: 'isMapped'}];
![Page 14: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/14.jpg)
Фильтры
<div ev-datepicker model="dateFilter"> </div>
![Page 15: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/15.jpg)
Фильтры
<div ev-datepicker model="dateFilter"> </div>
![Page 16: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/16.jpg)
Фильтры<div button-checkbox-group filter-params="statusGroupConfig" model="tableParams.filter()" header="Статус:">
</div>
![Page 17: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/17.jpg)
Фильтры$scope.statusGroupConfig = { buttonPrefix: 'status', buttons: [ { filterValue: 'All', textValue: 'Все', isAll: true }, { filterValue: 'Correct', textValue: 'ОК' }, { filterValue: 'Warning', textValue: 'Требуется уточнение' }, { filterValue: 'Error', textValue: 'Ошибка' } ]};
![Page 18: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/18.jpg)
![Page 19: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/19.jpg)
Загрузка из Excel1. Отправка файла на /excel/headers
2. Получение заголовков и разметка на модель
3. Отправка разметки и файла на /excel/map. Сервер возвращает json
4. Отправка json’а в API
![Page 20: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/20.jpg)
![Page 21: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/21.jpg)
![Page 22: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/22.jpg)
![Page 23: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/23.jpg)
Пессимистичные блокировкиБлокируем на 10 минут.
Если заблокировалось:
1. Продляем при редактировании
2. Снимаем при выходе
Если не заблокировалось:
1. Пингуем блокировку каждые 10 секунд
2. Администратор всегда может снять
![Page 24: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/24.jpg)
android + chrome
bluetooth-сканер
![Page 25: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/25.jpg)
принтер этикеток
USB-сканер
![Page 26: Как красиво программировать в AngularJS то, что обычно программируют в 1С](https://reader036.vdocuments.site/reader036/viewer/2022062707/557f3568d8b42ad4798b4ef8/html5/thumbnails/26.jpg)
/Как (красиво) программировать в AngularJS то, что обычно программируют в 1СКонстантин ЯкушевEverada19 апреля 2014 г.