Replacing jQuery with React based modules

[pixeleet]

Hey Man,

Great job so far, I was thinking about making something exactly like this, so I'm really glad I found someone already working on it. However I would really love to get rid of the underlying jQuery dependency too.

Would you be interested in working together on getting rid of jQuery and having Semantic UI, React Components which are as native as possible?

Let me know. Cheers, David

[jessy1092]

Hi pixeleet,

Thanks for your encouragement. The react-semantify was used to integrated with react quickly, so I created through classname Abbreviation.

I'm also thinking about getting rid of the underlying jQuery dependency. Like material-ui, react-bootstrap, etc. But I have no idea how to start. It's a huge project. I'm interested in your plan. Count me in. :+1:

Many thanks, Lee

[pixeleet]

I'll make a small example of what I think would be nice and send a PR with it. ;)

[ChristopherRabotin]

Any update on this?

[pixeleet]

Let's get together later today, I actually kinda need to create a react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris [email protected]:

Any update on this?

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181752278 .

[ChristopherRabotin]

I'm up for working on this with someone too. I don't have a whole bunch of experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai [email protected] wrote:

Let's get together later today, I actually kinda need to create a react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris [email protected]:

Any update on this?

— Reply to this email directly or view it on GitHub < https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181752278

.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181758680 .

[pixeleet]

Well, as far as I see, most of the elements are pretty easy to port to React, the only hurdle I see is global bookkeeping of elements. Whereas with jQuery you would select an element like $('.ui.sidebar').toggle() we'd have to avoid such references to the DOM since React does a pretty good job hiding it. So you'd have something like: this.getComponent('sidebar').toggle() for instance. So your component's componentDidMount and componentWillUnmount would act as init and destroy equivalents of functions in semantic's implementation, to place your component in a global store so you'd be able to interact with it from other components.

This might be too messy, so you might wanna introduce actions. If you do, you'd have to bring a Flux implementation or a Relay implementation in the game, which would couple our implementation to it, which I don't like. So that's kinda where I'm in the thought process right now.

2016-02-09 10:06 GMT+01:00 Chris [email protected]:

I'm up for working on this with someone too. I don't have a whole bunch of experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai [email protected] wrote:

Let's get together later today, I actually kinda need to create a react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris [email protected]:

Any update on this?

— Reply to this email directly or view it on GitHub <

https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181752278

.

— Reply to this email directly or view it on GitHub < https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181758680

.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181769975 .

[ChristopherRabotin]

Would it not be simpler to have each component manage a simple state and pass a prop which handles the toggle. That's how react bootstrap works, in the case of modals for example.

On Tue, Feb 9, 2016, 11:06 David Lonyai [email protected] wrote:

Well, as far as I see, most of the elements are pretty easy to port to React, the only hurdle I see is global bookkeeping of elements. Whereas with jQuery you would select an element like $('.ui.sidebar').toggle() we'd have to avoid such references to the DOM since React does a pretty good job hiding it. So you'd have something like: this.getComponent('sidebar').toggle() for instance. So your component's componentDidMount and componentWillUnmount would act as init and destroy equivalents of functions in semantic's implementation, to place your component in a global store so you'd be able to interact with it from other components.

This might be too messy, so you might wanna introduce actions. If you do, you'd have to bring a Flux implementation or a Relay implementation in the game, which would couple our implementation to it, which I don't like. So that's kinda where I'm in the thought process right now.

2016-02-09 10:06 GMT+01:00 Chris [email protected]:

I'm up for working on this with someone too. I don't have a whole bunch of experience with React though, only a few months.

On Tue, Feb 9, 2016, 08:33 David Lonyai [email protected] wrote:

Let's get together later today, I actually kinda need to create a react-only version of semantic.

2016-02-09 8:58 GMT+01:00 Chris [email protected]:

Any update on this?

— Reply to this email directly or view it on GitHub <

https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181752278

.

— Reply to this email directly or view it on GitHub <

https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181758680

.

— Reply to this email directly or view it on GitHub < https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181769975

.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181794170 .

[loris]

Yes, a global store for making UI components communicate looks like a react anti-pattern to me

[balupton]

Let's get together later today, I actually kinda need to create a react-only version of semantic.

If this is going to be a group thing, I'm down for that too.

[pixeleet]

Yeah that's why I wouldn't do that, open for suggestions On Tue 9 Feb 2016 at 15:13 Benjamin Lupton [email protected] wrote:

If this is going to be a group thing, I'm down for that too.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181880221 .

[pixeleet]

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

[ChristopherRabotin]

Same timezone here, so a Hangouts would work.

Otherwise we can start with a Google docs or just a few simple components to test things out? I'm going to start rewriting the UI of my company in the coming days so I can start working on example basic components.

On Tue, Feb 9, 2016, 16:59 David Lonyai [email protected] wrote:

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181926919 .

[pixeleet]

Good, I'll be sketching some stuff up too, let's see where we end up

2016-02-09 18:18 GMT+01:00 Chris [email protected]:

Same timezone here, so a Hangouts would work.

Otherwise we can start with a Google docs or just a few simple components to test things out? I'm going to start rewriting the UI of my company in the coming days so I can start working on example basic components.

On Tue, Feb 9, 2016, 16:59 David Lonyai [email protected] wrote:

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

— Reply to this email directly or view it on GitHub < https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181926919

.

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181964511 .

[balupton]

Yeah that's why I wouldn't do that, open for suggestions

Does that mean you don't want me help? Not sure what is meant by that. Confused.

When do you guys wanna get together? I'm in UTC/GMT+1 Amsterdam time zone.

I'm in Perth, Western Australia (GMT+8) - however I'm up whenever.

Otherwise we can start with a Google docs or just a few simple components to test things out?

Google doc sounds best. Better than chat when people are offline.

I'm up for working on this with someone too. I don't have a whole bunch of experience with React though, only a few months.

I'm new to React, but this seems like the perfect way to get started!

[balupton]

Would any of these be of any use?

• https://github.com/hallister/semantic-react
• https://github.com/jhudson8/react-semantic-ui
• https://github.com/TechnologyAdvice/stardust

[pixeleet]

@balupton sure didn't mean I don't want you to help ;) It was regards to the global store.

I'll check the links after dinner :)

2016-02-09 18:53 GMT+01:00 Benjamin Lupton [email protected]:

Would any of these be of any use?

• https://github.com/hallister/semantic-react
• https://github.com/jhudson8/react-semantic-ui
• https://github.com/TechnologyAdvice/stardust

— Reply to this email directly or view it on GitHub https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181980471 .

[pixeleet]

@balupton semantic-react seems like what we'd want. I'll dig into it a bit :)

[jessy1092]

@pixeleet Another one https://github.com/React-UI

semantic-react is awesome!!

[pixeleet]

Except installing and running it locally doesn't work for me, using node 0.12 gave the least errors yet after a clean install but still couldn't actually run it :) I'll dig into it later, let me know if it runs for you.

I like the style of React-UI and semantic-react both. ES6 style classes is my preferred approach for Components.

[jessy1092]

I also have errors when generate document. (semantic-react) node: v4.3.0 os: OSX

I will try again tomorrow. Now I have to go to bed. (GMT+8) XD

I like it, too. :+1:

[balupton]

Maybe we can ping those libaries authors into this as well?

[ChristopherRabotin]

I really like the organization of React-UI!

• Ping @yordis from React-UI
• Ping @hallister from semantic-react

[yordis]

Let me give you my 2 cents.

I stopped React UI because Semantic UI. The foundation of Semantic UI is amazing, I really like the job done in that framework but I started fighting the framework too much.

One of the main reasons, the HTML structure is not that good for React (https://github.com/React-UI/accordion/issues/3) There I am not saying it can't be done but for React should be improved because React likes wrapped components (you have to return a component/element back in the render function).

The dropdown component for example, it isn't component base. Base on my experience on component base framework the separation of concern is very important. In this case, the dropdown component will be an aggregation of Menu Component inside some Component that makes the dropdown.

<div class="ui selection dropdown">
  <input type="hidden" name="gender">

  // Where would you put the onClick event?
  // Add extra complexity if you put in the wrapper component.
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>

  // Why is this inside the spec of the dropdown?
  <div class="menu">
    <div class="item" data-value="1">Male</div>
    <div class="item" data-value="0">Female</div>
  </div>
</div>

And the downside of Semantic is that dictated too much the HTML structure (which I like it at some point with React way but then we should change the structure) and I pretty sure that he will not changed because some React implementation.

Follow the comments: https://github.com/React-UI/accordion/issues/3#issuecomment-129042685

Another issue, https://github.com/Semantic-Org/Semantic-UI/issues/2775 If you think more component base, the icon component shouldn't know about the button component. Should be always the same output. In the other hand, the button component should know how to use the icon component. So, styles like global margin for the icon and stuff like we should be very very carefully about it https://github.com/Semantic-Org/Semantic-UI/issues/3570 Right now, you can't put the icons on top or bottom, if I am not wrong I asked him about it and denied the idea. Something like this: http://examples.sencha.com/extjs/6.0.0/examples/kitchensink/#basic-buttons.

Also, we should replicated all the implementation of Semantic UI on React https://github.com/React-UI/accordion/releases/tag/0.0.3 There is a big mindset change when you leave jQuery and come to React, for example, in that case the issue is easier to fix with some wrapper component that maintain the state of the accordions. I tried to do it inside the accordion itself but at least for me was a pain in the ass and too much crappy code (could be me).

This is the era of the component base framework so there is not more separation of the CSS framework and the JS code, this is the main issue. The JS should dictated the CSS, no otherwise, so we have to think carefully about it and do more CSS analysis than we even think about it. A truly reusable component should work with small changes or without any change at all everywhere.

The idea of React UI is just plug in the component and everything works without any problem, you don't need a complete suit (which I love that from Semantic UI) I would suggest to try to get the foundation but have a different route from Semantic UI project.

At any time, please ping me for any help about the project and sorry for the lack of implementation in React UI but I have to take an step back :smile: and think about it.

P.S: I want to say thanks a lot to the creator of Semantic UI and sorry for any misunderstood from my side or ignorance, everything is base on my experience.

[julius-retzer]

Any progress with this idea? I would like to help too.

[pixeleet]

@wormyy Was swamped in a project with Relay and GraphQL and didn't really found the time so far. But you know it's 3 am nobody's bothering me ;)

I think the most important part that we're missing out on without the jQuery dependency is animations.

Most of the animated elements could be somehow wrapped in react-motion components like react-motion-ui-pack. I'm gonna try the motion ui pack itself out now and see how it works and let you know if it's of any use in this project.

Again, either way we're probably separating in functionality and keeping the css part, once we reach a stable version keeping up with semantic functionality shouldn't be a problem.

Maybe I'm just tired. Let me know what you guys think

[yordis]

@pixeleet yes indeed, the animations are the biggest problem and the dropdown is the most complicated component.

[seoyoochan]

@pixeleet I also tried to drop the dependency on jQuery and adopted react-motion with react-motion-ui.

Another thought that i came up with was i start from the scratch by changing my mindset to the componenet base framework. Thus, the problematic HTML code should be seemlessly converted to React component integrating on react-motion.

My goal is to successfully provide Semantic-UI js-powered modules at first, and then elements which are relatively easy to provide later on anytime.

[balupton]

I just wanted to take a moment and say how awesome this thread is. Open-source collaboration among everyone here over several like projects to shared goal is so awesome. 😁

[seoyoochan]

@balupton Yeah, the passion of our open-source collaboration is just amazing. I am impressed. I guess many people wanted to integrate semantic-ui on React. :+1:

[pixeleet]

@balupton bigup man! @seoyoochan I'm looking at two ways right now, either wrapping components in react-motion or react-gsap-enhancer. I'll have some time in a week to start prototyping it and hopefully will have an extra hand on the team ;) I'll gist it if I have something usable :)