search

jessy1092 / react-semantify

Integrate Semantic-ui with react components.
http://jessy1092.github.io/react-semantify
MIT License
343 stars 41 forks source link

Replacing jQuery with React based modules #20

Open pixeleet opened 9 years ago

pixeleet commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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

ChristopherRabotin commented 8 years ago

Any update on this?

pixeleet commented 8 years ago

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 https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181752278 .

ChristopherRabotin commented 8 years ago

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 < 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 commented 8 years ago

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 <

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 commented 8 years ago

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 <

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 commented 8 years ago

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

balupton commented 8 years ago

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 commented 8 years ago

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 https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181880221 .

pixeleet commented 8 years ago

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

ChristopherRabotin commented 8 years ago

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 https://github.com/jessy1092/react-semantify/issues/20#issuecomment-181926919 .

pixeleet commented 8 years ago

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 < 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 commented 8 years ago

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 commented 8 years ago

Would any of these be of any use?

pixeleet commented 8 years ago

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

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

pixeleet commented 8 years ago

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

jessy1092 commented 8 years ago

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

semantic-react is awesome!!

pixeleet commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

ChristopherRabotin commented 8 years ago

I really like the organization of React-UI!

yordis commented 8 years ago

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 commented 8 years ago

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

pixeleet commented 8 years ago

@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 commented 8 years ago

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

seoyoochan commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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

yordis commented 8 years ago

@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 commented 8 years ago

@yordis react-measure API looks messy :confused:

yordis commented 8 years ago

@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 commented 8 years ago

@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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

@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 commented 8 years ago

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: https://github.com/VirtualCSS/planning/issues/1#issuecomment-93577897

aislanmaia commented 8 years ago

Maybe CSS Modules can help.

henri-hulski commented 8 years ago

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 commented 8 years ago

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

levithomason commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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