Re: Reactjs for Plone UI Toolbar
Timo Stollenwerk <tisto-z4DKO/[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.devel |
|---|---|
| Message-ID | <[email protected]> |
Am 29.05.2014 21:12, schrieb Laurence Rowe: > On 29 May 2014 10:19, Timo Stollenwerk <tisto-z4DKO/[email protected] > <mailto:tisto-z4DKO/[email protected]>> wrote: > > Am 29.05.2014 12:06, schrieb Asko Soukka: > > Nathan Van Gheem wrote: > >> We're using React for docs in them mockup project and underscore > >> templates(with jquery $('<html>') magic) basically everywhere > else. We > >> want to eventually move to using React. This has been in discussion. > > > > Have you discussed / tried (pre)compiling React DOMs from HTML via JSX > > transform, or are HTML templates simply anti-pattern with React? > > It seems HTML templates are considered indeed an anti-pattern in React: > > http://www.infoq.com/news/2013/06/facebook-react > > > I'm not yet familiar with React, but the existing code in mockup-core > > looks scary (at least with TAL+METAL+XHTML background): > > > > e.g. https://github.com/plone/mockup-core/blob/master/js/docs/page.js > > Compare that code (generating a list for instance) with how you would > write a template to iterate over a list in Angular: > > <ul> > <li ng-repeat="item in items"> > {{item.title}} > </li> > </ul> > > This looks and feels (at least to me) like TAL. It is really dead simple > for a Plone developer to learn Angular (at least the template part). You > just write that code directly into your HTML structure (it is valid HTML > and can be spread across multiple templates (directives) if necessary). > No need to learn any obscure JS template language. > > Another, far more important, reason to use Angular is that it forces > developers to write small, re-usable, and testable components. This > usually leads to code that is much more readable. > > > I had the same initial skepticism about React and JSX, but it's turned > out to be very practical. I'm convinced that React is a much better > choice than Angular or anything else around right now. While templating > in Angular starts off easy, as soon as you want to nest components you > have to learn how to write new directives. Why is having to learn Angular directives a bad thing? Sure, directives are not the first thing you should learn in Angular, but they are incredibly powerful and flexible and allow you to break your components into small, testable (and possibly nested) pieces. > I think this discourages big > components from being broken down into smaller components. My experience is quite the opposite. Angular forces you to write small components, if you don't do that you will immediately see that you are working against the framework and that you are writing code that is not very testable. Could you elaborate a bit why you think this is harder to do in Angular? > React is > conceptually much simpler, it's components all the way down so there's > no discontinuity and breaking a big component into multiple smaller > components is very easy. React may be simpler (something which I somehow still doubt, after having a first look but I might change my opinion in the future of course), but it also does a lot less than Angular. We would have to compare Angulars to React, Backbone, RequireJS + X. As said before, forcing developers to learn 3 or more different frameworks is much harder than telling them they have to learn one. Apart from the fact that documenting how to combine those frameworks is also a lot harder. We are not all hardcore JS hackers that need all the flexibility that is out there, we need a well documented, full featured framework that has a large community and lots of plugins for all our use cases. This is something that Angular offers, they may be other choices of course which we have to evaluate and to discuss. If I choose a JS framework I have to take into account that other less experienced developers have to learn that as well. React is still pretty new, there is not even a single book out on Amazon. Do you really want to tell your developers they should buy 3 or more books to get started with Plone's JS stuff instead of buying a single one? Mockup is not even finished yet and we already start to rewrite large parts with React? I had to choose between different JS frameworks some time ago and I choosed Angular over Mockup + Backbone and so far I couldn't be happier with my decision. If I had choosen Mockup + Backbone we would have to rewrite our code basis now to React as well in order to stay close to what Plone does? > React was also built to support server side rendering. I transform json > to html in a pyramid tween on my site. This gives a much better first > page experience as you're not waiting for javascript to download and > render content before reading the page. (While this is possible with > Angular, it's slow requiring a full DOM implementation.) Isn't it better from a user experience point of view to deliver a minimal page and then inline load the content so the user sees that something goes on as fast as possible? I see the point that React can render a page faster, but for one thing it is possible to use React together with Angular, if performance is a issue (for small parts of the application), and as I tried to elaborate there are a lot of other (more important) factors when choosing a framework in my opinion. Don't get me wrong, I know that you and the other Plone developers who choosed React are smart people and I'm sure you choosed it for a good reason. I would never say that Angular is per se better than React. I'm just trying to elaborate the reasons why I choosed Angular over other options and why I think it might be a good choice for Plone in the future as well (and not all of those arguments are technical). This is why we are having this discussion, right? In the end it will come down to the question who is going to implement a working solution. Talk is always cheap. This is why I started to write an experiemental Angular frontend for Plone to get a feeling what is needed and how well Angular fits our use case: https://github.com/tisto/plone.app.angularjs I would like to see others to do the same with React/Backbone or any other JS framework, so we can discuss the advantages/disadvantages of each framework when it comes to Plone. My feeling is that we all agree that the next step after a Plone 5 release with Mockup will be to come up with a RESTful JSON API for Plone that any JS framework can use. This is something that Simone and I started to work on: https://github.com/plone/plone.restapi This is also in a pretty early development phase, we are currently trying to come up with a spec for the API, we haven't implemented anything (except a proof-of-concept to see if the HTTP verbs work with the ZPublisher). Though, we are planing to sprint on that in the future. Please join our efforts if you are interested in that topic. Cheers, Timo ------------------------------------------------------------------------------ Time is money. Stop wasting it! Get your web API in 5 minutes. www.restlet.com/download http://p.sf.net/sfu/restlet