topic First Steps with Aurelia in Alfresco Archive

topic First Steps with Aurelia in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/first-steps-with-aurelia/m-p/160465#M114433 <HTML><HEAD></HEAD><BODY><PRE __default_attr="info" __jive_macro_name="alert" alert="info" class="jive_text_macro jive_macro_alert">This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.</PRE>I've <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2017/01/10/vue-vs-react-initial-impressions" rel="nofollow noopener noreferrer">previously</A> created a simple Alfresco Repository browser using both <A href="https://vuejs.org/" rel="nofollow noopener noreferrer">Vue.js</A> and <A href="https://facebook.github.io/react/" rel="nofollow noopener noreferrer">React</A> and now wanted to explore using Aurelia. Again a <A href="https://github.com/aurelia/cli" rel="nofollow noopener noreferrer">CLI</A> is provided and the <A href="http://aurelia.io/hub.html#/doc/persona/developer" rel="nofollow noopener noreferrer">documentation</A> initially seems to be very good.I wanted to follow the same implementation of components as before but the first hurdle was to configure authentication in order to be able to access the <A _jive_internal="true" href="https://community.alfresco.com/community/ecm/blog/2016/10/11/v1-rest-api-part-1-introduction" rel="nofollow noopener noreferrer">V1 REST APIs</A> provided by the Alfresco Repository.My first problem was accessing the additional modules that I had installed - namely "<A href="https://github.com/mzabriskie/axios" rel="nofollow noopener noreferrer">axios</A>" (for XHR requests) and my "<A href="https://www.npmjs.com/package/alfresco-js-utils" rel="nofollow noopener noreferrer">alfresco-js-utils</A>" module. The issue was that my standard ES6 import was not working... I was getting errors with the following import code:<PRE class="language-javascript line-numbers"><CODE>import auth from "alfresco-js-utils/lib/Authentication";‍‍‍‍‍‍‍‍‍‍</CODE></PRE>It turns out that the issue is that it is necessary <A href="http://stackoverflow.com/questions/38852369/how-to-import-packages-within-my-aurelia-application" rel="nofollow noopener noreferrer">to configure the aurelia.json file</A> to manage the dependencies.  Once I'd added the following:<PRE class="language-javascript line-numbers"><CODE>{    "name": "alfresco-js-utils",    "path": "../node_modules/alfresco-js-utils",    "main": "index" }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>...then the import statement worked correctly. I'm sure there is a good reason for this, but I don't fully understand it yet. The next setup was to configure the proxy for handling REST API calls. This was done (following <A href="https://github.com/aurelia/cli/issues/256" rel="nofollow noopener noreferrer">these instructions</A>) by inserting the following code into the run.js file:<PRE class="language-javascript line-numbers"><CODE>var proxyMiddleware = require("http-proxy-middleware"); var proxy = proxyMiddleware("/service", {     target: "<A class="jive-link-external-small" href="http://localhost:8080/alfresco" rel="nofollow noopener noreferrer" target="_blank">http://localhost:8080/alfresco</A>",     changeOrigin: true // for vhosted sites, changes host header to match to target's host });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>The next stage was to setup an router to ensure that users were logged in before they could access the Alfresco Repository data.It was simple enough to setup routing in the main app.js component:<PRE class="language-javascript line-numbers"><CODE>import {Redirect} from "aurelia-router"; class AuthorizeStep {    run(navigationInstruction, next) {       if (navigationInstruction.getAllInstructions().some(i => i.config.settings.roles.indexOf("authenticated") !== -1)) {          var isLoggedIn = !!localStorage.ticket;          if (!isLoggedIn) {            return next.cancel(new Redirect("login"));          }       }       return next();    } } export class App {    configureRouter(config, router) {       config.title = "Aurelia Test";       config.addPipelineStep("authorize", AuthorizeStep);       config.map([          { route: ["login"], moduleId: "components/login", title: "Login", settings: { roles: [] } },          { route: ["", "home"], moduleId: "components/home", title: "Home", settings: { roles: ["authenticated"] } }       ]);    } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>...however I did struggle in how to handle the login operation. The login component used the Authentication export from alfresco-js-utils. The solution was to ensure that the router was injected and that I used "navigate" rather than "navigateToRoute" (as described <A href="http://stackoverflow.com/questions/35246901/aurelia-how-navigate-between-child-routes" rel="nofollow noopener noreferrer">here</A>).<PRE class="language-javascript line-numbers"><CODE>import { inject } from "aurelia-framework"; import { Router } from "aurelia-router"; import auth from "alfresco-js-utils/lib/Authentication"; @inject(Router) export class Login {    constructor(router) {       this.router = router;    }    handleSubmit() {       const username = this.username.value;       const pass = this.pass.value;       auth.login(username, pass).then((loggedIn) => {          if (!loggedIn)          {                      }          else          {             this.router.navigate("home");          }       });    } }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>Having handled authentication it was just a case of building out the components as before and at this stage I have to admit that I found Aurelia less intuitive than both Vue.js and React. Some aspects are component development are very good like the simple association between similarly named JavaScript and HTML files (so List.js and List.html are implicitly part of the same component) which means that no additional syntax handling is required.The templates in the HTML files are relatively straight-forward (but perhaps not quite so much as in Vue.js)... an example of the ListView component template looking like this:<PRE class="line-numbers language-markup"><CODE><template bindable="list">    <ul>       <li repeat.for="item of list.entries" click.delegate="navigate(item)">${item.entry.name}</li>    </ul> </template>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>The part that caused confusion was in nesting components and passing data between them. This required a lot of additional annotations that I found weren't so well documented.  The associated ListView.js file looking like this:<PRE class="language-javascript line-numbers"><CODE>import {bindable, customElement, inject} from "aurelia-framework"; @customElement("listview") @inject(Element) export class ListView {       constructor(element) {       this.element = element;    }    navigate(item) {       if (item.entry.isFolder)       {          let changeEvent = new CustomEvent("navigate", {             detail: item,             bubbles: true          });          this.element.dispatchEvent(changeEvent);       }    }    @bindable list; }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍</CODE></PRE>Although Aurelia recommends the use of a publication/subscription model via the the <A href="http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/10" rel="nofollow noopener noreferrer">Event Aggregator</A> (as described late on in <A href="https://sean-hunter.io/2016/10/23/inter-component-communication-with-aurelia/" rel="nofollow noopener noreferrer">this blog post</A>) I actually opted for a custom event solution (as described in <A href="https://ilikekillnerds.com/2015/08/aurelia-custom-elements-custom-callback-events-tutorial/" rel="nofollow noopener noreferrer">this blog post</A>) as I think this is a better model - and because this was just using <A href="https://developer.mozilla.org/en/docs/Web/API/CustomEvent" rel="nofollow noopener noreferrer">native custom events</A> the solution would be able to bubble through multiple components. An alternative option would have been to use the 2-way binding features provided but I don't thing that this is such a good model so have avoided it for the time being.By the time I'd successfully implemented the ListView and Breadcrumb components I found implementing the Toolbar very straightforward. I think that once you get a feel for how to build components Aurelia becomes more straightforward but there is definitely something of a learning curve and although there is a lot of documentation it is not necessarily easy to find exactly what you need.Once again the actual structure of the components was almost identical to the implementation in both Vue.js and React. The main difference being the names of the life-cycle functions, the templating syntax and data binding. The fact that the Aurelia components are just plain ES6 classes is nice (and you have the option to work in <A href="https://www.typescriptlang.org/" rel="nofollow noopener noreferrer">TypeScript</A> if you prefer) and the templating syntax is very readable and easy to understand.You can review the state of the client at the time of writing by checking out <A href="https://github.com/draperd/Aurelia-Client-1/releases/tag/Blog1" rel="nofollow noopener noreferrer">this tag</A> from t<A href="https://github.com/draperd/Aurelia-Client-1" rel="nofollow noopener noreferrer">his GitHub repository</A>.</BODY></HTML> Wed, 11 Jan 2017 09:13:50 GMT ddraper 2017-01-11T09:13:50Z First Steps with Aurelia https://connect.hyland.com/t5/alfresco-archive/first-steps-with-aurelia/m-p/160465#M114433 This is a personal blog post that is primarily intended for tracking my own learning rather than provided to the Alfresco Community for educational purposes. However if you find it useful, informative or have any comments on it then please comment below.I've previously created a simple Alfresco Repo Wed, 11 Jan 2017 09:13:50 GMT https://connect.hyland.com/t5/alfresco-archive/first-steps-with-aurelia/m-p/160465#M114433 ddraper 2017-01-11T09:13:50Z