If you want to know everything about ADF its architecture, technologies and best practices you can't skip this talk. Join us also to know more about what we released in November as part of ADF 2.0 and what is our vision for the future.

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!