ReactJS canvas anyone?

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
13 messages Options
Reply | Threaded
Open this post in threaded view
|

ReactJS canvas anyone?

sebastianconcept
Hi guys,

I'm surprised on how close to our HTMLCanvas a ReactCanvas could be.

Has anyone made some experiment with making an Amber Widget family that renders with React?

http://facebook.github.io/react/

If we have React we could do: 
http://touchstonejs.io/

which sounds like pretty strategic to me

Please share experiences if you did something with React!


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

philippeback
Amber+React would be the SPA-Seaside I'd say.

I am learning React But what about JSX? There is black magic happening with React, so, how do you see the things interact? Are you for using JSX or not?

Phil

On Thu, Dec 11, 2014 at 2:10 PM, Sebastian Sastre <[hidden email]> wrote:
Hi guys,

I'm surprised on how close to our HTMLCanvas a ReactCanvas could be.

Has anyone made some experiment with making an Amber Widget family that renders with React?


If we have React we could do: 

which sounds like pretty strategic to me

Please share experiences if you did something with React!


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.



--
---
Philippe Back
Visible Performance Improvements
Mob: +32(0) 478 650 140 | Fax: +32 (0) 70 408 027
Blog: http://philippeback.be | Twitter: @philippeback

High Octane SPRL
rue cour Boisacq 101 | 1301 Bierges | Belgium

Pharo Consortium Member - http://consortium.pharo.org/
Featured on the Software Process and Measurement Cast - http://spamcast.libsyn.com
Sparx Systems Enterprise Architect and Ability Engineering EADocX Value Added Reseller
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
the JSX should be semi-invisible I guess

It's details on how Amber controllers get rendered

sebastian

o/

On 11/12/2014, at 11:50, "[hidden email]" <[hidden email]> wrote:

Amber+React would be the SPA-Seaside I'd say.

I am learning React But what about JSX? There is black magic happening with React, so, how do you see the things interact? Are you for using JSX or not?

Phil

On Thu, Dec 11, 2014 at 2:10 PM, Sebastian Sastre <[hidden email]> wrote:
Hi guys,

I'm surprised on how close to our HTMLCanvas a ReactCanvas could be.

Has anyone made some experiment with making an Amber Widget family that renders with React?


If we have React we could do: 

which sounds like pretty strategic to me

Please share experiences if you did something with React!


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.



--
---
Philippe Back
Visible Performance Improvements
Mob: +32(0) 478 650 140 | Fax: +32 (0) 70 408 027
Blog: http://philippeback.be | Twitter: @philippeback

High Octane SPRL
rue cour Boisacq 101 | 1301 Bierges | Belgium

Pharo Consortium Member - http://consortium.pharo.org/
Featured on the Software Process and Measurement Cast - http://spamcast.libsyn.com
Sparx Systems Enterprise Architect and Ability Engineering EADocX Value Added Reseller
 

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

Michael J. Forster
Hi,

JSX isn't strictly necessary--it's a convenience for generating React DOM code from an HTML-like syntax. I effectively replace JSX with macros when I write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL could generate the same React DOM code directly.

Cheers,

Mike
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
that sounds really good Mike

there is any open project to take a look at code samples where that happens?




> On Dec 16, 2014, at 1:34 AM, Michael J. Forster <[hidden email]> wrote:
>
> Hi,
>
> JSX isn't strictly necessary--it's a convenience for generating React DOM
> code from an HTML-like syntax. I effectively replace JSX with macros when I
> write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL
> could generate the same React DOM code directly.
>
> Cheers,
>
> Mike
>
>
>
> --
> View this message in context: http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html
> Sent from the Amber Smalltalk mailing list archive at Nabble.com.
>
> --
> You received this message because you are subscribed to the Google Groups "amber-lang" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
> For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
In reply to this post by Michael J. Forster
This is a good follow up about React

the virtual-dom concept is great but React in particular have issues
http://staltz.com/dont-react/#/

Maybe is convenient to go into something more agnostic than React


On Tuesday, December 16, 2014 1:44:06 AM UTC-2, Michael J. Forster wrote:
Hi,

JSX isn't strictly necessary--it's a convenience for generating React DOM
code from an HTML-like syntax. I effectively replace JSX with macros when I
write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL
could generate the same React DOM code directly.

Cheers,

Mike



--
View this message in context: <a href="http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html" target="_blank" onmousedown="this.href='http://www.google.com/url?q\75http%3A%2F%2Fforum.world.st%2FReactJS-canvas-anyone-tp4795457p4796096.html\46sa\75D\46sntz\0751\46usg\75AFQjCNEthLpBPTvEXzdkL5fVrYlsps6iFw';return true;" onclick="this.href='http://www.google.com/url?q\75http%3A%2F%2Fforum.world.st%2FReactJS-canvas-anyone-tp4795457p4796096.html\46sa\75D\46sntz\0751\46usg\75AFQjCNEthLpBPTvEXzdkL5fVrYlsps6iFw';return true;">http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html
Sent from the Amber Smalltalk mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

blake watson
Huh. That page just says "Don't React!". There's stuff in the source, I see, but it makes a poor argument to attack a web technology with a web page that doesn't work. Or, I guess, a really META argument.

On Thu, Jan 1, 2015 at 6:02 PM, Sebastian Sastre <[hidden email]> wrote:
This is a good follow up about React

the virtual-dom concept is great but React in particular have issues

Maybe is convenient to go into something more agnostic than React


On Tuesday, December 16, 2014 1:44:06 AM UTC-2, Michael J. Forster wrote:
Hi,

JSX isn't strictly necessary--it's a convenience for generating React DOM
code from an HTML-like syntax. I effectively replace JSX with macros when I
write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL
could generate the same React DOM code directly.

Cheers,

Mike



--
View this message in context: http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html
Sent from the Amber Smalltalk mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

philippeback
I do not really care about those arguments, I just want to know how one would integrate React.

And FB uses it heavily, I guess those guys have a clue or two...

Phil

On Fri, Jan 2, 2015 at 10:29 PM, blake <[hidden email]> wrote:
Huh. That page just says "Don't React!". There's stuff in the source, I see, but it makes a poor argument to attack a web technology with a web page that doesn't work. Or, I guess, a really META argument.

On Thu, Jan 1, 2015 at 6:02 PM, Sebastian Sastre <[hidden email]> wrote:
This is a good follow up about React

the virtual-dom concept is great but React in particular have issues

Maybe is convenient to go into something more agnostic than React


On Tuesday, December 16, 2014 1:44:06 AM UTC-2, Michael J. Forster wrote:
Hi,

JSX isn't strictly necessary--it's a convenience for generating React DOM
code from an HTML-like syntax. I effectively replace JSX with macros when I
write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL
could generate the same React DOM code directly.

Cheers,

Mike



--
View this message in context: http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html
Sent from the Amber Smalltalk mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
hence the hype promoted with big cat money

The point of the follow up is that the best about React is the concept of virtual dom and that there are more frameworks out there than React using that great concept

elm (used by Prezi) and mercury are claimed to be faster than react

Also Mithril

I’m not sure what’s the most friendly to Amber 

Also, bad or good, I don’t have the problem that they are meant to solve so this is just technical chit-chat

In any case, I don’t have the impression that React, elm or Mithril are agnostic enough to be convenient for an Amber integration

Anyone experienced with virtual-dom or mercury?



On Jan 2, 2015, at 7:48 PM, [hidden email] wrote:

I do not really care about those arguments, I just want to know how one would integrate React.

And FB uses it heavily, I guess those guys have a clue or two...

Phil

On Fri, Jan 2, 2015 at 10:29 PM, blake <[hidden email]> wrote:
Huh. That page just says "Don't React!". There's stuff in the source, I see, but it makes a poor argument to attack a web technology with a web page that doesn't work. Or, I guess, a really META argument.

On Thu, Jan 1, 2015 at 6:02 PM, Sebastian Sastre <[hidden email]> wrote:
This is a good follow up about React

the virtual-dom concept is great but React in particular have issues

Maybe is convenient to go into something more agnostic than React


On Tuesday, December 16, 2014 1:44:06 AM UTC-2, Michael J. Forster wrote:
Hi,

JSX isn't strictly necessary--it's a convenience for generating React DOM
code from an HTML-like syntax. I effectively replace JSX with macros when I
write React with Common Lisp/Parenscript. Likewise, the Amber canvas DSL
could generate the same React DOM code directly.

Cheers,

Mike



--
View this message in context: http://forum.world.st/ReactJS-canvas-anyone-tp4795457p4796096.html
Sent from the Amber Smalltalk mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.



--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

Herby Vojčík


sebastian wrote:

> hence the hype promoted with big cat money
>
> The point of the follow up is that the best about React is the concept
> of virtual dom <https://github.com/Matt-Esch/virtual-dom> and that
> there are more frameworks out there than React using that great concept
>
> elm <http://elm-lang.org/blog/Blazing-Fast-Html.elm> (used by Prezi
> <http://engineering.prezi.com/blog/2013/05/21/elm-at-prezi/>) and
> mercury <https://github.com/Raynos/mercury> are claimed to be faster
> than react
>
> Also Mithril <http://lhorie.github.io/mithril/>
>
> I’m not sure what’s the most friendly to Amber

I don't know either of them, but when I tried to integrate Angular few years ago, it was clear that using prototype inheritance directly (scope hierarchy) poses a problem for Amber. So if any of them uses it, you can check "Amber unfriendly".


--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
Agree Herby.

Angular will make sense if you use it as the epicenter of the frontend. It tries to do too much and is not complementary to Amber.

There are other frameworks that are better fits

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

sebastianconcept
In reply to this post by philippeback
Well I do care because good arguments might save you from poor decisions.

I would not decide on a technology on a guess. I'll base it in successful experiments. So those arguments might save you time, costs and effort.

What many people say is "reactive programming" is not "a programming" at all. Is just a pattern.

I have a lot ob Amber and Pharo objects in my app doing "reactive programming" already and I wasn't even caring in putting a name to them. Well actually my code uses method categories "actions" and "reactions" but calling it "reactive programming" and make it sound like a new computing paradigm is a signal of over hyped BS

André here is doing a good job in unmasking the hype:
http://youtu.be/9QObt0SGriI

As framework, React has all the signals of trying to do too much as Angular.

Might have more sense to use it "alone" as epicenter of the frontend but not as an Amber complementary thing.

If someone experiment with it I would be happy to review it and see where it leads.

My current impression is that the thing that would be more friendly to Amber is the virtual-dom rendering engine which is probably the only motivation to even talk about Facebook's React

--
You received this message because you are subscribed to the Google Groups "amber-lang" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [hidden email].
For more options, visit https://groups.google.com/d/optout.
Reply | Threaded
Open this post in threaded view
|

Re: ReactJS canvas anyone?

Michael J. Forster
In reply to this post by sebastianconcept
sebastianconcept wrote
that sounds really good Mike

there is any open project to take a look at code samples where that happens?
[...]

Hi Sebastian,

Here's a Common Lisp gist that implements the React to-do demo [1] using the CL-WHO library to generate HTML and the Parenscript library, along with my macros, to generate Javascript:

    https://gist.github.com/michaeljforster/18c7c7f31d6656dce324

In particular, it's the JSL macro that replaces React's JSX, generating React DOM code using the same syntax as CL-WHO uses to generate HTML:

The macro translates...
    (jsl
       (:div
          (:h3 "TODO")
          (todo-list (ps:create :items (ps:@ this state items)))
          (:form :on-submit (ps:@ this handle-submit)
             (:input :on-change (ps:@ this on-change) :value (ps:@ this state text))
             (:button (+ "Add #" (1+ (ps:@ this state items length)))))))
to...
    React.createElement("div", null, 
        React.createElement("h3", null, "TODO"), 
        React.createElement(TodoList, {items: this.state.items}), 
        React.createElement("form", {onSubmit: this.handleSubmit}, 
          React.createElement("input", {onChange: this.onChange, value: this.state.text}), 
          React.createElement("button", null, 'Add #' + (this.state.items.length + 1))
        )
      )
which is rendered as...
    <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <input onChange={this.onChange} value={this.state.text} />
          <button>{'Add #' + (this.state.items.length + 1)}</button>
        </form>
      </div>

If you compare that to the React demo, you can see where JSL just replaces JSX.

Cheers,

Mike


[1] http://facebook.github.io/react/