ReactJS canvas anyone?
Locked
 
|
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. |
|
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:
--- 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. |
|
|
the JSX should be semi-invisible I guess It's details on how Amber controllers get rendered sebastian o/ -- 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. |
Re: ReactJS canvas anyone?
|
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 |
|
|
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. |
|
|
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, 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. |
|
|
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:
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. |
|
|
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:
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. |
|
|
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 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?
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. |
|
|
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. |
|
|
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. |
|
|
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. |
Re: ReactJS canvas anyone?
|
|
In reply to this post by sebastianconcept
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/ |
«
Return to Amber Smalltalk
|
1 view|%1 views
| Free forum by Nabble | Edit this page |