Announcing Alfresco NG2 Components

[ohej]

By bringing together content & process, Alfresco is a unique platform for building solutions and business applications.

As a platform company, it is critical for us to ensure that our developer ecosystem is successful and our community, customers, and partners can deliver applications on top of Alfresco as quickly as possible.

Earlier this year, we embarked on a customer, partner, and community consultation exercise and analysing market data and industry trends. We got a lot of feedback from customers, partners and community that they are focusing more and more on Angular. John Newton wrote a nice blog post in May about our direction to move towards Angular and focus on Experience Design.

To support our strategy Alfresco invested in a new development organisation dedicated to frameworks, tools, and APIs to help reduce the time to develop and deliver applications across both ECM (Alfresco One) and BPM (Activiti). The organisation is headed by John Sotiropoulos our VP of Developer Products who works closely with me to deliver our strategy .

Our Application Development Framework is our overall offering that helps our developer ecosystem build applications on top of Alfresco and Activiti and provide a rapid, consistent, and unified developer experience. We have articulated our strategy in a set of slides, but like any vision it will evolve.

We also want to break the habit of doing development “in the dark” and be open and transparent about the process, revitalising our community. This is why we’re making the source of our work so far available - and we want your feedback!

Today we are announcing a brand new Javascript API, a set of NG2 components and a couple of Yeoman generators to help bootstrap your Angular2 project and components.

Alfresco Javascript API

One thing we keep hearing over and over again is that developers spend a significant portion of time doing boilerplate code. Bootstrapping a project from scratch takes time. Dealing with APIs, authentication and the lower levels are key. To help ease all of this we’ve developed a new API that wraps around our new v1 REST APIs.

The Javascript API is not tied into any specific framework. This means you can use this in all javascript based applications, whether it is a node.js backend application or a plain vanilla javascript page.

The goal with the Alfresco Javascript API is simple - we want to provide a great developer experience for developers consuming our APIs.

Be sure to check it out - https://github.com/Alfresco/alfresco-js-api

Alfresco NG2 Components

Building on top of the Alfresco Javascript API we have built a core set of components that are easy to use, configure and extend to fit your needs.

Initially we have focused on a set of high level components:

• ng2-alfresco-core - Core services and utilities to help power components

 
• ng2-alfresco-datatable - A simple file list

• ng2-alfresco-documentlist - An advanced list of documents

 
• ng2-alfresco-login - A login component

 
• ng2-alfresco-search - A basic search component

 
• ng2-alfresco-upload - Advanced upload capabilities that integrates with lists

 
• ng2-alfresco-viewer - A PDF.js based viewer to preview content

Once you start using these components you will notice that they are all styled with our new design guidelines based on Google Material Design.

Be sure to check it out - https://github.com/Alfresco/alfresco-ng2-components

Alfresco NG2 App Generator

To help you get started as quickly as possible we have created a Yeoman generator to scaffold and generate your project. The generator will ask you a set of questions, but also offer to include and wire in the components listed above.

Be sure to check it out - https://github.com/Alfresco/generator-ng2-alfresco-app

Get started today!

We have a bunch of good material to help you get up and running. This page gives you a brief dive on how the components and the javascript api ties together.

The biggest requirement to get up and running is the 201606 Community Edition since we rely exclusively on the new v1 REST APIs. On top of this you need to have CORS enabled.

Since the NG2 components are purely client side components you need to have the Alfresco Platform allow requests from other domains, otherwise your browser will not allow the javascript api to make XHR requests.

First you need to download 201606 Community Edition, then download the “enablecors” module here. Put the JAR file in $ALF_HOME/modules/platform. The module contains a web fragment that configures CORS for the repository. You can find more detailed information here.

While you’re at it, why not include the REST API Explorer? Grab the war file here and put it in $ALF_HOME/tomcat/webapps.

Start up Alfresco and leave it running.

Next up is making sure you have Node.js installed. You will need to have a minimum version of 5 - we recommend you use the latest.

Once Node.js is installed you need to install the Yeoman generator:

npm install -g yo

npm install -g generator-ng2-alfresco-app

Run the generator, followed by “npm start” and you’re good to go!

Components documentation

Now that you have everything up and running, it’s time to have a look the component catalog and figure out how to configure and extend the components. Go to http://devproducts.alfresco.com to browse the components and view the documentation. We make a point of having both sample code and documentation as part of the definition of done. This way we ensure we have up to date documentation for our developers from day one.

We want your feedback

We recognise this is early days for our new “Application Development Framework”, but we want to have an open and transparent development process. We are continuing to develop more components and improve on the existing ones, but we would love to hear your thoughts and ideas. We will also welcome any pull requests with new features, bug fixes, enhancements to documentation, samples or anything else you would like to contribute.

If you want to contribute we are all set up on Github, please make sure to read the code contribution acceptance criteria, our Code Style, Commit format and Definition of Done.

Next steps

We are planning a Tech Talk Live next week, Wednesday 6th of July where we will present and demo what we have and we have a series of blog posts planned on how to use the individual components. Stay tuned!