ADF is a comprehensive framework that includes over 100 reusable Angular components and services, development tooling, and the Alfresco JavaScript API, aimed at creating collaborative applications. The latest version, ADF 2.0, introduces several features such as a metadata editor, document viewer, and improved search functionalities. The framework emphasizes extensibility, customization, and developer-friendly practices, along with extensive documentation and community support.

1. ADF – Basics and beyond
Ole Hejlskov & Mario Romano

2. Learn. Connect. Collaborate.
What is ADF?
• 100+ reusable Angular
components & services
• Dev tooling to save time
• Alfresco JavaScript API
• Vibrant open source community
• Based on standard technologies

3. Learn. Connect. Collaborate.
The 3 ADF Pillars
JavaScript
Library
Angular
Components
Library
App
Generator
+

4. Learn. Connect. Collaborate.
What you get
out of the
box
• Extensible behavior
• Internationalization
• Accessibility
• Consistent UX Experience with Material Design
• Responsiveness
• Customizable style
• High tests coverage
• Easy to install with npm
• Each component is independent from each other,
so you can use just the components that you need

5. https://github.com/Alfresco/alfresco-content-app

6. Learn. Connect. Collaborate.
New Features
in ADF 2.0
• Metadata editor
• Versions navigator
• New document viewer
• New Search
• New Upload
• Document List
• Sites/Favorites
• Copy and move
• Endpoints setup
• Infinity scrolling
• File permissions directive
• Info Drawer
• People and Groups
ADF 2.0 Release notes
https://community.alfresco.com/docs/DOC-7244-adf-200-release-note

7. Learn. Connect. Collaborate.
ADF
Packages
@Alfresco/adf-process-services
. . .
@Alfresco/adf-core
. . .
Button
Angular
Material
Design
Components
Input
Icons
Dialog
Card
Options
. . .
Sidenav
Document List
Search Versions
Metadata
. . .
@Alfresco/adf-content-services
Login
Data Table User Info
Viewer
Upload
Form
Task List
Process List
@Alfresco/adf-content-insight
Reports Diagrams

8. Learn. Connect. Collaborate.

9. Learn. Connect. Collaborate.
Code Base
Separation
HTML
EXTENSION
POINTS
CONFIG
PROPERTIES
EVENT
LISTENERS
ADF
FRAMEWORK
COMPONENTS
DEVELOPER
CUSTOM
APP

10. Learn. Connect. Collaborate.
Common
Pitfalls
• Customize or extend – don’t overwrite
• Never change anything in node_modules
• Contribute instead of local forks
• Use “Starters” like the Content Application

11. Learn. Connect. Collaborate.
Alfresco
JavaScript
API
• Unified Login for Content and Process
• Wraps Content API methods
• Wraps Process API methods
• Frontend use
• Backend use
• Leverage any Javascript based framework

12. Learn. Connect. Collaborate.
Release Strategy
https://community.alfresco.com/docs/DOC-7026-adf-release-strategy

13. Learn. Connect. Collaborate.
Production
Quality
• Unit tests
• Automation tests
• Public continues integration system
• Public code coverage report
• Public issues on Github + Public JIRA Project
• Clean Coding
• Contribution based on PR system
• Extensive documentation
• JavaScript/TypeScript Doc

14. Learn. Connect. Collaborate.
How to get
started with an
application?
+
• Generate your first application in minutes
• Using modern standard tools from the
community
• Angular CLI Templates via Yeoman Generator:
– Process project
– Content project
– Process project + Content project
$ npm install –g generator-alfresco-adf-app
$ yo alfresco-adf-app

15. Learn. Connect. Collaborate.
Deployment
• Look to overall Angular deployment strategies
• ADF / Angular Apps are just static assets, can be
served up from any web server
Common Strategies
• nginx to serve the static files – also include reverse
proxy to eliminate CORS
– Also works great in a Docker container
• Zip all static assets as a WAR file and deploy in
Tomcat
– Might require a bit of tweaking if serving in subfolder
• Create Spring Boot project to include your ADF
app
– Use Zuul as proxy to avoid CORS, help deal with SSO

16. Learn. Connect. Collaborate.
Join Gitter!
• Go to https://gitter.im
• Sign in with you GitHub user
• Search for: alfresco
• Join to: alfresco-ng2-components

17. Learn. Connect. Collaborate.
Useful Links
– Community portal
• https://community.alfresco.com/community/application-
development-framework/pages/get-started
– Github
• https://github.com/Alfresco/alfresco-ng2-components
• https://github.com/Alfresco/alfresco-js-api
• https://github.com/Alfresco/generator-ng2-alfresco-
component
• https://github.com/Alfresco/generator-ng2-alfresco-app
– Npm
• https://www.npmjs.com/~alfresco
– Gitter Channel
• https://gitter.im/Alfresco/alfresco-ng2-components
– ADF Component Catalog
• https://alfresco.github.io/adf-component-catalog/index.html

18. Questions?
Thank you!