Announcing Alfresco NG2 Components

cancel
Showing results for 
Search instead for 
Did you mean: 

Announcing Alfresco NG2 Components

ohej
Established Member II
11 11 10.5K

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!

11 Comments
blog_commenter
Active Member
Very exciting stuff — I'm super pleased to see the enhancements to the JS API such that more can be done on the REST interface and less is required from the Public Java API.



Is the 201606 Community Edition available on the Maven SDK or plan to be? I can download the zip file, but it feels _so_ 1990s and I'm learned lazy these days :-)
ohej
Established Member II
That is exactly the idea, we want to encourage more usage of the APIs and reduce the need for custom web scripts. However, to get there we need to expand the capabilities of the APIs and we're making good progress in this area! Smiley Happy



We are currently testing SDK 2.2 with 5.2.a-EA but I have not seen any concrete reports yet. I suspect it will work with the same caveats as we've seen with recent releases of 5.1. I hope we will have documentation updated early next week to reflect how to get 201606 Community Edition up and running with the SDK.
blog_commenter
Active Member
Been thinking and blogging about the Alfresco presentation tier last week. Had a quick glimpse at your NG2 offering. I am sure the dev experience is/will be awesome - way better than with Aikau. However, I fear now devs will be after that new awesomeness and we will all sacrifice mix and match plugin style composability goodness as we have it with Share, Surf and Aikau. Do you guys alfready consider something along those lines? An Angular 2 'base' application supporting extension modules?
blog_commenter
Active Member
Cheers Ohej, keep up the good work lads!
blog_commenter
Active Member
Can we please be more specific in naming of components / APIs? 'Alfresco JavaScript API' already confuses the heck out of people looking at Alfresco. Which product does it refer to, on what tier is it available etc.?

Instead of just calling it yet again 'Alfresco JavaScript API', why not:

- Alfresco Repository JavaScript API

- Alfresco Share JavaScript API

- Alfresco Node JavaScript API
ohej
Established Member II
Hi Andreas



No, we don't currently plan on having extensible apps via this framework. The components are meant for you to create your own app, and we're working hard to make that as easy as possible. Moving forward we will offer some apps based on these components that will be configurable, but if you want to extend them you grab the components and get cracking. We will cover this in tomorrows Tech Talk Live session.



We would love concrete feedback in terms of what kind of components, the style and 'configurability' of them as well. Really, any feedback will be highly appreciated. Again the goal is to deliver a great developer experience and we would do a poor job without gathering real world feedback.



As for Share, Aikau and YUI we fully recognise that things are not optimal, and we are actively working on a strategy for improving this.
ohej
Established Member II
Hi Axel



Thanks for the feedback! Smiley Happy



I agree that the naming is confusing, but I will say that the naming is not final just yet. This is still early days for the application development framework, and we have a proper process in place to figure out the naming.



As for the specifics here, we have been struggling to find the proper name for the Javascript API package. We considered naming it 'Alfresco Javascript SDK', but historically SDK in terms of Alfresco has included a lot of tooling so this might give some wrong impressions. The idea is to have a generic Javascript API package that covers both Repository and Activiti.



We are open to suggestions, and I agree that we need to go back and revisit our documentation and carefully consider the wording around our 'Javascript API''s.
blog_commenter
Active Member
I fully understand that the goal for NG2 Components is to deliver a great dev experience.



However,  make sure not to not forget about Ops and Users. Smiley Wink



As for Share, I am very curious what you guys will be coming up with and when. Honestly: Share needs love - quickly.
ymuwakki
Partner

Hi Ole,

I cannot get CORS to work for ADF to access Activiti in a Windows environment.  I tried everything.  So Alfresco 5.2 EA is running on port 8080 and Activiti 1.5.2 is running on port 8090 all on my windows 10 pro laptop.    I even installed nginx-1.11.8 for windows with the correct nginx.conf but still does not work.  And I even updated activiti's web.xml to add the CORS filter but that also did not work.  I am getting the following error from the ADF app in Chrome browser:  

XMLHttpRequest cannot load http://localhost:8888/activiti//activiti-app/app/authentication. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

ohej
Established Member II

Hi Yasser

It sounds like something is wrong in the nginx configuration, but I would suggest you grab 1.5.3 or 1.5.2.1 from the support portal. Once you have it installed you find tomcat\lib\activiti-app.properties and add the following:

cors.enabled=true
cors.allowed.origins=*
cors.allowed.methods=GET,POST,HEAD,OPTIONS,PUT,DELETE
cors.allowed.headers=Authorization,Content-Type,Cache-Control,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,X-CSRF-Token
cors.exposed.headers=Access-Control-Allow-Origin,Access-Control-Allow-Credentials
cors.support.credentials=true
cors.preflight.maxage=10
security.csrf.disabled=true

After that you should be able to point ADF directly towards the Activiti instance without the need for the nginx proxy.

Let me know how it works out.

ymuwakki
Partner

Hi Ole,

Thank you very much, your suggestion worked on Activiti 1.5.3.

I do have Activiti 1.5.3 installed but there was no documentation whatsoever that I found related to those CORS properties that can be set in the tomcat\lib\activiti-app.properties

 

Should I log a documentation bug to alfresco support to add the CORS properties in the Admin manual of Activiti?