Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Alfresco/Activiti Modeler Application - Andras Popovics - 2019

52 views

Published on

Get to know the new AMA application, the most important basic features of it, the differences between the Community and Enterprise version, and how you could extend it using our new plugin system. What the differences are between AMA and the APS, and what challenges we had during its development.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Alfresco/Activiti Modeler Application - Andras Popovics - 2019

  1. 1. Alfresco Modeling Application Andras Popovics
  2. 2. About me • Senior Software Engineer @ Alfresco • Modeling Application tech lead • Eternal Dragon Ball Fanatic
  3. 3. Agenda • Introduction – what is AMA? • Distributions of AMA • Application structure & Extensibility • Projects • Process editor • Connector editor • Form editor
  4. 4. Learn. Connect. Collaborate. What is AMA? Activiti | Alfresco Modeling Experience
  5. 5. Learn. Connect. Collaborate. Tech stack (FE) • Latest version Angular framework • Angular Material as UI framework • NgRx: Store, Effects, Entities, etc… • ADF components • Alfresco Js Api
  6. 6. Learn. Connect. Collaborate. Different distributions • Enterprise edition – Extended feature set – Hosted in Alfresco organisation’s private repo – Alfresco Modeling Application • Community edition – Basic feature set – Hosted in Acitivi organisation’s public repo – Activiti Modeling Application
  7. 7. Learn. Connect. Collaborate. Community Edition • Extendable basic application • Contains AMA SDK for plugin creation • Open source • Public repository: – https://github.com/Activiti/activiti-modeling-app
  8. 8. Learn. Connect. Collaborate. CE Features • Application frame (ADF application) • Authentication • Basic authorisation • Projects • Processes • Connectors
  9. 9. Learn. Connect. Collaborate. Enterprise Edition • Community edition on steroids* • Enriched feature set • Knows everything what CE does, and more* • Set of plugins* • Private repository • Smooth transition from CE to EE
  10. 10. Learn. Connect. Collaborate. EE Features • Advanced Process editor • Advanced Connector editor • Form editor • UI editor (early stages) • Data objects (early stages, raw text editor) • Decision tables (early stages, raw text editor)
  11. 11. Learn. Connect. Collaborate. Backend services • Community Edition – Activiti Cloud Modeling (ACM) • Enterprise edition – Activiti Cloud Enterprise Modeling (ACEM) • Shares the same interface • Only difference is the number of features • ACEM is the extended ACM
  12. 12. Learn. Connect. Collaborate. Application structure • Community edition – Base Angular application – AMA Software Development Kit • Enterprise edition – Set of Angular 7 libraries (ADF plugins) – Implemented using the AMA SDK
  13. 13. Community Edition
  14. 14. Enterprise Edition
  15. 15. Learn. Connect. Collaborate. Core third party dependencies • Latest Angular framework • Angular Material as UI framework • ADF Components • RxJS • Alfresco Js Api • NgRx
  16. 16. Learn. Connect. Collaborate. NgRx “NgRx is a framework for building reactive applications in Angular. NgRx provides state management, isolation of side effects, entity collection management, router bindings, code generation, and developer tools that enhance developers experience when building many different types of applications.”
  17. 17. Learn. Connect. Collaborate. AMA SDK Lightweight package for helping creating the extensions, containing: • The basic light and dark theme • An Angular json editor component • The common interfaces and injection tokens which both the application and the plugins based upon • Shared services • Helper classes and utilities
  18. 18. Learn. Connect. Collaborate. Extensibility • adf-extensions package lowest layers • No support for extending the application by the json (plugins system) yet (!!!) • Extension through Typescript code and Agular configuration magic
  19. 19. Enterprise Edition
  20. 20. Extensibility example through the Connector Editor
  21. 21. Learn. Connect. Collaborate. extensions.modules.ts (CE)
  22. 22. Learn. Connect. Collaborate. extensions.modules.ts (EE)
  23. 23. Learn. Connect. Collaborate. angular.json file replacement magic
  24. 24. Learn. Connect. Collaborate. Connector Editor Module (CE)
  25. 25. Learn. Connect. Collaborate. Connector Editor Module (CE)
  26. 26. Learn. Connect. Collaborate. Advanced Connector Editor Module (EE)
  27. 27. Learn. Connect. Collaborate. Projects • Container for models • Can be imported / exported • Exported projects results an organised zip file • Dashboard is the CRUD space for projects
  28. 28. Learn. Connect. Collaborate. Process editor • One of the main modules of the application • CRUD Editor + import & export • Based on Bpmn.io’s Bpmn-js library • Our focus is on building better tools on top of the Bpmn-js • Restricting available elements => make the resulted BPMN definition as lean as possible
  29. 29. Learn. Connect. Collaborate. Process editor • Extensions free BPMN definitions • Extensions are stored in separate JSON file* “The goal is to follow the standard BPMN spec, but handling all our really cool tool using JSON extensions which are easy to handle.” * Process definitions consists of two files, one .bpmn20.xml and one .json file.
  30. 30. Learn. Connect. Collaborate. Connector editor • Yet another CRUD editor for another model • In CE, the Connector Editor is a simple JSON editor, coming form the AMA-SDK • In EE, the Connector Editor is an advanced editor + the optional JSON editor • Our every editor follow the same pattern: – CE: simple raw editors – EE: advanced editor + the option for simple raw editor
  31. 31. Learn. Connect. Collaborate. What is a Connector (definition)? • Connector definition is an interface of a Java class, which we can be bound to a Service task of a Process in the Process editor. • “Think about a Connector as a service to service integration. And the connector definition as the interface for these interactions. We are aiming to enable people to create Connectors in different languages. If you are familiar with cloud infrastructures, you can think of a Connector as a group of functions (in a function as a service model).”
  32. 32. Learn. Connect. Collaborate. Stored BPMN definition
  33. 33. Learn. Connect. Collaborate. Stored extensions
  34. 34. Learn. Connect. Collaborate. Stored extensions
  35. 35. Learn. Connect. Collaborate. Stored extensions
  36. 36. UI in Community Edition
  37. 37. Learn. Connect. Collaborate. Form editor (EE) • Improved experience for Forms modeling • Similar to the old Activiti app’s editor, but completely rewritten • Removed some unnecessary features of it • Stored Form definition is different (a bit) • Using the ADF’s Form rendering Engine (WYSIWYG experience)
  38. 38. Learn. Connect. Collaborate. ADF’s Form Rendering Engine
  39. 39. Learn. Connect. Collaborate. Stored data for text field (old)
  40. 40. Learn. Connect. Collaborate. Stored data for text field (new)
  41. 41. Learn. Connect. Collaborate. Binding a form to a user task
  42. 42. Learn. Connect. Collaborate. Binding a form to a user task
  43. 43. Thanks for attending – Q & A

×