topic Vue vs React (initial impressions) in Alfresco Archive

topic Vue vs React (initial impressions) in Alfresco Archive https://connect.hyland.com/t5/alfresco-archive/vue-vs-react-initial-impressions/m-p/160391#M114363 <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>At the end of <A _jive_internal="true" href="https://community.alfresco.com/people/ddraper/blog/2017/01/05/alfresco-auth-router-and-react" rel="nofollow noopener noreferrer">my last blog post</A> I'd failed to make use of my <A href="https://www.npmjs.com/package/alfresco-auth-router" rel="nofollow noopener noreferrer">alfresco-auth-router NPM package</A> with the React "<A href="https://github.com/facebookincubator/create-react-app" rel="nofollow noopener noreferrer">create-react-app</A>" CLI. Instead I'd configured an <A href="https://www.npmjs.com/package/http-proxy-middleware" rel="nofollow noopener noreferrer">http-middleware-proxy</A> to route API requests (including those required for authentication) via a local Alfresco Repository.The main difference was the approach to creating the application. I could just as easily as built my React project with a custom <A href="http://expressjs.com/" rel="nofollow noopener noreferrer">Express</A> server that made use of the alfresco-auth-router but I wanted to experiment with the app building tooling provided for each UI framework. You can find the state of the React project at the time of writing in <A href="https://github.com/draperd/React-Client-1" rel="nofollow noopener noreferrer">this GitHub repository</A> by checking out <A href="https://github.com/draperd/React-Client-1/releases/tag/Blog1" rel="nofollow noopener noreferrer">this tag</A>.The "create-react-app" CLI is very much geared up to building Single Page Applications (SPAs) to it was necessary to use <A href="https://github.com/reacttraining/react-router" rel="nofollow noopener noreferrer">react-router</A> to ensure that only authenticated users can access the Alfresco data. Again, this approach could have been implemented in Vue if necessary, in fact at some point I may go back and experiment with <A href="https://router.vuejs.org/en/" rel="nofollow noopener noreferrer">vue-router</A> to see how it compares.With authentication handled in both Vue and React applications it was now a case of building out my simple application for browsing "Company Home" in the Alfresco Repository. My intention was to implement the same component structure in both frameworks.... essentially a List component that contains Breadrcumb, Toolbar and View sub-components. As an aside I think that this is one of my main regrets about the way in which I implemented lists in <A href="https://github.com/Alfresco/Aikau" rel="nofollow noopener noreferrer">Aikau</A>. I had not foreseen the data down / events up model that is now becoming so popular and opted for a pub/sub model (although this does offer some advantages).A better model is that the list manages the state and all state changing components (including pagination and breadcrumbs) are included within the list such that events can bubble up out to the list. I think that this fits with the model described in <A href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.gxoox497u" rel="nofollow noopener noreferrer">this post</A>.Both Vue and React have issues in this area in that... whilst Vue offers the ability to <A href="https://vuejs.org/v2/api/#vm-emit" rel="nofollow noopener noreferrer">emit</A> custom events these only go from child to immediate parent (and do not bubble) whereas React doesn't offer custom events at all. Instead the pattern for React is to pass callbacks as properties to child components (as described <A href="http://stackoverflow.com/questions/21951734/react-js-custom-events-for-communicating-with-parent-nodes" rel="nofollow noopener noreferrer">here</A>). This presents an issue with deeper nesting of components - one suggested solution for React is described <A href="https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md" rel="nofollow noopener noreferrer">here</A> (although I think this creates stronger coupling which should be avoided).The other major difference is in how iteration is handled. Vue takes a very similar approach introduced in the original Angular library to provide an custom HTML attribute "<A href="https://vuejs.org/v2/guide/list.html" rel="nofollow noopener noreferrer">v-for</A>" to iterate over elements whereas React makes use of JSX to use a have a <A href="https://facebook.github.io/react/docs/lists-and-keys.html" rel="nofollow noopener noreferrer">JavaScript loop</A> to provide the iteration.Vue.js:<PRE class="line-numbers language-markup"><CODE><ul>    <li class="components-lists-ListView__item"        v-for="item in list.entries"        @click="navigate(item, $event)">{{item.entry.name}}</li> </ul>‍‍‍‍‍</CODE></PRE>React:<PRE class="language-javascript line-numbers"><CODE>render() {    return (<ul> {this.props.list.entries.map((entry) =>       <li onClick={() => this.props.navigationHandler(entry)} key={entry.entry.id}>{entry.entry.name}</li>    )}</ul>); }‍‍‍‍‍</CODE></PRE>I have to admit that I preferred the Vue.js approach for for this particular use-case, however I can see where the power of having full control over the JavaScript in a JSX implementation may be beneficial in other cases.Those code snippets also show the differences in event handling of clicking on an item in the list. Again, the Vue.js approach "feels" cleaner and is easier to read in my opinion. The other major problem with the React solution is the necessity to create a "this" binding to these callback functions in the constructor for the component, i.e:<PRE class="language-javascript line-numbers"><CODE>this.pageBack = this.pageBack.bind(this); this.pageForward = this.pageForward.bind(this); this.navigate = this.navigate.bind(this); this.setRelativePath = this.setRelativePath.bind(this);‍‍‍‍</CODE></PRE>Other than these differences the end implementations were incredibly similar, although perhaps that is to be expected for such a simple use case. One thing that did immediately jump out was the necessity to do some post processing of node data in order to construct the breadcrumb trail and I plan to elaborate on that in my next post.It might also be interesting to note that I created another <A href="https://www.npmjs.com/package/alfresco-js-utils" rel="nofollow noopener noreferrer">NPM package</A> to contain JavaScript code that can be shared between both implementations (and indeed implementations using other frameworks). I intend to keep adding to this as necessary with this research.</BODY></HTML> Tue, 10 Jan 2017 08:48:30 GMT ddraper 2017-01-10T08:48:30Z Vue vs React (initial impressions) https://connect.hyland.com/t5/alfresco-archive/vue-vs-react-initial-impressions/m-p/160391#M114363 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.At the end of my last blog post I'd failed to Tue, 10 Jan 2017 08:48:30 GMT https://connect.hyland.com/t5/alfresco-archive/vue-vs-react-initial-impressions/m-p/160391#M114363 ddraper 2017-01-10T08:48:30Z