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

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 notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[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 notifications@github.com 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 notifications@github.com:

Any update on this?

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[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 notifications@github.com:

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 notifications@github.com 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 notifications@github.com:

Any update on this?

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

#20 (comment)

.

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[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 notifications@github.com 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 notifications@github.com:

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 notifications@github.com
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 notifications@github.com:

Any update on this?

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

#20 (comment)

.

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

#20 (comment)

.

—
Reply to this email directly or view it on GitHub
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[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 notifications@github.com 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
#20 (comment)
.

[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 notifications@github.com 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
#20 (comment)
.

[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 notifications@github.com:

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 notifications@github.com 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
<
#20 (comment)

.

—
Reply to this email directly or view it on GitHub
#20 (comment)
.

[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 notifications@github.com:

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
#20 (comment)
.

[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. 👍

[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, Semantic-Org/Semantic-UI#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 Semantic-Org/Semantic-UI#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 😄 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. 👍

[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 :)

[seoyoochan]

@pixeleet It'd be helpful if i can get your feedback on experiencing both packages. Thanks in advance. Are you planning to create a seperate project for this, or work on this repo?

[yordis]

@seoyoochan @pixeleet In the React Motion the non numerical values are an issue, such of height. There is some components for deal with it but I would say something doesn't seem right for me, the last time I checked you have to keep track the height of the elements and stuff like that just because is a dynamic height

[seoyoochan]

@yordis https://github.com/nkbt/react-height could be a help on that case?

[yordis]

@seoyoochan that one and I used this one as well https://github.com/souporserious/react-measure

I really don't know which one is better at this point!

[seoyoochan]

@yordis react-measure API looks messy 😕

[yordis]

@seoyoochan I preventing people go for React Motion when we need a lot of non numerical values, that's all my concern! That issue with React Motion actually turn me off a lot!

[seoyoochan]

@yordis thanks for your feedback! I have no experience on using either react-motion or react-gsap-enhancer. we need people who have some experiences on animating react component to work this out :/

[hallister]

Sorry I'm a little late to this, work has been busy with a release so I've had to buckle down.

So here's a run-down on things from my perspective, as a response to @yordis and with the state of semantic-react.

As @yordis mentioned, there are some major issues with Semantic UI, and I'd like to briefly go over the major themes and how those issues are either resolved, or being worked on.

1. Animations are hard.

• Initially I wrote an animation library that temporarily resolved the problem. Since then react-motion and react-motion-ui have been released and are absolutely superior for the purposes of animation. @asvetliakov has done some excellent work in porting everything over. Additionally I wrote a tiny port of Zepto specifically for problems like height: auto, solving issues with accordion.
• Solution: Use react-motion and rquery for animations.

2. Tight Coupling
   • SUI couples all of their components pretty heavily. It makes inline styling the entire library a challenge.
   • Solution: Leave it up to the end-user to add SUI as they see fit. If the popularity of the project allows for it, fork SUI and componentize the styles.

As of late I've been busy with other projects, but @asvetliakov has been doing great work in continuing the project. Most of the difficult components are complete, although a few need reworking to remove the old animation dependency. Additionally @Asgator has been helping move our build system in the right path, and catching a few bugs while @aphofstede has been helping with documentation and examples.

At this juncture, we are nearing at least alpha/beta release status probably within a couple of months, which could be drastically improved with additional help, particularly with examples/docs and implementations of minor missing components. If you guys have any questions, let me know!

[asvetliakov]

few additions for @hallister post:

Additionally I wrote a tiny port of Zepto specifically for problems like height: auto, solving issues with accordion.
Solution: Use react-motion and rquery for animations.

It doesn't use rquery now (however it still present in sources). The react-motion-ui-pack supports height: auto by leveraging react-measure lib (which wrote by same author), so you can pass { height: 'auto' } to react-motion-ui-pack Transition. You can see it working in [https://github.com/hallister/semantic-react/blob/master/src/components/modules/dropdown/dropdownmenu.jsx#L72-L77]

SUI couples all of their components pretty heavily. It makes inline styling the entire library a challenge.

Latest version supports Radium enhanced components by using different include point: semantic-react/radium, so you can pass something like it:

const styles = {
  button: {
     background: "green",
     ":hover": {
        background: "blue"
    }
  },
  noPadding: {
     padding: 0
  }
}

import {Button} from "sematic-react/radium";

<Button style={[styles.button, styles.noPadding}]>...</Button>

You still need semantic-ui css included somewhere though, but i doubt that it's possible to convert all semantic css stuff to inline styles.

[hallister]

@asvetliakov I didn't even notice that react-measure was actually integrated with react-motion-ui. Makes it easy.

As a second addendum to the Radium point, it should be relatively simple to add support for virtually any other inline styling library (Aphrodite, react-style, etc). That said, Radium is leagues ahead of everything else right now, so it makes sense to have that as an optional endpoint.

Building/tooling is pretty sparse right now since I spent as little time as possible on it. But once releases begin semantic-react, semantic-react-radium, etc should make the lack of inline-styled components easier.

[seoyoochan]

If anyone interested in the status quo of styling React, read this article introducing the concept of VirtualCSS and Modular Style Sheet!
https://medium.com/@jviereck/modularise-css-the-react-way-1e817b317b04#.axbtnamzf
VirtualCSS planning discussion: VirtualCSS/planning#1 (comment)

[aislanmaia]

Maybe CSS Modules can help.

[henri-hulski]

FYI, on Semantic-UI they just start to eliminate dependency on jQuery.
See issue Semantic-Org/Semantic-UI#1175 and a tasklist for it at Semantic-Org/Semantic-UI#3981.
I think it could be a good idea to join forces.

[jessy1092]

@henri-hulski Nice to hear that. If semantic-ui rewrite with vanilla javascript, it would be easy to integrate!!

[levithomason]

I have begun removing jQuery from https://github.com/TechnologyAdvice/stardust as well. I've rewritten the Dropdown with selection, search, and complete keyboard navigation. You can try it out here. I will continue to move forward with all other modules as well.

There were a number of hurdles to jump to do this. As noted above, animation is one of them. The CSS to do animations is already included with SUI, so it would be ideal to reuse that. I completed a POC using a few different approaches and am not yet settled on which we'll use. Holding off on the animation, for the short term.

[pixeleet]

You guys are such a fun bunch keeping the train going!

So to sum up my last month I'm a bit buried under a release that's taking too long. Not too much progress on the whole SUI thing.

@levithomason Could you sum your findings up here TL;DR style?

[levithomason]

TL;DR

DOM

It is unreasonable to sync React's virtual DOM and SUI DOM manipulations, rewrite is a must.

Animations

SUI CSS transitions can be reused, with custom durations and timings functions, starter notes here. I built a POC and shelved it for now. I'm of the mind we should not duplicate the animation styles in some other framework.

Controlled/Uncontrolled (React Forms)

When uncontrolled, modules should manage their own state (i.e. open/closed dropdown). When controlled, they should defer to props. This was achieved with Stardust's AutoControlledComponent.

Keyboard Shortcuts

Some events must happen on the document, outside of React. Clicking outside a dropdown, pressing escape, etc. We've handled this very verbose and explicitly, for now. A cleaner util is on the roadmap.

There are gotchas when there are two event systems at play, React Synthetic Events and real DOM events, mostly around testing. See Dropdown tests noting domEvent() for the solution.

---

Hope that helps. There are obviously a lot more insights, nuances, and opinions though these are the highlights.

[levithomason]

@henri-hulski Nice to hear that. If semantic-ui rewrite with vanilla javascript, it would be easy to integrate!!

@jessy1092 keep in mind, any form of DOM manipulation should be disregarded and reimplemented in React due to the virtual DOM paradigm. So while it may be a good move for SUI to remove jQuery, unfortunately, I don't think it is practical to use any DOM manipulating JS in a React implementation.