Preparing for ADF 2.0

cancel
Showing results for 
Search instead for 
Did you mean: 

Preparing for ADF 2.0

Alfresco Employee
6 1 2,647

We've been busy in the last months preparing for the next major release of ADF. Since we follow SEMVER we can only introduce breaking changes in major versions, and we're currently at a point where we not only flip the version number to 2.0 but we also go into General Availability, meaning ADF will be fully supported by Alfresco.

We are introducing a set of new features, most notably the File Viewer component. The viewer was one of the first components to be created but in 2.0 we have given it a complete rework. It has a new design, along with a lot of ways to customize, including the info drawer, toolbar and thumbnails. We will provide a more in-depth write up of the new features in the release notes.

To support the new File Viewer, we have added a new component based on the Info Drawer to show metadata from Content Services. This component can be externally configured to include/exclude metadata and offers inline editing of properties as well.

The Yeoman Generators have been given a lot of love. We are embracing Angular CLI, and in 2.0 the Yeoman Generators will give you three options: Create a Process + Content app, a Content app or a Process app. These apps will have a very small footprint and have the basic setup you need to get up and running with ADF and Angular.

Last but not least, we have made big improvements to the documentation. Although we have added some completely new docs, we have mainly focused on gathering the information that was already there and making it easier to find and use. On GitHub, we now have one Markdown file per component and an index page that gives clearer detail about what is available in the docs. Internally, the Markdown files now have a more consistent structure that should make them easier to read, write and maintain. Also, we have added more links between the doc pages and to outside resources (community, other APIs, etc). This should help users form a better picture of how ADF fits together and of its relationship to the rest of the Node/Angular ecosystem.

This is just a small subset of the changes - we will be detailing everything in the release notes.

ADF has come a long way since its beginning. We have learned a lot and are adjusting based on feedback from our customers, partners and community. Some of these adjustments will include breaking changes, and we would like to take this opportunity to give some early insight on what to expect when upgrading to ADF 2.0.

Renaming and refactoring
When we started with ADF we used an early release of Angular2. Back then it was common practise to name components with a ng2-* prefix. Back in May we upgraded to Angular4 and last week we merged the pull request to upgrade to Angular5. Because of this we want to remove the ng2-* prefix and instead just be ADF.

We also used the old naming conventions from Alfresco, so all components were either ng2-alfresco-* or ng2-activiti-*.

As a result of this we are doing some house keeping in the Github repository and renaming all ADF components.

From ADF 2.0 we will split everything into three main packages:

@alfresco/adf-content-service
@alfresco/adf-process-services
@alfresco/adf-core‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
@alfresco/adf-insights‍‍‍‍


The Alfresco Javascript API remains the same and will be deployed as previously.
The structure of the Github repository will be re-arranged to reflect these changes.

The impact for developers using ADF is that the dependencies need to be adjusted (and simplified) in package.json, and all import statements in typescript files need to be changed.


A concrete example of this would be

import { FormRenderingService, FormService, ValidateFormFieldEvent, FormEvent, FormComponent } from 'ng2-activiti-form';‍‍‍‍‍‍‍‍

This would need to be changed to

import { FormService, FormEvent, FormComponent } from '@alfresco/adf-core';
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍


Updating to the latest Angular Material Design
Recently we completed the transition from Material Design Lite to Angular Material Design which is more complete and has more features.


The Angular Material Design project recently introduced a number of breaking changes as they are moving towards a major release as well.

In the 2.0.0-beta11 release of Angular Material Design the team decided to rename all md-* prefixes to mat-*. The team have provided a tool to help migrating. To use this tool, please make sure you run it before upgrading to ADF 2.0. As of this writing we are currently on the 5.0.0-rc0 release of Angular Material Design.

This is mostly an exercise of search'n'replace in the source, along with some testing to ensure you have caught everything.

We highly recommend checking out the breaking changes for the last couple of releases here: https://github.com/angular/material2/releases

Renaming events
Following the guidance from the Angular project, we have renamed all our components' events so they no longer start with "on", which impacts all use of events from the ADF components. Examples of this would be "(onSuccess)" is now "(success)", "(onSave)" is just "(save)".

With these changes in mind, we strongly believe we have the right structure and naming to grow and scale ADF. We expect to release ADF 2.0 by the end of November.

About the Author
After five years as an active member of the Alfresco Community I helped co-found The Order Of the Bee and was initially on the board, until I joined Alfresco as Developer Evangelist in April 2015. I have more than 14 years of experience in the industry ranging from tech support, systems administration, development, project management, team lead and now developer evangelism. I have been a big contributor to the Alfresco SDK, proud member of The Order Of the Bee, written various tutorials and video tutorials on both Aikau, Alfresco and Alfresco SDK.
1 Comment
Established Member II

Hi,

   I am going through ADF 2.0.0 and it works good if i run it using yomen generator i have following questions with regards the ADF 2.0.0 changes.

1. I cant see the source code in node_modules as in previous version like ADF 1.9 I use to get full source code in the node modules( source code here means the exact components and template file which is present in GitHub repo). I can only see the typescript definition file. This is required as I am unable to debug the code.

2. I have a template on angular cli 1.5 which also uses material module and other stuff as ADF application. I want ADF components to be lazy loaded within my template. I tried with including  simple process list component but I was getting the following error. I have already imported BrowserModule in my templates app.module.ts which might be conflicting with the ADF component.

ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common

directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
    at new BrowserModule (platform-browser.js:4547)
    at _createClass (core.js:10622)
    at _createProviderInstance$1 (core.js:10596)
    at initNgModule (core.js:10549)
    at new NgModuleRef_ (core.js:11792)
    at createNgModuleRef (core.js:11782)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:14092)
    at NgModuleFactory_.create (core.js:15216)
    at MapSubscriber.eval [as project] (router.js:4444)
    at MapSubscriber._next (map.js:79)
    at new BrowserModule (platform-browser.js:4547)
    at _createClass (core.js:10622)
    at _createProviderInstance$1 (core.js:10596)
    at initNgModule (core.js:10549)
    at new NgModuleRef_ (core.js:11792)
    at createNgModuleRef (core.js:11782)
    at Object.debugCreateNgModuleRef [as createNgModuleRef] (core.js:14092)
    at NgModuleFactory_.create (core.js:15216)
    at MapSubscriber.eval [as project] (router.js:4444)
    at MapSubscriber._next (map.js:79)
    at resolvePromise (zone.js:757)
    at resolvePromise (zone.js:728)
    at eval (zone.js:805)
    at ZoneDelegate.invokeTask (zone.js:414)
    at Object.onInvokeTask (core.js:4620)
    at ZoneDelegate.invokeTask (zone.js:413)
    at Zone.runTask (zone.js:181)
    at drainMicroTaskQueue (zone.js:574)
    at <anonymous>
defaultErrorLogger @ core.js:1350
ErrorHandler.handleError @ core.js:1411
next @ core.js:5376
schedulerFn @ core.js:4223
SafeSubscriber.__tryOrUnsub @ Subscriber.js:239
SafeSubscriber.next @ Subscriber.js:186
Subscriber._next @ Subscriber.js:127
Subscriber.next @ Subscriber.js:91
Subject.next @ Subject.js:56
EventEmitter.emit @ core.js:4203
(anonymous) @ core.js:4651
ZoneDelegate.invoke @ zone.js:381
Zone.run @ zone.js:141
NgZone.runOutsideAngular @ core.js:4577
onHandleError @ core.js:4651
ZoneDelegate.handleError @ zone.js:385
Zone.runGuarded @ zone.js:157
_loop_1 @ zone.js:640
api.microtaskDrainDone @ zone.js:649
drainMicroTaskQueue @ zone.js:582
Promise resolved (async)
scheduleMicroTask @ zone.js:557
ZoneDelegate.scheduleTask @ zone.js:403
onScheduleTask @ zone.js:290
ZoneDelegate.scheduleTask @ zone.js:394
Zone.scheduleTask @ zone.js:225
Zone.scheduleMicroTask @ zone.js:245
scheduleResolveOrReject @ zone.js:803
resolvePromise @ zone.js:752
(anonymous) @ zone.js:683
webpackJsonpCallback @ inline.bundle.js:22
(anonymous) @ app-list.module.chunk.js:1