Re: Reactjs for Plone UI Toolbar

Laurence Rowe <[email protected]> Thu, 29 May 2014 12:12:09 -0700
Newsgroups	gmane.comp.web.zope.plone.devel
Message-ID	<CAOycyLRaPTBSqnr6H_wXFcWyPbNLxr1UV-6ssvTJdo=4ycuJpw@mail.gmail.com>
On 29 May 2014 10:19, Timo Stollenwerk <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. I think this discourages big components from
being broken down into smaller components. 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 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.)

Laurence

------------------------------------------------------------------------------
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