Waitara – a MEAN-stack kanban-board prototype

Too long to read?

Sorry, but I can’t tell the story in 3min…maybe in 140 chars…

Take a look at these screencast first, grab a coffee & get a grip on yourself!

Screencast I & Screencast II

Why? What?

A few months ago, I decided to work only 3 days a week in my daily job at fme as projects in the ECM world can get boring … I wanted to learn something new, I wanted to be creative & I wanted to do it the way I like. While traveling around in New Zealand at end of last year I’ve decided to implement sth. with AngularJS (as developing the fme file Exchange platform with Angular was one of the most enjoyable projects last year). And as fan of kanban-boards I decided that developing such a board would be a nice project.

Constraints ;-)

  • no endless server restarts
  • no IE <10 support
  • no business case

Having Fun while coding

Earlier this year, I started to built & choose my environment, tools etc. I ended up with the following ones:

  • git & bitbucket:
    • git – well, why not?
    • bitbucket – I wanted to keep the code in a private repo (in the first instance), it’s free there
  • brackets: To try something different … I liked it, but IntelliJ Angular support is *interesting*, someone like to sponsor a WebStorm license ;-)?
  • ngTailor - I’ve tried yeoman before & especially otb support for browser-sync & Sass is nice. You may argue that gulp is better than grunt and that bower can drive you crazy, but I like them.
  • Sass - I wanted to learn it and I can definitely say that I should have used it before!
  • Twitter Bootstrap: I’m not one these CSS-star-hackers – so I’m very happy with bootstrap. It saves time & is clean, modern and plays nice with angular & angular-ui. Easily customizable via less or sass – I’ve used the free Bootswatch Yeti theme

I’ve extensively used existing Angular Modules, e.g.:

  • angular-translate:THE i18n & l10n module for your Angular app – a must have
  • ui-bootstrap: native AngularJS directives based on Bootstrap’s markup and CSS – a must have if you use Bootstrap in an Angular app.
  • angular-growl: growl like notifications for angularJS projects, using bootstrap alert classes. Simple & useful.
  • Angular-xeditable: edit-in-place elements for Angular. Simply awesome!
  • textAngular: A Lightweight, Two-Way-Bound  Angular.js HTML-Editor. Sweet!

OK, that’s the frontend part, but what about the backend? Well, I considered to use Alfresco & Alfresco WebScripts, but wait …. that’s my daily job! After a few hours on google some blogs & slide decks I came across deployd. Deployd is based on NodeJS & MongoDB. It’s a rapid API development framework  and offers an easy & very quick approach to define an API for *resources*. It’s now an integral part of my tool box for rapid prototyping. I don’t think it should be use in production. Sadly, it is no more in active development, It’s like a Grizzly bear, hibernating, dreaming about the spring

media-api.com - Upload, convert, store and embed documents, images, audio and video files with ease

I’ve started with an S3 file store first, but then my good fellows in hanover launched media-api.com & as I wanted to be able to upload, embed & preview documents -> bull’s eye. 2 hours later my app had an online preview for office documents, images, videos etc.

Ok ok…after 2 hours it was working but I was calculating my SHA1 keys via CryptoJS in the browser. Thus , I started to develop my own deployd-module for all these signature tasks to keep my Application Secret on the server side – quite a bumpy road but I finally made it & learned some new NodeJS internals.

Let’s ship

Ok, it’s running locally. Nice … let’s ship the prototype. NodeJS + MongoDB – well there are plenty of possibilities. I choosed heroku.

Here it is (demo credentials jan:jan): http://waitara.herokuapp.com/

Disclaimer: all your data will be *public* incl. your documents. My heroku plan is limited as well as my media-api.com space (5GB). The app may will crash when to many people are trying to modify the same data. Delete buttons aren’t implemented yet. It is really just a prototype!

What next?

I don’t know…I’m thinking of using this prototype & go some steps further:

  • improve the kanban-board stuff
  • leverage websockets
  • add a real activity stream
  • use another backend (e.g. Alfresco) & add more capabilities to built a full feature team collaboration solution

W00t! You’ve an idea – it’s time to ping me on twitter … I’m listening ;-)

AngularJS + CMIS 1.1 – a simple CMIS Repo browser

I was invited to do a talk at Alfresco’s Meet the Experts in Hamburg a weeks ago. As I had done a few things with AngularJS ago (e.g. the fme File Exchange Platform) I had decided to give a talk about building SPAs for Alfresco with AngularJS.

The slides of my talk are available here (sorry in german only).

I decided to implement a little app the day before the meetup to have a simple in-place to explain some of Angular’s features like routing, directives & also to show the strength of modern web developer tools like yeoman. As the app should be simple but also using an Alfresco repository as backend I decided to implement a simple Repository browser leveraging the CMIS 1.1 browser binding & Alfresco’s Demo Repo (cmis.alfresco.com)

ng-cmis-browser

As mentioned above the demo app uses the the following libs/tools:

You can try the app here: http://blog.alfrescian.com/ng-cmis-browser (login is admin/admin as cmis.alfresco.com is used as repo).

The Code is available on github: https://github.com/alfrescian/ng-cmis-browser

Implementing a file exchange platform with Alfresco & angularJS

Exchanging your files with external users like partners, agencies etc. is still a challenge for enterprise IT departments. Employees will use emails or cloud-based file sharing services like dropbox & Co if the external user has no access to the internal  IT systems.

Sharing files & collaborating via emails leads to a bunch of problems and inefficient processes that have been already discussed a thousand times.

The usage of cloud-based file sharing services will put your CIO in panic – at least if we’re talking about germany & europe & sensitive information like product drawings, price-lists or your latest R&D project data.

One way out is to run an Alfresco Share instance in the DMZ … but – at least from my point of view – Alfresco Share is too complex for such a use case. Yes, you can use it and strip it down, but I wanted to get a much more simple UI … and I’ve to admit that I wanted to promote the single page webapp paradigm ;-)

Inspired by Laurens Alfresco Vault approach (https://github.com/lfridael/vault) and my experiences with bootstrap and jQuery my choice had been made: Usage of a MVC/MVM framework is a MUST. Thus, I did some research & some basis prototyping and decided to implement the app using AngularJS, Bootstrap, AngularUI-Bootstrap & jQuery (file upload) plus some nice things like font-awesome, modernizr & momentJS.

I don’t have mentioned that the decision regarding the backend was set in stone: Alfresco – big surprise, he ;-)
ASCII architecture diagramm:

Solution – End-user perspective

Disclaimer: The project itself is not available under a Open Source License – it’s a commercial solution offering by my current employer (fme).

From a end-user perspective the app contains of thre main components: Registration, New File Collection & My File Collections.

Registration:

  1. Provide account information incl. contact person ( employee who has to approve the registration)
  2. e-mail based account verification
  3. e-mail based registration approval for the contact person

New File Collection - upload & share a collection of files (can be restricted to a group of users):

  • Name of the File Collection
  • Users to share with (of course with typeahead)
  • Files to Share (multi files & drag&drop)

My File Collection:

  • browse your file collections & navigate into a file collection
  • Actions like update existing files & upload new files, delete & download
  • manage (Sub-)folders
  • manage file collection expiration

Solution – developer perspective

Developing the solution with my colleagues was fun. Why? because we were able to boost our developing velocity to the next level – I’ll give a quick example: a typeahead-control to add users to a file collection :

Repo: We just use Alfresco’s api/people?filter= WebScript

JS:

  1. add a new Angular Service to be injected in our Controller:
  2.  controller:
  3.  template:

Some other quick examples:

Our FileCollectionService based on ng-resource & a custom REST-API (WebScripts):

A custom directive to render the list of items in a file collection based on their content type (the templates themselves just contain a bit html markup & expressions like {{item.name}} to show the name of the document or folder):

You’d like to filter & sort your item list? Just add a few $filters:

Long story short

Alfresco’s WebScript API is a fantastic single page webapp enabler – You can easily leverage the existing API or add your own specific API. These WebScripts play nicely with Angular’s $resource-service.

If you’re fan of testable code, dependency injection, data binding & much more then take a look at angularJS – more than ever if you’re interested in reusable UI components (aka directives)!

Setting user preferences via JavaScript Console

While upgrading a huge Alfresco system from 3.4 to 4.0 I was asked if it is possible to collapse all sections (excepting the actions) on the document-details page.

The state of these twisters is saved for each user in his preferences (preference: org.alfresco.share.twisters.collapsed), so I wrote a little script using the JavaScript Console:

Getting Alfresco Content Types via JavaScript

I was asked if it is possible to access Alfresco’s DictionaryService via JavaScript…Well, not directly using an offical Alfresco JS Root-Object, but it isn’t a big task if you use some functions of the embedded Rhine engine (& of course Florian’s famous Alfresco JavaScript Console http://alfresco.fme.de/JavaScript-Console.923.0.html):

Monitoring Alfresco with New Relic

I came across New Relic a few days ago & decided after a few minutes that I HAVE to try out that cool.

1. Step – the Basics

My first step, adding a New relic agent to a tomcat server that runs Alfresco was pretty easy:

  1. SignUp to New Relic
  2. Download New Relics jar-Files
  3. Deploy them as described here: http://newrelic.com/docs/java/new-relic-for-java

After some minutes I was able to use the New Relic WebClient & try out some basic application monitoring features like:

  • HTTP Response Times
  • SQL Response Times
  • JVM Monitoring (CPU, Heap, GC etc.)
  • Transaction Traces etc

2. Step – Real User Monitoring

But the most impressive feature is their “real user monitoring” – They monitor the end user browser performance by automatically adding a small JS snippet to each HTML page. If you’ve JSPs that may be done automatically, but iId like to monitor an Alfresco Share application.

Hands-on:

1st: A custom Freemarker TemplateMethod to be used within Share (or any other SURF webapp):

2nd: Spring Bean definition web-extension/custom-newrelic-context.xml:

3rd: Add ${newrelic.browserTimingHeader} & ${newrelic.browserTimingFooter} alfresco/templates/org/alfresco/include/alfresco-template.ftl

–> You’ll get some nice charts like these:

Alfresco Share datalist extensions – now Open Source!

I’ve developed some extensions to the default Alfresco Share datalists some months ago. My former blog post (http://blog.alfrescian.com/?p=95) gained a lot of interests at Alfresco & also in the Alfresco Community.

As part of my discussions with fme’s customer and Alfresco regarding a contribution of this extensions one of Alfresco’s Solution Engineers did a code review and was very satisfied with it: https://twitter.com/#!/rjmfernandes/status/136437605981097985

Finally fme’s customer agreed to make this extensions available under Open Source (Apache License) here: http://code.google.com/p/fme-alfresco-extensions/wiki/DatalistExtension

This gives the whole Alfresco community the opportunity to use & improve the extensions we made. So, please feel free to contact me if you like to contribute back some additional features or if you like to sponsor the further development (e.g. an upgrade to 4.0).

Alfresco Share Cluster – tweaks

I recently faced an upgrade from a single node Alfresco into a high available (HA) configuration (1 Load-Balancer, 2 Alfresco Nodes, 2 Share Nodes) using Alfresco Enterprise 3.4.2 (including kerberos SSO etc.).

The Basic steps (@see Kevs blog post http://blogs.alfresco.com/wp/kevinr/2011/07/28/using-apache-to-load-balance-alfresco-share-with-an-alfresco-repository-cluster-and-clustering-alfresco-share/) went well & my new system performed well. But then I realized that changes to a Share dashboard weren’t visible on the other Share instance. I forget to add the following configuration (“custom-slingshot-application-context.xml”):

But now my Share instances were very slow (dashboard layout changes weren’t visible on the other Share instance either). Loading a dashboard in the browser took up to 8s – without that cache disabling ~2s. Thus I made some tests with a vanilla 3.4.2 & 3.4.6 system and observed the same behavior (not as slow because I didn’t created a few hundred sites & >2000 users in my local system).

First of all I backported the 4.0.c org.springframework.extensions.webscripts.RequestCachingConnector that improved the whole Share performance a little bit. Afterwards I thought about the situations when a cached SURF object must be invalidated and reloaded via its remote store. AFAIK the only moment is when a dashboard configuration is changed on another Share instance. As my configuration only incorporates 2 Share instances I developed the follwing simple tweak to notify the other Share instance if a dashboard config is changed & the Surf object cache should be invalidated:

    re-enable caching for component & pages

  1. add a new HTTP endpoint (used to notify the other Share instance via HTTP if the SURF caches should be invalidated):

  2. append the following lines to site-webscripts\org\alfresco\components\dashboard\customise-dashboard.post.json.js:

  3. added a new Java-backed webscript (Share) mapped to URI api/fme/cache with following executeImpl():

The following things should be kept in mind:

  • this scenario only works with 2 Share instances & has to be enhanced if you’ve more than 2 nodes
  • api/fme/cache is not secured via an authenticator …

I’ll fill (& link) a detailed jira issue shortly.

Alfresco Share 4.x feature wishlist

Linton Baddeley (UX Designer at Alfresco) asked (tweet)

What features would you like to see in the next version of #Alfresco Share

here is my wishlist:

  • Enhanced Wiki component: TOC generation, embed document previews, add documents as attachment
  • Enhanced datalist component (http://blog.alfrescian.com/?p=95): versioning, comments as thread, upload&attach, XLS/PDF-Export/Import
  • datalist items assigned to a user or group should be shown in my task
  • Doclib: Link to Action, Export folder as zip, export selected documents as zip
  • doclib: optional grid view (configurable per site if standard or gridview should be used in doclib)
  • bidirectional Share calendar & MS Exchange integration ;-)
  • also copy & link as drag&drop operations
  • Yammer integration: publish document to yammer (link/attachment)
  • configurable documentlist dashlet: documents per tag, category, +Aspect, +Type…or simply a cmis/fts query
  • search: support solr highlighting, synonyms & facets OTB (configurable via *config.xml)