Re: Reactjs for Plone UI Toolbar
Dylan Jay <djay-n0pU0XVUApFWk0Htik3J/[email protected]>
| Newsgroups | gmane.comp.web.zope.plone.devel |
|---|---|
| Message-ID | <[email protected]> |
On 30 May 2014, at 5:14 pm, Timo Stollenwerk <tisto-z4DKO/[email protected]> wrote: > 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? I have no opinion to give on which MVC, M or other JS framework is better. But I do think a lot of weight should be put on Timo's implication that angular is more popular. I personally have used knockout which would be considered a loser to angular. That means I'm going to have to rewrite code I've written in knockout to use angular. I don't think we want another KSS or Kupu, where we have to spend time later digging out something we chose and then had to replace with the more popular alternative. Sometimes in a VHS vs Beta world you should pick VHS even if it's not as good. > > 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? I'm still not really sure why we need to pick a framework now, but I also really want to make sure that angular or react are not making it into the theme of plone right? We're only talking about the toolbar which is isolated from the theme I hope. I really don't want to have to deal with JS compatibility between react and whatever else I want to put on my public theme :) > >> 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 > _______________________________________________ > Plone-developers mailing list > Plone-developers-5NWGOfrQmneRv+LV9MX5uipxlwaOVQ5f@public.gmane.org > https://lists.sourceforge.net/lists/listinfo/plone-developers ------------------------------------------------------------------------------ Time is money. Stop wasting it! Get your web API in 5 minutes. www.restlet.com/download http://p.sf.net/sfu/restlet