How to draw a white page

How I integrated Nuxeo Web Components into Angular, React and Vue.js

I like Angular Framework and happy to discover Web components as a great way to include features in it.

The idea here is to include these Nuxeo elements (polymer web components) in a basic Angular app offering search capabilities in a Nuxeo platform.

Other integrations have been successfully completed for React and Vue. Those one were quite easy and "natural" to do; see in React and Vue.js tutorials. So i'm curious to implement topics found in the web to enable js web components.

I finally did following these 7 steps :

1) using the Angular CLI to generate a new project.

$ ng new my-nuxeo-angular-app$ cd my-nuxeo-angular-app

2) Install components

$ npm install @nuxeo/nuxeo-elements @nuxeo/nuxeo-ui-elements

3) Because as many of web components are JS only, add JavaScript support to your app

tsconfig.json{  compilerOptions: {    "allowJs": true  }}

4) Enable custom elements schema

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';...@NgModule({   …   schemas: [CUSTOM_ELEMENTS_SCHEMA],   …})

5) Verify that you can run the application

$ ng serve

Cool...

6) Then customize your app

Here the idea - as React and Vue integrations done - is to set a selection into a Nuxeo instance running on 8080 port.

And it works ! :)

and with some document list:

To give you feedback about major problems solved.

> A nuxeo-connection element needs to be out from any angular digest, so include it in you index.html is a way to connect to your Nuxeo instance.

> You would need to listen on some element events due to an common observer pattern. In this case, an angular child view can be useful:

page.html

<you-observed-component #observed />

component.ts

Class youObserverComponent {

  ...

 @ViewChild(observed) observed: ElementRef;

  // observed.addEventListner(‘your-event’,(e) => { …});

7) About API proxy or manage CORS

Angular gives you the opportunity to test in dev mode your local api through a local proxy; then Nuxeo:8080 could be mapped via

angular.json

"proxyConfig": "proxy.conf.json",

proxy.conf.json

{

 "/nuxeo": {

   "target": "http://localhost:8080/"

 }

}

The other way is to allow CORS in your API server, like described here https://doc.nuxeo.com/nxdoc/cross-origin-resource-sharing-cors/

Final conclusion and resources

Like explained at the begining, it was less natural to include web elements in angular than vue or react. The main reason is that angular is managing DOM in a more strict way and probably less open than other frameworks.

But again, after some optimization, the app looks cool and efficient ?!

Final Angular Github Project

Final React Github Project

Final Vue.js Github Project

Stackoverflow question on subject

Another Angular Polymer integration done

Enjoy!

@mat

How i discovered some bad things

How i discovered that :

- sugar is a bad thing

- dopamine is a bad thing

- humanity is a bad thing

How i learn again from DevoxxUK

Thanks to #DevoxxUK, I've learned again (#humour #skaffold #jib #distroless #infinispan #fidj #12factors #minikube and more!), my sketchnotes :

How javascript prefers a "while loop" to a beautiful recursive algorithm

As it's explained here, most browsers will barf on "too much recursion". Here's an entry in the V8 bug tracker that is interesting reading.

If it's simple self-recursion, it's probably better to use explicit iteration rather than hoping for tail-call elimination.

Even if i prefer definitely the beauty of recursion :)

How I draw during travels

How i feed content plateform with lotttts of documents

I‘ve worked with the Nuxeo content service platform for a few months and i need now to populate this platform within XX Million assets.

All systems i already work with handle this “problem” with a solution like ETL or Big Batch to use a mechanism like :

1. Prepare all your data
2. Unplug all your system engines (index, automation etc…)
3. Inject your data (but be careful with all linked or nested data)
4. Restart system and monitor e ach service as it starts (service after service)
5. And then validate all the content here

I like the idea with Nuxeo that i could test another approach; because

• I need to see and verify quickly
• I need to define the approach wit a repeatable configuration - i can also easily share with team
• I want to test my docker or whatever environment before production

Approach was to use Nuxeo SDK and indeed REST API, and finally using a realistic method that mirrors real life usage (even in a compressed time).

The challenge with this approach is that Nuxeo should ingest all those 60 Millions assets. I trust the Nuxeo Benchmarks with numbers like +-1000 docs / sec that means 60M/1000sec -> 24h, less than a week end ? … looks good to me, so let’s go!

First, Environments

A real Nuxeo environment is complex - for a good reason : performance !

But the idea is for my test to use the really easy to use “out of the box” nuxeo docker container.

 VS

Second, Ingest client

Two client utilities could do the job, using respectively nuxeo java and nuxeo js client (and behind nuxeo rest api):

1. Nuxeo JHype, a spring / angularjs app that launch your scenario
2. Nuxeo Tasks , a useful task launcher using gulp

I finally use the Nuxeo Tasks :

But at the end, job done (> 660 docs / sec). Cool !

Context	REST Api	Parallel REST Api (spring batch, or node)
A) Simple Nuxeo Docker.	4 docs/sec	-
B) Nuxeo Docker with nuxeo-data:cached.	8 docs/sec	-
C) Full Nuxeo Docker Cluster.	16 docs/sec	33 docs/sec
D) Real AWS Nuxeo Cluster - after problems solving.	330 docs/sec	660 docs/sec 😄

Third, Problems

The real problems came in the real environments.

One problem you should take care is making sure that your client is well sized regarding your server. It means that you should scale the number of parallel HTTP connections regarding Nuxeo Connection Pool. Very simple to see and manage : look at the Nuxeo CPU. Nuxeo is under 70% for me with a client like 5 parallel ingestion tasks.

With that you can multiply by 2 your ingest capacity. Why not 5 ? Because we’ve got another bottleneck like database, and Nuxeo start using asynchronous treatments in Kafka. I want to finish the client job first, so that’s ok for me; Nuxeo will work for me during the night.

One other problem, is that feeding lots of data means some admin async process could struggle. It was the case for me on Nuxeo Orphan cleanup. Resolved by config (setting disabled like explained here).

The last one was linked to my Postgres DB and its config in Nuxeo - i know that something like MongoDB would be a better choice, but i need Postgres here -. Nuxeo Audit default config for Postgres is to be in database … and Nuxeo is auditing lots of things ! To resolve this problem you need to set Elasticsearch as audit repository.

See grafana's : 3 ingest waves linked to these 3 problems - but done.

Conclusion

In conclusion, i have been happy to see and test the awesome Nuxeo Platform.
I finally succeed with my goal and learn with those tests, and I know now that:

• I can be confident on Nuxeo core (all my test leave the JVM without any fullgc)
• I set here a small AWS EC2 set, but you can scale up in lots of different ways
• You can go further but you need then to design all nodes beside (elasticsearch, database)... Nuxeo did a benchmark with Billions of assets ?! Or TeraOctet assets ?! Awesome, i have to say that to my wife :)

How i learn a lot in Devoxx - Architect

Thanks to #DevoxxFR, I've (re)learned a lot.

With Devoxx2019 coming up, it might be helpful to keep in mind my 2018 sketchnotes.

First set, Architect :

Interesting subjects seen : 
#Nuxeo #microservice #boundedcontext #domaindrivendesign #hexagonalpattern #eventdrivenarchitecture #12factors

2019 !